<template>
  <div class="w-100% h-72">
    <Model title="土壤调查地块数量">
      <!-- <div class="flex h-20px ml-10 cursor-default">
        <div class="btn w-14 h-20px leading-20px mr-5 mt-2px" @click="curent = 1" :class="`${curent == 1 ? '' : 'btn1'}`">年</div>
        <div class="btn w-14 h-20px leading-20px mt-2px" @click="curent = 2" :class="`${curent == 2 ? '' : 'btn1'}`">季度</div>
      </div> -->
      <div class="h-full">
        <Line :chartData="chartData" height="260px" :option="option" v-if="chartData.length || chartData.length > 0" />
      </div>
    </Model>
  </div>
</template>
<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import Model from './model.vue';
  import Line from '/@/components/chart/Line.vue';
  import { qs } from '../api';

  const curent = ref(1);
  const chartData = ref<any>([
    {
      name: '2017年',
      value: 10,
    },
    {
      name: '2018年',
      value: 40,
    },
    {
      name: '2019年',
      value: 80.42,
    },
    {
      name: '2020年',
      value: 15.28,
    },
  ]);

  async function init() {
    chartData.value = await qs();
    chartData.value.map(function (obj) {
      obj['value'] = obj['zs']; // 新建一个名为 fullName 的属性，值与 name 相同
      obj['name'] = obj['year'];
      delete obj['zs']; // 删除原有的 name 属性
      delete obj['year']; // 删除原有的 name 属性
    });
  }
  const option = ref({
    grid: {
      left: '3%',
      right: '2%',
      top: '6%',
      bottom: '35px',
      containLabel: true,
    },
    legend: {
      bottom: 0,
      show: false,
    },

    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line', // 指示器类型为直线
        lineStyle: {
          color: '#00C9D8', // 自定义竖线颜色（这里设置为红色）
        },
      },
      formatter: function (params) {
        var value = params[0].value; // 获取当前数据点的值
        return `${params[0].name} (${value})`; // 返回提示信息内容
      },
      // formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        textStyle: {
          color: 'rgba(216,240,255,0.8)', // 这里将刻度文字颜色设为红色
        },
      },
      // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        textStyle: {
          color: 'rgba(216,240,255,0.8)', // 这里将刻度文字颜色设为红色
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: ['rgba(176,215,255,0.25'],
          type: 'dashed',
        },
      },
    },
    series: [
      {
        name: '土壤调查地块数量',
        type: 'line',
        showSymbol: false,
        clip: true,
        smooth: true,
        color: ['#00CCF0'],
        areaStyle: {
          color: 'rgba(0,150,255,0.25)',
        },
      },
    ],
  });

  onMounted(() => {
    init();
  });
</script>
<style lang="less" scoped>
  .btn {
    color: rgba(216, 240, 255, 1);
    background: linear-gradient(180deg, rgba(15, 74, 159, 0) 0%, #00c9d8 100%);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid rgba(30, 123, 214, 0.8);
    text-align: center;
  }
  .btn1 {
    background: linear-gradient(180deg, rgba(15, 74, 159, 0) 0%, rgba(17, 75, 160, 0.95) 100%);
    color: rgba(216, 240, 255, 0.5);
    border: 1px solid rgba(0, 45, 89, 0.8);
  }
</style>
