<template>
  <div class="app-container">

    <!-- 搜索区域 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="单位名称" prop="companyName">
        <el-input v-model="queryParams.companyName" placeholder="请输入单位名称" clearable style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="合同名称" prop="contractName">
        <el-input v-model="queryParams.contractName" placeholder="请输入合同名称" clearable style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="queryParams.userName" placeholder="请输入用户名" clearable style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="姓名" prop="nickName">
        <el-input v-model="queryParams.nickName" placeholder="请输入姓名" clearable style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="手机号" prop="phonenumber">
        <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号" clearable style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="办公室" prop="officeName">
        <el-input v-model="queryParams.officeName" placeholder="请输入办公室" clearable style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="最高学历" prop="highestQualification">
        <el-select v-model="queryParams.highestQualification" placeholder="最高学历" style="width: 240px" clearable>
          <el-option v-for="dict in dict.type.per_qualification" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="最高学位" prop="highestDegree">
        <el-select v-model="queryParams.highestDegree" placeholder="最高学历" style="width: 240px" clearable>
          <el-option v-for="dict in dict.type.per_degree" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="党员" prop="partyMember">
        <el-select v-model="queryParams.partyMember" placeholder="请选择" clearable style="width: 240px">
          <el-option label="是" value="1" />
          <el-option label="否" value="0" />
          <el-option label="未知" value="" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮区域 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['resource:person:export']">导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-position" size="mini" @click="openFlow"
          v-hasPermi="['resource:person:flowAdd']">新建人员工单</el-button>
      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 表格区域 -->
    <el-table v-loading="loading" :data="personList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="姓名" align="center" prop="nickName">
        <template slot-scope="scope">
          <el-link type="primary" @click="handleDetail(scope.row)">{{ scope.row.nickName }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="单位名称" align="center" prop="companyName" width="260" class="nowrap">
        <template slot-scope="scope">
          {{ scope.row.companyName || '--' }}
        </template>
      </el-table-column>
      <el-table-column label="合同简称" align="center" prop="contractNameShort" min-width="200" class="nowrap">
      </el-table-column>
      <el-table-column label="用户名" align="center" prop="userName" min-width="130">
        <template slot-scope="scope">
          {{ scope.row.userName || '--' }}
        </template>
      </el-table-column>
      <el-table-column label="身份证号" align="center" prop="cardId" width="180">
        <template slot-scope="scope">
          {{ scope.row.cardId.replace(/^(.{6})(?:\d+)(.{2})$/, "$1**********$2") || '--' }}
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center" prop="sex" width="55">
        <template slot-scope="scope">
          <el-tag :type="scope.row.sex === '0' ? '' : 'danger'" effect="dark"> {{ scope.row.sex === '0' ? '男' : '女'
            }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="手机号码" align="center" prop="phonenumber" width="120">
        <template slot-scope="scope">
          {{ scope.row.phonenumber || '--' }}
        </template>
      </el-table-column>
      <el-table-column label="座机" align="center" prop="telphonenumber" width="120">
        <template slot-scope="scope">
          {{ scope.row.telphonenumber || '--' }}
        </template>
      </el-table-column>
      <el-table-column label="邮箱" align="center" prop="email" width="120">
        <template slot-scope="scope">
          {{ scope.row.email || '--' }}
        </template>
      </el-table-column>
      <el-table-column label="考勤机编码" align="center" prop="checkOnNumber" width="100">
        <template slot-scope="scope">
          {{ scope.row.checkOnNumber || '--' }}
        </template>
      </el-table-column>
      <el-table-column label="办公室" align="center" prop="officeName" width="80">
        <template slot-scope="scope">
          {{ scope.row.officeName || '--' }}
        </template>
      </el-table-column>
      <el-table-column label="党员" align="center" prop="partyMember" width="55">
        <template slot-scope="scope">
          {{ scope.row.partyMember === '1' ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column label="驻场开始时间" align="center" prop="siteBeginDate" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.siteBeginDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="驻场截止时间" align="center" prop="siteEndDate" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.siteEndDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="highestQualification" align="center" label="最高学历" width="120">
        <template slot-scope="scope">
          <div @click="handleViewAttachment(scope.row.highestQualificationAttachment)" class="cus">
            <dict-tag
              :options="formatterAttachment(dict.type.per_qualification, scope.row.highestQualification, scope.row.highestQualificationAttachment)"
              :value="parseInt(scope.row.highestQualification)" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="最高学历获取院校" align="center" prop="qualificationUniversity" width="180">
        <template slot-scope="scope">
          {{ scope.row.qualificationUniversity || '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="highestDegree" align="center" label="最高学位" width="80">
        <template slot-scope="scope">
          <!-- 如果最高学位附件不为空，点击按钮查看附件 -->
          <div @click="handleViewAttachment(scope.row.highestDegreeAttachment)">
            <dict-tag
              :options="formatterAttachment(dict.type.per_degree, scope.row.highestDegree, scope.row.highestDegreeAttachment)"
              :value="scope.row.highestDegree == '' ? '--' : parseInt(scope.row.highestDegree)" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="最高学位获取院校" align="center" prop="degreeUniversity" width="180">
        <template slot-scope="scope">
          {{ scope.row.degreeUniversity || '--' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="180" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)">详情</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" v-hasPermi="['resource:person:flowEdit']" @click="editFlow(scope.row)">修改人员工单</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 详情弹窗 -->
    <!-- <el-dialog :title="title" v-if="open" :visible.sync="open" append-to-body width="80%">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本信息" name="basic">
          <el-card class="box-card" v-if="activeTab === 'basic'">
            <div slot="header" class="clearfix">
              <span>基本信息</span>
            </div>
            <basic-info :person="form" :personId="form.id" />
          </el-card>
          <el-card class="box-card" v-if="activeTab === 'basic'">
            <div slot="header" class="clearfix">
              <span>办公室信息</span>
            </div>
            <office-info :personId="form.id" />
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="合同信息" name="contract">
          <el-card class="box-card" v-if="activeTab === 'contract'">
            <div slot="header" class="clearfix">
              <span>单位信息</span>
            </div>
            <company-info :personId="form.id" />
          </el-card>
          <el-card class="box-card" v-if="activeTab === 'contract'">
            <div slot="header" class="clearfix">
              <span>合同信息</span>
            </div>
            <contract-info :personId="form.id" />
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="使用设备" name="terminal">
          <el-card class="box-card" v-if="activeTab === 'terminal'">
            <div slot="header" class="clearfix">
              <span>终端信息</span>
            </div>
            <terminal-info :personId="form.id" />
          </el-card>
          <el-card class="box-card" v-if="activeTab === 'terminal'">
            <div slot="header" class="clearfix">
              <span>堡垒机信息</span>
            </div>
            <fortress-info :personId="form.id" />
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="背景调查" name="family">
          <el-card class="box-card" v-if="activeTab === 'family'">
            <div slot="header" class="clearfix">
              <span>工作经历</span>
            </div>
            <work-info :personId="form.id" />
          </el-card>
          <el-card class="box-card" v-if="activeTab === 'family'">
            <div slot="header" class="clearfix">
              <span>家庭信息</span>
            </div>
            <family-info :personId="form.id" />
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="资质信息" name="qualif">
          <qualif-info :personId="form.id" v-if="activeTab === 'qualif'" />
        </el-tab-pane>
      </el-tabs>
    </el-dialog> -->


    <!-- 详情 -->
    <detailItem :open="open" :activeTab="activeTab" :form="form" @isOpen='isOpen'></detailItem>


    <el-dialog :visible.sync="previewOpen" title="预览" append-to-body>
      <attachment-preview :fileId="fileId" :fileType="fileType" />
    </el-dialog>
  </div>
</template>

<script>
import { getToken, Workflow } from '@/utils/auth'
import { listPerson, exportPerson } from "@/api/resource/person";
import { listEducation } from "@/api/resource/education";
import BasicInfo from "./profile/BasicInfo";
import CompanyInfo from "./profile/CompanyInfo";
import TerminalInfo from "./profile/TerminalInfo";
import FortressInfo from "./profile/FortressInfo";
import OfficeInfo from "./profile/OfficeInfo";
import FamilyInfo from "./profile/FamilyInfo";
import WorkInfo from "./profile/WorkInfo";
import ContractInfo from "./profile/ContractInfo";
import QualifInfo from "./profile/QualifInfo";

import detailItem from './detailItem.vue';

export default {
  name: "Person",
  dicts: ['sys_user_sex', 'per_qualification', 'per_degree'],
  // components: {
  //   BasicInfo,
  //   CompanyInfo,
  //   TerminalInfo,
  //   FortressInfo,
  //   OfficeInfo,
  //   FamilyInfo,
  //   WorkInfo,
  //   ContractInfo,
  //   QualifInfo
  // },
  components: { detailItem },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 人员表格数据
      personList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 最高学位附件预览
      previewOpen: false,
      // 文件类型
      fileType: 'image',
      // 文件ID
      fileId: '',
      // 当前激活的标签页
      activeTab: 'basic',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        nickName: undefined,
        phonenumber: undefined,
        partyMember: undefined,
        contractName:undefined,
      },
      // 表单参数
      form: {},
      // 教育经历弹窗显示状态
      educationDialog: false,
      // 教育经历列表数据
      educationList: [],
      // 教育经历加载状态
      educationLoading: false,
      // 添加选择相关数据
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      token: getToken(),
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "handleFlowEdit":
          this.editFlow(row);
          break;
        default:
          break;
      }
    },
    /** 查询人员列表 */
    getList() {
      this.loading = true;
      listPerson(this.queryParams).then(response => {
        this.personList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 查看详情按钮操作 */
    handleDetail(row) {
      this.form = row;
      this.form.cardId = this.form.cardId.replace(/^(.{6})(?:\d+)(.{2})$/, "$1**********$2");
      this.open = true;
      this.title = "详情";
      this.activeTab = 'basic';
    },
    /** 查看教育经历按钮操作 */
    handleViewEducation(row) {
      this.educationDialog = true;
      this.educationLoading = true;
      listEducation(row.id).then(response => {
        this.educationList = response.data;
        this.educationLoading = false;
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('/resource/person/export', {
        ...this.queryParams
      }, `person_${new Date().getTime()}.xlsx`)
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 查看最高学位附件 */
    handleViewAttachment(attach) {
      console.log(attach);
      //scope.row.highestQualificationAttachment
      if (attach) {
        var [id, fileType] = attach.split(":");
        this.previewOpen = true;
        this.fileId = id;
        this.fileType = fileType;
      }
    },
    handleQualifInfo(row) {
      this.form = row;
      this.open = true;
      this.title = "资质信息";
      this.activeTab = 'qualif';
    },
    formatterAttachment(data, value, attachmentURL) {
      const tempData = JSON.parse(JSON.stringify(data));
      // 循环data,value和data.value相同，修改data.listClass
      tempData.forEach(item => {
        if (item.value == value && !attachmentURL) {
          item.raw.listClass = 'warning';
        } else {
          item.raw.listClass = 'success';
        }
      });
      return tempData;
    },
    openFlow() {
      let url = 'http://' + Workflow + '/itsm/index.html#/CommonFormDisplay?serialNo=&processId=8002&taskId=&curActId=800202&processName=%E6%9C%8D%E5%8A%A1%E5%A4%96%E5%8C%85%E4%BA%BA%E5%91%98%E5%BD%95%E5%85%A5&t=1733128356272&access_token=' + this.token;
      window.open(url, '_blank');
    },
    editFlow(obj) {
      if (obj.processId) {
        let url = 'http://' + Workflow + '/itsm/index.html#/CommonFormDisplay?serialNo=&processId=8002&taskId=&curActId=800202&processName=%E6%9C%8D%E5%8A%A1%E5%A4%96%E5%8C%85%E4%BA%BA%E5%91%98%E5%BD%95%E5%85%A5&t=1733128356272&access_token=' + this.token + '&historySerialNo=' + obj.processId + '&editId=' + obj.id;
        window.open(url, '_blank');
      } else {
        alert('非工单创建人员');
      }
    },
    isOpen(val) {
      this.open = val;
    }
  }
};
</script>

<style>
.el-table th>.cell {
  white-space: nowrap !important;
}
</style>
<style scoped>
.el-tag--dark.el-tag--danger {
  background-color: pink;
  border-color: pink;
}
</style>