<template>
  <div class="card">
    <PageHeader :title="'市场行情'">
      <el-radio-group
        v-model="handleValue"
        size="medium"
        style="margin-left:8px"
        @change="getShowData"
      >
        <el-radio-button
          v-for="label in labels"
          :key="label"
          :label="label"
          :class="[`${theme}`]"
        />
      </el-radio-group>
      <hr class="split-line">
      <icon-font
        name="icon-more2"
        size="12"
        style="cursor:pointer"
        @click="getMoreInfo"
      />
      <template #image>
        <div class="icon-bg">
          <icon-font
            name="icon-trend1"
            size="12"
            color="var(--text-color-9)"
          />
        </div>
      </template>
      <template #icon>
        <i
          class="el-icon-refresh-right refresh-icon"
          @click="handleRefresh"
        />
      </template>
    </PageHeader>
    <div class="content">
      <div class="content-left">
        <div class="pairsBox">
          <div
            v-for="(item,index) in boxData"
            :key="index"
            :class="['pairsItem',selected===index?getItemBg(item):'']"
            @click="changeItem(index)"
          >
            <div class="item-left">
              <img
                class="situation-icons"
                :src="require(`../../assets/flag_${item.currency.slice(0,3)}.png`)"
                alt=""
              >
              <span>{{ item.currency }}</span>
            </div>
            <div class="item-right">
              <span>{{ item.rate.slice(0,-2) }}</span>
              <span style="font-size:20px;margin-bottom:4px">{{ item.rate.slice(-2) }}</span>
              <span
                style="margin-left:8px"
                :class="[item.type==='1'?'raise':'reduce']"
              >{{ item.bp }}bp</span>
              <img
                :src="require(`../../assets/growth_${item.type==='1'?'raise':'reduce'}.svg`)"
                alt=""
              >
            </div>
          </div>
        </div>
        <el-button
          class="add-button"
          icon="el-icon-circle-plus-outline"
        >添加货币对
        </el-button>
      </div>
      <div
        v-if="chartData.length"
        id="marketSituationCharts"
        ref="marketSituationCharts"
      />
      <!-- <Empty style="flex: 1;" /> -->
    </div>
  </div>
</template>

<script>
import PageHeader from '../components/PageHeader.vue';
import Empty from '../../components/Empty/index.vue';
import { chartThemeMap } from '../../common/chartTheme';
import { themeChangeMixin } from '@/mixins/themeChangeMixin';
import { formatterDate } from '../../common/formatterFun.js';
import mockData3 from './mockData3';
import mockData2 from './mockData2';
export default {
  components: {
    PageHeader,
    Empty,
  },
  mixins: [themeChangeMixin],
  data() {
    return {
      labels: ['即期汇率', '掉期点', '波动率'], // tab标签
      handleValue: '即期汇率',
      chart: null,
      chartData: [],
      selected: 0,
      boxData: [],
    };
  },
  watch: {
    theme(val) {
      this.chart?.clear();
      this.buildCharts();
    },
  },
  created() {
    this.boxData = mockData3;
  },
  mounted() {
    this.getChartsData();
    window.addEventListener('resize', () => {
      // 调用图表实例的resize方法，使图表自适应
      this.chart?.resize();
    });
  },
  methods: {
    getMoreInfo() {

    },
    getShowData(value) {
      console.log('111111', value);
    },
    handleRefresh() {
      console.log('刷新了');
    },
    changeItem(val) {
      this.selected = val;
    },
    getItemBg(item) {
      if (item.type === '0') {
        return `${this.theme}_bg_reduce`;
      } else if (item.type === '1') {
        return `${this.theme}_bg_raise`;
      }
    },
    async getChartsData() {
    //   this.loading = true;
    //   const res = await this.$apis.queryPriceList({});
    //   this.loading = false;
    //   if (res.success) {
    //     this.showData = res.data.result;
    //     this.handlePairs(this.showData[0]?.pairs);
    //   } else {
    //     this.chartData = [];
    //     this.buildCharts();
    //   }
      this.chartData = mockData2;
      this.buildCharts();
    },
    buildCharts() {
      if (!this.chartData.length) return;
      this.$nextTick(() => {
        if (!this.chart) {
          const chartEl = this.$refs.marketSituationCharts;
          this.chart = this.$echarts.init(chartEl);
        }
        let base = +new Date(2025, 3, 26);
        const oneHour = 3600 * 1000;
        const data = [[base, (Math.random() * 8 + 72) / 10]];
        for (let i = 1; i < 2952; i++) {
          const now = new Date((base += oneHour));
          data.push([+now, Math.round((Math.random() - 0.5) * 2 + data[i - 1][1])]);
        }
        // let beginDate = '2025-03-26';
        // let endDate = '2025-07-26';
        const option = {
          tooltip: {
            trigger: 'axis',
            position: function(pt) {
              return [pt[0], '10%'];
            },
          },
          grid: {
            left: 60, // 调整左侧边距，给纵坐标添加额外空间
            top: 40,
            right: 10,
            bottom: 30, // 调整底部边距，给横坐标添加额外空间
          },
          xAxis: {
            // 横坐标设置
            type: 'time',
            data: [],
            // boundaryGap: false,
            axisLabel: {
              interval: 'auto', // 设置横坐标文字全部显示
              color: chartThemeMap[this.theme]['axisColor'],
              fontSize: 10,
              textStyle: {
                color: chartThemeMap[this.theme]['axisColor'],
              },
            },

            axisLine: {
              lineStyle: {
                color: chartThemeMap[this.theme]['axisColor'],
              },
            },
          },
          yAxis: [
            {
              // 纵坐标设置
              type: 'value',
              scale: true,
              nameTextStyle: {
                color: chartThemeMap[this.theme]['axisColor'],
              },
              axisLabel: {
                color: chartThemeMap[this.theme]['axisColor'],
                fontSize: 10,
              },
              splitLine: {
                lineStyle: {
                  color: chartThemeMap[this.theme]['splitLine'],
                },
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
            },
          ],
          //   dataZoom: [
          //     {
          //       type: 'inside',
          //       start: 0,
          //       end: 20,
          //     },
          //     {
          //       start: 0,
          //       end: 20,
          //     },
          //   ],
          series: [
            {
              type: 'line',
              smooth: true,
              symbol: 'none',
              color: 'rgb(0, 108, 255)',
              areaStyle: {
                color: 'rgba(0, 108, 255, 0.3)', // 设置背景色，可以是颜色值或渐变色等
                fontSize: 10,
              },
              data: data,
            },
          ],
        };
        // const xArr = [];
        // const yArr = [];
        // this.chartData.forEach((item) => {
        //   xArr.push(formatterDate(item.time));
        //   yArr.push(Number(item.rate).toFixed(4));
        // });
        // option.xAxis.data = xArr;
        // option.series[0].data = yArr;
        this.chart.setOption(option);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.card{
  width: 100%;
  height: 100%;
  padding: 12px;
  overflow:hidden;
  position:relative;
  .split-line{
    margin:auto 11px auto 11px;
    width: 1px;
    background: rgba($color: #ffffff, $alpha: 0.13);
    height: 12px;
  }
  .content{
    width: 100%;
    height: calc(100% - 25px);
    display:flex;
    flex:auto;
    .content-left{
      width: 200px;
      height: 100%;
      position: relative;
       .pairsBox {
        font-size: 10px;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        position: relative;
        /* 滚动条整体样式 */
        &::-webkit-scrollbar {
            width: 8px;
            /* 垂直滚动条的宽度 */
            height: 8px;
            /* 水平滚动条的高度 */
        }

        /* 滚动条轨道 */
        // &::-webkit-scrollbar-track {
        //   background: #f1f1f1; /* 轨道的背景色 */
        //   border-radius: 10px; /* 轨道的圆角 */
        // }

        /* 滚动条滑块 */
        &::-webkit-scrollbar-thumb {
            background: var(--scrollBar);
            /* 滑块的背景色 */
            border-radius: 5px;
            /* 滑块的圆角 */
        }

        /* 滑块悬停样式 */
        &::-webkit-scrollbar-thumb:hover {
            background: var(--scrollBarHover);
            /* 悬停时滑块的背景色 */
        }

        .pairsItem {
            padding:0 8px;
            font-weight: 700;
            display: flex;
            justify-content: space-between;
            height: 30px;
            .num {
            position: relative;
            display: flex;
            align-items: center;
            height: 30px;

            .icon {
                font-size: 14px;
                font-weight: 900;
            }
            }
            .situation-icons{
                width:16px;
                height: 16px;
                border-radius: 8px;
            }
            .pairs {
            font-size: 10px;
            color: var(--color-90);
            }

            .upValue {
            color: var(--red-60);
            }

            .downValue {
            color: var(--green-50);
            }
            .item-left,.item-right{
                font-size: 12px;
                display:flex;
                align-items: center;
            }
        }

        .activeItem {
            background: rgba(0, 255, 255, 0.07);
            border-radius: 2px;
            border: 1px solid rgba(0, 255, 255, 0.07);
        }
    }
        .add-button{
          position:absolute;
          bottom:0;
          width: 100%;
          color:var(--desktop-text-color-3);
          background-color: var(--bg-color-15);
          border:1px solid var(--desktop-border-color-1);
        }
    }
  }
  #marketSituationCharts {
    flex: 1;
    margin-left: 12px;
    height: 100%;
  }
}
.titiebox{
    width: 14%;
}
.raise{
  color:var(--text-color-5);
}
.reduce{
  color:var(--text-color-6);
}
.icon-bg{
  width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--bg-color-17);
}
.black_bg_reduce{
  background:url('../../assets/dark/dark_bg_reduce.png');
  background-repeat: no-repeat; /* 防止平铺 */
  background-position: center;   /* 居中显示 */
  background-size: cover;       /* 覆盖整个区域 */
}
.default_bg_reduce{
  background:url('../../assets/default/default_bg_reduce.png');
  background-repeat: no-repeat; /* 防止平铺 */
  background-position: center;   /* 居中显示 */
  background-size: cover;       /* 覆盖整个区域 */
}
.black_bg_raise{
  background:url('../../assets/dark/dark_bg_raise.png');
  background-repeat: no-repeat; /* 防止平铺 */
  background-position: center;   /* 居中显示 */
  background-size: cover;       /* 覆盖整个区域 */
}
.default_bg_raise{
  background:url('../../assets/default/default_bg_raise.png');
  background-repeat: no-repeat; /* 防止平铺 */
  background-position: center;   /* 居中显示 */
  background-size: cover;       /* 覆盖整个区域 */
}
// 自定义按钮组样式
::v-deep .el-radio-button__inner{
  background-color: var(--desktop-bg-color-5);
  color:var(--color-90);
}
::v-deep .el-radio-button:first-child .el-radio-button__inner{
  border-left:none;
}
::v-deep .black .el-radio-button__orig-radio:checked+.el-radio-button__inner{
  background:url('../../assets/dark/dark_bg_button_selected.png');
  background-repeat: no-repeat; /* 防止平铺 */
  background-position: center;   /* 居中显示 */
  background-size:cover;
  border: none;
  box-shadow: none;
}
::v-deep .default .el-radio-button__orig-radio:checked+.el-radio-button__inner{
  background-color:#3389FF;
  color: #ffffff;
  background-repeat: no-repeat; /* 防止平铺 */
  background-position: center;   /* 居中显示 */
  background-size:cover;
  border: none;
  box-shadow: none;
}
::v-deep .el-radio-button__orig-radio+.el-radio-button__inner{
  border: none;
  box-shadow: none;
}
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner{
  color:#ffffff;//被选中黑白模式都是这个颜色
}
</style>
