<template>
  <div :class="['card',getThemeVal()]">
    <div class="title">
      <div class="icon-class">
        <icon-font
          name="icon-fund-fill"
          size="14"
          color="#fff"
        />
      </div>
      <div style="margin-left:12px;">敞口</div>
    </div>
    <div class="content">
      <div class="growth">
        <div>
          <span
            class="gray1"
            style="margin-right:4px;"
          >同比</span>
          <span
            class="raise"
            style="margin-right:2px;"
          >+10%</span>
          <img
            src="../../assets/growth_raise.svg"
            alt=""
          >
        </div>
        <div style="margin-left:20px">
          <span
            class="gray1"
            style="margin-right:4px;"
          >环比</span>
          <!-- <span
            class="reduce"
            style="margin-right:2px;"
          >-4%</span>
          <img
            src="../../assets/growth_reduce.svg"
            alt=""
          > -->
          <span
            class="raise"
            style="margin-right:2px;"
          >+8%</span>
          <img
            src="../../assets/growth_raise.svg"
            alt=""
          >
        </div>
      </div>
      <div class="amount">
        <span>20,000.00</span>
        <span
          style="margin-left:8px;font-size:12px"
          class="gray2"
        >万元</span>
      </div>
    </div>
    <div class="line-graph">
      <div
        v-if="chartData.length"
        id="lineChart"
        ref="lineChart"
      />
    </div>
  </div>
</template>

<script>
import mockData from './mockData';
import { themeChangeMixin } from '@/mixins/themeChangeMixin';
export default {
  mixins: [themeChangeMixin],
  data() {
    return {
      chart: null,
      chartData: [],
    };
  },
  watch: {
    theme(val) {
      this.chart?.clear();
      this.buildCharts();
    },
  },
  mounted() {
    this.getChartsData();
    window.addEventListener('resize', () => {
      // 调用图表实例的resize方法，使图表自适应
      this.chart?.resize();
    });
  },
  methods: {
    getThemeVal() {
      if (this.theme === 'default') {
        return 'default-bg';
      } else {
        return 'dark-bg';
      }
    },
    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 = mockData;
      this.buildCharts();
    },
    buildCharts() {
      if (!this.chartData.length) return;
      this.$nextTick(() => {
        if (!this.chart) {
          const chartEl = this.$refs.lineChart;
          this.chart = this.$echarts.init(chartEl);
        }
        const option = {
          tooltip: {
            // 提示tip
            show: true,
            trigger: 'axis',
            axisPointer: {
              show: true,
              type: 'line',
              snap: true,
            },
            confine: true, // 将 tooltip 限制在图表的区域内
          },
          grid: {
            left: 0, // 调整左侧边距，给纵坐标添加额外空间
            top: 0,
            right: 0,
            bottom: 0, // 调整底部边距，给横坐标添加额外空间
          },
          xAxis: {
            show: false,
            // 横坐标设置
            type: 'category',
            data: [],
            // boundaryGap: false,
            axisTick: {
              alignWithLabel: true,
            },
          },
          yAxis: [
            {
              // 纵坐标设置
              type: 'value',
              scale: true,
              show: false,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
            },
          ],
          series: [
            {
              data: [],
              type: 'line',
              showSymbol: false,
              color: '#FFA632',
              smooth: true,
              // areaStyle: { // 添加 areaStyle 属性
              //   color: 'rgba(0, 108, 255, 0.3)', // 设置背景色，可以是颜色值或渐变色等
              //   fontSize: 10,
              // },
            },
          ],
        };
        const xArr = [];
        const yArr = [];
        this.chartData.forEach((item) => {
          xArr.push(item.unit);
          yArr.push(Number(item.money).toFixed(4));
        });
        option.xAxis.data = xArr;
        option.series[0].data = yArr;
        this.chart.setOption(option);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.default-bg{
  background-image: url('../../assets/default/default_bg_orange.png');
  background-repeat: no-repeat; /* 防止平铺 */
  background-position: center;   /* 居中显示 */
  background-size: cover;       /* 覆盖整个区域 */
}
.dark-bg{
  background-image: url('../../assets/dark/dark_bg_orange.png');
  background-repeat: no-repeat; /* 防止平铺 */
  background-position: center;   /* 居中显示 */
  background-size: cover;       /* 覆盖整个区域 */
}
.card{
  width: 100%;
  height: 100%;
  padding: 12px;
  overflow:hidden;
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-content: space-between;
  .title{
    width: 100%;
    display:flex;
    flex-wrap:nowrap;
    font-size: 14px;
    .icon-class{
      min-width: 32px;
      min-height: 32px;
      border-radius: 16px;
      background-color: #FFA632;
    }
    .icon-class, div{
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .content{
    width: 100%;
    .growth{
        display:flex;
        flex-wrap:nowrap;
        font-size: 12px;
    div{
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
    }
  }
  .amount{
    font-size:26px;
    font-weight: 900;
  }
  }
  .line-graph{
    position:absolute;
    width: 40%;
    height: 50%;
    right:12px;
    top:12px;
    display:flex;
    flex:auto;
  }
}
#lineChart {
    flex: 1;
    width:100%;
    height: 100%;
  }
.gray1{
  color:var(--desktop-text-color-1);
}
.gray2{
  color:var(--desktop-text-color-2);
}
.raise{
  color:#E95652
}
.reduce{
  color:#20C98B
}
</style>
