<template>
  <section class="hrAdd">
    <ai-detail>
      <ai-title slot="title" :title="addTitle" isShowBottomBorder isShowBack @onBackClick="back"/>
      <template #content>
        <el-form :model="form" ref="ruleForm" :rules="rules" label-width="160px" label-position="right" size="small">
          <ai-card title="基本信息">
            <template #content>
              <div flex class="half wrap">
                <div flex class="column">
                  <el-form-item label="户主姓名" prop="name">
                    <el-input size="small" class="user-selecter" v-model="form.name" placeholder="请输入姓名" clearable :disabled="isEdit || isSelectUser">
                      <template slot="append">
                        <ai-person-select :instance="instance" @selectPerson="checkName" :url="'/app/appresident/list?auditStatus=1&householdName=1&areaId='+user.info.areaId"></ai-person-select>
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="联系方式" prop="phone">
                    <el-input v-model="form.phone" placeholder="请输入联系方式" :maxlength="11" show-word-limit/>
                  </el-form-item>
                  <el-form-item label="证件号码" prop="idNumber">
                    <el-input v-model="form.idNumber" placeholder="请输入证件号码" :maxlength="20" :disabled="isEdit || isSelectUser" @change="handleIdNumberAutocomplete"/>
                  </el-form-item>
                </div>
                <el-form-item label="个人照片" prop="photo">
                  <ai-avatar :instance="instance" v-model="form.photo"/>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                  <ai-select v-model="form.sex" :selectList="dict.getDict('sex')" disabled/>
                </el-form-item>
                <el-form-item label="出生日期" prop="birthDate">
                  <el-date-picker disabled value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" v-model="form.birthDate" type="date" placeholder="选择日期"/>
                </el-form-item>
                <!-- <el-form-item label="年龄" prop="age">
                  <el-input disabled v-model="form.age" placeholder="请输入年龄" type="number"/>
                </el-form-item> -->
                <el-form-item label="民族">
                  <ai-select v-model="form.nation" :selectList="dict.getDict('fpNation')"/>
                </el-form-item>
                <el-form-item label="文化程度">
                  <ai-select v-model="form.education" :selectList="dict.getDict('fpEducation')"/>
                </el-form-item>
                <el-form-item label="政治面貌">
                  <ai-select v-model="form.politicsStatus" :selectList="dict.getDict('fpPoliticalOutlook')"/>
                </el-form-item>
                <el-form-item label="在校生状况">
                  <ai-select v-model="form.schoolStatus" :selectList="dict.getDict('fpStudentsInSchool')"/>
                </el-form-item>
              </div>
              <el-form-item label="健康状况">
                <el-checkbox-group v-model="form.healthyStatusList">
                  <el-checkbox :label="item.dictValue" v-for="(item, index) in dict.getDict('fpHealth')" :key="index">{{item.dictName}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <div flex class="half wrap">
                <el-form-item label="残疾类别">
                  <ai-select v-model="form.disabilityType" :selectList="dict.getDict('fpDisabilityType')" />
                </el-form-item>
                <el-form-item label="残疾办证年度">
                  <ai-select v-model="form.disabilityCertificateYear" :selectList="dict.getDict('fpYear')" />
                </el-form-item>
              </div>
              <el-form-item label="基础保险">
                <el-checkbox-group v-model="form.basicsList">
                  <el-checkbox :label="item.value" v-for="(item, index) in basicsCheckList" :key="index">{{item.label}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="保障措施">
                <el-checkbox-group v-model="form.guaranteeList">
                  <el-checkbox :label="item.value" v-for="(item, index) in guaranteeCheckList" :key="index">{{item.label}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <div flex class="half wrap">
                <el-form-item label="劳动技能">
                  <ai-select v-model="form.labourStatus" :selectList="dict.getDict('fpLaborSkills')"/>
                </el-form-item>
                <el-form-item label="是否会讲普通话">
                  <ai-select v-model="form.mandarin" :selectList="dict.getDict('fpYesOrNo')" />
                </el-form-item>
                <el-form-item label="务工时间(月)">
                  <el-input type="number" v-model="form.workeMonths" placeholder="请输入" clearable @input="numberInput('workeMonths')" />
                </el-form-item>
                <el-form-item label="就业渠道">
                  <ai-select v-model="form.employmentChannels" :selectList="dict.getDict('fpEmploymentChannels')" />
                </el-form-item>
                <el-form-item label="务工企业名称">
                  <el-input v-model="form.migrantEnterprises" placeholder="请输入" clearable/>
                </el-form-item>
                <el-form-item label="公益性岗位">
                  <el-input v-model="form.publicWelfarePosts" placeholder="请输入" clearable/>
                </el-form-item>
                <el-form-item label="是否国外务工">
                  <ai-select v-model="form.foreignWorkers" :selectList="dict.getDict('fpYesOrNo')" />
                </el-form-item>
                <el-form-item label="公益性岗位(月数)">
                  <el-input type="number" v-model="form.publicWelfarePostsMonths" placeholder="请输入" clearable @input="numberInput('publicWelfarePostsMonths')" />
                </el-form-item>
              </div>
              <el-form-item label="务工所在地">
                <el-input v-model="form.foreignWorkersAddress" placeholder="请输入" clearable maxlength="30" show-word-limit/>
              </el-form-item>
              <el-form-item label="现住址" prop="currentAreaId">
                <ai-area-get :instance="instance" v-model="form.currentAreaId" :root="rootArea" valueLevel="5"/>
                <el-form-item prop="currentAddress">
                  <el-input v-model="form.currentAddress" placeholder="详细地址" maxlength="30" show-word-limit clearable/>
                </el-form-item>
              </el-form-item>
            </template>
          </ai-card>
          <ai-card title="生产生活条件">
            <template slot="content">
              <div flex class="half wrap">
                <el-form-item label="住房面积(m²)">
                  <el-input v-model="form.houseArea" placeholder="请输入" :maxlength="8"/>
                </el-form-item>
                <el-form-item label="户类型">
                  <ai-select v-model="form.houseType" :selectList="dict.getDict('fpHouseType')"/>
                </el-form-item>
                <el-form-item label="与村主干路距离(公里)">
                  <el-input v-model="form.trunkRoadDistance" placeholder="请输入" :maxlength="8"/>
                </el-form-item>
                <el-form-item label="入户路类型">
                  <ai-select v-model="form.houseRoadType" :selectList="dict.getDict('fpHouseRoadType')"/>
                </el-form-item>
                <el-form-item label="是否危房">
                  <ai-select v-model="form.dilapidatedHousehold" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
                <el-form-item label="是否住房损耗">
                  <ai-select v-model="form.houseDamage" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
                <el-form-item label="是否解决安全饮水">
                  <ai-select v-model="form.drinkingWaterSafety" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
                <el-form-item label="是否饮水设施损坏">
                  <ai-select v-model="form.drinkingWaterDamage" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
                <el-form-item label="是否有卫生厕所">
                  <ai-select v-model="form.toilet" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
                <el-form-item label="主要燃料类型">
                  <ai-select v-model="form.fuelType" :selectList="dict.getDict('fpFuelType')"/>
                </el-form-item>
                <el-form-item label="是否通生活用电">
                  <ai-select v-model="form.electric" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
                <el-form-item label="是否通广播电视">
                  <ai-select v-model="form.television" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
                <el-form-item label="耕地面积(亩)">
                  <el-input v-model="form.cultivatedLandArea" placeholder="请输入" :maxlength="8"/>
                </el-form-item>
                <el-form-item label="林地面积(亩)">
                  <el-input v-model="form.woodlandArea" placeholder="请输入" :maxlength="8"/>
                </el-form-item>
                <el-form-item label="林果面积(亩)">
                  <el-input v-model="form.orchardArea" placeholder="请输入" :maxlength="8"/>
                </el-form-item>
                <el-form-item label="退耕还林面积(亩)">
                  <el-input v-model="form.grainForGreenArea" placeholder="请输入" :maxlength="8"/>
                </el-form-item>
                <el-form-item label="牧草地面积(亩)">
                  <el-input v-model="form.grazingGrasslandArea" placeholder="请输入" :maxlength="8"/>
                </el-form-item>
                <el-form-item label="水面面积(亩)">
                  <el-input v-model="form.watersArea" placeholder="请输入" :maxlength="8"/>
                </el-form-item>
                <el-form-item label="是否加入农民专业合作社">
                  <ai-select v-model="form.nongheshe" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
                <el-form-item label="是否有龙头企业带动">
                  <ai-select v-model="form.longtouqiye" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
                <el-form-item label="是否有创业致富人带头人带动">
                  <ai-select v-model="form.cyzfdtr" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
                <el-form-item label="是否通生产通电">
                  <ai-select v-model="form.produceElectric" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
              </div>
            </template>
          </ai-card>
          <ai-card title="家庭风险情况">
            <template slot="content">
              <div flex class="half wrap">
                <el-form-item label="监测对象类型" prop="objectType">
                  <ai-select v-model="form.objectType" :selectList="dict.getDict('fpType')"/>
                </el-form-item>
                <el-form-item label="是否军烈属">
                  <ai-select v-model="form.militaryMartyrs" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
                <el-form-item label="风险因素" prop="riskType">
                  <ai-select v-model="form.riskType" :selectList="dict.getDict('fpRiskType')"/>
                </el-form-item>
                <el-form-item label="脱贫年度">
                  <ai-select v-model="form.povertyYear" :selectList="dict.getDict('fpYear')"/>
                </el-form-item>
                <el-form-item label="因自然灾害子项">
                  <ai-select v-model="form.naturalDisasterType" :selectList="dict.getDict('fpNaturalDisaster')"/>
                </el-form-item>
                <el-form-item label="是否义务阶段失学辍学">
                  <ai-select v-model="form.dropOutOfSchool" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
              </div>
              <el-form-item label="义务阶段未上学原因">
                <el-input v-model="form.dropOutOfSchoolReason" type="textarea" placeholder="请输入" maxlength="500" show-word-limit clearable/>
              </el-form-item>
              <el-form-item label="备注说明">
                <el-input v-model="form.detail" placeholder="请输入" type="textarea" maxlength="500" show-word-limit clearable/>
              </el-form-item>
              <el-form-item label="图片（最多9张）" >
                <ai-uploader
                  :isShowTip="true"
                  :instance="instance"
                  v-model="form.files"
                  fileType="img"
                  acceptType=".png,.jpg,.jpeg"
                  :limit="9">
                  <template slot="tips">最多上传9张图片,单张图片最大10MB<br/>支持.png,.jpg,.jpeg格式</template>
                </ai-uploader>
              </el-form-item>
            </template>
          </ai-card>
          <ai-card title="家庭收支情况">
            <template slot="content">
              <div flex class="half wrap">
                <el-form-item label="纳入监测对象的收入参考范围">
                  <el-input v-model="form.income1" placeholder="请输入" type="number" @input="decimalInput('income1')" clearable/>
                </el-form-item>
                <el-form-item label="纳入监测对象的人均收入参考范围">
                  <el-input v-model="form.income2" placeholder="请输入" type="number" @input="decimalInput('income2')" clearable/>
                </el-form-item>
                <el-form-item label="工资性收入(元)">
                  <el-input v-model="form.income3" placeholder="请输入" type="number" @input="decimalInput('income3')" clearable/>
                </el-form-item>
                <el-form-item label="生产经营性收入(元)">
                  <el-input v-model="form.income4" placeholder="请输入" type="number" @input="decimalInput('income4')" clearable/>
                </el-form-item>
                <el-form-item label="计划生育金(元)">
                  <el-input v-model="form.income5" placeholder="请输入" type="number" @input="decimalInput('income5')" clearable/>
                </el-form-item>
                <el-form-item label="资产收益扶贫分红收入">
                  <el-input v-model="form.income6" placeholder="请输入" type="number" @input="decimalInput('income6')" clearable/>
                </el-form-item>
                <el-form-item label="低保金(元)">
                  <el-input v-model="form.income7" placeholder="请输入" type="number" @input="decimalInput('income7')" clearable/>
                </el-form-item>
                <el-form-item label="特困供养金(元)">
                  <el-input v-model="form.income8" placeholder="请输入" type="number" @input="decimalInput('income8')" clearable/>
                </el-form-item>
                <el-form-item label="养老保险金(元)">
                  <el-input v-model="form.income9" placeholder="请输入" type="number" @input="decimalInput('income9')" clearable/>
                </el-form-item>
                <el-form-item label="生态补偿金(元)">
                  <el-input v-model="form.income10" placeholder="请输入" type="number" @input="decimalInput('income10')" clearable/>
                </el-form-item>
                <el-form-item label="转移性收入(元)">
                  <el-input v-model="form.income11" placeholder="请输入" type="number" @input="decimalInput('income11')" clearable/>
                </el-form-item>
                <el-form-item label="其它转移性收入(元)">
                  <el-input v-model="form.income12" placeholder="请输入" type="number" @input="decimalInput('income12')" clearable/>
                </el-form-item>
                <el-form-item label="财产性收入(元)">
                  <el-input v-model="form.income13" placeholder="请输入" type="number" @input="decimalInput('income13')" clearable/>
                </el-form-item>
                <el-form-item label="其它财产收入(元)">
                  <el-input v-model="form.income14" placeholder="请输入" type="number" @input="decimalInput('income14')" clearable/>
                </el-form-item>
                <el-form-item label="生产经营性支出(元)">
                  <el-input v-model="form.income15" placeholder="请输入" type="number" @input="decimalInput('income15')" clearable/>
                </el-form-item>
              </div>
            </template>
          </ai-card>

          <ai-card title="风险消除情况" v-if="form.status == 3">
            <template slot="content">
              <div flex class="half wrap">
                <el-form-item label="工资性收入情况">
                  <el-input v-model="form.fxxcIncome1" placeholder="请输入" type="number" @input="decimalInput('fxxcIncome1')" clearable/>
                </el-form-item>
                <el-form-item label="生产经营性收入情况">
                  <el-input v-model="form.fxxcIncome2" placeholder="请输入" type="number" @input="decimalInput('fxxcIncome2')" clearable/>
                </el-form-item>
                <el-form-item label="财产性收入情况">
                  <el-input v-model="form.fxxcIncome3" placeholder="请输入" type="number" @input="decimalInput('fxxcIncome3')" clearable/>
                </el-form-item>
                <el-form-item label="转移性收入情况">
                  <el-input v-model="form.fxxcIncome4" placeholder="请输入" type="number" @input="decimalInput('fxxcIncome4')" clearable/>
                </el-form-item>
                <el-form-item label="理赔收入情况">
                  <el-input v-model="form.fxxcIncome5" placeholder="请输入" type="number" @input="decimalInput('fxxcIncome5')" clearable/>
                </el-form-item>
                <el-form-item label="生产经营性支出情况">
                  <el-input v-model="form.fxxcIncome6" placeholder="请输入" type="number" @input="decimalInput('fxxcIncome6')" clearable/>
                </el-form-item>
                <el-form-item label="合规自然收支情况">
                  <el-input v-model="form.fxxcIncome7" placeholder="请输入" type="number" @input="decimalInput('fxxcIncome7')" clearable/>
                </el-form-item>
                <el-form-item label="家庭纯收入情况">
                  <el-input v-model="form.fxxcIncome8" placeholder="请输入" type="number" @input="decimalInput('fxxcIncome8')" clearable/>
                </el-form-item>
                <el-form-item label="家庭人均纯收入情况">
                  <el-input v-model="form.fxxcIncome9" placeholder="请输入" type="number" @input="decimalInput('fxxcIncome9')" clearable/>
                </el-form-item>
              </div>
            </template>
          </ai-card>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="back">取消</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </template>
    </ai-detail>
  </section>
</template>

<script>

import {mapState} from "vuex";

export default {
  name: "hrAdd",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    ...mapState(['user']),
    isEdit() {
      return !!this.$route.query.id
    },
    addTitle() {
      return this.isEdit ? "编辑监测对象" : "添加监测对象"
    },
    rules() {
      return {
        idNumber: [{required: true, message: "请输入证件号"}],
        name: [{required: true, message: "请输入姓名"}],
        sex: [{required: true, message: "请选择性别"}],
        phone: [{required: true, message: "请输入联系方式"}],
        currentAreaId: [
          {required: true, message: "请选择现住址"},
          {pattern: /[^0]0{0,2}$/, message: "请选择到村/社区"},
        ],
        isHousehold: [{required: true, message: "请选择是否户主"}],
        householdRelation: [{required: true, message: "请选择与户主关系"}],
        householdIdNumber: [{required: true, message: "请选择户主证件号"}],
        riskType: [{required: true, message: "请选择风险因素"}],
        objectType: [{required: true, message: "请选择监测对象类型"}],
      }
    },
    rootArea() {
      return this.user.info?.areaId?.replace(/(\d{6})\d+/g, '$1' + Array(7).join("0")) || ""
    },
    guaranteeCheckList() {
      return [
        {label: '享受农村最低生活保障', value: '0'},
        {label: '是否特困供养人员', value: '1'},
        {label: '分散供养五保户转集中供养（减少）', value: '2'},
        {label: '是否接受医疗救助', value: '3'},
        {label: '是否接受其它健康扶贫', value: '4'},
      ]
    },
    basicsCheckList() {
      return [
        {label: '城乡居民基本医疗保险', value: '0'},
        {label: '城镇职工基本医疗保险', value: '1'},
        {label: '大病保险', value: '2'},
        {label: '商业补充医疗保险', value: '3'},
        {label: '城乡居民基本养老保险', value: '4'},
        {label: '城镇职工基本养老保险', value: '5'},
        {label: '享受人身意外保险补贴', value: '6'},
      ]
    },
  },
  data() {
    return {
      form: {
        householdRelation: "",
        healthyStatus: '',
        healthyStatusList: [],
        guaranteeList: [],
        basicsList: [],
        file: [],
      },
      isSelectUser: false, //是否选择人员
    }
  },
  methods: {
    checkName(e) {
      if(!e) {
        this.isSelectUser = false
        this.form.name = ''
        this.form.idNumber = ''
        this.form.phone =''
        this.form.currentAreaId = ''
        this.form.currentAddress = ''
        this.form.birthDate = ''
        this.form.sex = ''
        this.form.age = ''
        return
      }
      this.form.name = e.name
      this.form.idNumber = e.idNumber
      this.form.phone = e.phone
      this.form.currentAreaId = e.currentAreaId
      this.form.currentAddress = e.currentAddress
      this.handleIdNumberAutocomplete(e.idNumber)
      this.isSelectUser = true
    },
    back() {
      this.$router.push({})
    },
    getDetail() {
      let {id} = this.$route.query
      id && this.instance.post("/app/apppreventionreturntopoverty/queryDetailById", null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          res.data.healthyStatusList = []
          res.data.basicsList = []
          res.data.guaranteeList = []
          if(res.data.healthyStatus) {
            res.data.healthyStatusList = res.data.healthyStatus.split(',')
          }
          if(res.data.basicsCheck) {
            res.data.basicsList = res.data.basicsCheck.split(',')
          }
          if(res.data.guaranteeCheck) {
            res.data.guaranteeList = res.data.guaranteeCheck.split(',')
          }
          console.log(res.data)
          this.form = {...res.data}
        }
      })
    },
    handleIdNumberAutocomplete(v) {
      var idNumber = v
      if(v.length == 20) {
        idNumber = v.substring(0, 18)
      }
      let {birthday: birthDate, sex} = this.idCardNoUtil.getIdCardInfo(idNumber)
      this.form = {...this.form, birthDate, sex, age: this.$calcAge(idNumber)}
    },
    submit() {
      this.$refs.ruleForm.validate(v => {
        if (v) {
          this.form.isHousehold = 1
          this.form.householdIdNumber = this.form.idNumber
          if (this.form.healthyStatusList.length) {
            this.form.healthyStatus = this.form.healthyStatusList.join(',')
          }
          if(this.user.info.girdCheckType == 1) {
            this.form.girdId = this.user.info.girdId
          }
          if(this.form.basicsList.length) {
            this.form.basicsCheck = this.form.basicsList.join(',')
          }
          if(this.form.guaranteeList.length) {
            this.form.guaranteeCheck = this.form.basicsList.join(',')
          }
          if([1, 2, 3].includes(2)) {
            this.form.jcbxCxyiliao = '01'
          }else {
            this.form.jcbxCxyiliao = '02'
          }
          this.checkInit('jcbxCxyiliao',this.form.basicsList, '0')
          this.checkInit('jcbxCzyiliao',this.form.basicsList, '1')
          this.checkInit('jcbxDabing',this.form.basicsList, '2')
          this.checkInit('jcbxShangye',this.form.basicsList, '3')
          this.checkInit('jcbxCxyanglao',this.form.basicsList, '4')
          this.checkInit('jcbxCzyanglao',this.form.basicsList, '5')
          this.checkInit('jcbxRenshenyiwai',this.form.basicsList, '6')

          this.checkInit('bzcsNongcundibao',this.form.guaranteeList, '0')
          this.checkInit('bzcsTekungongyang',this.form.guaranteeList, '1')
          this.checkInit('bzcsWubaohu',this.form.guaranteeList, '2')
          this.checkInit('bzcsYiliaojiuzhu',this.form.guaranteeList, '3')
          this.checkInit('bzcsQita',this.form.guaranteeList, '4')

          this.instance.post(`/app/apppreventionreturntopoverty/addOrUpdate`, this.form).then(res => {
            if (res.code == 0) {
              this.$message.success('提交成功!');
              this.back()
            }
          })
        }
      })
    },
    checkInit(formName, list, value) {
      if(list.includes(value)) {
        this.form[formName] = '01'
      }else {
        this.form[formName] = '02'
      }
    },
    decimalInput(name) {
      if(!/^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/g.test(this.form[name])){
        this.form[name] = ''
        return this.$message.error('最多只保留两位小数点')
      }
    },
    numberInput(name) {
      if(!/^[0-9]*[1-9][0-9]*$/g.test(this.form[name])){
        this.form[name] = ''
        return this.$message.error('请输入正整数')
      }
    },
  },
  created() {
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
.hrAdd {
  height: 100%;

  .half {
    align-items: flex-start;

    & > .el-form-item, & > div {
      width: 50%;

      .el-form-item {
        width: 100%;
      }
    }
  }

  .el-date-editor {
    width: 100%;
  }

  ::v-deep .AiPersonSelect .el-button {
    color: #fff;
  }
}
</style>
