<template>
  <section class="tabsCard">
    <ai-list isTabs class="others">
      <template #tabs>
        <el-tabs v-model="currentTab">
          <el-tab-pane label="家庭成员" name="families" lazy>
            <ai-card title="家庭成员">
              <template #right v-if="editable">
                <el-button type="text" icon="iconfont iconAdd" @click="dialog.families=true">添加家庭成员</el-button>
              </template>
              <template #content>
                <el-table :data="form.families"
                          stripe
                          border
                          header-cell-class-name="table-header"
                          empty-text="家庭成员信息为空，点击标题右侧添加按钮进行添加">
                  <el-table-column align="center" prop="name" label="家属姓名" width="100">
                    <template slot-scope="scope">
                      <span>{{ scope.row.name || '-' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="身份证号" width="200">
                    <template slot-scope="{row}">
                      {{ row.idNumber ? row.idNumber.replace(/(\d{10})\d{6}(\d{2})/g, '$1******$2') : '-' }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="age" label="年龄" width="80">
                    <template slot-scope="scope">
                      <div>{{ $calcAge(scope.row.idNumber) || '-' }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="relateType" label="与本人关系" width="100">
                    <template slot-scope="scope">
                      <span>{{ dict.getLabel('householdRelation', scope.row.relateType) || '-' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="workUnit" label="工作单位及职位" width="184">
                    <template slot-scope="scope">
                      <span>{{ scope.row.workUnit || '-' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="操作">
                    <template slot-scope="{row,$index}" v-if="$permissions('app_appvillagecadresnew_edit')">
                      <el-button type="text" @click="handleEdit('families',row,$index)">编辑</el-button>
                      <el-button type="text" @click="handleDel('families',$index)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </ai-card>
          </el-tab-pane>
          <el-tab-pane label="任职经历" name="serves" lazy>
            <ai-card title="任职经历">
              <template #right v-if="editable">
                <el-button type="text" icon="iconfont iconAdd" @click="dialog.serves=true">添加任职经历</el-button>
              </template>
              <template #content>
                <el-table :data="form.serves" stripe border
                          header-cell-class-name="table-header"
                          empty-text="任职经历信息为空，点击标题右侧添加按钮进行添加">
                  <el-table-column
                      align="center"
                      prop="careerBeginTime"
                      label="任职时间"
                      width="113">
                    <template slot-scope="{row}">
                      {{ [getDateFormat(row.careerBeginTime), getDateFormat(row.careerEndTime)].join('至') }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="workAreaName" label="工作地点" width="144"/>
                  <el-table-column align="center" prop="workUnit" label="工作单位" width="150"/>
                  <el-table-column align="center" prop="position" label="职务" width="89">
                    <template slot-scope="scope">
                      <span>{{ dict.getLabel('partyPosition', scope.row.position) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="workContent"
                      label="主要工作内容"
                      width="168"
                  />
                  <el-table-column align="center" label="操作">
                    <template slot-scope="{row,$index}" v-if="$permissions('app_appvillagecadresnew_edit')">
                      <el-button type="text" @click="handleEdit('serves',row,$index)">编辑</el-button>
                      <el-button type="text" @click="handleDel('serves',$index)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </ai-card>
          </el-tab-pane>
          <el-tab-pane label="负面记录" name="negatives" lazy>
            <ai-card title="负面记录">
              <template #right v-if="editable">
                <el-button type="text" icon="iconfont iconAdd" @click="dialog.negatives=true">添加负面记录</el-button>
              </template>
              <template #content>
                <el-table :data="form.negatives" stripe border
                          header-cell-class-name="table-header"
                          empty-text="负面记录为空，点击标题右侧添加按钮进行添加">
                  <el-table-column align="center" prop="punishTime" label="处罚日期" width="144">
                    <template slot-scope="{row}">
                      {{ getDateFormat(row.punishTime) }}
                    </template>
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="punishContent"
                      label="处罚事由"
                      width="242"/>
                  <el-table-column align="center" prop="createTime" label="登记日期" width="141">
                    <template slot-scope="{row}">
                      {{ getDateFormat(row.createTime) }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="createUser" label="登记人" width="137">
                    <template slot-scope="scope">
                      <span>{{ scope.row.createUser || '-' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="操作">
                    <template slot-scope="{row,$index}" v-if="$permissions('app_appvillagecadresnew_edit')">
                      <el-button type="text" @click="handleEdit('negatives',row,$index)">编辑</el-button>
                      <el-button type="text" @click="handleDel('negatives',$index)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </ai-card>
          </el-tab-pane>
          <el-tab-pane label="年度考核" name="assessments" lazy>
            <ai-card title="年度考核">
              <template #right v-if="editable">
                <el-button type="text" icon="iconfont iconAdd" @click="dialog.assessments=true">添加考核评价</el-button>
              </template>
              <template #content>
                <el-table
                    :data="form.assessments"
                    stripe
                    border
                    header-cell-class-name="table-header"
                    empty-text="考核信息为空，点击标题右侧添加按钮进行添加">
                  <el-table-column align="center" prop="year" label="考核年度" width="120">
                    <template slot-scope="scope">
                      <span>{{ scope.row.year }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="assessmentResult"
                      label="评价结果"
                      width="160"
                  >
                    <template slot-scope="scope">
                          <span>{{
                              dict.getLabel('appVillageCadresAssessmentResult', scope.row.assessmentResult) || '-'
                            }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="remark" label="备注" width="384"/>
                  <el-table-column align="center" label="操作">
                    <template slot-scope="{row,$index}" v-if="$permissions('app_appvillagecadresnew_edit')">
                      <el-button type="text" @click="handleEdit('assessments',row,$index)">编辑</el-button>
                      <el-button type="text" @click="handleDel('assessments',$index)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </ai-card>
          </el-tab-pane>
        </el-tabs>
      </template>
    </ai-list>
    <ai-dialog :visible.sync="dialog.families" title="家庭成员" width="720px" @onConfirm="handleSubmit('families')"
               @closed="familiesForm={}">
      <el-form :rules="rules" ref="familiesForm" :model="familiesForm" size="small" label-width="140px">
        <el-form-item label="家属姓名：" prop="name">
          <el-input v-model="familiesForm.name" placeholder="请输入家属姓名" maxlength="15"/>
        </el-form-item>
        <el-form-item label="身份证号：">
          <el-input placeholder="请输入身份证号" clearable
                    v-model="familiesForm.idNumber" maxlength="18"
                    @change="familiesForm.age=$calcAge(familiesForm.idNumber)"/>
        </el-form-item>
        <el-form-item label="与本人关系：">
          <ai-select v-model="familiesForm.relateType" :selectList="dict.getDict('householdRelation')"/>
        </el-form-item>
        <el-form-item label="工作单位及职位：">
          <el-input v-model="familiesForm.workUnit" placeholder="请输入工作单位及职位" clearable/>
        </el-form-item>
      </el-form>
    </ai-dialog>
    <ai-dialog :visible.sync="dialog.serves" title="任职经历" width="800px" @onConfirm="handleSubmit('serves')"
               @closed="servesForm={}">
      <el-form :rules="rules" ref="servesForm" :model="servesForm" size="small" label-width="120px">
        <el-form-item label="任职时间：" required>
          <el-form-item prop="careerBeginTime" class="mar-b0">
            <el-date-picker
                v-model="servesForm.careerBeginTime"
                type="date"
                placeholder="选择开始日期"
                class="input-172 mar-r16"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item prop="careerEndTime" class="mar-b0">
            <el-date-picker
                v-model="servesForm.careerEndTime"
                type="date"
                placeholder="选择结束日期"
                class="input-172"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-form-item>
        <el-form-item label="工作地点：" prop="workAreaId" class="area">
          <ai-area-select placeholder="请选择工作地点"
                          clearable
                          @fullname="v=>servesForm.workAreaName=v"
                          always-show
                          :instance="instance"
                          v-model="servesForm.workAreaId"/>
        </el-form-item>
        <el-form-item label="工作单位：" prop="workUnit">
          <el-input v-model="servesForm.workUnit" placeholder="请输入工作单位" clearable/>
        </el-form-item>
        <el-form-item label="职务：" prop="position" class="user select-240">
          <ai-select v-model="servesForm.position" :selectList="dict.getDict('partyPosition')"/>
        </el-form-item>
        <el-form-item label="主要工作内容：" prop="workContent" class="user mar-b0">
          <el-input v-model="servesForm.workContent" placeholder="请输入主要工作内容" clearable/>
        </el-form-item>
      </el-form>
    </ai-dialog>
    <ai-dialog :visible.sync="dialog.negatives" title="负面记录" width="720px" @onConfirm="handleSubmit('negatives')"
               @closed="negativesForm={}">
      <el-form :rules="rules" ref="negativesForm" :model="negativesForm" size="small" label-width="100px">
        <el-form-item label="处罚日期" prop="punishTime">
          <el-date-picker placeholder="选择处罚日期"
                          v-model="negativesForm.punishTime"
                          type="date"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          format="yyyy-MM-dd"/>
        </el-form-item>
        <el-form-item label="处罚事由" prop="punishContent">
          <el-input v-model="negativesForm.punishContent" placeholder="请输入处罚事由" clearable/>
        </el-form-item>
      </el-form>
    </ai-dialog>
    <ai-dialog :visible.sync="dialog.assessments" title="年度考核" width="720px" @onConfirm="handleSubmit('assessments')"
               @closed="assessmentsForm={}">
      <el-form :rules="rules" ref="assessmentsForm" :model="assessmentsForm" size="small" label-width="100px">
        <el-form-item label="考核年度：" prop="year">
          <el-input v-model="assessmentsForm.year" placeholder="请输入" clearable/>
        </el-form-item>
        <el-form-item label="评价结果：" prop="assessmentResult">
          <ai-select v-model="assessmentsForm.assessmentResult"
                     :selectList="dict.getDict('appVillageCadresAssessmentResult')"/>
        </el-form-item>
        <el-form-item label="备注：" prop="remark">
          <el-input v-model="assessmentsForm.remark" placeholder="请输入备注" clearable/>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </section>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "tabsCard",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    form: {
      default: () => {
      }
    },
    editable: Boolean
  },
  computed: {
    ...mapState(['user']),
    rules() {
      const IdNumberPass = (rule, value, callback) => {
        const IDREG = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
        if (value) {
          if (IDREG.test(value)) {
            callback();
          } else {
            callback(new Error("身份证号格式错误"));
          }
        } else {
          callback(new Error("请填写身份证号"));
        }
      };
      ///结束时间
      const endTimePass = (rule, value, callback) => {
        if (value) {
          if (this.$moment(value).unix() - this.$moment(this.servesForm.careerBeginTime).unix() > 0) {
            callback();
          } else {
            callback(new Error("结束时间要大于开始时间"));
          }
        } else {
          callback(new Error("请填写结束时间"));
        }
      };
      return {
        careerBeginTime: [
          {required: true, message: "请选择任职开始时间", trigger: "blur"}
        ],
        careerEndTime: [
          {required: true, validator: endTimePass, trigger: "blur"}
        ],
        workAreaId: [
          {required: true, message: "请选择工作地点", trigger: "blur"}
        ],
        workUnit: [
          {required: true, message: "请输入工作单位", trigger: "blur"}
        ],
        position: [{required: true, message: "请选择职务", trigger: "blur"}],
        workContent: [
          {required: true, message: "请输入主要工作内容", trigger: "blur"}
        ],
        punishTime: [
          {required: true, message: "请选择处罚日期", trigger: "blur"}
        ],
        punishContent: [
          {required: true, message: "请输入处罚事由", trigger: "blur"}
        ],
        name: [{required: true, message: "请输入家属姓名", trigger: "blur"}],
        idNumber: [
          {required: true, validator: IdNumberPass, trigger: "blur"}
        ],
        relateType: [
          {required: true, message: "请选择与本人关系", trigger: "change"}
        ],
        remark: [{required: true, message: "请输入备注", trigger: "blur"}],
        assessmentResult: [
          {required: true, message: "请输入评价结果", trigger: "blur"}
        ],
        year: [{required: true, message: "请输入考核年度", trigger: "blur"}]
      }
    }
  },
  data() {
    return {
      currentTab: 'families',
      dialog: {families: false, serves: false, negatives: false, assessments: false},
      familiesForm: {},
      servesForm: {},
      negativesForm: {},
      assessmentsForm: {}
    }
  },
  methods: {
    getDateFormat(v) {
      return this.$moment(v).format('YYYY-MM-DD')?.replace("Invalid Date", "-")
    },
    handleDel(prop, index) {
      let origin = JSON.parse(JSON.stringify(this.form))
      origin?.[prop]?.splice(index, 1)
      this.$emit('update:form', origin)
    },
    handleEdit(prop, row, index) {
      this[`${prop}Form`] = JSON.parse(JSON.stringify({...row, index}))
      this.dialog[prop] = true
    },
    handleSubmit(prop) {
      this.$refs?.[`${prop}Form`]?.validate(v => {
        if (v) {
          let origin = JSON.parse(JSON.stringify(this.form)),
              form = this[`${prop}Form`]
          if (form?.index > -1) {
            origin?.[prop]?.splice(form.index, 1, form)
          } else {
            origin?.[prop]?.push(form)
          }
          form.createUser = this.user.info.name
          this.$emit('update:form', origin)
          this.dialog[prop] = false
        }
      })
    }
  },
  created() {
    this.dict.load('appVillageCadresAssessmentResult', 'partyPosition', 'householdRelation')
  }
}
</script>

<style lang="scss" scoped>
.tabsCard {
  ::v-deep .others {
    padding: 0;

    .el-tabs__content {
      padding: 10px 1px 0;
    }
  }
}
</style>
