<template>
  <ai-detail class="residentDetail">
    <ai-title slot="title" :title="pageTitle" isShowBack @onBackClick="back" isShowBottomBorder>
      <template v-if="params.type === 'Detail'" #rightBtn>
        <el-button icon="iconfont iconDelete" @click="handleDelete()">
          删除人员
        </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">
        <template v-if="params.type === 'Detail'">
            <ai-edit-card slot="" :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"
                          placeholder="请输入姓名"
                          maxlength="20"
                          :disabled="isEdit"
                          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" :disabled="isEdit"/>
                    </el-form-item>
                    <el-form-item label="性别：" prop="sex">
                      <ai-select v-model="baseInfo.sex" :selectList="dict.getDict('sex')" :disabled="isEdit"/>
                    </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>
                <ai-card title="基本信息">
                  <ai-wrapper class="fill" slot="content">
                    <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"/>
                </ai-card>
              </template>
            </ai-edit-card>
            <ai-edit-card title="联络信息"
                          @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-card title="联络信息" type="flex">
                  <ai-wrapper slot="content">
                    <ai-info-item label="联系方式" :value="baseInfo.phone"/>
                    <ai-info-item label="现住址" isLine
                                  :value="[baseInfo.currentAreaName, baseInfo.currentAddress].join('')"/>
                  </ai-wrapper>
                </ai-card>
              </template>
            </ai-edit-card>
            <ai-edit-card title="户籍信息"
                          @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-card title="户籍信息">
                  <ai-wrapper slot="content">
                    <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('')"/>
                  </ai-wrapper>
                </ai-card>
              </template>
            </ai-edit-card>
        </template>
        <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 />
                  </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
                      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
                      v-model="baseInfo.age"
                      size="small"
                      placeholder="请输入年龄"
                      type="number"
                    />
                    <!-- <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>
              <el-form-item label="所属网格" prop="girdName" required>
                <ai-picker
                  :instance="instance"
                  dialogTitle="选择所属网格"
                  :ops="{label: 'girdName', id: 'id'}"
                  pageTitle="所属网格"
                  :action="'/app/appgirdinfo/girdList'"
                  v-model="baseInfo.girdId"
                  @pick="onPick">
                  <div class="AppAnnounceDetail-select">
                    <el-input size="small" class="AppAnnounceDetail-select__input" placeholder="请选择..." disabled v-model="baseInfo.girdName"></el-input>
                    <div class="select-left" v-if="girdList.length">
                      <span v-for="(item, index) in girdList" :key="index">{{ item.girdName }}</span>
                    </div>
                    <i v-if="!girdList.length">请选择网格</i>
                    <div class="select-right">{{ girdList.length ? '重新选择' : '选择网格' }}</div>
                  </div>
                </ai-picker>
              </el-form-item>
            </template>
          </ai-card>
          <ai-card title="户籍信息">
            <template #content>
              <el-row type="flex">
                <div class="fill">
                  <el-form-item label="是否户主：" prop="isHousehold">
                    <ai-select v-model="baseInfo.isHousehold" :selectList="dict.getDict('householdName')"
                                @change="householdRelationChange"/>
                  </el-form-item>
                  <el-form-item label="与户主关系：" prop="householdRelation" v-if="baseInfo.isHousehold==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.isHousehold==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="params.type !== 'Detail'" #footer>
      <el-button @click="back">取消</el-button>
      <el-button type="primary" @click="saveFrom()">保存</el-button>
    </template>
  </ai-detail>
</template>
<script>
import {mapState} from "vuex";
import {ID} from "dui/lib/js/utils";

export default {
  name: "Add",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    params: Object,
    name: {default: ""}
  },
  data() {
    let IdNumberPass = (rule, value, callback) => {
      if (value) {
        if (ID.check(value)) {
          callback();
        } else {
          callback(new Error("身份证号格式错误"));
        }
      } else {
        callback(new Error("请输入身份证号"));
      }
    };
    return {
      buildingCascader: true,
      houseCascader: true,
      navId: 0,
      girdList: [],
      baseInfo: {
        registerStatus: "",
        tips: [],
        age: "",
        girdName: '',
        girdId: [],
        birthplaceAreaId: "",
        currentAddress: "",
        currentAreaId: "",
        education: "",
        faithType: "",
        fileStatus: "",
        householdAddress: "",
        householdAreaId: "",
        householdIdNumber: "",
        isHousehold: "",
        householdRelation: "",
        id: "",
        idNumber: "",
        job: "",
        logoutDescription: "",
        logoutReason: "",
        logoutTime: "",
        logoutUserId: "",
        maritalStatus: "",
        militaryStatus: "",
        name: "",
        nation: "",
        phone: "",
        photo: "",
        politicsStatus: "",
        sex: "",
        tsrqInfos: []
      },
      family: [],
      familyInfo: {},
      writeInfo: {
        id: "",
        logoutReason: "",
        logoutDescription: "",
        fileStatus: "1"
      },
      rules: {
        name: [{required: true, message: "请输入姓名", trigger: "blur"}],
        idNumber: [
          {required: true, message: "请输入身份证号", trigger: "blur"}
        ],
        sex: [{required: true, message: "请选择性别", trigger: "change"}],
        currentAreaId: [{message: "请选择现住址", required: true, trigger: "change"},
          {
            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"
          }
        ],
        phone: [
          {required: true, message: "请输入联系方式", trigger: "blur"}
        ],
        girdName: [
          {required: true, message: "请选择网格", trigger: "change"}
        ],
        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"]),
    isEdit() {
      return this.params.type === 'Edit'
    },
    pageTitle() {
      return {
        Edit: '编辑居民信息',
        Add: '添加居民信息',
        Detail: '居民信息详情'
      }[this.params.type]
    },
    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', ID.hideId(row.idNumber))},
        {slot: "options"}
      ]
    }
  },
  methods: {
    back() {
      this.$emit('change', {
        type: 'List'
      })
    },
    onPick (e) {
      if (e.length) {
        this.baseInfo.girdName = e[0].girdName
      } else {
        this.baseInfo.girdName = ''
        this.baseInfo.girdId = []
      }

      this.girdList = e
    },
    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()
            }
          });
        }
      });
    },

    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/appresidentapplet/addOrUpdate`, {
        residentType: this.$route.query.type,
        ...this.baseInfo,
        currentHouseList: currentHouseList?.join("|"),
        householdHouseList: householdHouseList?.join("|"),
        tips: tips?.join("|"),
        girdId: this.baseInfo.girdId[0]
      }).then(res => {
        if (res?.code == 0) {
          this.$message.success("保存成功");
        }
      })
    },
    getDetail() {
      this.instance.post(`/app/appresidentapplet/queryDetailById?id=${this.params.id}`).then(res => {
        if (res?.data) {
          this.baseInfo = {
            ...res.data,
            girdId: [res.data.girdId]
          };
          this.girdList = [{
            id: res.data.girdId,
            girdName: res.data.girdName
          }]
        }
      });
    },
    handleDelete() {
      this.$confirm("删掉档案后，\n" +
          `<span class="username">${this.baseInfo.name}</span>` +
          "        的历史相关信息可能无法追溯查看，是否确定删除该人员档案？", {
        title: "档案删除"
      }).then(() => {
        this.instance.post(`/app/appresidentapplet/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) {
        const idCard = new ID(UUserCard)
        this.baseInfo.age = idCard.age
        this.baseInfo.sex = idCard.sex
        this.baseInfo.birthday = idCard.birthday
      }
    }
  },
  created() {
    this.disabledLevel = this.user.info.areaMap[this.user.info.areaId].length;
    if (!this.params.id) {
      // 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.params.id);
    }
  }
};
</script>
<style lang="scss" scoped>
.residentDetail {
  font-size: 14px;
    .AppAnnounceDetail-select {
      display: flex;
      align-items: center;
      min-height: 32px;
      line-height: 1;
      background: #F5F5F5;
      border-radius: 4px;
      border: 1px solid #D0D4DC;
      cursor: pointer;
      overflow: hidden;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

      &:hover {
        border-color: #26f;
      }

      & > i {
        flex: 1;
        height: 100%;
        line-height: 32px;
        padding: 0 12px;
        color: #888888;
        font-size: 14px;
        font-style: normal;
        border-right: 1px solid #D0D4DC;
        background: #fff;
      }

      .AppAnnounceDetail-select__input {
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        opacity: 0;
        height: 100%;
      }

      .select-right {
        height: 100%;
        padding: 0 12px;
        color: #222222;
        font-size: 12px;
        cursor: pointer;
        transition: all ease 0.3s;

        &:hover {
          opacity: 0.5;
        }
      }

      .select-left {
        display: flex;
        flex-wrap: wrap;
        flex: 1;
        padding: 5px 0 0px 12px;
        border-right: 1px solid #D0D4DC;
        border-radius: 4px 0 0 4px;
        background: #fff;

        em {
          height: 22px;
          line-height: 22px;
          margin: 0 4px 5px 0;
          color: #222222;
          font-size: 12px;
          font-style: normal;
        }

        span {
          height: 22px;
          line-height: 22px;
          margin: 0 4px 5px 0;
          padding: 0 8px;
          font-size: 12px;
          color: #222222;
          background: #F3F4F7;
          border-radius: 2px;
          border: 1px solid #D0D4DC;
        }
      }
    }
  :deep( .AiID ){
    line-height: unset;

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

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

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

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

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