<template>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th style="width: 36%">交易所</th>
          <th>项目</th>
          <th>价格 (RMB)</th>
          <th>地区</th>
        </tr>
      </thead>
    </table>
    <div class="scroll-wrapper">
      <vue-seamless-scroll
        :data="tableData"
        :class-option="scrollOptions"
        class="scroll-container"
      >
        <table>
          <tbody>
            <tr v-for="(item, index) in tableData" :key="index">
              <td>
                {{ item.name }}
              </td>
              <td>{{ item.project }}</td>
              <td>{{ item.price }}</td>
              <td>{{ item.area }}</td>
            </tr>
          </tbody>
        </table>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import { currentGET } from "api/modules";
export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      scrollOptions: {
        step: 0.3, // 滚动速度
        limitMoveNum: 2, // 限制单步滚动的条数
        hoverStop: true, // 鼠标悬停是否暂停
        direction: 1, // 方向（1：向上滚动）
      },
      tableData: [
        // { exchange: "湖北碳排放权交易中心", project: "CER", price: "90", region: "中国-湖北", exchangeColor: "#00ffcc", priceColor: "#ffffff", regionColor: "#ffffff" },
        // { exchange: "欧洲碳排放权交易体系", project: "EUA", price: "90", region: "欧盟", exchangeColor: "#00ffcc", priceColor: "#00ffcc", regionColor: "#ffffff" },
        // { exchange: "洲际交易所", project: "CERs", price: "89", region: "美国", exchangeColor: "#00ffcc", priceColor: "#00ffcc", regionColor: "#00ffcc" },
        // { exchange: "加州碳市场", project: "CER", price: "88", region: "美国-加州", exchangeColor: "#ffcc00", priceColor: "#ffcc00", regionColor: "#ffcc00" },
        // { exchange: "英国碳市场", project: "CER", price: "87", region: "英国", exchangeColor: "#ffcc00", priceColor: "#ffcc00", regionColor: "#ffffff" },
        // { exchange: "热田碳排放交易所", project: "CER", price: "86", region: "韩国", exchangeColor: "#00ffcc", priceColor: "#ffffff", regionColor: "#ffffff" },
        // { exchange: "湖北碳排放权交易中心", project: "CER", price: "90", region: "中国-湖北", exchangeColor: "#00ffcc", priceColor: "#ffffff", regionColor: "#ffffff" },
        // { exchange: "欧洲碳排放权交易体系", project: "EUA", price: "90", region: "欧盟", exchangeColor: "#00ffcc", priceColor: "#00ffcc", regionColor: "#ffffff" },
        // { exchange: "洲际交易所", project: "CERs", price: "89", region: "美国", exchangeColor: "#00ffcc", priceColor: "#00ffcc", regionColor: "#00ffcc" },
        // { exchange: "加州碳市场", project: "CER", price: "88", region: "美国-加州", exchangeColor: "#ffcc00", priceColor: "#ffcc00", regionColor: "#ffcc00" },
        // { exchange: "英国碳市场", project: "CER", price: "87", region: "英国", exchangeColor: "#ffcc00", priceColor: "#ffcc00", regionColor: "#ffffff" },
        // { exchange: "热田碳排放交易所", project: "CER", price: "86", region: "韩国", exchangeColor: "#00ffcc", priceColor: "#ffffff", regionColor: "#ffffff" },
      ],
    };
  },
  mounted() {
    this.getExchangeData();

    // 监听事件总线的刷新事件
    this.$eventBus.$on('refresh-all-data', this.getExchangeData);
  },
  beforeDestroy() {
    // 移除事件总线的刷新事件监听
    this.$eventBus.$off('refresh-all-data', this.getExchangeData);
  },
  methods: {
    getExchangeData() {
      currentGET("big4").then((res) => {
        console.log("交易所数据：");
        //console.log(this.tableData1);
        console.log(res.data);
        this.tableData = res.data;
        this.tableData.forEach((item, index) => {
          if (index % 2 !== 0) {
            item.exchangeColor = "#00D4AA";
            item.priceColor = "#333333";
            item.regionColor = "#333333";
            this.$set(this.tableData, index, item);
          } else {
            //console.log("偶数index: " + index);
            item.exchangeColor = "#10b981";
            item.priceColor = "#10b981";
            item.regionColor = "#10b981";
            this.$set(this.tableData, index, item);
            //this.$set(this.tableData, index, modifiedItem);
          }
        });
      });
      //      console.log("转换后交易所数据：");
      //      console.log(this.tableData);
    },
  },
};
</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: left;
}

th,
td {
  padding: 10px 12px;
  color: #334155;
  font-family: "PingFang SC";
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  width: 25%;
}

td:first-child {
  width: 36%;
}

thead th {
  color: #059669;
  font-family: "PingFang SC";
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
}

.scroll-wrapper {
  flex: 1;
  overflow: hidden;
}

.scroll-container table {
  width: 100%;
}

tr {
}
</style>
