<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 = "#1976d2";
            item.priceColor = "#333333";
            item.regionColor = "#333333";
            this.$set(this.tableData, index, item); 
          }
          else         
          {
            //console.log("偶数index: " + index);
            item.exchangeColor = "#ff9800";
            item.priceColor = "#ff9800";
            item.regionColor = "#ff9800";
            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%;
  border-radius: 5px;
  overflow: hidden;
  padding-top: 10px; /* 添加顶部内边距 */
}

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

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

thead {
  background: #f5f7fa;
  padding: 10%;
}

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

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

tr {
  border-bottom: 1px solid #e0e0e0;
}

tr:nth-child(even) {
  background: rgba(25, 118, 210, 0.05);
}
</style>
