<!-- 物资调用情况 -->

<template>
  <div class="box">
    <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 style="background: transparent; border: none" fixed prop="date" label="省份名称" />
        <el-table-column style="background: transparent; border: none" prop="name" label="数量" />
        <el-table-column style="background: transparent; border: none" prop="state" label="价值(万元)" />
      </el-table>
    </div>
    <div class="title">物资调用情况</div>
    <el-select
      v-model="selectData"
      :teleported="false"
      popper-class="popperClass"
      class="select"
      size="small"
      placeholder="请选择"
      style="width: 150px; height: 21px"
    >
      <el-option value="1" label="全部" />
      <el-option value="2" label="被服" />
      <el-option value="3" label="床具" />
      <el-option value="4" label="帐篷" />
      <el-option value="5" label="抢险物料" />
      <el-option value="6" label="救生器材" />
    </el-select>
    <el-button size="small" class="Btnin" style="background: transparent">调用</el-button>
    <el-button size="small" class="Btnout" style="background: transparent">调出</el-button>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import header from "./header.vue";
let selectData = ref("1");
const tableData = [
  {
    date: "河北",
    name: "4442",
    state: "2222"
  },
  {
    date: "河北",
    name: "4442",
    state: "2222"
  },
  {
    date: "河北",
    name: "4442",
    state: "2222"
  },
  {
    date: "河北",
    name: "4442",
    state: "2222"
  },
  {
    date: "河北",
    name: "4442",
    state: "2222"
  },
  {
    date: "河北",
    name: "4442",
    state: "2222"
  }
];
function Btnin() {
  console.log("调用");
}
function Btnout() {
  console.log("调出");
}

onMounted(() => {
  //     window.addEventListener("resize", () => {
  //     myChart.resize();
  //   });
});
</script>

<style scoped>
.btn {
  width: 10%;
  height: 10%;
  /* background: pink; */
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  color: white;
  text-align: center;

  font-size: 12px;
}

.Btnin {
  position: absolute;
  right: 40%;
  top: 20%;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.Btnout {
  position: absolute;
  right: 28%;
  top: 20%;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

:deep(.select .el-select-dropdown) {
  background: rgba(132, 159, 228, 0.2) !important;
}

:deep(.select .el-select-dropdown .el-select-dropdown__item) {
  /* background: rgba(12,21,44,0.2); */
}

.el-select-dropdown__item.selected,
.el-select-dropdown__item:hover,
.el-select-dropdown__item.hover {
  color: #fff;
  background: #409eff;
}

.select {
  position: absolute;
  left: 14%;
  top: 20%;
  /* height: 10%; */
}

:deep(.el-popper.is-light) {
  background: #307cbf;
  border: 1px solid #273f70;
}

:deep(.el-select-dropdown__item.hover) {
  background: transparent;
  border: none;
  color: #04faa0;
}

:deep(.el-select-dropdown__item) {
  background: transparent;
  border: none;
  color: #fff;
}

:deep(.el-popper.is-light .el-popper__arrow::before) {
  border: 1px solid #4778d9;
  background: #4778d9;
  right: 0;
}

:deep(.el-select__wrapper) {
  /* position: absolute; */
  /* width: 50%; */
  /* height: 4%; */
  /* left: 20%;
    top:; */
  background: transparent !important;
  border: rgba(255, 255, 255, 0.2) 1px solid !important;
  box-shadow: none;
}

.box {
  width: 100%;
  height: 100%;
  position: relative;
}

.box .table {
  position: absolute;
  bottom: 6%;
  left: 14%;
  width: 80%;
  height: 67%;
  /* background: pink; */
  z-index: 22;
  background-color: transparent;
}

.title {
  font-size: 20px;
  color: red;
  position: absolute;
  left: 14%;
  top: 6%;
  font-weight: 700;
  background: linear-gradient(to bottom, #ffffff, rgb(29, 233, 234));
  -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__body tr.current-row>td.el-table__cell ){
    background-color:none;
}
.el-table__body tr.current-row>td.el-table__cell{
    background: none;
} */
/* 表格内背景颜色 */
: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: rgba(34, 62, 165, 0.3);
}

: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--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>
