<template>
  <el-dialog :visible.sync="visible"
             :title="!dataForm.id ? $t('add') : $t('update')"
             :close-on-click-modal="false"
             :close-on-press-escape="false">
    <el-form v-loading="vueLoading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading"
             :model="dataForm"
             :rules="dataRule"
             ref="dataForm"
             @keyup.enter.native="dataFormSubmitHandle()"
             :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
      <el-form-item label="人员姓名"
                    prop="userName"
                    label-width="155px">
        <el-input v-model="dataForm.userName"
                  placeholder="人员姓名"
                  maxlength="20"
                  clearable
                  @keyup.native="btKeyUpUserName"></el-input>
      </el-form-item>
      <el-form-item label="性别"
                    prop="gender"
                    label-width="155px">
        <el-select v-model="dataForm.gender"
                   clearable
                   placeholder="性别">
          <el-option v-for="item in gender"
                     :key="item.dictValue"
                     :label="item.dictName"
                     :value="item.dictValue">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="民族"
                    prop="nation"
                    label-width="155px">
        <el-input v-model="dataForm.nation"
                  placeholder="民族"></el-input>
      </el-form-item>
      <el-form-item label="曾用名"
                    prop="formerName"
                    label-width="155px">
        <el-input v-model="dataForm.formerName"
                  placeholder="曾用名"></el-input>
      </el-form-item>
      <el-form-item label="出生年月"
                    prop="birthday"
                    label-width="155px">
        <el-input v-model="dataForm.birthday"
                  placeholder="出生年月"></el-input>
      </el-form-item>
      <el-form-item label="身份证号"
                    prop="idCard"
                    label-width="155px">
        <el-input v-model="dataForm.idCard"
                  placeholder="身份证"
                  clearable
                  maxlength="49"
                  @keyup.native="btKeyUpIdCard"></el-input>
      </el-form-item>
      <el-form-item label="联系方式"
                    prop="mobile"
                    label-width="155px">
        <el-input v-model="dataForm.mobile"
                  placeholder="联系方式"
                  clearable
                  maxlength="11"
                  @keyup.native="btKeyUpMobile"></el-input>
      </el-form-item>
      <el-form-item label="户籍地"
                    prop="householdRegisterName"
                    label-width="155px">
        <el-cascader ref="hjdname"
                     v-model="dataForm.householdRegisterCodes"
                     :options="options"
                     @change="householdRegisterChangeHandle"
                     :props="{ checkStrictly: false, multiple: true, emitPath: true }">
        </el-cascader>
      </el-form-item>
      <el-form-item label="户籍地详细地址"
                    prop="householdRegisterDetail"
                    label-width="155px">
        <el-input v-model="dataForm.householdRegisterDetail"
                  placeholder="户籍地详细地址"
                  maxlength="200"
                  clearable></el-input>
      </el-form-item>
      <el-form-item label="县内居住地"
                    prop="liveAddressName"
                    label-width="155px">
        <!--                    <el-cascader-->
        <!--                            ref="jzdname"-->
        <!--                            v-model="dataForm.liveAddressCodes"-->
        <!--                            :options="liveOptions"-->
        <!--                            @change="liveAddressChangeHandle"-->
        <!--                            :props="{ checkStrictly: false, multiple: true, emitPath: true }"-->
        <!--                    >-->
        <!--                    </el-cascader>-->

        <el-select v-model="dataForm.liveAddressCode"
                   placeholder="请选择">
          <el-option v-for="item in liveOptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
        <!--        <el-input v-model="dataForm.liveAddressName"  placeholder="县内居住地" maxlength="200" clearable></el-input>-->
      </el-form-item>
      <!--<el-form-item label="县内居住地详细地址" prop="liveAddressDetail" label-width="155px">-->
      <!--<el-input v-model="dataForm.liveAddressDetail" placeholder="县内居住地详细地址" maxlength="200" clearable></el-input>-->
      <!--</el-form-item>-->

      <el-form-item label="身高"
                    prop="height"
                    label-width="155px">
        <el-input v-model="dataForm.height"
                  placeholder="身高"></el-input>
      </el-form-item>
      <el-form-item label="文化程度"
                    prop="standardOfCulture"
                    label-width="155px">
        <el-input v-model="dataForm.standardOfCulture"
                  placeholder="文化程度"></el-input>
      </el-form-item>
      <el-form-item label="健康情况"
                    prop="health"
                    label-width="155px">
        <el-input v-model="dataForm.health"
                  placeholder="健康情况"></el-input>
      </el-form-item>
      <el-form-item label="血型"
                    prop="bloodType"
                    label-width="155px">
        <el-input v-model="dataForm.bloodType"
                  placeholder="血型"></el-input>
      </el-form-item>
      <el-form-item label="婚姻状况"
                    prop="maritalStatus"
                    label-width="155px">
        <el-input v-model="dataForm.maritalStatus"
                  placeholder="婚姻状况"></el-input>
      </el-form-item>
      <el-form-item label="与户主关系"
                    prop="relation"
                    label-width="155px">
        <el-input v-model="dataForm.relation"
                  placeholder="与户主关系"></el-input>
      </el-form-item>
      <el-form-item label="国籍"
                    prop="nationality"
                    label-width="155px">
        <el-input v-model="dataForm.nationality"
                  placeholder="国籍"></el-input>
      </el-form-item>
      <el-form-item label="政治面貌"
                    prop="politicsStatus"
                    label-width="155px">
        <el-input v-model="dataForm.politicsStatus"
                  placeholder="政治面貌"></el-input>
      </el-form-item>
      <el-form-item label="宗教信仰"
                    prop="faith"
                    label-width="155px">
        <el-input v-model="dataForm.faith"
                  placeholder="宗教信仰"></el-input>
      </el-form-item>
      <el-form-item label="毕业院校"
                    prop="graduateSchool"
                    label-width="155px">
        <el-input v-model="dataForm.graduateSchool"
                  placeholder="毕业院校"></el-input>
      </el-form-item>
      <el-form-item label="专业"
                    prop="professional"
                    label-width="155px">
        <el-input v-model="dataForm.professional"
                  placeholder="专业"></el-input>
      </el-form-item>
      <el-form-item label="工作状态"
                    prop="workStatus"
                    label-width="155px">
        <el-input v-model="dataForm.workStatus"
                  placeholder="工作状态"></el-input>
      </el-form-item>
      <el-form-item label="行业类别"
                    prop="industryCategory"
                    label-width="155px">
        <el-input v-model="dataForm.industryCategory"
                  placeholder="行业类别"></el-input>
      </el-form-item>
      <el-form-item label="工作单位（现/原）"
                    prop="workUnits"
                    label-width="155px">
        <el-input v-model="dataForm.workUnits"
                  placeholder="工作单位（现/原）"></el-input>
      </el-form-item>
      <el-form-item label="兵役状况"
                    prop="military"
                    label-width="155px">
        <el-input v-model="dataForm.military"
                  placeholder="兵役状况"></el-input>
      </el-form-item>
      <el-form-item label="人口类别"
                    prop="peopleCategories"
                    label-width="155px">
        <el-input v-model="dataForm.peopleCategories"
                  placeholder="人口类别"></el-input>
      </el-form-item>
      <el-form-item label="特殊人群"
                    prop="specialCrowd"
                    label-width="155px">
        <el-input v-model="dataForm.specialCrowd"
                  placeholder="特殊人群"></el-input>
      </el-form-item>
      <el-form-item label="有无车辆"
                    prop="car"
                    label-width="155px">
        <el-input v-model="dataForm.car"
                  placeholder="有无车辆"></el-input>
      </el-form-item>
      <el-form-item label="车牌号"
                    prop="carNo"
                    label-width="155px">
        <el-input v-model="dataForm.carNo"
                  placeholder="车牌号"></el-input>
      </el-form-item>
      <el-form-item label="人户状况"
                    prop="hushaiStatus"
                    label-width="155px">
        <el-input v-model="dataForm.hushaiStatus"
                  placeholder="人户状况"></el-input>
      </el-form-item>
      <el-form-item label="籍贯"
                    prop="nativePlace"
                    label-width="155px">
        <el-input v-model="dataForm.nativePlace"
                  placeholder="籍贯"></el-input>
      </el-form-item>
      <el-form-item label="往返情况"
                    prop="returnState"
                    label-width="155px">
        <el-select v-model="dataForm.returnState"
                   placeholder="往返情况"
                   @change="selectModel($event)">
          <el-option v-for="item in returnStateArr"
                     :key="item.dictValue"
                     :label="item.dictName"
                     :value="item.dictValue">
          </el-option>
        </el-select>
      </el-form-item>
      <div v-if="showFlagIn">
        <el-form-item label="拟离开平阴时间"
                      prop="leaveTime"
                      label-width="155px">
          <el-date-picker v-model="dataForm.leaveTime"
                          type="date"
                          placeholder="选择拟离开平阴时间"
                          label-width="150px"
                          value-format="yyyy-MM-dd"
                          format="yyyy-MM-dd"
                          style="width:200px">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="拟去往目的地"
                      prop="destinationAddressName"
                      label-width="155px">
          <el-cascader ref="qwmddname"
                       v-model="dataForm.destinationAddressCodes"
                       :options="options"
                       @change="destinationChangeHandle"
                       :props="{ checkStrictly: false, multiple: true, emitPath: true }">
          </el-cascader>
        </el-form-item>
        <el-form-item label="拟去往目的地详细地址"
                      prop="destinationAddressDetail"
                      label-width="155px">
          <el-input v-model="dataForm.destinationAddressDetail"
                    placeholder="去往目的地详细地址"
                    maxlength="200"
                    clearable></el-input>
        </el-form-item>
      </div>
      <div v-if="showFlagOut">
        <el-form-item label="居住地关联人"
                      prop="relationPeople"
                      label-width="155px">
          <el-input v-model="dataForm.relationPeople"
                    placeholder="居住地关联人"
                    maxlength="20"
                    clearable
                    @keyup.native="btKeyUpRelationPeople"></el-input>
        </el-form-item>
        <el-form-item label="关联人联系电话"
                      prop="relationPeopleMobile"
                      label-width="155px">
          <el-input v-model="dataForm.relationPeopleMobile"
                    placeholder="关联人联系电话"
                    clearable
                    maxlength="11"
                    @keyup.native="btKeyUpRelationPeopleMobile"></el-input>
        </el-form-item>
        <el-form-item label="疫情风险等级"
                      prop="riskGrade"
                      label-width="155px">
          <el-select v-model="dataForm.riskGrade"
                     placeholder="现居住地疫情风险等级">
            <el-option v-for="item in riskGradeeArr"
                       :key="item.dictValue"
                       :label="item.dictName"
                       :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="拟返回平阴时间"
                      prop="goBarkTime"
                      label-width="155px">
          <el-date-picker v-model="dataForm.goBarkTime"
                          type="date"
                          placeholder="返回平阴时间"
                          label-width="155px"
                          value-format="yyyy-MM-dd"
                          format="yyyy-MM-dd"
                          style="width:200px">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="现居住地"
                      prop="outLiveAddressName"
                      label-width="155px">
          <el-cascader ref="zwjzdname"
                       v-model="dataForm.outLiveAddressCodes"
                       :options="options"
                       @change="outLiveAddressChangeHandle"
                       :props="{ checkStrictly: false, multiple: true, emitPath: true }">
          </el-cascader>
        </el-form-item>
        <el-form-item label="现居住地详细地址"
                      prop="outLiveAddressDetail"
                      label-width="155px">
          <el-input v-model="dataForm.outLiveAddressDetail"
                    placeholder="现居住地详细地址"
                    maxlength="200"
                    clearable></el-input>
        </el-form-item>
      </div>
      <el-form-item label="社区/村庄"
                    prop="community"
                    label-width="155px">
        <el-input v-model="dataForm.community"
                  placeholder="社区/村庄"></el-input>
      </el-form-item>
      <el-form-item label="网格名称"
                    prop="gridName"
                    label-width="155px">
        <el-input v-model="dataForm.gridName"
                  placeholder="网格名称"></el-input>
      </el-form-item>
      <el-form-item label="小区"
                    prop="plot"
                    label-width="155px">
        <el-input v-model="dataForm.plot"
                  placeholder="小区"></el-input>
      </el-form-item>
      <el-form-item label="楼号"
                    prop="buildingNo"
                    label-width="155px">
        <el-input v-model="dataForm.buildingNo"
                  placeholder="楼号"></el-input>
      </el-form-item>
      <el-form-item label="单元"
                    prop="unit"
                    label-width="155px">
        <el-input v-model="dataForm.unit"
                  placeholder="单元"></el-input>
      </el-form-item>
      <el-form-item label="房间号"
                    prop="roomNo"
                    label-width="155px">
        <el-input v-model="dataForm.roomNo"
                  placeholder="房间号"></el-input>
      </el-form-item>
      <el-form-item label="房屋性质"
                    prop="houseProperty"
                    label-width="155px">
        <el-input v-model="dataForm.houseProperty"
                  placeholder="房屋性质"></el-input>
      </el-form-item>
      <el-form-item label="家庭保障情况"
                    prop="familySecurity"
                    label-width="155px">
        <el-input v-model="dataForm.familySecurity"
                  placeholder="家庭保障情况"></el-input>
      </el-form-item>
      <el-form-item label="居住情况"
                    prop="livingSituation"
                    label-width="155px">
        <el-input v-model="dataForm.livingSituation"
                  placeholder="居住情况"></el-input>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button type="primary"
                 :disabled="isAble"
                 @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'

export default {
  data () {
    return {
      visible: false,
      dataForm: {
        userName: '',
        idCard: '',
        mobile: '',
        householdRegisterCode: '',
        householdRegisterName: '',
        householdRegisterDetail: '',
        liveAddressCode: '',
        liveAddressName: '',
        liveAddressDetail: '',
        relationPeople: '',
        relationPeopleMobile: '',
        outLiveAddressCode: '',
        outLiveAddressName: '',
        outLiveAddressDetail: '',
        returnState: '1',
        householdRegisterCodes: [],
        liveAddressCodes: [],
        outLiveAddressCodes: [],
        leaveTime: '',
        destinationAddressName: '',
        destinationAddressCode: '',
        destinationAddressDetail: '',
        destinationAddressCodes: [],
        riskGrade: '',
        goBarkTime: '',
        gender: '',
        bloodType: '',
        nation: '',
        formerName: '',
        birthday: '',
        height: '',
        standardOfCulture: '',
        health: '',
        maritalStatus: '',
        relation: '',
        nationality: '',
        politicsStatus: '',
        faith: '',
        graduateSchool: '',
        professional: '',
        workStatus: '',
        industryCategory: '',
        workUnits: '',
        military: '',
        peopleCategories: '',
        specialCrowd: '',
        car: '',
        carNo: '',
        hushaiStatus: '',
        nativePlace: '',
        community: '',
        gridName: '',
        plot: '',
        buildingNo: '',
        unit: '',
        roomNo: '',
        houseProperty: '',
        familySecurity: '',
        livingSituation: ''
      },
      returnStateArr: [
        { dictValue: '1', dictName: '在本地' },
        { dictValue: '2', dictName: '在外地' }
      ],
      options: [],
      liveOptions: [],
      isAble: false,
      showFlagIn: true,
      showFlagOut: false,
      riskGradeeArr: [
        { dictValue: '1', dictName: '低风险' },
        { dictValue: '2', dictName: '中风险' },
        { dictValue: '3', dictName: '高风险' }
      ],
      gender: [
        { dictValue: '男', dictName: '男' },
        { dictValue: '女', dictName: '女' },
      ],
      vueLoading: true
    }
  },
  computed: {
    dataRule () {
      return {
        userName: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        idCard: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
          { pattern: /(^\d{15}$)|bai(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确身份证号', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init () {
      this.visible = true
      this.isAble = true
      this.vueLoading = true
      // 清空组织树选中
      this.dataForm.destinationAddressCodes = []
      this.getOptions()
      this.getLiveOptions()
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.getInfo()
        }
      })
    },
    // 往返情况取值变化事件
    selectModel (id) {
      if (id === '1') {
        // 在平阴
        this.showFlagIn = true
        this.showFlagOut = false
      } else {
        this.showFlagIn = false
        this.showFlagOut = true
      }
    },
    householdRegisterChangeHandle (value, selectedData) {
      let householdRegisterCode = ''
      let householdRegisterName = ''
      var householdRegisterCodeArr = this.$refs['hjdname'].currentValue
      var householdRegisterNameArr = this.$refs['hjdname'].currentLabels
      for (var i = 0; i < householdRegisterCodeArr.length; i++) {
        if (i === householdRegisterCodeArr.length - 1) {
          householdRegisterCode += householdRegisterCodeArr[i]
        } else {
          householdRegisterCode += householdRegisterCodeArr[i] + ','
        }
      }
      for (var j = 0; j < householdRegisterNameArr.length; j++) {
        if (j === householdRegisterNameArr.length - 1) {
          householdRegisterName += householdRegisterNameArr[j]
        } else {
          householdRegisterName += householdRegisterNameArr[j] + '/'
        }
      }
      this.dataForm.householdRegisterCode = householdRegisterCode
      this.dataForm.householdRegisterName = householdRegisterName
    },
    liveAddressChangeHandle (value, selectedData) {
      let liveAddressCode = ''
      let liveAddressName = ''
      var liveAddressCodeArr = this.$refs['jzdname'].currentValue
      var liveAddressNameArr = this.$refs['jzdname'].currentLabels
      for (var i = 0; i < liveAddressCodeArr.length; i++) {
        if (i === liveAddressCodeArr.length - 1) {
          liveAddressCode += liveAddressCodeArr[i]
        } else {
          liveAddressCode += liveAddressCodeArr[i] + ','
        }
      }
      for (var j = 0; j < liveAddressNameArr.length; j++) {
        if (j === liveAddressNameArr.length - 1) {
          liveAddressName += liveAddressNameArr[j]
        } else {
          liveAddressName += liveAddressNameArr[j] + '/'
        }
      }
      this.dataForm.liveAddressCode = liveAddressCode
      this.dataForm.liveAddressName = liveAddressName
    },
    outLiveAddressChangeHandle (value, selectedData) {
      let outLiveAddressCode = ''
      let outLiveAddressName = ''
      var outLiveAddressCodeArr = this.$refs['zwjzdname'].currentValue
      var outLiveAddressNameArr = this.$refs['zwjzdname'].currentLabels
      for (var i = 0; i < outLiveAddressCodeArr.length; i++) {
        if (i === outLiveAddressCodeArr.length - 1) {
          outLiveAddressCode += outLiveAddressCodeArr[i]
        } else {
          outLiveAddressCode += outLiveAddressCodeArr[i] + ','
        }
      }
      for (var j = 0; j < outLiveAddressNameArr.length; j++) {
        if (j === outLiveAddressNameArr.length - 1) {
          outLiveAddressName += outLiveAddressNameArr[j]
        } else {
          outLiveAddressName += outLiveAddressNameArr[j] + '/'
        }
      }
      this.dataForm.outLiveAddressCode = outLiveAddressCode
      this.dataForm.outLiveAddressName = outLiveAddressName
    },
    destinationChangeHandle (value, selectedData) {
      let destinationAddressCode = ''
      let destinationAddressName = ''
      var destinationAddressCodeArr = this.$refs['qwmddname'].currentValue
      var destinationAddressNameArr = this.$refs['qwmddname'].currentLabels
      for (var i = 0; i < destinationAddressCodeArr.length; i++) {
        if (i === destinationAddressCodeArr.length - 1) {
          destinationAddressCode += destinationAddressCodeArr[i]
        } else {
          destinationAddressCode += destinationAddressCodeArr[i] + ','
        }
      }
      for (var j = 0; j < destinationAddressNameArr.length; j++) {
        if (j === destinationAddressNameArr.length - 1) {
          destinationAddressName += destinationAddressNameArr[j]
        } else {
          destinationAddressName += destinationAddressNameArr[j] + '/'
        }
      }
      this.dataForm.destinationAddressCode = destinationAddressCode
      this.dataForm.destinationAddressName = destinationAddressName
    },
    getOptions () {
      this.$http
        .get(`sys/select/getSysArea`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.options = res.data
          this.vueLoading = false
          this.isAble = false
        })
        .catch(() => {
        })
    },
    getLiveOptions () {
      this.$http
        .get(`sys/select/getLiveArea`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.liveOptions = res.data
        })
        .catch(() => {
        })
    },
    // 获取信息
    getInfo () {
      this.$http.get(`sys/epidemicuserinfo/${this.dataForm.id}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
        if (this.dataForm.returnState === '1') {
          // 在平阴
          this.showFlagIn = true
          this.showFlagOut = false
        } else {
          this.showFlagIn = false
          this.showFlagOut = true
        }
      }).catch(() => {
      })
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.isAble = true
        this.$http[!this.dataForm.id ? 'post' : 'put']('sys/epidemicuserinfo/', this.dataForm).then(({ data: res }) => {
          if (res.code !== 0) {
            this.isAble = false
            return this.$message.error(res.msg)
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        }).catch(() => {
        })
      })
    }, 1000, { 'leading': true, 'trailing': false }),
    btKeyUpIdCard (e) {
      e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '')
      this.dataForm.idCard = e.target.value
    },
    btKeyUpMobile (e) {
      e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '')
      this.dataForm.mobile = e.target.value
    },
    btKeyUpRelationPeopleMobile (e) {
      e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '')
      this.dataForm.relationPeopleMobile = e.target.value
    },
    btKeyUpUserName (e) {
      e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '')
      this.dataForm.userName = e.target.value
    },
    btKeyUpRelationPeople (e) {
      e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '')
      this.dataForm.relationPeople = e.target.value
    }
  }
}
</script>
