<template>
  <section class="residentDetail">
    <ai-detail>
      <ai-title slot="title" :title="pageTitle" isShowBack @onBackClick="back" isShowBottomBorder>
        <template v-if="showDetail" #rightBtn>
          <el-button @click="beforeWriteOff()" icon="el-icon-switch-button" v-if="baseInfo.fileStatus==0">注销档案
          </el-button>
          <el-button icon="iconfont iconDelete" @click="handleDelete()" v-if="permissions('app_appresident_del')">
            删除人员
          </el-button>
        </template>
      </ai-title>
      <template #content>
        <el-form class="content-right" :model="baseInfo" ref="ruleForm" :rules="rules" label-width="130px"
                 label-position="right" size="small">
          <el-tabs tab-position="left" v-if="showDetail" v-model="currentTab">
            <el-tab-pane label="基本信息">
              <ai-edit-card :title="baseInfo.name||'基本信息'" :show-btn="permissions('app_appresident_edit')"
                            @save="saveFrom" @cancel="getDetail(baseInfo.id)">
                <template #edit>
                  <el-row type="flex">
                    <div class="fill">
                      <el-form-item label="姓名：" prop="name">
                        <el-input
                            v-model="baseInfo.name"
                            autocomplete="off"
                            size="small"
                            placeholder="请输入姓名"
                            maxlength="20"
                            show-word-limit/>
                      </el-form-item>
                      <el-form-item label="身份证号：" prop="idNumber">
                        <el-input v-model="baseInfo.idNumber" placeholder="请输入身份证号" :maxlength="18" show-word-limit
                                  @change="idChange"/>
                      </el-form-item>
                      <el-form-item label="性别：" prop="sex">
                        <ai-select v-model="baseInfo.sex" :selectList="dict.getDict('sex')"/>
                      </el-form-item>
                    </div>
                    <el-form-item label="个人照片：" prop="photo" class="fill">
                      <ai-avatar :instance="instance" v-model="baseInfo.photo"/>
                    </el-form-item>
                  </el-row>
                  <el-row type="flex">
                    <div class="fill">
                      <el-form-item label="出生日期：">
                        <el-date-picker
                            disabled
                            :editable="false"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            format="yyyy-MM-dd"
                            v-model="baseInfo.birthday"
                            type="date"
                            placeholder="选择日期"
                        />
                      </el-form-item>
                      <el-form-item label="文化程度：" prop="education">
                        <ai-select v-model="baseInfo.education" :selectList="dict.getDict('education')"/>
                      </el-form-item>
                      <el-form-item label="政治面貌：" prop="politicsStatus">
                        <ai-select v-model="baseInfo.politicsStatus" :selectList="dict.getDict('politicsStatus')"/>
                      </el-form-item>
                      <el-form-item label="职业：" prop="job">
                        <ai-select v-model="baseInfo.job" :selectList="dict.getDict('job')"/>
                      </el-form-item>
                      <el-form-item label="宗教信仰：" prop="faithType">
                        <ai-select v-model="baseInfo.faithType" :selectList="dict.getDict('faithType')"/>
                      </el-form-item>
                    </div>
                    <div class="fill">
                      <el-form-item label="年龄：" prop="age">
                        <el-input
                            disabled
                            v-model="baseInfo.age"
                            autocomplete="off"
                            size="small"
                            placeholder="请输入年龄"
                            type="number"
                            @mousewheel.native.prevent
                        />
                        <!-- <p v-else>{{baseInfo.age}}</p> -->
                      </el-form-item>
                      <el-form-item label="民族：" prop="nation">
                        <ai-select v-model="baseInfo.nation" :selectList="dict.getDict('nation')"/>
                      </el-form-item>
                      <el-form-item label="婚姻状况：" prop="maritalStatus">
                        <ai-select v-model="baseInfo.maritalStatus" :selectList="dict.getDict('maritalStatus')"/>
                      </el-form-item>
                      <el-form-item label="兵役状况：" prop="militaryStatus">
                        <ai-select v-model="baseInfo.militaryStatus" :selectList="dict.getDict('militaryStatus')"/>
                      </el-form-item>
                    </div>
                  </el-row>
                  <el-form-item label="籍贯：" prop=" birthplaceAreaId">
                    <ai-area-select
                        clearable
                        always-show
                        :instance="instance"
                        v-model="baseInfo.birthplaceAreaId"
                        :areaLevel="3"
                    />
                  </el-form-item>
                </template>
                <template>
                  <el-row type="flex">
                    <ai-wrapper class="fill">
                      <ai-info-item label="性别" :value="dict.getLabel('sex', baseInfo.sex)"/>
                      <ai-info-item label="身份证号">
                        <ai-id mode="show" v-model="baseInfo.idNumber" right-btn class="line-center"/>
                      </ai-info-item>
                      <ai-info-item label="出生日期" :value="baseInfo.birthday"/>
                      <ai-info-item label="年龄" :value="baseInfo.age"/>
                      <ai-info-item label="籍贯" :value="baseInfo.birthplaceAreaName"/>
                      <ai-info-item label="民族" :value="dict.getLabel('nation', baseInfo.nation)"/>
                      <ai-info-item label="文化程度" :value="dict.getLabel('education', baseInfo.education)"/>
                      <ai-info-item label="婚姻状况" :value="dict.getLabel('maritalStatus', baseInfo.maritalStatus)"/>
                      <ai-info-item label="政治面貌" :value="dict.getLabel('politicsStatus', baseInfo.politicsStatus)"/>
                      <ai-info-item label="兵役状况" :value="dict.getLabel('militaryStatus', baseInfo.militaryStatus)"/>
                      <ai-info-item label="宗教信仰" :value="dict.getLabel('faithType', baseInfo.faithType)"/>
                      <ai-info-item label="职业" :value="dict.getLabel('job', baseInfo.job)"/>
                    </ai-wrapper>
                    <ai-avatar v-model="baseInfo.photo" :editable="false"/>
                  </el-row>
                </template>
              </ai-edit-card>
              <ai-edit-card title="联络信息" :show-btn="permissions('app_appresident_edit')"
                            @save="saveFrom" @cancel="getDetail(baseInfo.id)">
                <template #edit>
                  <el-form-item label="联系方式：" prop="phone">
                    <el-input v-model="baseInfo.phone" size="small" placeholder="请输入联系方式" :maxlength="11"
                              show-word-limit/>
                  </el-form-item>
                  <el-form-item label="现住址：" prop="currentAreaId">
                    <ai-area-select clearable always-show :instance="instance" :disabled-level="disabledLevel"
                                    v-model="baseInfo.currentAreaId" :valueLevel="4"/>
                    <el-form-item>
                      <el-input v-model="baseInfo.currentAddress" placeholder="详细地址" maxlength="30" show-word-limit
                                clearable/>
                    </el-form-item>
                  </el-form-item>
                </template>
                <template>
                  <ai-wrapper>
                    <ai-info-item label="联系方式" :value="baseInfo.phone"/>
                    <ai-info-item label="现住址" isLine
                                  :value="[baseInfo.currentAreaName, baseInfo.currentAddress].join('')"/>
                  </ai-wrapper>
                </template>
              </ai-edit-card>
              <ai-edit-card title="户籍信息" :show-btn="permissions('app_appresident_edit')"
                            @save="saveFrom" @cancel="getDetail(baseInfo.id)">
                <template #edit>
                  <el-row type="flex">
                    <div class="fill">
                      <el-form-item label="是否户主：" prop="householdName">
                        <ai-select v-model="baseInfo.householdName" :selectList="dict.getDict('householdName')"
                                   @change="householdRelationChange"/>
                      </el-form-item>
                      <el-form-item label="与户主关系：" prop="householdRelation" v-if="baseInfo.householdName==0">
                        <ai-select v-model="baseInfo.householdRelation"
                                   :selectList="dict.getDict('householdRelation')"/>
                      </el-form-item>
                    </div>
                    <div class="fill">
                      <el-form-item label="户主身份证号：" prop="householdIdNumber" v-if="baseInfo.householdName==0">
                        <el-input v-model="baseInfo.householdIdNumber" placeholder="请输入户主身份证号" :maxlength="18"
                                  clearable/>
                      </el-form-item>
                    </div>
                  </el-row>
                  <el-form-item label="户籍地：" prop="householdAreaId">
                    <ai-area-select clearable always-show :instance="instance" v-model="baseInfo.householdAreaId"/>
                    <el-form-item v-if="baseInfo.householdAreaId">
                      <el-input v-model="baseInfo.householdAddress" placeholder="详细地址" maxlength="30" show-word-limit
                                clearable/>
                    </el-form-item>
                  </el-form-item>
                </template>
                <template>
                  <ai-wrapper>
                    <ai-info-item label="是否户主" :value="dict.getLabel('householdName', baseInfo.householdName)"/>
                    <template v-if="baseInfo.householdName==0">
                      <ai-info-item label="与户主关系"
                                    :value="dict.getLabel('householdRelation', baseInfo.householdRelation)"/>
                      <ai-info-item label="户主身份证号" :value="baseInfo.householdIdNumber"/>
                    </template>
                    <ai-info-item label="户籍地" isLine
                                  :value="[baseInfo.householdAreaName, baseInfo.householdAddress].join('')" isLine/>
                  </ai-wrapper>
                </template>
              </ai-edit-card>
              <ai-card title="家庭成员">
                <div slot="content">
                  <ai-table :tableData="family" :dict="dict" :isShowPagination="false" :colConfigs="colConfigs">
                    <el-table-column slot="options" label="操作" align="center">
                      <template slot-scope="{row}">
                        <el-button @click="showFamily(row)" type="text">详情</el-button>
                      </template>
                    </el-table-column>
                  </ai-table>
                </div>
              </ai-card>
              <tags-manage v-if="currentTab=='0'&&baseInfo.id" v-bind="$props" :resident-id="baseInfo.id"/>
            </el-tab-pane>
            <el-tab-pane label="资产信息" lazy>
              <personal-assets v-if="currentTab==1&&baseInfo.id" :resident-id="baseInfo.id" v-bind="$props"/>
            </el-tab-pane>
            <el-tab-pane label="特殊人群" lazy v-if="hasSpecial">
              <ai-card v-for="(item, index) in baseInfo.tsrqInfos" :key="index" :title="item.applicationName">
                <ai-wrapper
                    slot="content"
                    label-width="120px">
                  <ai-info-item
                      v-for="(filed, i) in item.tableInfos"
                      :label="filed.fieldName"
                      :key="i"
                      :isLine="filed.grid === '1'">
                    <ai-file-list :fileList="formData[item.fieldDbName]" v-if="item.type == 'upload'"
                                  :fileOps="{name: 'name', size: 'fileSizeStr'}"></ai-file-list>
                    <div v-else>{{ filed.fieldValue || '-' }}</div>
                  </ai-info-item>
                </ai-wrapper>
              </ai-card>
            </el-tab-pane>
          </el-tabs>
          <template v-else>
            <ai-card title="基本信息">
              <template #content>
                <el-row type="flex">
                  <div class="fill">
                    <el-form-item label="姓名：" prop="name">
                      <el-input
                          v-model="baseInfo.name"
                          autocomplete="off"
                          size="small"
                          placeholder="请输入姓名"
                          maxlength="20"
                          show-word-limit/>
                    </el-form-item>
                    <el-form-item label="身份证号：" prop="idNumber">
                      <el-input v-model="baseInfo.idNumber" placeholder="请输入身份证号" :maxlength="18" show-word-limit
                                @change="idChange"/>
                    </el-form-item>
                    <el-form-item label="性别：" prop="sex">
                      <ai-select v-model="baseInfo.sex" :selectList="dict.getDict('sex')"/>
                    </el-form-item>
                  </div>
                  <el-form-item label="个人照片：" prop="photo" class="fill">
                    <ai-avatar :instance="instance" v-model="baseInfo.photo"/>
                  </el-form-item>
                </el-row>
                <el-row type="flex">
                  <div class="fill">
                    <el-form-item label="出生日期：">
                      <el-date-picker
                          disabled
                          :editable="false"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          format="yyyy-MM-dd"
                          v-model="baseInfo.birthday"
                          type="date"
                          placeholder="选择日期"
                      />
                    </el-form-item>
                    <el-form-item label="文化程度：" prop="education">
                      <ai-select v-model="baseInfo.education" :selectList="dict.getDict('education')"/>
                    </el-form-item>
                    <el-form-item label="政治面貌：" prop="politicsStatus">
                      <ai-select v-model="baseInfo.politicsStatus" :selectList="dict.getDict('politicsStatus')"/>
                    </el-form-item>
                    <el-form-item label="职业：" prop="job">
                      <ai-select v-model="baseInfo.job" :selectList="dict.getDict('job')"/>
                    </el-form-item>
                    <el-form-item label="宗教信仰：" prop="faithType">
                      <ai-select v-model="baseInfo.faithType" :selectList="dict.getDict('faithType')"/>
                    </el-form-item>
                  </div>
                  <div class="fill">
                    <el-form-item label="年龄：" prop="age">
                      <el-input
                          disabled
                          v-model="baseInfo.age"
                          autocomplete="off"
                          size="small"
                          placeholder="请输入年龄"
                          type="number"
                          @mousewheel.native.prevent
                      />
                      <!-- <p v-else>{{baseInfo.age}}</p> -->
                    </el-form-item>
                    <el-form-item label="民族：" prop="nation">
                      <ai-select v-model="baseInfo.nation" :selectList="dict.getDict('nation')"/>
                    </el-form-item>
                    <el-form-item label="婚姻状况：" prop="maritalStatus">
                      <ai-select v-model="baseInfo.maritalStatus" :selectList="dict.getDict('maritalStatus')"/>
                    </el-form-item>
                    <el-form-item label="兵役状况：" prop="militaryStatus">
                      <ai-select v-model="baseInfo.militaryStatus" :selectList="dict.getDict('militaryStatus')"/>
                    </el-form-item>
                  </div>
                </el-row>
                <el-form-item label="籍贯：" prop=" birthplaceAreaId">
                  <ai-area-select
                      clearable
                      always-show
                      :instance="instance"
                      v-model="baseInfo.birthplaceAreaId"
                      :areaLevel="3"
                  />
                </el-form-item>
              </template>
            </ai-card>
            <ai-card title="联络信息">
              <template #content>
                <el-form-item label="联系方式：" prop="phone">
                  <el-input v-model="baseInfo.phone" size="small" placeholder="请输入联系方式" :maxlength="11"
                            show-word-limit/>
                </el-form-item>
                <el-form-item label="现住址：" prop="currentAreaId">
                  <ai-area-select clearable always-show :instance="instance" :disabled-level="disabledLevel"
                                  v-model="baseInfo.currentAreaId" :valueLevel="4"/>
                  <el-form-item>
                    <el-input v-model="baseInfo.currentAddress" placeholder="详细地址" maxlength="30" show-word-limit
                              clearable/>
                  </el-form-item>
                </el-form-item>
              </template>
            </ai-card>
            <ai-card title="户籍信息">
              <template #content>
                <el-row type="flex">
                  <div class="fill">
                    <el-form-item label="是否户主：" prop="householdName">
                      <ai-select v-model="baseInfo.householdName" :selectList="dict.getDict('householdName')"
                                 @change="householdRelationChange"/>
                    </el-form-item>
                    <el-form-item label="与户主关系：" prop="householdRelation" v-if="baseInfo.householdName==0">
                      <ai-select v-model="baseInfo.householdRelation" :selectList="dict.getDict('householdRelation')"/>
                    </el-form-item>
                  </div>
                  <div class="fill">
                    <el-form-item label="户主身份证号：" prop="householdIdNumber" v-if="baseInfo.householdName==0">
                      <el-input v-model="baseInfo.householdIdNumber" placeholder="请输入户主身份证号" :maxlength="18"
                                clearable/>
                    </el-form-item>
                  </div>
                </el-row>
                <el-form-item label="户籍地：" prop="householdAreaId">
                  <ai-area-select clearable always-show :instance="instance" v-model="baseInfo.householdAreaId"/>
                  <el-form-item v-if="baseInfo.householdAreaId">
                    <el-input v-model="baseInfo.householdAddress" placeholder="详细地址" maxlength="30" show-word-limit
                              clearable/>
                  </el-form-item>
                </el-form-item>
              </template>
            </ai-card>
          </template>
        </el-form>
      </template>
      <template v-if="!showDetail" #footer>
        <el-button @click="back">取消</el-button>
        <el-button type="primary" @click="saveFrom()">保存</el-button>
      </template>
    </ai-detail>
    <el-dialog :visible.sync="familyDialog" width="720px" title="家庭成员信息" top="30vh">
      <el-row type="flex">
        <ai-wrapper class="fill" label-width="70px">
          <ai-info-item label="性别" :value="dict.getLabel('sex', familyInfo.sex)"/>
          <ai-info-item label="身份证号">
            <ai-id mode="show" v-model="familyInfo.idNumber" right-btn class="line-center"/>
          </ai-info-item>
          <ai-info-item label="出生日期" :value="familyInfo.birthday"/>
          <ai-info-item label="年龄" :value="familyInfo.age"/>
          <ai-info-item label="籍贯" :value="familyInfo.birthplaceAreaName"/>
          <ai-info-item label="民族" :value="dict.getLabel('nation', familyInfo.nation)"/>
          <ai-info-item label="文化程度" :value="dict.getLabel('education', familyInfo.education)"/>
          <ai-info-item label="婚姻状况" :value="dict.getLabel('maritalStatus', familyInfo.maritalStatus)"/>
          <ai-info-item label="政治面貌" :value="dict.getLabel('politicsStatus', familyInfo.politicsStatus)"/>
          <ai-info-item label="兵役状况" :value="dict.getLabel('militaryStatus', familyInfo.militaryStatus)"/>
          <ai-info-item label="宗教信仰" :value="dict.getLabel('faithType', familyInfo.faithType)"/>
          <ai-info-item label="职业" :value="dict.getLabel('faithType', familyInfo.job)"/>
          <ai-info-item label="现住址" isLine :value="[familyInfo.currentAreaName, familyInfo.currentAddress].join('')"/>
        </ai-wrapper>
        <ai-avatar v-model="familyInfo.imgUrl" :editable="false"/>
      </el-row>
      <div slot="footer" style="text-align: center;">
        <el-button style="width:92px" size="small" @click="familyDialog = false">关闭
        </el-button>
      </div>
    </el-dialog>
    <el-dialog title="档案注销" width="700px" top="25vh"
               :visible.sync="writeoffDialog"
               @close="familyInit()"
               :close-on-click-modal="false">
      <el-form :model="writeInfo" ref="writeInfo" label-width="100px" size="small">
        <el-form-item label="姓名：">{{ baseInfo.name }}</el-form-item>
        <el-form-item label="身份证号：">
          <ai-id mode="show" v-model="baseInfo.idNumber" right-btn/>
        </el-form-item>
        <el-form-item label="注销原因：" prop="logoutReason" autocomplete="off"
                      :rules="{required: true, message: '注销原因不能为空', trigger: 'change'}">
          <el-select v-model="writeInfo.logoutReason" placeholder="请选择">
            <el-option v-for="(item,i) in dict.getDict('logoutReason')"
                       :label="item.dictName"
                       :key="i" :value="item.dictValue"/>
          </el-select>
        </el-form-item>
        <el-form-item label="操作说明：" prop="logoutDescription" :rules="{ required: true, message: '操作说明不能为空'}">
          <el-input type="textarea" v-model="writeInfo.logoutDescription" :rows="4"/>
        </el-form-item>
      </el-form>
      <div slot="footer" style="text-align: center;">
        <el-button
            style="width:92px"
            size="small"
            class="delete-btn"
            @click="writeoffDialog=false,$refs.writeInfo.resetFields();"
        >取消
        </el-button>
        <el-button
            style="width:92px"
            size="small"
            type="primary"
            @click="submitForm('writeInfo')"
        >确认
        </el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import {mapState} from "vuex";
import AiEditCard from "./components/AiEditCard";
import PersonalAssets from "./components/personalAssets";
import TagsManage from "./components/tagsManage";

export default {
  name: "residentDetail",
  components: {TagsManage, PersonalAssets, AiEditCard},
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    name: {default: ""}
  },
  data() {
    let IdNumberPass = (rule, value, callback) => {
      if (value) {
        if (this.idCardNoUtil.checkIdCardNo(value)) {
          callback();
        } else {
          callback(new Error("身份证号格式错误"));
        }
      } else {
        callback(new Error("请输入身份证号"));
      }
    };
    return {
      buildingCascader: true,
      houseCascader: true,
      navId: 0,
      baseInfo: {
        registerStatus: "",
        tips: [],
        age: "",
        birthplaceAreaId: "",
        currentAddress: "",
        currentAreaId: "",
        education: "",
        faithType: "",
        fileStatus: "",
        householdAddress: "",
        householdAreaId: "",
        householdIdNumber: "",
        householdName: "",
        householdRelation: "",
        id: "",
        idNumber: "",
        job: "",
        logoutDescription: "",
        logoutReason: "",
        logoutTime: "",
        logoutUserId: "",
        maritalStatus: "",
        militaryStatus: "",
        name: "",
        nation: "",
        phone: "",
        photo: "",
        politicsStatus: "",
        sex: "",
        tsrqInfos: []
      },
      family: [],
      familyDialog: false,
      familyInfo: {},
      writeoffDialog: false,
      writeInfo: {
        id: "",
        logoutReason: "",
        logoutDescription: "",
        fileStatus: "1"
      },
      rules: {
        name: [{required: true, message: "请输入姓名", trigger: "blur"}],
        idNumber: [
          {required: true, validator: IdNumberPass, trigger: "blur"}
        ],
        sex: [{required: true, message: "请选择性别", trigger: "blur"}],
        currentAreaId: [{message: "请选择现住址", required: true, trigger: "blur"},
          {
            validator: (r, v, cb) => {
              if (/.+0{3}$/.test(v)) {
                cb("现住址必须选到村级")
              } else cb()
            }, trigger: "blur"
          }],
        currentAddress: [{message: "请选择现住址详细地址", required: true}],
        householdAreaId: [
          {
            validator: (r, v, cb) => {
              if (/.+0{3}$/.test(v) && v) {
                cb("户籍地必须选到村级")
              } else cb()
            }, trigger: "blur"
          }
        ],
        householdName: [
          {required: true, message: "请选择是否户主", trigger: "change"}
        ],
        householdRelation: [
          {required: true, message: "请选择与户主关系", trigger: "change"}
        ],
        householdIdNumber: [
          {required: true, validator: IdNumberPass, trigger: "blur"}
        ],
        householdAddress: [
          {required: true, message: "请选择户籍地详细地址", trigger: "blur"}
        ]
      },
      imgUrl: "",
      fileList: [],
      disabledLevel: 0,
      currentTab: "0"
    };
  },
  computed: {
    ...mapState(["user"]),
    showDetail() {
      return !!this.$route.query?.id
    },
    pageTitle() {
      let {name} = this
      return this.showDetail ? `${name}信息` : `添加${name}`
    },
    hasSpecial() {
      //是否有特殊人员信息
      return this.baseInfo.tsrqInfos?.length > 0
    },
    colConfigs() {
      return [
        {
          label: "与户主关系", align: 'center',
          render: (h, {row}) => h('p', this.dict.getLabel('householdRelation', row.householdRelation || "户主"))
        },
        {label: "姓名", prop: "name"},
        {label: "性别", prop: "sex", dict: "sex", align: 'center'},
        {label: "年龄", prop: "age", align: 'center'},
        {label: "身份证号", render: (h, {row}) => h('p', this.idCardNoUtil.hideId(row.idNumber))},
        {slot: "options"}
      ]
    }
  },
  methods: {
    back() {
      this.$router.push({query: {}})
    },
    householdRelationChange() {
      this.baseInfo.householdIdNumber = "";
      this.baseInfo.householdRelation = "";
    },
    saveFrom(cb) {
      this.$refs.ruleForm.validate(v => {
        if (v) {
          this.saveFromFn().then(() => {
            if (cb) {
              cb()
              this.getDetail()
            } else {
              this.back()
            }
          });
        }
      });
    },
    submitForm(formName) {
      this.writeInfo.id = this.baseInfo.id;
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.instance.post(`/app/appresident/addOrUpdate`, {
            ...this.writeInfo
          }).then(res => {
            if (res && res.code == 0) {
              this.$message.success("注销成功");
              this.writeoffDialog = false;
              this.$router.push({query: {}});
            }
          });
        } else {
          return false;
        }
      });
    },
    familyInit() {
      Object.keys(this.writeInfo).forEach(e => {
        this.writeInfo[e] = "";
      });
      this.$refs.writeInfo.resetFields();
    },
    saveFromFn() {
      let {currentHouseList, householdHouseList, tips} = this.baseInfo
      return this.instance.post(`/app/appresident/addOrUpdate`, {
        residentType: this.$route.query.type,
        ...this.baseInfo,
        currentHouseList: currentHouseList?.join("|"),
        householdHouseList: householdHouseList?.join("|"),
        tips: tips?.join("|")
      }).then(res => {
        if (res?.code == 0) {
          this.$message.success("保存成功");
        }
      })
    },
    getDetail() {
      let {id} = this.$route.query
      this.instance.post(`/app/appresident/detail`, null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          let {currentHouseList, householdHouseList, tips} = res.data.resident
          this.baseInfo = {
            ...res.data.resident,
            currentHouseList: currentHouseList?.split("|"),
            householdHouseList: householdHouseList?.split("|"),
            tips: tips ? tips.split("|") : [],
          };
          this.family = res.data.family;
          this.IdCard(this.baseInfo.idNumber);
        }
      });
    },
    showFamily(row) {
      this.familyInfo = row;
      if (this.familyInfo.photo) {
        this.familyInfo.imgUrl = this.familyInfo.photo.split(";")[0];
      } else {
        this.familyInfo.imgUrl = "";
      }
      this.familyDialog = true;
    },
    beforeWriteOff() {
      this.writeoffDialog = true;
    },
    handleDelete() {
      this.$confirm("删掉档案后，\n" +
          `<span class="username">${this.baseInfo.name}</span>` +
          "        的历史相关信息可能无法追溯查看，是否确定删除该人员档案？", {
        title: "档案删除"
      }).then(() => {
        this.instance.post(`/app/appresident/delete?ids=${this.baseInfo.id}`).then(res => {
          if (res && res.code == 0) {
            this.$message.success("删除成功");
            this.$router.push({query: {}});
          }
        });
      }).catch(() => 0)
    },
    idChange(val) {
      if (val.length == 18) {
        this.IdCard(val);
      }
    },
    IdCard(UUserCard) {
      if (UUserCard) {
        this.baseInfo.age = this.$calcAge(UUserCard)
        let {birthday, sex} = this.idCardNoUtil.getIdCardInfo(UUserCard)
        this.baseInfo.sex = sex
        this.baseInfo.birthday = birthday
      }
    }
  },
  created() {
    this.disabledLevel = this.user.info.areaMap[this.user.info.areaId].length;
    if (!this.showDetail) {
      // this.baseInfo.householdAreaId = JSON.parse(JSON.stringify(this.user.info.areaId))
      this.baseInfo.currentAreaId = JSON.parse(JSON.stringify(this.user.info.areaId))
      this.$nextTick(() => this.$refs.ruleForm?.resetFields())
    } else {
      this.getDetail(this.$route.query.id);
    }
  }
};
</script>
<style lang="scss" scoped>
.residentDetail {
  height: 100%;
  font-size: 14px;

  ::v-deep.el-tabs__content {
    max-height: calc(100vh - 176px);
    overflow-y: auto;

  }

  ::v-deep .AiID {
    line-height: unset;

    .el-button--text {
      padding: 0 8px;
      height: fit-content;
    }
  }

  ::v-deep .el-form-item {
    margin-bottom: 10px;

    .el-form-item {
      margin-top: 10px;
    }

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

  ::v-deep .el-form-item__error {
    position: static;
  }
}
</style>
