<template>
  <MOSTY.PageTree :pageTitle="'重点人员安全培训档案'" :searchType="'03'" @getDeptId="getdeptId">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
      <el-divider />
      <div class="btnBox">
        <el-button @click="export2Excel" v-loading="loadingShow"><el-icon size="small">
            <Download />
          </el-icon>导出</el-button>
      </div>
    </template>
    <template #table>
      <section class="eltab9">
        <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
          :isSelect="false" :isSort="true" @SortChange="SortChange" style="width: 100%;">
          <template #userLevel="{ row }">
            <dict-tag v-if="row.userLevel" :options="D_BZ_ZDRYPXDARYJB" :value="row.userLevel" :tag="false" />
            <span v-else>无</span>
          </template>
          <template #otherType="{ row }">
            <dict-tag v-if="row.otherType" :options="GZ_TRAINOT" :value="row.otherType" :tag="false" />
            <span v-else>无</span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="data.pageConfiger" @changeSize="changeSize" @changeNo="changeNo">
        </MOSTY.Pages>
      </div>
    </template>
  </MOSTY.PageTree>

</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import MyTable from "@/components/aboutTable/MyTable/index.vue";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { exportXlsx, downloadImg } from "@/excel/Export2Excel.js";
import { ElMessage } from "element-plus";
import { filterYear } from "@/utils/auth.js";
import { reactive, onMounted, ref, getCurrentInstance, watch } from "vue";
const emit = defineEmits("changePage", "backPage");
const { proxy } = getCurrentInstance();
const { D_BZ_ZDRYPXDARYJB, GZ_TRAINOT } = proxy.$dict(
  "D_BZ_ZDRYPXDARYJB",
  "GZ_TRAINOT",
);
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "人员名字",
      prop: "userName",
    },
    {
      title: "人员类别",
      prop: "userLevel",
      slot: true
    },
    {
      title: "计划外培训的类型",
      prop: "otherType",
      slot: true
    },
    {
      title: "年份",
      prop: "yearly",
    },
    {
      title: "培训总次数",
      prop: "allNumber",
    },
    {
      title: "培训总课时",
      prop: "allHour",
    },
  ],

  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1,
    total: 0
  }
});
const searchArr = reactive([
  {
    showType: "select",
    prop: "year",
    width: '250px',
    defaultVal: new Date().getFullYear(),
    options: filterYear(7),
  }
]);
const loadingShow = ref(false);
onMounted(() => {

});

const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  year: new Date().getFullYear()
});
function onSearch(obj) {
  listQuery.year = obj.year
  listQuery.pageCurrent = 1
  data.pageConfiger.pageCurrent = 1
  getTableData();
}

//分页
const changeNo = (val) => {
  listQuery.pageCurrent = val;
  data.pageConfiger.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  listQuery.pageSize = val;
  data.pageConfiger.pageSize = val;
  getTableData();
};
//获取部门数据
const getdeptId = (val) => {
  listQuery.orgcode = val.id;
  listQuery.pageCurrent = 1;
  data.pageConfiger.pageCurrent = 1
  getTableData();
};

//选中的数据
const tableloading = ref(false);
function getTableData() {
  tableloading.value = true;
  getApi(listQuery, `/mosty-jcgl/training/other/getKeyPersonalList`).then((res) => {
    if (res.records) {
      data.tableData = res.records;
      tableloading.value = false;
      data.pageConfiger.total = res.total;
    } else {
      data.tableData = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  });
}
//导出表格
const export2Excel = () => {
  loadingShow.value = true;
  let title = {
    userName: "人员名字",
    userLevel: "人员类别",
    otherType: "计划外培训的类型",
    yearly: "年份",
    allNumber: "培训总次数",
    allHour: "培训总课时",
  };
  const param = {
    pageCurrent: 1,
    pageSize: 10000,
    year: listQuery.year,
    orgcode: listQuery.orgcode
  }
  getApi(param, "/mosty-jcgl/training/other/getKeyPersonalList").then((res) => {
    if (res.records) {
      let data = res.records;
      if (data.length > 0) {
        for (let i = 0; i < data.length; i++) {
          data[i].userLevel = proxy.$getDictVal(data[i].userLevel, D_BZ_ZDRYPXDARYJB);
          data[i].otherType = proxy.$getDictVal(data[i].otherType, GZ_TRAINOT);
        }
        let tablename = "重点人员安全培训档案.xlsx";
        exportXlsx(title, data, '重点人员安全培训档案', tablename);
      } else {
        ElMessage.warning('暂无数据');
      }
    }
  }).finally(() => {
    loadingShow.value = false
  });
};

</script>

<style lang="scss" scoped>
.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}
</style>