<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="900px"
    @closed="closedHandler"
    :close-on-click-modal="false"
  >
    <el-form
      ref="dataForm"
      :model="dataForm"
      size="small"
      label-width="300px"
      :disabled="formDisabled"
      :rules="rules"
      v-loading="loading"
    >

      <el-form-item
        label="医院名称"
        prop="hospitalCode"
      >
        {{ dataForm.hospitalName || userInfo.hospitalName }}
        <!-- <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="unitType"
      >
        <el-radio-group v-model="dataForm.unitType">
          <el-radio :label="1">公立医疗</el-radio>
          <el-radio :label="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%"
        >
          <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="hospitalStep"
      >
        <el-select
          v-model="dataForm.hospitalStep"
          placeholder="请选择医院等级"
          style="width: 100%"
        >
          <el-option
            v-for="item in hospitalGradeList"
            :label="item.name"
            :key="item.id"
            :value="item.val"
          />
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item
        label="医院等次"
        prop="hospitalGrade"
      >
        <el-select
          v-model="dataForm.hospitalGrade"
          placeholder="请选择医院等次"
          style="width: 100%"
        >
          <el-option
            v-for="item in hospitalClassList"
            :label="item.name"
            :key="item.id"
            :value="item.val"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item
        label="绿道建设"
        prop="greenCenter"
      >
        <el-checkbox-group v-model="dataForm.greenCenter">
          <el-checkbox label="1">胸痛中心</el-checkbox>
          <el-checkbox label="2">卒中中心</el-checkbox>
          <el-checkbox label="3">创伤中心</el-checkbox>
          <el-checkbox label="4">烧伤中心</el-checkbox>
          <el-checkbox label="5">其它</el-checkbox>
        </el-checkbox-group>
        <el-input
          v-if="dataForm.greenCenter.indexOf('5') > -1"
          placeholder="若选择其它，请手动输入"
          v-model="dataForm.other"
        />
      </el-form-item>
      <el-form-item
        label="是否建设信息化"
        prop="greenInforConstruction"
      >
        <el-radio-group v-model="dataForm.greenInforConstruction">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <formItem
      labelWidth="300px"
      ref="formItem"
      :disabled="formDisabled"
      :formItemList="formItemList"
    />
    <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, queryExtendConfig } from '@/api/common'
import { queryInfoById, saveOrUpdateEmergencyGreenway } from '@/api/greenWay'
import { getDic } from '@/util/dict'
import { mapGetters } from 'vuex'
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
    },
    ...mapGetters([
      'userInfo'
    ])
  },
  data() {
    const checkGreenCenter = (rule, value, callback) => {
      if (value.indexOf('5') > -1 && !(this.dataForm.other)) {
        callback(new Error('若选择其他，请手动输入'))
      } else {
        callback()
      }
    }
    return {
      dialogVisible: false,
      loading: false,
      formDisabled: false,
      selectLoading: false,
      dataForm: {
        hospitalCode: '',
        unitType: '',
        area: '',
        hospitalStep: '',
        hospitalGrade: '',
        greenCenter: [],
        greenInforConstruction: ''
      },
      hospitalList: [],
      formItemList: [],
      areaList: [],
      hospitalGradeList: [],
      hospitalClassList: [],
      type: 'add',
      rules: {
        // hospitalCode: [
        //   { required: true, message: '请选择医院' },
        // ],
        unitType: [
          { required: true, message: '请选择单位性质' },
        ],
        area: [
          { required: true, message: '请选择辖区' },
        ],
        hospitalStep: [
          { required: true, message: '请选择医院等级' },
        ],
        hospitalGrade: [
          { required: true, message: '请选择医院等次' },
        ],
        greenCenter: [
          { required: true, message: '请选择绿道建设' },
          { validator: checkGreenCenter }
        ],
        greenInforConstruction: [
          { required: true, message: '请选择是否建设信息化' },
        ]
      }
    }
  },
  mounted() {
    // 获取字典
    getDic(['area', 'hospital_grade', 'hospital_class']).then(res => {
      this.areaList = res.area
      this.hospitalGradeList = res.hospital_grade
      this.hospitalClassList = res.hospital_class
    })
    //获取可选择的医院
    // queryHospitalList().then(res => {
    //   this.hospitalList = res.respData
    // })
    queryExtendConfig({ tableType: 1 }).then(res => {
      if (res.msg === 201 && res.respData && res.respData.length > 0) {
        this.formItemList = res.respData
      }
    })
  },
  methods: {
    init(type, id) {
      console.log(this.userInfo)
      this.dialogVisible = true
      this.loading = true
      this.type = type
      this.formDisabled = type === 'detail'
      if (type === 'update' || type === 'detail') {
        if (!id) {
          this.$message.error('id不能为空')
          return
        }
        queryInfoById({ id: id }).then(res => {
          if (res.msg === 201) {
            this.dataForm = res.respData || {}
            this.dataForm.greenCenter = res.respData.greenCenter ? res.respData.greenCenter.split(',') : []
            if (res.respData && res.respData.extendValueDtoList && res.respData.extendValueDtoList.length > 0) {
              this.$refs.formItem.init(res.respData.extendValueDtoList)
            } else {
              this.$refs.formItem.init([])
            }

            this.$nextTick(() => {
              this.loading = false
              this.$refs.dataForm.clearValidate()
            })
          } else {
            this.$message.error(res.content);
          }
        })
      } else {
        this.dataForm = {
          greenCenter: []
        }
        this.$nextTick(() => {
          this.loading = false
          this.$refs.formItem.init([])
          this.$refs.dataForm.clearValidate()
        })
      }
    },
    submitForm() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          const params = {
            ...this.dataForm,
            auditStatus: 1,
            greenCenter: this.dataForm.greenCenter.join(),
            // hospitalName: this.$refs.hospitalCode.query
            hospitalCode: this.userInfo.hospitalCode,
            hospitalName: this.userInfo.hospitalName,
            hospitalGrade: this.userInfo.hospitalGrade,
            hospitalStep: this.userInfo.hospitalStep,
          }

          const area = this.areaList.find(i => i.id === this.dataForm.area)
          if (!area) {
            this.$message.error('无效数据');
            return
          }
          const { name } = area
          params.areaName = name

          params.extendValueDtoList = this.$refs.formItem.getDataForm()
          saveOrUpdateEmergencyGreenway(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
        this.selectLoading = false;
      })
    },
    closedHandler() {
      this.$refs.dataForm.resetFields()
    }
  }
}
</script>

<style>
</style>