<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="1200px"
    @closed="closedHandler"
    class="dataForm"
    :close-on-click-modal="false"
  >
    <el-form
      ref="dataForm"
      :model="dataForm"
      size="small"
      label-width="140px"
      :disabled="formDisabled"
      :rules="rules"
      v-loading="loading"
    >
      <p class="title">基本信息</p>
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="姓名："
            prop="name"
          >
            <el-input
              placeholder="请输入姓名"
              v-model="dataForm.name"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="身份证号："
            prop="identityNumber"
          >
            <el-input
              placeholder="请输入身份证号"
              v-model="dataForm.identityNumber"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="手环ID："
            prop="braceletId"
          >
            <el-input
              placeholder="请输入手环ID"
              v-model="dataForm.braceletId"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="性别："
            prop="sex"
          >
            <el-radio-group v-model="dataForm.sex">
              <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="8">
          <el-form-item
            label="年龄："
            prop="age"
          >
            <el-input
              placeholder="请输入年龄"
              v-model="dataForm.age"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="出生日期："
            prop="dateOfBirth"
          >
            <el-date-picker
              type="datetime"
              placeholder="请选择出生日期"
              v-model="dataForm.dateOfBirth"
              style="width: 100%;"
              prefix-icon="el-icon-date"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="发病时间："
            prop="onsetTime"
          >
            <el-date-picker
              type="datetime"
              placeholder="请选择发病时间"
              v-model="dataForm.onsetTime"
              style="width: 100%;"
              prefix-icon="el-icon-date"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="发病时长："
            prop="onsetTimeLength"
          >
            <el-input
              placeholder="请输入发病时长"
              v-model="dataForm.onsetTimeLength"
            >
              <i
                slot="suffix"
                class="suffix"
              >小时</i>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="车牌号："
            prop="licensePlateNumber"
          >
            <el-input
              placeholder="请输入车牌号"
              v-model="dataForm.licensePlateNumber"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="联系人："
            prop="contactPerson"
          >
            <el-input
              placeholder="请输入联系人"
              v-model="dataForm.contactPerson"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="联系电话："
            prop="phoneNumber"
          >
            <el-input
              placeholder="请输入联系电话"
              v-model="dataForm.phoneNumber"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="地址："
            prop="address"
          >
            <el-input
              placeholder="请输入地址"
              v-model="dataForm.address"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="详细地址："
            prop="detailedAddress"
          >
            <el-input
              placeholder="请输入详细地址"
              v-model="dataForm.detailedAddress"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <p class="title">来院方式</p>
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="呼叫方式："
            prop="callMethod"
          >
            <el-input
              placeholder="请输入呼叫方式"
              v-model="dataForm.callMethod"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="呼叫120时间："
            prop="callTime"
          >
            <el-date-picker
              type="datetime"
              placeholder="请选择呼叫120时间"
              v-model="dataForm.callTime"
              style="width: 100%;"
              prefix-icon="el-icon-date"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="医院人员："
            prop="hospitalStaff"
          >
            <el-input
              placeholder="请输入医院人员"
              v-model="dataForm.hospitalStaff"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="出车单位："
            prop="callMethod"
          >
            <el-input
              placeholder="请输入出车单位"
              v-model="dataForm.callMethod"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="到达受伤现场时间："
            prop="arrivalTime"
          >
            <el-date-picker
              type="datetime"
              placeholder="请选择到达受伤现场时间"
              v-model="dataForm.arrivalTime"
              style="width: 100%;"
              prefix-icon="el-icon-date"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="从现场出发时间："
            prop="departureTime"
          >
            <el-date-picker
              type="datetime"
              placeholder="请选择到达受伤现场时间"
              v-model="dataForm.departureTime"
              style="width: 100%;"
              prefix-icon="el-icon-date"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <p class="title">生命体征</p>
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="血压："
            prop="bloodPressure"
          >
            <el-input
              placeholder="请输入血压"
              v-model="dataForm.bloodPressure"
            >
              <i
                slot="suffix"
                class="suffix"
              >mmHg</i>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="呼吸："
            prop="breathing"
          >
            <el-input
              placeholder="请输入呼吸"
              v-model="dataForm.breathing"
            >
              <i
                slot="suffix"
                class="suffix"
              >次/分</i>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="脉搏："
            prop="pulse"
          >
            <el-input
              placeholder="请输入脉搏"
              v-model="dataForm.pulse"
            >
              <i
                slot="suffix"
                class="suffix"
              >次/分</i>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="体温："
            prop="bodyTemperature"
          >
            <el-input
              placeholder="请输入体温"
              v-model="dataForm.bodyTemperature"
            >
              <i
                slot="suffix"
                class="suffix"
              >℃</i>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="心率："
            prop="heartRate"
          >
            <el-input
              placeholder="请输入心率"
              v-model="dataForm.heartRate"
            >
              <i
                slot="suffix"
                class="suffix"
              >次/分</i>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="血氧饱和度："
            prop="bloodOxygenSaturation"
          >
            <el-input
              placeholder="请输入血氧饱和度"
              v-model="dataForm.bloodOxygenSaturation"
            >
              <i
                slot="suffix"
                class="suffix"
              >次/分</i>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="血糖："
            prop="bloodSugar"
          >
            <el-input
              placeholder="请输入血糖"
              v-model="dataForm.bloodSugar"
            >
              <i
                slot="suffix"
                class="suffix"
              >mmol/L</i>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 胸痛 -->
      <div>
        <p class="title">病情评估</p>
        <el-form-item
          label="病情评估(单选)："
          prop="conditionAssessmentOne"
        >
          <el-radio-group v-model="dataForm.conditionAssessmentOne">
            <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="conditionAssessmentOne"
        >
          <el-radio-group v-model="dataForm.conditionAssessmentOne">
            <el-radio :label="1">持续性胸闷/胸痛</el-radio>
            <el-radio :label="2">间歇性胸闷/胸痛</el-radio>
            <el-radio :label="3">症状缓解</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
    </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, queryExtendConfig } from '@/api/common'
import { queryInfoById, saveOrUpdateEmergencyGreenway } from '@/api/greenWay'
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() {
    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,
      patientType: '',
      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, patientType) {
      console.log(type, id)
      this.dialogVisible = true
      this.loading = true
      this.type = type
      this.patientType = patientType
      this.formDisabled = type === 'detail'
      if (type === 'update' || type === 'detail') {
        if (!id) {
          this.$message.error('id不能为空')
          return
        }
      } else {

        this.$nextTick(() => {
          this.loading = false
          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
          }

          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 lang="scss" scope>
.dataForm {
  .title {
    // margin: 24px 32px;
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 16px;
    color: #333;
    font-weight: bold;
  }
  .suffix {
    margin-right: 10px;
    color: #333;
  }
}
</style>