<!-- 物资储备统计 -->
<template>
  <div class="box">
    <div class="title">{{ 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="materialNameZn"
          label="物资名称"
        />
        <el-table-column
          header-align="center"
          align="center"
          style="background: transparent; border: none"
          prop="specs"
          label="规格"
        />
        <el-table-column
          header-align="center"
          align="center"
          style="background: transparent; border: none"
          prop="quantityAll"
          label="数量+单位"
        />
        <el-table-column
          header-align="center"
          align="center"
          style="background: transparent; border: none"
          prop="totalPriceAll"
          label="价值"
        />
      </el-table>
    </div>
  </div>
</template>

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

let route = useRoute();
const props = defineProps({ msg: String });
const data = reactive({
  tableData: [],
  title: ""
});
const titleList: any[] = reactive([]);
const formData = reactive({});
let { tableData, title } = toRefs(data);

const getList = () => {
  const data = reactive({
    // name: route.query.name ? route.query.name : ""
    name: ""
  });
  getMaterial(data).then((res: any) => {
    if (res) {
      Object.keys(res).forEach((key: string) => {
        titleList.push(key);
      });
      if (props.msg == "first") {
        titleList.forEach((item, index) => {
          if (index == 0) {
            title.value = titleList[0];
          }
        });
        tableData.value = res[title.value];
      }
      if (props.msg == "second") {
        titleList.forEach((item, index) => {
          if (index == 1) {
            title.value = titleList[1];
          }
        });
        tableData.value = res[title.value];
      }
      if (props.msg == "third") {
        titleList.forEach((item, index) => {
          if (index == 2) {
            title.value = titleList[2];
          }
        });
        tableData.value = res[title.value];
      }
    }
  });
};

onMounted(() => {
  getList();
});
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  position: relative;
}

.box .table {
  position: absolute;
  bottom: -7%;
  left: 8%;
  width: 86%;
  height: 80%;
  z-index: 22;
  background-color: transparent;
}

.title {
  font-size: 18px;
  color: #ffffff;
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  padding-left: 30px;
  left: 8%;
  top: 8%;
  font-weight: 500;
  height: 50px;
  line-height: 40px;
  background: url("@/assets/emergencyImg/left_title_bg.png") no-repeat;
}
.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/left_table_title.png") no-repeat !important;
  background-size: 100% 100% !important;
}
:deep(.el-table .el-table__header tr .cell) {
  color: #709dcd;
  font-size: 14px;
}
:deep(.el-table .el-table__body tr) {
  /* background: pink !important; */
  background: url("@/assets/emergencyImg/left_list_bg.png") no-repeat !important;
  background-size: 100% auto !important;
  background-position: 0 84% !important;
}
: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;
}
</style>
