<template>
  <div class="w-100">
    <Model title="地块调查阶段地块数量变更情况">
      <a-radio-group v-model:value="value2" button-style="solid">
        <a-radio-button value="1">按年</a-radio-button>
        <a-radio-button value="2">按季度</a-radio-button>
        <a-radio-button value="3">按月</a-radio-button>
        <a-radio-button value="4">按周</a-radio-button>
        <a-radio-button value="5">按天</a-radio-button>
      </a-radio-group>
      <Bar :chartData="chartData" height="240px" :option="option" v-if="chartData.length || chartData.length > 0" />
    </Model>
  </div>
</template>
<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import Model from './model.vue';
  import Bar from '/@/components/chart/Bar.vue';

  const chartData = ref<any>([]);
  const value2 = ref('3');
  const option = ref({
    grid: {
      left: '1%',
      right: '1%',
      top: '12%',
      bottom: '35px',
      containLabel: true,
    },

    legend: {
      bottom: 0,
      textStyle: {
        color: '#fff',
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} %',
    },
    xAxis: {
      type: 'category',
      axisLine: {
        lineStyle: {
          color: '#0096FF',
        },
      },

      axisLabel: {
        // interval: 0,
        rotate: 330,
        textStyle: {
          color: '#fff',
        },
      },
    },
    yAxis: {
      axisLine: {
        lineStyle: {
          color: '#0096FF',
          type: 'dashed',
        },
      },
      axisLabel: {
        textStyle: {
          color: '#fff',
        },
      },
      splitLine: {
        lineStyle: {
          color: '#0096FF',
          type: 'dashed',
        },
      },
    },

    series: [
      {
        name: '地块总数',
        type: 'bar',
        barWidth: '20%',
        data: [
          {
            name: '广州市',
            value: 9.68,
          },
          {
            name: '深圳市',
            value: 3.16,
          },
          {
            name: '韶关市',
            value: 80.42,
          },
          {
            name: '江门市',
            value: 15.28,
          },
          {
            name: '惠州市',
            value: 15.28,
          },
        ],
      },
      {
        name: '新增地块',
        type: 'bar',
        barWidth: '20%',
        data: [
          {
            name: '广州市',
            value: 5.68,
          },
          {
            name: '深圳市',
            value: 3.16,
          },
          {
            name: '韶关市',
            value: 6.42,
          },
          {
            name: '江门市',
            value: 15.28,
          },
          {
            name: '惠州市',
            value: 3.28,
          },
        ],
      },
      {
        name: '非污染地块',
        type: 'bar',
        barWidth: '20%',
        data: [
          {
            name: '广州市',
            value: 68,
          },
          {
            name: '深圳市',
            value: 3.16,
          },
          {
            name: '韶关市',
            value: 80.42,
          },
          {
            name: '江门市',
            value: 15.28,
          },
          {
            name: '惠州市',
            value: 34.28,
          },
        ],
      },
    ],
  });
  function init() {
    chartData.value = [
      {
        name: '广州市',
        value: 0.68,
      },
      {
        name: '深圳市',
        value: 3.16,
      },
      {
        name: '韶关市',
        value: 80.42,
      },
      {
        name: '江门市',
        value: 15.28,
      },
      {
        name: '惠州市',
        value: 15.28,
      },
    ];
  }
  onMounted(() => {
    init();
  });
</script>
<style lang="less" scoped></style>
