<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="544px"
    @closed="closedHandler"
    :close-on-click-modal="false"
  >
    <el-form
      ref="dataForm"
      :model="dataForm"
      size="small"
      label-width="150px"
      :rules="rules"
      :disabled="formDisabled"
      v-loading="loading"
    >
      <el-form-item
        label="医院名称"
        prop="hospitalCode"
      >
        <el-select
          v-model="dataForm.hospitalCode"
          placeholder="请选择医院"
          style="width: 100%"
          filterable
          remote
          ref="hospitalCode"
          :loading="selectLoading"
          :remote-method="remoteMethod"
        >
          <el-option
            v-for="item in hospitalList"
            :label="item.hospitalName"
            :key="item.id"
            :value="item.hospitalCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="筛查任务量"
        prop="taskCount"
      >
        <el-input
          placeholder="请输入筛查任务量"
          v-model.number="dataForm.taskCount"
        />
      </el-form-item>

      <el-form-item
        label="筛查任务完成量"
        prop="taskCompleteCount"
      >
        <el-input
          placeholder="请输入筛查任务完成量"
          v-model.number="dataForm.taskCompleteCount"
        />
      </el-form-item>

      <el-form-item
        label="完成率"
        prop="completeRate"
      >
        <el-input
          disabled
          v-model.number="completeRate"
        />
       
      </el-form-item>

      <el-form-item
        label="类型"
        prop="secondType"
      >
        <el-radio-group v-model="dataForm.secondType">
            <el-radio :label="1" v-if="dataForm.centerType == 1">标准版胸痛单元</el-radio>
            <el-radio :label="2" v-if="dataForm.centerType == 1">基层版胸痛单元</el-radio>
            <el-radio :label="3" v-if="dataForm.centerType == 2">高级卒中中心</el-radio>
            <el-radio :label="4" v-if="dataForm.centerType == 2">防治卒中中心</el-radio>
          </el-radio-group>
      </el-form-item>

      <el-form-item
        label="医院所在区域"
        prop="area"
      >
        <el-select
          v-model="dataForm.area"
          placeholder="请选择医院所在区域"
          style="width: 100%"
          :clearable="true"
        >
          <el-option
            v-for="item in areaList"
            :label="item.name"
            :key="item.id"
            :value="item.val"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="附件上传："
        prop="fileList"
      >
        <fileUpload :setFileList="fileList" ref="fileUpload" />
      </el-form-item>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        size="small"
        @click="dialogVisible = false"
      >取 消</el-button>
      <el-button
        type="primary"
        size="small"
        :disabled="formDisabled"
        @click="submitForm()"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { queryHospitalList } from '@/api/common'
import { addOrUpdateScreeningInfo } from '@/api/screenTaskStatistics'
import { getDic } from '../../../util/dict'
import fileUpload from '../../../components/fileUpload.vue'
// 是否正整数
function isNumber(obj) {
  return typeof obj === 'number' && !isNaN(obj) && obj > 0
}
export default {
  computed: {
    title: function() {
      let str = '筛查任务'
      if (this.type === 'add') {
        str += '填报'
      } else if (this.type === 'update') {
        str += '修改'
      } else if (this.type === 'detail') {
        str += '详情'
      }
      return str
    },
    completeRate: function() {
      const { taskCount, taskCompleteCount } = this.dataForm
      if (taskCount && taskCompleteCount){
        if (isNumber(taskCount) && isNumber(taskCompleteCount)){
          return (Math.round(taskCompleteCount / taskCount * 10000) / 100.00)+"%";
        }
      }
      return ''
    }
  },
  components: {
    fileUpload
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      selectLoading: false,
      formDisabled: false,
      areaList: [],
      fileList: [],
      centerType: '',
      dataForm: {
        hospitalCode: '',
        taskCount: '',
        taskCompleteCount: '',
        completeRate: '',
        centerType: '',
        secondType: '',
        area: ''
      },
      type: 'add',
      hospitalList: [],
      rules: {
        hospitalCode: [
          { required: true, message: '请选择医院' },
        ],
        taskCount: [
          { required: true, message: '请输入筛查任务量' },
          { pattern: /^[0-9]*$/, message: '请输入正确数字' }
        ],
        taskCompleteCount: [
          { required: true, message: '请输入筛查任务完成量' },
          { pattern: /^[0-9]*$/, message: '请输入正确数字' }
        ]
      }
    }
  },
  mounted() {
    // 获取字典
    getDic(['area']).then(res => {
      this.areaList = res.area
    })
  },
  methods: {
    init(type, centerType, row) {
      this.dialogVisible = true
      this.loading = true
      this.type = type
      this.formDisabled = type === 'detail'
      if (type === 'update' || type === 'detail') {
        if (!row) {
          this.$message.error('数据错误')
          return
        }
        this.loading = false
        this.remoteMethod(row.hospitalName)
        this.dataForm = {
          ...row,
          hospitalCode: row.hospitalCode
        }
        this.fileList = row.fileList || []
        this.$nextTick(() => {
          this.$refs.dataForm.clearValidate()
        })
      } else {
        this.dataForm = {
          centerType: centerType
        }
        this.hospitalList = []
        this.$nextTick(() => {
          this.loading = false
          this.$refs.dataForm.clearValidate()
        })
      }
    },
    submitForm() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          const hospital = this.hospitalList.find(i => i.hospitalCode === this.dataForm.hospitalCode)
          if (!hospital) {
            this.$message.error('无效数据');
            return
          }
          const params = {
            ...this.dataForm,
            auditStatus: 1,
            hospitalName: hospital.hospitalName,
            fileList: this.$refs.fileUpload.getFileList(),
            completeRate: this.completeRate,
          }
          addOrUpdateScreeningInfo(params).then(res => {
            if (res.msg === 201) {
              this.dialogVisible = false
              this.$message.success('保存成功')
              this.$emit('subsucc')
            } else {
              this.$message.error(res.content)
            }
          })
        }
      })
    },
    remoteMethod(query) {
      this.selectLoading = true;
      queryHospitalList(query).then(res => {
        this.hospitalList = res.respData
        console.log(this.hospitalList)
        this.selectLoading = false;
      })
    },
    closedHandler() {
      this.$refs.dataForm.resetFields()
      this.fileList = []
    }
  }
}
</script>

<style>
</style>