<template>
  <a-card title="活草鱼">
    <template #extra>
      <div class="flex">
        <a-radio-group v-model:value="value">
          <a-radio-button :value="item.value" v-for="item in dayGroup" :key="item.value">{{
            item.title
          }}</a-radio-button>
        </a-radio-group>
        <a-range-picker class="!ml-4" />
      </div>
    </template>
    <div class="flex">
      <div class="w-250px">
        <div class="flex">
          <img class="w-40px h-40px" src="src/assets/images/up-icon.png" alt="" srcset="" />
          <div class="ml-20px">
            <div class="text-[#828fa2]">历史最高价格</div>
            <div>
              <span class="text-4xl font-semibold">￥21 </span>
              <span class="text-[#aaa]">元/斤</span>
            </div>
          </div>
        </div>
        <div class="flex mt-40px">
          <img class="w-40px h-40px" src="src/assets/images/down-icon.png" alt="" srcset="" />
          <div class="ml-20px">
            <div class="text-[#828fa2]">历史最低价格</div>
            <div>
              <span class="text-4xl font-semibold">￥21 </span>
              <span class="text-[#aaa]">元/斤</span>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-1">
        <div ref="chartRef" :style="{ width, height }"></div>
      </div>
    </div>
  </a-card>
</template>

<script lang="ts">
  import { defineComponent, ref, Ref, watch } from 'vue';
  import { Card, Radio, DatePicker } from 'ant-design-vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  const dayGroup = [
    {
      title: '今天',
      value: 'a',
    },
    {
      title: '近一周',
      value: 'b',
    },
    {
      title: '近一月',
      value: 'c',
    },
    {
      title: '近一年',
      value: 'd',
    },
  ];
  export default defineComponent({
    components: {
      [Card.name]: Card,
      [Radio.Group.name]: Radio.Group,
      [Radio.Button.name]: Radio.Button,
      [DatePicker.RangePicker.name]: DatePicker.RangePicker,
    },
    props: {
      loading: Boolean,
      width: {
        type: String as PropType<string>,
        default: '100%',
      },
      height: {
        type: String as PropType<string>,
        default: '100%',
      },
    },

    setup(props) {
      const value = ref<String>('a');
      const chartRef = ref<HTMLDivElement | null>(null);
      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
      watch(
        () => props.loading,
        () => {
          if (props.loading) {
            return;
          }

          setOptions({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                lineStyle: {
                  width: 1,
                  color: '#019680',
                },
              },
            },
            xAxis: {
              type: 'category',
              data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
            },
            yAxis: [
              {
                type: 'value',
                axisTick: {
                  show: false,
                },
                splitLine: {
                  lineStyle: {
                    type: 'dashed',
                  },
                },
              },
            ],
            grid: { left: '1%', right: '1%', top: '2%', bottom: '0', containLabel: true },
            series: [
              {
                smooth: true,
                data: [
                  11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11,
                ],
                type: 'line',
                itemStyle: {
                  color: '#5ab1ef',
                },
              },
            ],
          });
        },
        {
          immediate: true,
        },
      );

      return {
        value,
        dayGroup,
        chartRef,
      };
    },
  });
</script>

<style lang="scss" scoped></style>
