<template>
  <el-dialog
    title="单位信息及人员信息登记"
    :visible.sync="dialogVisible"
    width="800px"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <el-form
      ref="dataForm"
      :model="dataForm"
      size="small"
      label-width="150px"
      :rules="rules"
      v-loading="loading"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="单位全称："
            prop="hospitalName"
          >
            <!-- <el-input
              placeholder="请输入单位全称"
              v-model="dataForm.hospitalName"
              @blur="blurHandle"
            /> -->
            <el-select
              v-model="dataForm.hospitalName"
              placeholder="请选择单位全称"
              style="width: 100%"
              filterable
              allow-create
              default-first-option
              remote
              :loading="selectLoading"
              :remote-method="remoteMethod"
              @change="changeHandle"
              :clearable="true"
            >
              <el-option
                v-for="item in hospitalList"
                :label="item.hospitalName"
                :key="item.id"
                :value="item.hospitalName"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <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-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="单位性质："
            prop="unitType"
          >
            <el-radio-group
              class="radio-group-type1"
              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-col>
        <el-col :span="12">
          <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-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="负责人："
            prop="name"
          >
            <el-input
              placeholder="请输入负责人姓名"
              v-model="dataForm.name"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="性别："
            prop="sex"
          >
            <el-radio-group
              class="radio-group-type1"
              v-model="dataForm.sex"
            >
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="负责人11位手机号："
            prop="cellphone"
          >
            <el-input
              placeholder="请输入手机号"
              v-model="dataForm.cellphone"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="备注："
            prop="remark"
          >
            <el-input
              type="textarea"
              :rows="3"
              resize="none"
              placeholder="请输入备注"
              v-model="dataForm.remark"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
    >

      <el-button
        type="primary"
        size="small"
        @click="submitForm()"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getDic } from '../../util/dict'
import store from '../../store'
import { loginByWrite, queryHospitalByName } from '@/api/info'
export default {
  data() {
    const checkContactPhone = (rule, value, callback) => {
      let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if (!reg.test(value)) {
        callback(new Error("请输入正确格式的联系方式"))
      } else {
        callback()
      }
    };
    return {
      dialogVisible: true,
      loading: false,
      hospitalList: [],
      selectLoading: false,
      areaList: [],
      hospitalList: [],
      dataForm: {
        hospitalStep: '',
        area: '',
        unitType: '',
      },
      rules: {
        hospitalName: [
          { required: true, message: '请输入单位全称' },
        ],
        area: [
          { required: true, message: '请选择辖区' },
        ],
        unitType: [
          { required: true, message: '请选择单位性质' },
        ],
        hospitalStep: [
          { required: true, message: '请选择医院等级' },
        ],
        name: [
          { required: true, message: '请输入负责人姓名' },
        ],
        sex: [
          { required: true, message: '请选择性别' },
        ],
        cellphone: [
          { required: true, message: '请输入负责人联系方式' },
          { validator: checkContactPhone }
        ],
      },
      hospitalGradeList: []
    }
  },
  mounted() {
    // 获取字典
    getDic(['area', 'hospital_grade']).then(res => {
      this.areaList = res.area
      this.hospitalGradeList = res.hospital_grade
    })
  },
  methods: {
     submitForm() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          const params = {
            ...this.dataForm
          }

          loginByWrite(params).then(res => {
            if (res.msg === 201) {
              // this.dialogVisible = false

              this.$message.success('登记成功')
              store.dispatch('saveLoginMsg', res)
              this.$router.push('/')
            } else {
              this.$message.error(res.content)
            }
          })
        }
      })
    },
    remoteMethod(query) {
      if (!query) {
        this.hospitalList = []
        return
      }
      this.selectLoading = true;
      queryHospitalByName(query).then(res => {
        this.hospitalList = res.respData
        this.selectLoading = false;
      })
    },
    changeHandle(val) {
      const item = this.hospitalList.find(i => i.hospitalName == val)
      console.log(item)
      this.dataForm.hospitalStep = item ? item.hospitalStep : ''
      this.dataForm.area = item ? item.area : ''
      this.dataForm.unitType = item ? item.unitType : ''
    }
  }
}
</script>

<style>
</style>