<template>
  <div>
    <MOSTY.PageTree :pageTitle="'培训档案列表'" :oldTree="true" :searchType="'01'" @getDeptId="getdeptId">
      <template #serach>
        <el-divider />
        <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
        <el-divider />
        <section class="button">
          <el-button type="primary" @click="export2Excel" v-loading="loadingShow">
            <el-icon>
              <Download />
            </el-icon>
            <span>导出表格</span>
          </el-button>
        </section>
      </template>
      <template #table>
        <section class="eltab9">
          <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading"
            :isSelect="false" style="width: 100%;">
            <template #count="{ row }">
              <span v-if="row.count == '0'">未参加培训</span>
              <span v-else>{{ row.count }}次</span>
            </template>
            <template #hour="{ row }">
              <span>{{ row.hour }}学时</span>
            </template>
            <template #actions="{ row }">
              <span class="operesee" @click="handleSee(row)"><el-icon>
                  <Compass />
                </el-icon>查看</span>
            </template>
          </MOSTY.Table>
        </section>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="pageConfiger" @changeSize="handleSizeChange" @changeNo="handleCurrentChange">
          </MOSTY.Pages>
        </div>
      </template>
    </MOSTY.PageTree>

  </div>
</template>

<script setup>
// 引入
import { watch, onMounted, ref, reactive } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, deleteApi, putApi } from "@/api/tobAcco_api.js";
import { filterYear } from "@/utils/auth.js";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { useRouter } from "vue-router";
const router = useRouter();
const tableloading = ref(false);
const searchArr = reactive([
  {
    showType: "select",
    prop: "year",
    width: '250px',
    defaultVal: new Date().getFullYear().toString(),
    options: filterYear(7),
  }
]);
const tableColumn = ref([
  {
    title: "姓名",
    prop: "username",
    sortable: true
  },
  {
    title: "培训次数",
    prop: "count",
    sortable: true,
    slot: true
  },
  {
    title: "累计学时",
    prop: "hour",
    sortable: true,
    slot: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
const tableData = ref([]);
const loadingShow = ref(false);
// 分页
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  year: new Date().getFullYear()
});
const addDiaShow = ref(false);
//获取部门数据
const getdeptId = (val) => {
  if (val.id.includes("XN")) {
    listQuery.value.deptid = val.id.substring(0, val.id.indexOf('X'))
  } else {
    listQuery.value.deptid = val.id;
  }

  pageConfiger.pageCurrent = 1;
  listQuery.value.pageCurrent = 1;
  getTableData();
};
onMounted(() => {

});
function onSearch(obj) {
  listQuery.value.year = obj.year
  getTableData();
}

// 获取表格数据
const getTableData = () => {
  tableloading.value = true;
  getApi(listQuery.value, "/mosty-jcgl/training/other/getPersonalList")
    .then((res) => {
      if (res.records) {
        tableData.value = res.records;
        pageConfiger.total = res.total;
      }
    })
    .finally(() => {
      tableloading.value = false;
    });
};
//查看
function handleSee(row) {
  router.push({
    path: "/pxjhcoms/profiledetails",
    query: {
      year: listQuery.value.year,
      userid: row.userid
    }
  });
}

// 控制新增弹出框的展示
const changeAddVi = (val) => {
  addDiaShow.value = val;
  getTableData();
};

//页码发生变化
const handleCurrentChange = (val) => {
  pageConfiger.pageCurrent = val;
  listQuery.value.pageCurrent = val;
  getTableData();
};
//查询条数发生变化
const handleSizeChange = (val) => {
  pageConfiger.pageSize = val;
  listQuery.value.pageSize = val;
  getTableData();
};
//导出表格
const export2Excel = () => {
  loadingShow.value = true
  let title = {
    username: "姓名",
    deptname: "所属部门",
    count: "参加学习培训次数",
    hour: "培训学时(h)",
    studyContent: "培训涉及的有关内容",
    examGrade: "考试或测评情况",
    bz: "备注"
  };
  let obj = {
    pageCurrent: 1,
    pageSize: 100000,
    year: listQuery.value.year,
    deptid: listQuery.value.deptid

  }
  getApi(obj, "/mosty-jcgl/training/other/personalExport").then(
    (res) => {
      if (res) {
        let data = res;
        if (data) {
          let tablename = `${listQuery.value.year}年度员工安全教育培训台账.xlsx`;
          exportXlsx(title, data, '`${listQuery.value.year}年度员工安全教育培训台账`', tablename);
        }
      }
    }
  ).finally(() => {
    loadingShow.value = false
  })
};
</script>

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