<template>
  <!-- <transition name="yh-setting-fade"> -->
  <div class="table-container">
    <table @click="tableClick">
      <thead>
        <tr>
          <th style="width: 24%">车牌号</th>
          <th style="width: 19%">总里程</th>
          <th style="width: 19%">日里程</th>
          <th style="width: 19%">日用氢量</th>
          <th style="width: 19%">日碳减排</th>
        </tr>
      </thead>
    </table>
    <div class="scroll-wrapper">
      <vue-seamless-scroll
        :data="tableData"
        :class-option="scrollOptions"
        class="scroll-container"
      >
        <table @click="tableClick">
          <tbody>
            <tr v-for="(item, index) in tableData" :key="index">
              <td style="width: 24%">{{ maskPlateNumber(item.plateNumber) }}</td>
              <td style="width: 19%">{{ item.totalMileage }}km</td>
              <td style="width: 19%">{{ item.dayMileage }}km</td>
              <td style="width: 19%">{{ item.dayHydrogen }}kg</td>
              <td style="width: 19%">{{ item.dayCarbon }}kg</td>
            </tr>
          </tbody>
        </table>
      </vue-seamless-scroll>
    </div>
    <div class="dialog-container">
      <!--         :body-style="{ maxHeight: 'calc(100vh - 510px)', overflow: 'auto' }" -->
      <el-dialog
        title="车辆当日信息"
        :visible.sync="setVehicleDialog"
        class="dialog_el"
        height="400px"
        width="803px"
        center
        :lock-scroll="false"
        :append-to-body="true"
        :modal-append-to-body="true"
      >
        <!-- width="100%" class="dialog-table" -->
        <div class="dialog-body-wrapper">
          <el-table
            :data="tableData"
            border
            class="vehicleTable"
            height="600px"
            width="800px"
            :default-sort="{ prop: 'totalMileage', order: 'descending' }"
          >
            <el-table-column
              type="index"
              prop="tableIndex"
              label="序号"
              width="80px"
            ></el-table-column>
            <el-table-column
              prop="plateNumber"
              label="车牌号"
              width="120px"
              sortable
            ></el-table-column>
            <el-table-column
              prop="totalMileage"
              label="当前总里程"
              width="140px"
              :formatter="formatMileageKm"
              sortable
            ></el-table-column>
            <el-table-column
              prop="dayMileage"
              label="当日里程"
              width="130px"
              :formatter="formatMileageKm"
              sortable
            ></el-table-column>
            <el-table-column
              prop="dayHydrogen"
              label="当日用氢量"
              width="140px"
              :formatter="formatHydrogenKg"
              sortable
            ></el-table-column>
            <el-table-column
              prop="dayCarbon"
              label="当日碳减排"
              width="140px"
              :formatter="formatHydrogenKg"
              sortable
            ></el-table-column>
          </el-table>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button
            class="closeButton"
            type="primary"
            size="small"
            @click="closeDialog"
            >关闭</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>

  <!-- </transition> -->
</template>

<script>
import Vue from "vue";
import vueSeamlessScroll from "vue-seamless-scroll";
import { currentGET } from "api/modules";
import { Dialog, Table, TableColumn } from "element-ui";
import "element-ui/lib/theme-chalk/table.css";
import "element-ui/lib/theme-chalk/table-column.css";
Vue.component("el-dialog", Dialog);
Vue.use(Table);
Vue.use(TableColumn);
export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      scrollOptions: {
        step: 0.3, // 滚动速度
        limitMoveNum: 3, // 限制单步滚动的条数
        hoverStop: true, // 鼠标悬停是否暂停
        direction: 1, // 方向（1：向上滚动）
        singleHeight: 50, // 单行高度，用于精确控制滚动
        waitTime: 2000, // 等待时间，滚动间隔
      },
      tableData: [],
      setVehicleDialog: false,
    };
  },
  mounted() {
    this.getExchangeData();

    // 监听事件总线的刷新事件
    this.$eventBus.$on('refresh-all-data', this.getExchangeData);
  },
  beforeDestroy() {
    // 移除事件总线的刷新事件监听
    this.$eventBus.$off('refresh-all-data', this.getExchangeData);
  },
  methods: {
    tableClick() {
      console.log("tableClick");
      this.setVehicleDialog = true;
    },
    closeDialog() {
      this.setVehicleDialog = false;
    },
    maskPlateNumber(plateNumber) {
      if (!plateNumber || typeof plateNumber !== 'string') return plateNumber;
      // 车牌号格式：省份简称+字母+5位数字（如：粤A12345）
      // 隐藏中间四位数字
      if (plateNumber.length >= 7) {
        return plateNumber.substring(0, 2) + '****' + plateNumber.substring(6);
      }
      return plateNumber;
    },
    getExchangeData() {
      currentGET("big13").then((res) => {
        console.log("当日汇总数据：");
        console.log(res.data);
        this.tableData = res.data;
        // 限制最多显示20条数据
        //this.tableData = res.data.slice(0, 20);
      });
    },
    formatMileageKm(row, column, cellValue, index) {
      if (row.nodeName === null) return "0km";
      else return cellValue + "km";
    },
    formatHydrogenKg(row, column, cellValue, index) {
      if (row.nodeName === null) return "0kg";
      else return cellValue + "kg";
    },
  },
};
</script>

<style scoped>
.table-container {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  table-layout: fixed; /* 固定表格布局，确保列宽一致 */
}

th,
td {
  padding: 12px;
  color: #2d3748;
  font-size: 14px;
  border-right: 1px solid rgba(0, 212, 170, 0.2);
  border: none;
  text-align: center;
}

/* 统一列宽 */
th:nth-child(1),
td:nth-child(1) {
  width: 24%;
}

th:nth-child(2),
td:nth-child(2),
th:nth-child(3),
td:nth-child(3),
th:nth-child(4),
td:nth-child(4),
th:nth-child(5),
td:nth-child(5) {
  width: 19%;
}

th {
  color: #94a3b8;
  font-family: "PingFang SC";
  font-weight: 500;
  font-size: 14px;
  padding: 12px;
}

td {
  color: #1e293b;
  font-family: "PingFang TC";
  font-weight: 500;
  font-size: 12px;
}

thead {
  color: #ffffff;
  font-weight: 600;
}

.dialog_el >>> .el-dialog__body {
  /* //border-top: 1px solid #dcdfe6;
  //border-bottom: 1px solid #dcdfe6; */
  max-height: 60vh !important;
  min-height: 100px;
  overflow-y: hidden;

  /* background: #013f6a; */
}
.vehicleTable {
  /* width: 100%; */
  text-align: center; /* 确保单元格内容居中 */
}
.vehicleTable >>> th {
  padding: 12px;
  font-size: 14px;
  /* width: 20%; */
  text-align: center; /* 确保单元格内容居中 */
}
.vehicleTable >>> td {
  text-align: center; /* 确保单元格内容居中 */
}
.closeButton {
  color: #ffffff;
  background: linear-gradient(135deg, #00d4aa 0%, #1de9b6 100%);
  border: none;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.closeButton:hover {
  background: linear-gradient(135deg, #00bfa5 0%, #00d4aa 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 212, 170, 0.3);
}
/* 内容容器滚动设置 */
.dialog-body-wrapper {
  padding: 1px 1px;
  height: 100%;
  overflow-y: auto;
  /* width: 100%; */
}

.dialog-container {
  width: 300px;
  height: 0px; /* 适配大屏，数据较多可增加高度 */
  overflow: hidden;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(240, 249, 255, 0.95) 100%
  );
  border-radius: 12px;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 212, 170, 0.15);
}

.dialog_el .el-table {
  background-color: transparent !important;
  border-radius: 8px;
  overflow: hidden;
}

.dialog_el .el-table th {
  background: linear-gradient(135deg, #00d4aa 0%, #1de9b6 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.dialog_el .el-table td {
  background-color: rgba(255, 255, 255, 0.7) !important;
  color: #2d3748 !important;
  border-bottom: 1px solid rgba(0, 212, 170, 0.1) !important;
}

.dialog_el .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(0, 212, 170, 0.1) !important;
}
/* .dialog-table{
  background-color: #ffffff;
} */

/* .dialog-table {
  // background: linear-gradient(135deg, #031a47 0%, #e4e8ed 100%); 
  background-color: #f5f7fa;
 // text-align: center; 
} */
/* .dialog-table th {
  background-color: #e3f2fd !important;
  color: white;
}
.dialog-table td {
  background-color: rgba(255,255,255,0.8);
} */
.scroll-wrapper {
  flex: 1;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
}

.scroll-container {
  height: 100%;
  overflow: hidden;
}

.scroll-container table {
  width: 100%;
  table-layout: fixed; /* 确保与表头布局一致 */
}

tr {
  border-bottom: 1px solid rgba(0, 212, 170, 0.1);
  transition: all 0.2s ease;
  border: none;
}

tr:nth-child(even) {
  background: rgba(0, 212, 170, 0.05);
}

/* tr:hover {
  background: rgba(0, 212, 170, 0.1);
  transform: translateX(2px);
} */
</style>
