<template>
  <ai-detail class="functionaryDetail">
    <ai-title slot="title" :title="detailTitle" isShowBottomBorder isShowBack @onBackClick="$router.push({})">
      <template #rightBtn>
        <el-row type="flex" align="middle" class="operationBtns">
          <el-button icon="iconfont iconEdit" type="primary"
                     @click="$router.replace({query:$route.query,hash:'#add'})">编辑
          </el-button>
          <el-button icon="iconfont iconPerson_Transfered" v-if="$permissions('app_appvillagecadresnew_edit')&&!hasOut"
                     @click="handleOutgoing">
            离任
          </el-button>
          <el-button icon="iconfont iconPrint" @click="handlePrint()" v-if="form.status == 1">打印档案
          </el-button>
          <el-button icon="iconfont iconLogout" type="danger" plain @click="handleLogout" v-if="form.status == 1">
            注销档案
          </el-button>
          <el-button icon="iconfont iconDelete" type="danger" plain @click="handleDelFile"
                     v-if="$permissions('app_appvillagecadresnew_del')">
            删除人员
          </el-button>
        </el-row>
      </template>
    </ai-title>
    <template #content>
      <ai-card :title="form.name">
        <template #content>
          <el-row type="flex" justify="space-between">
            <ai-wrapper>
              <ai-info-item label="性别" :value="dict.getLabel('sex', form.gender)"/>
              <ai-info-item label="身份证号">
                <ai-id mode="show" v-model="form.idNumber" right-btn/>
              </ai-info-item>
              <ai-info-item label="出生日期" :value="getDateFormat(form.birthday)"/>
              <ai-info-item label="年龄" :value="form.age"/>
              <ai-info-item label="联系方式" :value="form.phone"/>
              <ai-info-item label="民族" :value="dict.getLabel('nation', form.nation)"/>
              <ai-info-item label="文化程度" :value="dict.getLabel('education_village_rc', form.educationLevel)"/>
              <ai-info-item label="政治面貌" :value="dict.getLabel('politicsStatus', form.politicalStatus)"/>
              <ai-info-item label="入党时间" :value="getDateFormat(form.membershipTime)"/>
              <ai-info-item label="参加工作时间" :value="getDateFormat(form.jobTime)"/>
              <ai-info-item label="健康状况" :value="dict.getLabel('healthCondition', form.healthCondition)"/>
              <ai-info-item label="职称" :value="form.jobTitle"/>
            </ai-wrapper>
            <ai-avatar v-model="form.avatarUrl" :editable="false"/>
          </el-row>
          <ai-wrapper>
            <ai-info-item isLine label="籍贯" :value="form.areaName"/>
            <ai-info-item isLine label="现住址" :value="[form.currentAreaName,form.currentAddress].join('')"/>
          </ai-wrapper>
        </template>
      </ai-card>
      <ai-card title="学历信息">
        <template #content>
          <el-table
              :data="form.educations"
              stripe
              style="width: 100%"
              border
              header-cell-class-name="table-header"
              align="center"
          >
            <el-table-column
                align="center"
                prop="educationType"
                label="学历类型"
                width="119"
                clearable
            >
              <template slot-scope="scope">
                <span>{{ dict.getLabel("appVillageCadresEducationType", scope.row.educationType) || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="educationLevel" label="学历" width="100">
              <template slot-scope="scope">
                <span>{{ dict.getLabel("education_village_rc", scope.row.educationalLevel) || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="graduatedSchool" label="毕业院校" width="200">
              <template slot-scope="scope">
                <div>{{ scope.row.graduatedSchool || '-' }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="learnProfession" label="专业" width="160">
              <template slot-scope="scope">
                <span>{{ scope.row.learnProfession || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="graduationTime" label="毕业时间" width="100">
              <template slot-scope="scope">
                <span>{{ (scope.row.graduationTime) ? (scope.row.graduationTime).substring(0, 10) : '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope" v-if="$permissions('app_appvillagecadresnew_edit')">
                      <span
                          class="iconfont iconEdit"
                          @click="editServingxl(scope)"
                          style="cursor: pointer;margin-right:8px"
                      />
                <span
                    class="el-icon-delete"
                    @click="delServingxl(scope)"
                    style="cursor: pointer"
                />
              </template>
            </el-table-column>
          </el-table>
        </template>
      </ai-card>
      <ai-card title="职务信息">
        <template #content>
          <ai-wrapper label-width="220px">
            <ai-info-item label="任职地区" :value="form.workAreaName" isLine/>
            <ai-info-item label="任职时间" :value="getDateFormat(form.workTime)"/>
            <ai-info-item label="职务类别" :value="dict.getLabel('cadrePositionType', form.positionType)"/>
            <ai-info-item label="镇街下派 是否下派" :value="dict.getLabel('yesOrNo', form.isSubordinate)"/>
            <ai-info-item label="大学生村官 是否任职" :value="dict.getLabel('yesOrNo', form.isCollegeOfficer)"/>
            <ai-info-item label="村(居)委会委员 是否任职" :value="dict.getLabel('yesOrNo', form.isVillageMember)"/>
            <ai-info-item label="担任职务"
                          :value="dict.getLabel('appVillageMemberPosition1', form.villageMemberPosition1)"/>
            <ai-info-item label="支委委员 是否任职" :value="dict.getLabel('yesOrNo', form.isBranchMember)"/>
            <ai-info-item label="担任职务" :value="dict.getLabel('appBranchMemberPosition1', form.branchMemberPosition1)"/>
            <ai-info-item label="村(居)务监督委员会成员 是否任职" :value="dict.getLabel('yesOrNo', form.isVillageSupervision)"/>
            <ai-info-item label="担任职务"
                          :value="dict.getLabel('appVillageSupervisionPosition1', form.villageSupervisionPosition1)"/>
            <ai-info-item label="专职干部 是否任职" :value="dict.getLabel('yesOrNo', form.isFulltimeCadres)"/>
            <ai-info-item label="担任职务"
                          :value="dict.getLabel('appFulltimeCadresPosition1', form.fulltimeCadresPosition1)"/>
            <ai-info-item label="担任时间" :value="form.fulltimeCadresTime" isLine/>
            <ai-info-item label="团支部书记 是否任职" :value="dict.getLabel('yesOrNo', form.isLeagueSecretary)"/>
            <ai-info-item label="妇联主席 是否任职" :value="dict.getLabel('yesOrNo', form.isWomenChairman)"/>
            <ai-info-item label="民兵连长 是否任职" :value="dict.getLabel('yesOrNo', form.isMilitiaCommander)"/>
            <ai-info-item label="村(居)民小组长 是否任职" :value="dict.getLabel('yesOrNo', form.isVillageLeader)"/>
            <ai-info-item label="网格员 是否任职" :value="dict.getLabel('yesOrNo', form.isGridman)"/>
            <ai-info-item label="本土人才 是否任职" :value="dict.getLabel('yesOrNo', form.isLocalTalent)"/>
            <ai-info-item label="异地任职 是否任职" :value="dict.getLabel('yesOrNo', form.isWorkDifferent)"/>
            <ai-info-item label="专业技术职务" :value="form.expertisePosition"/>
            <ai-info-item label="熟悉专业有何专长" :value="form.professionalExpertise"/>
            <ai-info-item label="其他职务" :value="form.workDifferent"/>
          </ai-wrapper>
        </template>
      </ai-card>
      <tabs-card :instance="instance" :dict="dict" :permissions="permissions" :form.sync="form"/>
      <print-tpl v-if="print" :info="form" :dict="dict"/>
    </template>
  </ai-detail>
</template>

<script>
import printJS from "print-js";
import PrintTpl from "./printTpl";
import TabsCard from "./tabsCard";

export default {
  name: "functionaryDetail",
  components: {TabsCard, PrintTpl},
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
  },
  data() {
    return {
      form: {
        educations: []
      },
      print: false,
    }
  },
  computed: {
    detailTitle() {
      return !this.isEdit ? '添加干部档案' : '干部档案资料'
    },
    isEdit() {
      return !!this.$route.query.id
    },
    hasOut() {
      return this.form.outStatus != 0
    },
  },
  methods: {
    getDetail() {
      let {id} = this.$route.query
      this.instance.post(`/app/appvillagecadresnew/queryDetailById`, null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          let {idNumber, enterPartyTime, enterWorkTime} = res.data
          let {birthday} = this.idCardNoUtil.getIdCardInfo(idNumber)
          this.form = {
            ...res.data, birthday,
            enterPartyTimeShow: this.getDateFormat(enterPartyTime),
            enterWorkTimeShow: this.getDateFormat(enterWorkTime),
            age: this.$calcAge(idNumber)
          }
        }
      })
    },
    getDateFormat(v) {
      return this.$moment(v).format('YYYY-MM-DD')?.replace("Invalid Date", "-")
    },
    handleOutgoing() {
      let submitOutgoing = (outStatus) => {
        let {id} = this.$route.query
        id && this.instance.post("/app/appvillagecadresnew/outgoing", null, {
          params: {id, outStatus}
        }).then(res => {
          if (res?.code == 0) {
            this.$message.success("修改成功!")
            this.$router.push({})
          }
        })
      }
      this.$confirm("请选择一种离任方式", {
        distinguishCancelAndClose: true,
        confirmButtonText: '正常离任',
        cancelButtonText: '非正常离任'
      }).then(() => {
        submitOutgoing(1)
      }).catch(err => {
        if (err == 'cancel') {
          submitOutgoing(2)
        }
      })
    },
    handlePrint() {
      this.print = true;
      setTimeout(() => {
        printJS({
          printable: "printAll",
          type: "html",
          targetStyles: "*"
        })
      }, 1000)
    },
    handleLogout() {
      this.$confirm(
          `<div class="title_del">注销后，<span style="color:#26f">${[
            this.form.name,
            this.form.phone
          ].join("-")}</span>的历史数据将会保留，是否确定注销该人员档案？</div>`,
          {
            title: "档案注销"
          }
      ).then(() => {
        let {id} = this.form
        this.instance.post(`/app/appvillagecadresnew/cancellation`, null, {
          params: {id, status: 0}
        }).then(res => {
          if (res?.code == 0) {
            this.$message({message: "注销档案成功", type: "success"});
            this.$router.push({})
          }
        });
      }).catch(() => 0);
    },
    handleDelFile() {
      this.$confirm(
          `<div class="title_del">删除后，<span style="color:#26f">${[
            this.form.name,
            this.form.phone
          ].join("-")}
          </span>的历史相关信息可能无法追溯查看，是否确定删除该人员档案？</div>`,
          {
            type: "error",
            title: "档案删除"
          }
      ).then(() => {
        let {id: ids} = this.form
        this.instance.post(`/app/appvillagecadresnew/delete`, null, {
          params: {ids}
        })
        .then(res => {
          if (res?.code == 0) {
            this.$message.success("干部档案删除成功");
            this.$router.push({})
          }
        })
      }).catch(() => 0)
    },
  },
  created() {
    this.dict.load(
        "education_village_rc",
        "cadrePositionType",
        "healthCondition",
        "politicsStatus",
        "householdRelation",
        "presentPost",
        "partyPosition",
        "sex",
        "faithType",
        "nation",
        "appVillageSubsidyForm",
        "yesOrNo",
        "appFulltimeCadresPosition1",
        "appVillageCadresAssessmentResult",
        "appVillageSupervisionPosition1",
        "appBranchMemberPosition1",
        "appVillageCadresEducationType",
        "appVillageMemberPosition1",
    )
    this.isEdit && this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
.functionaryDetail {
  height: 100%;
  position: relative;

  ::v-deep .ai-info-item {
    line-height: 32px;
  }
}
</style>
