<template>
  <div>
    <div class="bigBox" :style="{ height: bigHeight }">
      <div style="width: 100%;">
        <!-- 表格 -->
        <div class="searchBox" ref="searchBox">
          <div class="title">
            风险详情
          </div>
          <div class="se_box">

            <el-button type="primary" @click="onloadExcel" v-loading="loadingShow">
              <el-icon>
                <Download />
              </el-icon>
              导出 </el-button>
            <el-button type="primary" @click="CloseEvent">关闭 </el-button>
          </div>
        </div>
        <div class="tabBox">
          <el-table ref="multipleTableRef" stripe :data="tableData" v-loading="tableloading"
            element-loading-text="加载中..." style="width: 100%" @selection-change="handleSelectionChange" border>
            <el-table-column label="场所名称" property="sitename"></el-table-column>
            <el-table-column label="部位" property="objname"></el-table-column>
            <el-table-column label="辨识人" property="username"></el-table-column>
            <el-table-column label="辨识时间" property="identifytime"></el-table-column>
            <el-table-column label="危险源描述" property="dangerDescription"></el-table-column>
            <el-table-column label="风险等级" property="risklevel">
              <template #default="{ row }">
                <span v-if="row.risklevel == '4'">红色</span>
                <span v-else-if="row.risklevel == '3'">橙色</span>
                <span v-else-if="row.risklevel == '2'">黄色</span>
                <span v-else-if="row.risklevel == '1'">蓝色</span>
                <span v-else>待定</span>
              </template>
            </el-table-column>
          </el-table>
          <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.size"
              layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 引入
import { onMounted, ref, defineEmits, getCurrentInstance, reactive, defineProps, watch } from "vue";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { useRouter } from 'vue-router';
import { exportXlsx } from "@/excel/Export2Excel.js";
import * as XLSX from 'xlsx'
const router = useRouter()
// 数据
const bigHeight = ref(); //整个高度
const emits = defineEmits(["close"]);
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 10,
});
const tableloading = ref(false)
const total = ref(0);
const props = defineProps({
  listQuery: {
    type: Object,
    default: {}
  },
});
const loadingShow = ref(false)
const tableData = ref([]);
// 方法
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
};
const CloseEvent = () => {
  emits("close");
};
onMounted(() => {
  listQuery.planid = props.listQuery.planid;
  listQuery.depcode = props.listQuery.depcode;
  listQuery.risklevel = props.listQuery.risklevel;
  getDataList()
  bigHeightFn();
});

//获取列表数据
function getDataList() {
  tableloading.value = true
  getApi(listQuery, '/mosty-jcgl/fxtj/getBmbsPage').then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      total.value = res.total;
    }
  }).catch((err) => {
    tableData.value = []
    tableloading.value = false;
  })
}

//导出Excel
function onloadExcel() {
  loadingShow.value = true
  let title = {
    sitename: '场所名称',
    objname: '部位',
    username: '辨识人',
    identifytime: '辨识时间',
    dangerDescription: '危险源描述',
    risklevels: '风险等级',
  }
  let obj = { ...listQuery };
  obj.pageSize = 100000
  getApi(listQuery, '/mosty-jcgl/fxtj/exportBmbs').then((res) => {
    if (res) {
      let data = res
      if (data) {
        for (let i = 0; i < data.length; i++) {
          if (data[i].risklevel == '4') {
            data[i].risklevels = '红色'
          }
          if (data[i].risklevel == '3') {
            data[i].risklevels = '橙色'
          }
          if (data[i].risklevel == '2') {
            data[i].risklevels = '黄色'
          }
          if (data[i].risklevel == '1') {
            data[i].risklevels = '蓝色'
          }

        }
        let tablename = '风险详情.xlsx'
        exportXlsx(title, data, '风险详情', tablename);

      }
    }

  }).finally(() => {
    loadingShow.value = false
  })
}
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  getDataList();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  getDataList();
};
</script>

<style lang="scss" scoped>
.bigBox {
  display: flex;

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon {
      cursor: pointer;
    }
  }
}

.tabBox {
  padding: 20px;
  height: calc(100% - 65px);

  .el-table {
    height: 70%;

    overflow: auto;
  }

  .fenye {
    top: 70%;
    background: #fff;
  }
}

.searchBox {
  display: flex;
  justify-content: space-between;
  padding: 10px;

  .title {
    height: 38px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .se_box {
    display: flex;
  }

  .sele {
    width: 173px;
    margin-right: 10px;
  }
}
</style>