<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"
            type="primary"
            @click="openEditStaffDialog(null, 'add')"
            >新增</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="createTime" label="添加时间" width="150">
          <template slot-scope="scope">
            {{ $methodsTools.timestampFormat(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="companyName"
          label="所属企业"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="staffName"
          label="姓名"
          width="150"
        ></el-table-column>
        <el-table-column prop="sex" label="性别" width="150">
          <template slot-scope="scope">
            {{ scope.row.sex === 1 ? "男" : scope.row.sex === 2 ? "女" : "—" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="idCard"
          label="身份证号"
          width="150"
        ></el-table-column>
        <el-table-column prop="degree" label="学历/学位" width="150">
          <template slot-scope="scope">
            {{ getDegreeName(scope.row.degree) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="major"
          label="专业"
          width="150"
        >
      </el-table-column>
        <el-table-column
          prop="telephone"
          label="手机号码"
          width="150"
        ></el-table-column>
        <el-table-column prop="entryDate" label="入职时间" width="150">
          <template slot-scope="scope">
            {{ $methodsTools.timestampFormat(scope.row.entryDate) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="departmentName"
          label="所在部门"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="position"
          label="岗位名称"
          width="150"
        ></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="label"
          label="标签"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="remarks"
          label="备注"
          width="150"
        ></el-table-column>
        <el-table-column prop="date" label="操作" fixed="right" width="200px">
          <template slot-scope="scope">
            <el-button type="text" @click="openStaffDetailDialog(scope.row)"
              >详情</el-button
            >
            <el-button type="text" @click="goStaffCert(scope.row.staffId)">
              {{ `证书(${scope.row.certificateSize})` }}
            </el-button>
            <el-button
              type="text"
              @click="openEditStaffDialog(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"
    />
    <!-- 员工详情弹窗 -->
    <staffDetailDialog ref="staffDetailDialog" />
    <!-- 员工新增/编辑弹窗 -->
    <editStaffDialog ref="editStaffDialog" @refresh="init()" />
    <!-- 导入数据弹窗 -->
    <importDialog ref="importDialog" :api="importStaffList" type="员工信息" />
    <!-- 备注弹窗 -->
    <remarkDialog ref="remarkDialog" @handle-remark="handleRemark" />
  </div>
</template>
  
  <script>
import staffDetailDialog from "./staffDetailDialog.vue";
import editStaffDialog from "./editStaffDialog.vue";
import importDialog from "../component/importDialog.vue";
import remarkDialog from "../component/remarkDialog.vue";
import pagination from "@/components/pagination.vue";
import {
  staffList,
  deleteStaff,
  updateStaffRemarks,
  importStaffList,
} from "@/api/staff";
import { mapGetters } from "vuex";
import { getDegreeTypeList } from "@/views/companyManagement/component/typeList";
export default {
  components: {
    staffDetailDialog,
    editStaffDialog,
    importDialog,
    remarkDialog,
    pagination
  },
  data() {
    return {
      importStaffList: importStaffList, // 员工信息导入接口
      degreeTypeList: getDegreeTypeList(), // 学历类型列表
      loading: false, //当前表单加载是否加载动画
      navText: {
        title: "员工信息",
        index: 0,
        ch: "条",
      },
      //搜索
      formList: [
        {
          prop: "companyName",
          placeholder: "所属企业",
          scope: "companyList",
        },
        {
          prop: "entryDate",
          placeholder: "入职时间开始",
          scope: "datePickerA",
        },
        {
          prop: "leaveDate",
          placeholder: "入职时间结束",
          scope: "datePickerA",
        },
        {
          prop: "degree",
          placeholder: "学历/学位",
          scope: "select",
          options: getDegreeTypeList(),
        },
        {
          prop: "searchItem",
          placeholder: "请输入姓名/身份证号/手机号码",
        },
      ],
      formData: {
        pageSize: 10,
        pageNum: 1,
      },
      tableData: [], //表单数据
      multipleSelection: [], // 多选选中数据
      total: 0, //一共多少条
      pageSize: 10, //每页多少条数据
      currentPage: 1, //当前页码
    };
  },
  computed: {
    ...mapGetters(["getCompanyList"]),
    // 获取学历类型名
    getDegreeName() {
      return function (val) {
        return  val ? val.split(',').map(i => {
         return this.degreeTypeList.find(item => item.value == i).label
        }).join(',') : '—'
      };
    },
  },
  mounted() {
    this.search();
  },
  activated() {
    //   this.search();
  },
  methods: {
    openStaffDetailDialog(row) {
      this.$refs.staffDetailDialog.openBoxs(row);
    },
    openEditStaffDialog(row, type) {
      this.$refs.editStaffDialog.openBoxs(row, type);
    },
    openImportDialog() {
      this.$refs.importDialog.openBoxs();
    },
    // 跳转员工证书页面
    goStaffCert(id) {
      this.$router.push({
        name: "/staffCertificate",
        params: { staffId: id },
      });
    },
    openRemarkDialog(row) {
      this.$refs.remarkDialog.openBoxs(row, "remarks");
    },
    handleRemark(val) {
      console.log(val, "备注回调");
      updateStaffRemarks({
        staffId: val.staffId,
        remarks: val.remarks,
      })
        .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.staffId]
            : this.multipleSelection.map((item) => item.staffId);
          console.log(ids, "ids");
          deleteStaff({ staffIds: 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,
        };
      }
      if (this.formData.entryDate) {
        this.formData.entryDate = this.$methodsTools.timestampTo1013('save', this.formData.entryDate)
      }
      if (this.formData.entryDate) {
        this.formData.leaveDate = this.$methodsTools.timestampTo1013('save', this.formData.leaveDate)
      }
      var data = JSON.parse(JSON.stringify(this.formData));
      staffList(data)
        .then((res) => {
          console.log(res, "staffList");
          this.tableData = res.rows;
          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>
#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;
    }
  }
}
/deep/.el-button {
  border-radius: 8px;
}
</style>
  
  