<!-- 损耗记录 -->
<template>
  <div class="box">
    <div class="title">损耗记录</div>
    <div class="table">
      <el-table
        :highlight-current-row="false"
        class="eltable"
        stripe
        :header-cell-style="{ background: 'transparent' }"
        :data="tableData"
        style="width: 100%; height: 100%; border: none; background: transparent"
      >
        <el-table-column
          header-align="center"
          align="center"
          style="background: transparent; border: none"
          fixed
          prop="date"
          label="时间"
        />
        <el-table-column
          header-align="center"
          align="center"
          style="background: transparent; border: none"
          fixed
          prop="name"
          label="物资名称"
        />
        <el-table-column
          header-align="center"
          align="center"
          style="background: transparent; border: none"
          prop="type"
          label="报损类型"
        />
        <el-table-column
          header-align="center"
          align="center"
          style="background: transparent; border: none"
          prop="number"
          label="数量"
        />
        <el-table-column
          header-align="center"
          align="center"
          style="background: transparent; border: none"
          prop="state"
          label="单位"
        />
        <el-table-column
          header-align="center"
          align="center"
          min-width="90"
          style="background: transparent; border: none"
          prop="price"
          label="价值(万元)"
        />
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { getLossRecord } from "@/api/keshihua/detail";

let route = useRoute();
const data = reactive({
  tableData: [],
  selectType: "",
  selectValue: ""
});
let { tableData, selectType, selectValue } = toRefs(data);

const getList = () => {
  const data = reactive({
    // name: route.query.name ? route.query.name : ""
    name: ""
  });
  getLossRecord(data).then((res: any) => {
    if (res) {
      tableData.value = res;
    }
  });
};
onMounted(() => {
  getList();
});
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  position: relative;
  background: url("@/assets/emergencyImg/center_bottom_out.png") no-repeat;
  background-size: 100% 100%;
}

.box .table {
  position: absolute;
  top: 14%;
  left: 6%;
  width: 90%;
  height: 80%;
  z-index: 22;
  background-color: transparent;
}

.title {
  font-size: 24px;
  color: #ffffff;
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  padding-left: 30px;
  left: 2%;
  top: -3%;
  font-weight: 700;
  height: 50px;
  line-height: 40px;
  font-family: "黑体";
  background: linear-gradient(to bottom, #ffffff, rgb(0, 195, 255));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.el-table {
  background: transparent;
}

:deep(.el-table) {
  background: transparent;
}
/*最外层透明*/
:deep(.el-table),
:deep(.el-table__expanded-cell) {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.5);
  opacity: 0.8;
  font-size: 12px;
}

/* 表格内背景颜色 */
:deep(.el-table th),
:deep(.el-table tr),
:deep(.el-table td) {
  background-color: transparent;
  color: rgb(255, 255, 255);
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  /* background: red; */
  backdrop-filter: blur(10px);
  background: transparent;
}

:deep(
    .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf,
    .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf
  ) {
  border: none !important;
}

:deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
  border: none !important;
}

.el-table tbody tr:hover > td {
  background-color: transparent !important;
}

.el-table__body tr.hover-row.current-row > td.el-table__cell,
.el-table__body tr.hover-row.el-table__row--striped.current-row > td.el-table__cell,
.el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell,
.el-table__body tr.hover-row > td.el-table__cell {
  background-color: transparent !important;
}

:deep(.el-table tbody tr:hover > td) {
  background-color: transparent !important;
}

.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: none;
}

:deep(.el-table_row > td) {
  border: non;
}

:deep(.el-table) {
  --el-table-border-color: transparent;
}

:deep(.el-table .el-table__header tr) {
  background: url("@/assets/emergencyImg/center_bottom_title.png") no-repeat 0 90% !important;
  background-size: 100% auto !important;
}
:deep(.el-table .el-table__header tr .cell) {
  color: #709dcd;
  font-size: 12px;
}
:deep(.el-table--striped .el-table__body tr.el-table__row--striped.current-row td.el-table__cell) {
  background-color: transparent !important;
}
:deep(.el-table__body tr.current-row > td.el-table__cell) {
  background-color: transparent !important;
}
:deep(.el-table__header) {
  width: auto !important;
}
:deep(.el-table__body) {
  width: auto !important;
}
</style>
