<template>
  <div class="card">
    <PageHeader :title="'止损'">
      <Select :form-items="formItems" />
      <el-radio-group
        v-model="handleValue1"
        size="medium"
        style="margin-left:8px"
        @change="getShowData"
      >
        <el-radio-button
          v-for="label in labels1"
          :key="label"
          :label="label"
          :class="[`${theme}`]"
        />
      </el-radio-group>
      <el-radio-group
        v-model="handleValue2"
        size="medium"
        style="margin-left:8px"
        @change="getShowData"
      >
        <el-radio-button
          v-for="label in labels2"
          :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-chart-combo"
            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
        v-if="chartData.length"
        id="moneyBalanceCharts"
        ref="moneyBalanceCharts"
      />
      <!-- <Empty style="flex: 1;" /> -->
    </div>
  </div>
</template>

<script>
import mockData from './mockData';
import Select from '../components/desktopSelect';
import PageHeader from '../components/PageHeader.vue';
// import Empty from '../../components/Empty/index.vue';
import { chartThemeMap } from '../../common/chartTheme';
import { themeChangeMixin } from '@/mixins/themeChangeMixin';
import mockData2 from './mockData2';
import { formatterDate } from '../../common/formatterFun';
export default {
  components: {
    Select,
    PageHeader,
    // Empty,
  },
  mixins: [themeChangeMixin],
  data() {
    return {
      formItems: {
        // select: true,
        type: 'select',
        prop: 'select1',
        attrs: {
          // label: '静态选择',
          // multiple: true , // 多选
        },
        options: mockData,
      },
      labels1: ['日止损', '月止损', '年止损'], // tab标签
      handleValue1: '日止损',
      labels2: ['ALL', 'FxFwd', 'FxSwap'], // tab标签
      handleValue2: 'ALL',
      chart: null,
      chartData: [],
    };
  },
  watch: {
    theme(val) {
      this.chart?.clear();
      this.buildCharts();
    },
  },
  mounted() {
    this.getChartsData();
    window.addEventListener('resize', () => {
      // 调用图表实例的resize方法，使图表自适应
      this.chart?.resize();
    });
  },
  methods: {
    getMoreInfo() {

    },
    getShowData(value) {
      console.log('111111', value);
    },
    handleRefresh() {
      console.log('刷新了');
    },
    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.moneyBalanceCharts;
          this.chart = this.$echarts.init(chartEl);
        }
        const option = {
          tooltip: {
            // 提示tip
            show: true,
            trigger: 'axis',
            axisPointer: {
              show: true,
              type: 'line',
              snap: true,
            },
          },
          grid: {
            left: 60, // 调整左侧边距，给纵坐标添加额外空间
            top: 40,
            right: 10,
            bottom: 30, // 调整底部边距，给横坐标添加额外空间
          },
          xAxis: {
            // 横坐标设置
            type: 'category',
            data: [],
            // boundaryGap: false,
            axisLabel: {
              interval: 'auto', // 设置横坐标文字全部显示
              color: chartThemeMap[this.theme]['axisColor'],
              fontSize: 10,
              textStyle: {
                color: chartThemeMap[this.theme]['axisColor'],
              },
            },
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: chartThemeMap[this.theme]['axisColor'],
              },
            },
          },
          yAxis: [
            {
              // 纵坐标设置
              type: 'value',
              name: '万元',
              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,
              },
            },
          ],
          series: [
            {
              name: 'Direct',
              type: 'bar',
              data: [],
              barWidth: '40%',
              color: '#9481E5',
              smooth: true,
              areaStyle: { // 添加 areaStyle 属性
                color: 'rgba(0, 108, 255, 0.3)', // 设置背景色，可以是颜色值或渐变色等
                fontSize: 10,
              },
              // 设置限额线（markLine）
              markLine: {
                data: [{
                  yAxis: -100000, // 固定限额线
                  name: '上限',
                  lineStyle: {
                    color: '#ff0000', // 红色线
                    width: 2,
                    type: 'dashed', // 虚线
                  },
                  label: {
                    show: false,
                  },
                }],
                symbol: 'none', // 不显示箭头
              },
            },

          ],
        };
        const xArr = [];
        const yArr = [];
        this.chartData.forEach((item) => {
          xArr.push(formatterDate(item.time));
          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>
.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{
    height: calc(100% - 25px);
  }
  #moneyBalanceCharts {
    flex: 1;
    width:100%;
    height: 100%;
  }
}
.titiebox{
    width: 14%;
}
.icon-bg{
  width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--bg-color-17);
}
// 自定义按钮组样式
::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>
