<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :width="800"
    wrapClassName="custom-modal-box"
  >
    <template #title>
      <div class="title">
        <span>历史价格对比</span>
        <a-radio-group v-model:value="value" button-style="solid" @change="changeChart">
          <a-radio-button v-for="item in priceArray" :key="item.key" :value="item.key">
            {{ item.name }}
          </a-radio-button>
        </a-radio-group>
      </div>
    </template>
    <div class="item" ref="barlineChart"></div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import * as echarts from 'echarts';

  const priceArray = [
    {
      key: 0,
      name: '月度',
      category: [
        '1日',
        '2日',
        '3日',
        '4日',
        '5日',
        '6日',
        '7日',
        '8日',
        '9日',
        '10日',
        '11日',
        '12日',
        '13日',
        '14日',
        '15日',
        '16日',
        '17日',
        '18日',
        '19日',
        '20日',
        '21日',
        '22日',
        '23日',
        '24日',
        '25日',
        '26日',
        '27日',
        '28日',
        '29日',
        '30日',
        '31日',
      ],
      data: [
        299, 286, 346, 325, 269, 369, 279, 300, 389, 276, 340, 310, 299, 286, 346, 325, 269, 369,
        279, 300, 389, 276, 340, 310, 3, 5, 6, 9, 3, 10, 309,
      ],
    },
    {
      key: 1,
      name: '季度',
      category: ['一季度', '二季度', '三季度', '四季度'],
      data: [299, 286, 346, 325],
    },
    {
      key: 2,
      name: '年度',
      category: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月',
      ],
      data: [299, 286, 346, 325, 269, 369, 279, 300, 389, 276, 340, 310],
    },
  ];
  const barOption = {
    color: ['#5E95FF'],
    grid: {
      left: 50,
      right: 40,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
    },
    xAxis: [
      {
        type: 'category',
        data: [],
        axisPointer: {
          type: 'shadow',
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            color: ['rgba(204,204,204,0.2)'],
            type: 'solid',
          },
        },
        name: '单位：元',
        min: 0,
        max: 400,
        //interval: 100,
        axisLabel: {
          formatter: '{value}',
        },
      },
    ],
    series: [
      {
        name: '',
        type: 'bar',
        barWidth: 20,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 元';
          },
        },
        data: [],
      },
    ],
  };
  const value = ref(0);
  const chart = ref();
  const barlineChart = ref<HTMLDivElement>();
  const [registerModal, { setModalProps }] = useModalInner(async () => {
    setModalProps({
      showCancelBtn: false,
      showOkBtn: false,
      canFullscreen: false,
    });
    chart.value = echarts.init(unref(barlineChart) as HTMLDivElement);
    changeChart(priceArray[0]);
  });

  const changeChart = (info) => {
    const item = info.target ? priceArray[info.target.value] : info;
    barOption.xAxis[0].data = item.category;
    barOption.series[0].data = item.data;
    barOption.series[0].barWidth = (item.key === 0 ? 'auto' : 20) as any;
    chart.value.setOption(barOption);
    chart.value.resize(); //显示区域大小发生改变更新图表
  };
</script>
<style lang="less" scoped>
  .item {
    padding: 10px 10px 0;
    width: 100%;
    height: 340px;
  }

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    :deep(.ant-radio-group) {
      margin-right: 70px;
    }
  }
</style>
