<template>
  <div id="festival">
    <search-box
      ref="searchBox"
      :formData="formData"
      :formList="formList"
      @search="search"
      @init="init"
    />
    <div id="tableList">
      <div class="headerNavTool" v-if="navText.headShow !== false">
        <div class="leftIndexText">
          {{ navText.title }} <strong>{{ navText.index }}</strong>
          {{ navText.ch }}
        </div>
        <div class="rightBtnBox">
          <el-button
            size="medium"
            @click="openEditCertDialog(null, 'add')"
            type="primary"
            >新增</el-button
          >
          <el-button size="medium" @click="openImportDialog()" type="primary"
            >批量导入</el-button
          >
          <el-button size="medium" @click="handleDelete(null)" type="primary"
            >批量删除</el-button
          >
        </div>
      </div>
      <el-table
        :row-key="'chapterId'"
        ref="tableList"
        :loading="loading"
        :data="tableData"
        style="width: 100%"
        fit
        border
        :header-cell-style="{
          'text-align': 'center',
          'background-color': '#eee',
          color: '#333',
          fontSize: '14px',
        }"
        :cell-style="{
          'text-align': 'center',
        }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          fixed="left"
        ></el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="50 "
        ></el-table-column>
        <el-table-column prop="addTime" label="添加时间" width="150">
          <template slot-scope="scope">
            {{ $methodsTools.timestampFormat(scope.row.addTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="companyName" label="所属企业" width="150">
          <!-- <template slot="empty">—</template> -->
        </el-table-column>
        <el-table-column prop="positionStatus" label="员工状态" width="150">
          <template slot-scope="scope">
            {{
              scope.row.positionStatus === 1
                ? "全职"
                : scope.row.positionStatus === 2
                ? "离职"
                : scope.row.positionStatus === 3
                ? "编外"
                : "—"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="staffName" label="持证人" width="150"></el-table-column>
        <el-table-column
          prop="idCard"
          label="身份证号"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="certificateTypeName"
          label="证书类型"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="certificateName"
          label="证书名称"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="certificateMajor"
          label="证书专业"
          width="150"
        >
          <template slot-scope="scope">
            <span
              v-for="(item, index) in certificateMajorName(
                scope.row.certificateMajor
              )"
              :key="index"
            >
              {{ item }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="certificateNumber"
          label="证书编号"
          width="150"
        ></el-table-column>
        <el-table-column prop="startTime" label="发证时间" width="150">
          <template slot-scope="scope">
            {{ $methodsTools.timestampFormat(scope.row.startTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="有效时间" width="150">
          <template slot-scope="scope">
            {{ $methodsTools.timestampFormat(scope.row.endTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="warningStatus" label="预警状态" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.warningStatus == 1"> 正常 </span>
            <span v-if="scope.row.warningStatus == 2" style="color: red">
              已过期{{ scope.row.expirationTime }}天
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="certificateAddress"
          label="发证机关"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="staffRemarks"
          label="备注"
          width="150"
        ></el-table-column>
        <el-table-column prop="date" label="操作" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="openCertDetailDialog(scope.row)"
              >详情</el-button
            >
            <el-button
              type="text"
              @click="openEditCertDialog(scope.row, 'edit')"
              >修改</el-button
            >
            <el-button type="text" @click="handleDelete(scope.row)"
              >删除</el-button
            >
            <el-button type="text" @click="openRemarkDialog(scope.row)"
              >备注</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination
      :total="total"
      :pageSize="formData.pageSize"
      :currentPage="formData.pageNum"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <!-- 员工证书详情弹窗 -->
    <certDetailDialog ref="certDetailDialog" />
    <!-- 员工证书新增/编辑弹窗 -->
    <editCertDialog ref="editCertDialog" @refresh="init(2)" />
    <!-- 导入数据弹窗 -->
    <importDialog
      ref="importDialog"
      :api="importStaffCertList"
      type="员工证书"
    />
    <!-- 备注弹窗 -->
    <remarkDialog ref="remarkDialog" @handle-remark="handleRemark" />
  </div>
</template>
  
  <script>
import certDetailDialog from "./certDetailDialog.vue";
import editCertDialog from "./editCertDialog.vue";
import importDialog from "../component/importDialog.vue";
import remarkDialog from "../component/remarkDialog.vue";
import pagination from "@/components/pagination.vue";
import { mapGetters } from "vuex";
import { getCertificateTypeList } from "@/views/companyManagement/component/typeList";
import {
  staffCertList,
  deleteStaffCert,
  updateStaffCert,
  importStaffCertList,
} from "@/api/staff";
export default {
  components: {
    certDetailDialog,
    editCertDialog,
    importDialog,
    remarkDialog,
    pagination
  },
  data() {
    return {
      importStaffCertList: importStaffCertList, // 员工证书导入接口
      loading: false, //当前表单加载是否加载动画
      navText: {
        title: "员工证书",
        index: 0,
        ch: "条",
      },
      //搜索
      formList: [
        {
          prop: "companyName",
          placeholder: "所属企业",
          scope: "companyList",
        },
        {
          prop: "warningStatus",
          placeholder: "预警状态",
          scope: "select",
          options: [
            {
              label: "正常",
              value: 1,
            },
            {
              label: "已过期",
              value: 2,
            },
          ],
        },
        {
          prop: "certificateType",
          placeholder: "证书类型",
          scope: "select",
          options: getCertificateTypeList(),
        },
        {
          prop: "searchItem",
          placeholder: "请输入持证人/身份证号/证书编号",
        },
      ],
      formData: {
        pageSize: 10,
        pageNum: 1,
      },
      tableData: [], //表单数据
      multipleSelection: [], // 多选选中数据
      total: 0, //一共多少条
      pageSize: 10, //每页多少条数据
      currentPage: 1, //当前页码
    };
  },
  computed: {
    ...mapGetters(["getCompanyList"]),
    // 获取专业名称
    certificateMajorName() {
      return function (val) {
        return JSON.parse(val).map((item) => item.certificateMajor);
      };
    },
  },
  mounted() {
    if (this.$route.params.staffId) {
      this.formData.staffId = this.$route.params.staffId;
    }
    this.search();
  },
  activated() {
    //   this.search();
  },
  methods: {
    openCertDetailDialog(row) {
      this.$refs.certDetailDialog.openBoxs(row);
    },
    openEditCertDialog(row, type) {
      this.$refs.editCertDialog.openBoxs(row, type);
    },
    openImportDialog() {
      this.$refs.importDialog.openBoxs();
    },
    openRemarkDialog(row) {
      this.$refs.remarkDialog.openBoxs(row, "staffRemarks");
    },
    handleRemark(val) {
      console.log(val, "备注回调");
      updateStaffCert({
        staffCertificateId: val.staffCertificateId,
        staffRemarks: val.staffRemarks,
      })
        .then((res) => {
          this.$message.success("保存成功！");
          this.search(1);
        })
        .finally(() => {
          console.log("end");
        });
    },
    handleDelete(row) {
      if (!this.multipleSelection.length && !row) {
        this.$message.warning("请勾选需要删除的选项");
        return;
      }
      this.$confirm(
        row
          ? `确定删除此内容？内容删除后将无法恢复！`
          : `此操作将永久删除所勾选的${this.multipleSelection.length}条数据, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          const ids = row
            ? [row.staffCertificateId]
            : this.multipleSelection.map((item) => item.staffCertificateId);
          console.log(ids, "ids");
          deleteStaffCert({ staffCertificateIds: ids }).then((res) => {
            this.$message.success("删除成功");
            this.search(1);
          });
        })
        .catch(() => {});
    },
    search(int) {
      this.loading = true;
      if (int === 1) {
        this.formData.pageNum = 1;
      }
      if (int === 2) {
        this.formData = {
          pageSize: 10,
          pageNum: 1,
        };
      }
      staffCertList(this.formData)
        .then((res) => {
          this.tableData = res.rows;
          // this.tableData.time = $methodsTools.timestampTo1013('show', res.rows.time)
          this.total = res.total;
          this.navText.index = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    init() {
      this.search(2);
    },
    //多选操作回调
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    handleSizeChange(v) {
      this.formData.pageSize = v;
      this.formData.pageNum = 1;
      this.search();
    },
    handleCurrentChange(v) {
      this.formData.pageNum = v;
      this.search();
    },
  },
};
</script>
  
  <style lang="less" scoped>
/deep/.el-button {
  border-radius: 8px;
}
#tableList {
  padding: 16px 16px 16px;
  border-radius: 8px;
  box-shadow: 0px 0px 9px 1px rgba(28, 41, 90, 0.1);
  background: #ffffff;
  .headerNavTool {
    height: 72px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -16px;
    .rightBtnBox {
      display: flex;
      align-items: center;
    }
  }
}
</style>
  
  