<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="800px"
    @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="hospitalName"
      >
        <el-input
          placeholder="请输入机构名称"
          v-model="dataForm.hospitalName"
        />
      </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
          prop="unitType"
          label="单位性质"
        >
        <el-radio-group v-model="dataForm.unitType">
          <el-radio :label="1">公立医疗</el-radio>
          <el-radio :label="2">民营医院</el-radio>
          <el-radio :label="3">非医疗机构</el-radio>
        </el-radio-group>
      </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
          prop="specitalType"
          label="特殊单位类型"
        >
          <el-select
            v-model="dataForm.specitalType"
            placeholder="请选择特殊单位类型"
            style="width: 100%"
            :clearable="true"
          >
            <el-option
              label="无特殊"
              :value="0"
            />
            <el-option
              label="急救中心"
              :value="1"
            />
            <el-option
              label="非急救转运中心"
              :value="2"
            />
          </el-select>
        </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 { addOrUpdate } from '@/api/mechanism'
import { getDic } from '@/util/dict'
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
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      selectLoading: false,
      type: 'add',
      dataForm: {
        hospitalName: '',
        area: '',
        unitType: '',
        hospitalStep: '',
        hospitalGrade: '',
        specitalType: 0
      },
      areaList: [],
      formDisabled: false,
      hospitalGradeList: [],
      hospitalClassList: [],
      rules: {
        hospitalName: [
          { required: true, message: '请输入机构名称' },
        ],
        area: [
          { required: true, message: '请选择所属辖区' },
        ],
        unitType: [
          { required: true, message: '请选择单位性质' },
        ],
        hospitalStep: [
          { required: true, message: '请选择机构等级' },
        ],
        hospitalGrade: [
          { required: true, message: '请选择医院等次' },
        ],
        specitalType: [
          { 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
    })
  },
  methods: {
    init(type, data) {
      this.dialogVisible = true
      this.loading = true
      this.type = type
      this.formDisabled = type === 'detail'
      if (type === 'update' || type === 'detail') {
        this.dataForm = { 
          id: data.id,
          hospitalName: data.hospitalName,
          area: data.area,
          unitType: data.unitType,
          hospitalStep: data.hospitalStep,
          hospitalGrade: data.hospitalGrade,
          specitalType: data.specitalType
        }
        this.loading = false
      } else {
        this.dataForm = {
          specitalType: 0
        }
        this.$nextTick(() => {
          this.loading = false
          this.$refs.dataForm.clearValidate()
        })
      }
    },
    submitForm() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          const params = {
            ...this.dataForm
          }
          addOrUpdate(params).then(res => {
            if (res.msg === 201) {
              this.dialogVisible = false
              this.$message.success(this.type === 'add' ? '新增成功！' : '修改成功')
              this.$emit('subsucc')
            } else {
              this.$message.error(res.content)
            }
          })
        }
      })
    },
    closedHandler() {
      this.$refs.dataForm.resetFields()
    }
  }
}
</script>

<style>
</style>