<template>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>交易所</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 :style="{ color: item.exchangeColor }">{{ item.name }}</td>
              <td>{{ item.project }}</td>
              <td :style="{ color: item.priceColor }">{{ item.price }}</td>
              <td :style="{ color: item.regionColor }">{{ 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();
  },
  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 = "rgb(0, 186, 255)";
            item.priceColor = "rgb(26, 26, 26)";
            item.regionColor = "rgb(26, 26, 26)";
            this.$set(this.tableData, index, item);
          } else {
            //console.log("偶数index: " + index);
            item.exchangeColor = "rgb(221, 160, 221)";
            item.priceColor = "rgb(221, 160, 221)";
            item.regionColor = "rgb(221, 160, 221)";
            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: 310px;
  border-radius: 5px;
  overflow: hidden;
  padding-top: 10px; /* 添加顶部内边距 */
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

th,
td {
  padding: 12px;
  color: #000000;
  font-size: 14px;
  width: 25%;
}

thead {
  background: linear-gradient(135deg, #f8faff, #e6f3ff);
  padding: 10%;
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  font-weight: 600;
}

.scroll-wrapper {
  height: 210px; /* 适配大屏，数据较多可增加高度 */
  overflow: hidden;
}

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

tr {
  border-bottom: 1px solid #e8f4fd;
  transition: background-color 0.3s ease;
}

tr:nth-child(2n) {
  background: rgba(52, 152, 219, 0.03);
}
tr:nth-child(odd) {
  background: hsla(0, 0%, 100%, 0.8);
}
</style>
