<template>
  <MOSTY.PageTree :pageTitle="'离线统计'" :searchType="'03'" @getDeptId="getdeptId">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch">
        <el-button type="primary" @click="handleAdd">
          <el-icon>
            <CirclePlus />
          </el-icon>
          <span>新增</span>
        </el-button>
        <el-button type="primary" @click="export2Excel" v-loading="loadingShow">
          <el-icon>
            <Download />
          </el-icon>
          <span>导出表格</span>
        </el-button>
        <el-button type="primary" @click="zsmb">
          <el-icon>
            <Notebook />
          </el-icon>
          <span>证书模板</span>
        </el-button>
      </MOSTY.Search>
    </template>
    <template #table>
      <section :style="{ height: totalHeight }">
        <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableloading="tableloading" :isSelect="true"
          :isSort="true" :actionsW="300">
          <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="operedit" v-if="row.xtCjbmdm == dlbmid" @click="handleChange(row)"><el-icon>
                <EditPen />
              </el-icon>编辑</span>
            <el-popconfirm v-if="row.zstype == '99' || row.xtCjbmdm == dlbmid" confirm-button-text="是"
              cancel-button-text="否" icon-color="red" title="确定要删除?" @confirm="deldete(row)">
              <template #reference>
                <span class="operdel" size="small"><el-icon>
                    <Delete />
                  </el-icon>删除</span>
              </template>
            </el-popconfirm>
            <span class="operesee" v-if="row.zstype != '99' && row.xtCjbmdm != dlbmid" @click="handlesee(row)"><el-icon>
                <Compass />
              </el-icon>查看</span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
          layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
      </div>
    </template>
  </MOSTY.PageTree>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, deleteApi} from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { getItem } from "@/utils/storage";
const { proxy } = getCurrentInstance();
// 数据
const { D_TB_ZSLB } = proxy.$dict("D_TB_ZSLB");
const tableloading = ref(false);
const totalHeight = ref()
const xqobj = ref(null);
const loadingShow = ref(false);
const zsdta = reactive({
  id: ''
})
const searchArr = reactive([
  {
    showType: "input",
    prop: "keyword",
    width: '250px',
    placeholder: '请输入证书名称、姓名'
  }
])
const tableColumns = reactive([
  {
    title: "证书名称",
    prop: "tcname",
    width: "250px"
  },
  {
    title: "证书类别",
    prop: "zstype",
    width: "250px",
    slot: true
  },
  {
    title: "姓名",
    prop: "tcperson",
    width: "250px"
  },
  {
    title: "发证日期始",
    prop: "tcbegindate",
    width: "250px"
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const dlbmid = ref(getItem("deptId").ssbmid);
const tableData = ref([]);
// 分页
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20
});
const total = ref(0);
const addDiaShow = ref(false);
const zsShow = ref(false);
const SeeDiaShow = ref(false);
// 控制新增与检查配置修改的标题
const title = ref("");
onMounted(() => {
  totalHeight.value = `calc(100vh - 330px)`
}); // 获取树高度
//获取部门数据
const getdeptId = (val) => {
  listQuery.value.tcporgid = val.id;
  listQuery.value.pageCurrent = 1;
  getTableData();
};
//导出表格
const export2Excel = () => {
  loadingShow.value = true;
  let title = {
    tcname: "证书名称",
    zstype: "证书类别",
    tcperson: "姓名",
    tcbegindate: "发证日期始",
    tcdeadline: "发证日期止",
    tcawardunit: "颁发单位"
  };
  const data = {
    pageSize: 1000,
    pageCurrent: 1,
    zstype: listQuery.value.zstype,
    tcporgid: listQuery.value.tcporgid
  }
  getApi(data, "/mosty-jcgl/tcertificate/getPageList").then((res) => {
    if (res) {
      let data = res.records;
      if (data) {
        for (let i = 0; i < data.length; i++) {
          data[i].zstype = proxy.$getDictVal(data[i].state, 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/getPageList").then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      tableData.value.forEach((item) => {
        item.tcbegindate = item.tcbegindate.substring(0, 10);
      });
      total.value = res.total;
    }
  }).catch((err) => {
    tableData.value = [];
    tableloading.value = false;
  });
};
//查询
function onSearch(obj) {
  listQuery.value.keyword = obj.keyword;
  listQuery.value.pageCurrent = 1;
  getTableData();
}

// 证书模板弹出窗
const zsmb = () => {
  zsShow.value = true
}
// 新增弹出框
const handleAdd = () => {
  tableloading.value = true;
  xqobj.value = null;
  title.value = "证书新增";
  addDiaShow.value = true;
};

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

// 修改
const handleChange = (row) => {
  getxqdata(row.id);
  addDiaShow.value = true;
  title.value = "证书修改";
};
//查看
function handlesee(row) {
  getxqdata(row.id);
  addDiaShow.value = true;
  title.value = "证书详情";
}
//获取详情
function getxqdata(id) {
  getApi({ id: id }, "/mosty-jcgl/tcertificate/getById").then((res) => {
    xqobj.value = res;
    if (xqobj.value.files) {
      xqobj.value.files = xqobj.value.files.split(",");
    }
    if (xqobj.value.jsjytime) {
      xqobj.value.jsjytime = xqobj.value.jsjytime.split(",");
    }
  });
}
//删除
const deldete = (row) => {
  deleteApi({}, `/mosty-jcgl/tcertificate/del/${row.id}`).then((res) => {
    ElMessage.success("删除成功");
    getTableData();
  });
};
//关闭页面
function closeChange() {
  SeeDiaShow.value = false;
  zsdta.id = ''
}
// 关闭弹出窗
const changeClose = (val) => {
  zsShow.value = val;
}
// 控制新增弹出框的展示
const changeAddVi = (val) => {
  addDiaShow.value = val;
  xqobj.value = null;
  getTableData();
};

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

<style lang="scss" scoped>
</style>