<template>
  <Card title="成交占比" :loading="loading">
    <template #extra>
      <div class="condition">
          <div class="selct" style="display: inline-block;">
            <span style="margin-right:15px">颗粒度</span>
            <Select
            v-model:value="value"
            label-in-value
            style="width: 100px;margin-right:30px"
            placeholder="请选择颗粒度"
            :options="options"
            @change="handleChange"
          ></Select>
          </div>
          <a-button @click="export" type="primary" >导出</a-button>
      </div>
    </template>
    <div ref="chartRef1" :style="{ width, height }"></div>
  </Card>
</template>
<script lang="ts" setup>
import type { SelectProps } from 'ant-design-vue';
import { Ref, ref, watch } from 'vue';
import { Card, Select } from 'ant-design-vue';
import { useECharts } from '/@/hooks/web/useECharts';
const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
const shadowColor = ['rgba(158,135,255, 0.3)','rgba(115,221,255, 0.3)','rgba(254,154,139, 0.3)']
const props = defineProps({
  loading: Boolean,
  width: {
    type: String as PropType<string>,
    default: '100%',
  },
  height: {
    type: String as PropType<string>,
    default: '300px',
  },
  propsData:{
    type:Object,
    default:{
      xData:['北京', '上海', '广州', '深圳', '香港', '澳门', '台湾'],
      yData:[10, 10, 30, 12, 15, 3, 7],
    }
  }
});
const value = ref('a1');
const options = ref<SelectProps['options']>([
      {
        value: 'jack',
        label: 'Jack (100)',
      },
      {
        value: 'lucy',
        label: 'Lucy (101)',
      },
    ]);
const chartRef1 = ref<HTMLDivElement | null>(null);
const xData = ref<string[]>(['北京', '上海', '广州', '深圳', '香港', '澳门', '台湾']);
const yData = ref<number[]>([10, 10, 30, 12, 15, 3, 7]);
const { setOptions } = useECharts(chartRef1 as Ref<HTMLDivElement>);
function handleChange(val){
  console.log('handleChange',val)
}
watch(
  () => props.loading,
  () => {
    setOptions({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          label: {
            show: true,
            backgroundColor: '#fff',
            color: '#556677',
            borderColor: 'rgba(0,0,0,0)',
            shadowColor: 'rgba(0,0,0,0)',
            shadowOffsetY: 0,
          },
          lineStyle: {
            width: 0,
          },
        },
        backgroundColor: '#fff',
        textStyle: {
          color: '#5c6c7c',
        },
        padding: [10, 10],
        extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)',
      },

      xAxis: [
        {
          type: 'category',
          data: xData.value,
          axisLine: {
            lineStyle: {
              color: '#DCE2E8',
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#556677',
            },
            // 默认x轴字体大小
            fontSize: 12,
            // margin:文字到x轴的距离
            margin: 15,
          },
          axisPointer: {
            label: {
              // padding: [11, 5, 7],
              padding: [0, 0, 10, 0],
              margin: 15,
              // 移入时的字体大小
              fontSize: 12,
              backgroundColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#fff', // 0% 处的颜色
                  },
                  {
                    // offset: 0.9,
                    offset: 0.86,
                    color: '#fff', // 0% 处的颜色
                  },
                  {
                    offset: 0.86,
                    color: '#33c0cd', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#33c0cd', // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
          boundaryGap: false,
        },
      ],
      yAxis: [
        {
          type: 'value',
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#f1f4f8'],
              width: 1,
              type: 'solid',
            },
          },
          axisLabel: {
            textStyle: {
              color: '#556677',
            },
            formatter: '{value}',
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#DCE2E8',
            },
          },
        },
      ],
      series: [
        {
          name: 'Adidas',
          type: 'line',
          data: yData.value,
          symbolSize: 1,
          smooth: true,
          symbol:'none', //加这个
          // yAxisIndex: 0,
          showSymbol: false,
          lineStyle: {
            width: 5,
            color: colorList[0],
            shadowColor: shadowColor[0],
            shadowBlur: 10,
            shadowOffsetY: 20,
          },
          itemStyle: {
            // normal: {
            //     color: colorList[0],
            //     borderColor: colorList[0]
            // }
          },
        },
      ],
    });
  },
  { immediate: true,deep:true },
);
</script>
