<template>
  <div>
    <MOSTY.PageTree pageTitle="特种作业人员管理" :searchType="'03'" @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 #zstype="{ row }">
              <dict-tag :options="D_TB_ZSLB" :value="row.zstype" :tag="false" />
            </template>
            <template #actions="{ row }">
              <!-- 部门与登录部门相同可编辑、删除 -->
              <span class="operesee" v-if="row.zstype == '99'" @click="handleSee(row)"><el-icon>
                  <Compass />
                </el-icon>证书</span>
              <span class="operesee" v-if="row.zstype != '99'" @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 v-if="addDiaShow" class="dialog-box">
      <Addzs :title="title" :xqobj="xqobj" @changeAddVi="changeAddVi" v-if="addDiaShow"></Addzs>
    </div>
    <!-- 查看 -->
    <div v-if="SeeDiaShow" class="dialog-box">
      <AqzsIcard v-if="SeeDiaShow" @close="closeChange" :title="title" :rowId="zsdta.id" />
    </div>
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi } from "@/api/tobAcco_api.js";
import { exportXlsx } from "@/excel/Export2Excel.js";
import AqzsIcard from "@/views/safety/pxjygl/pxjhcoms/aqzsIcard.vue";
import Addzs from "@/views/safety/pxjygl/pxjhcoms/addzs.vue"
const { proxy } = getCurrentInstance();
const { D_TB_ZSLB } = proxy.$dict("D_TB_ZSLB");
const tableloading = ref(false);
const xqobj = ref(null);
const loadingShow = ref(false);
const zsdta = reactive({
  id: ''
})
const searchArr = ref([
  {
    showType: "cascader",
    prop: "zstype",
    width: '250px',
    showAllLevels: false,
    props: {
      children: "itemList",
      label: "zdmc",
      value: "dm",
      checkStrictly: false
    },
    lazy: false,
    options: [],
    placeholder: '请选择证书类别'
  },
  {
    showType: "input",
    prop: "keyword",
    width: '250px',
    placeholder: '请输入证书名称、姓名'
  }
]);
const tableData = ref([]);
// 分页
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20
});
const addDiaShow = ref(false);
const SeeDiaShow = ref(false);
// 控制新增与检查配置修改的标题
const title = ref("");
const tableColumn = ref([
  {
    title: "证书名称",
    prop: "tcname",
    sortable: true,
  },
  {
    title: "证书类别",
    prop: "zstype",
    sortable: true,
    slot: true
  },
  {
    title: "姓名",
    prop: "tcperson",
    sortable: true
  },
  {
    title: "发证日期始",
    prop: "tcbegindate",
    sortable: true
  },
  {
    title: "发证日期止",
    prop: "tcdeadline",
    sortable: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
onMounted(() => {
  getDictCdata()
});
//获取字典数据
const getDictCdata = () => {
  getApi({ zdbh: "D_TB_ZSLB" }, "/mosty-base/sysDict/getDictTree").then(res => {
    if (res) {
      searchArr.value[0].options = res?.itemList?.filter(item => {
        if (item.dm === "1000" || item.dm === "1001") return item
      })
    }
  })
}
//获取部门数据
const getdeptId = (val) => {
  listQuery.value.tcporgid = val.id;
  pageConfiger.pageCurrent = 1;
  listQuery.value.pageCurrent = 1;
  getTableData();
};
// 控制新增弹出框的展示
const changeAddVi = (val) => {
  addDiaShow.value = val;
  xqobj.value = null;
  getTableData();
};
//导出表格
const export2Excel = () => {
  loadingShow.value = true
  let title = {
    tcname: "证书名称",
    zstype: "证书类别",
    tcperson: "姓名",
    tcbegindate: "发证日期始",
    tcdeadline: "发证日期止",
    tcawardunit: "颁发单位"
  };
  const data = {
    zstype: listQuery.value.zstype,
    tcporgid: listQuery.value.tcporgid
  }
  getApi(data, "/mosty-jcgl/tcertificate/exportTzzy").then((res) => {
    if (res) {
      let data = res;
      if (data) {
        for (let i = 0; i < data.length; i++) {
          data[i].zstype = proxy.$getDictVal(data[i].zstype, D_TB_ZSLB);
        }
        let tablename = "特种作业人员管理.xlsx";
        exportXlsx(title, data, '特种作业人员管理', tablename);
      }
    }
  }).finally(() => {
    loadingShow.value = false
  })

};
// 获取表格数据
const getTableData = () => {
  tableloading.value = true;
  getApi(listQuery.value, "/mosty-jcgl/tcertificate/getCertificatePageList").then((res) => {
    if (res.records) {
      tableData.value = res.records;
      tableData.value.forEach((item) => {
        item.tcbegindate = item.tcbegindate.substring(0, 10);
      });
      pageConfiger.total = res.total;
    }
  }).finally(() => {
    tableloading.value = false;
  });
};
//查询
function onSearch(obj) {
  listQuery.value.zstype = obj?.zstype?.length ? obj.zstype[obj.zstype.length - 1] : '';
  listQuery.value.keyword = obj.keyword;
  pageConfiger.pageCurrent = 1;
  listQuery.value.pageCurrent = 1;
  getTableData();
}


function handleSee(row) {
  zsdta.id = row.id
  title.value = "安全生产培训证书查看";
  SeeDiaShow.value = true;
};


//查看
function handlesee(row) {
  title.value = "证书详情";
  getxqdata(row.id);


}
//获取详情
function getxqdata(id) {
  getApi({ id: id }, "/mosty-jcgl/tcertificate/getById").then((res) => {
    xqobj.value = res;
    if (xqobj.value.jsjytime) {
      xqobj.value.jsjytime = xqobj.value.jsjytime.split(",");
    }
    addDiaShow.value = true;
  });
}

//关闭页面
function closeChange() {
  SeeDiaShow.value = false;
  zsdta.id = ''
}


//页码发生变化
const handleCurrentChange = (val) => {
  pageConfiger.pageCurrent = val;
  listQuery.value.pageCurrent = val;
  getTableData();
};
//查询条数发生变化
const handleSizeChange = (val) => {
  pageConfiger.pageSize = val;
  listQuery.value.pageSize = val;
  getTableData();
};

</script>

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