<template>
  <div>
    <div>
      <span>请选择季度/年度:</span>
      <el-select :default-first-option="true" v-model="showIndex">
        <el-option label="第一季度" :value="1">第一季度</el-option>
        <el-option label="第二季度" :value="2">第二季度</el-option>
        <el-option label="第三季度" :value="3">第三季度</el-option>
        <el-option label="第四季度" :value="4">第四季度</el-option>
        <el-option label="年度" :value="5" :disabled="isForbidden">年度</el-option>
      </el-select>
    </div>
    <div style="float: right;font-weight: 600">单位/(元)</div>
    <div v-show="showIndex == 1" ref="echartsRef" style="width: 80vw; height: 80vh;"></div>
    <div v-show="showIndex == 2" ref="echartsRef3" style="width: 80vw; height: 80vh;"></div>
    <div v-show="showIndex == 3" ref="echartsRef4" style="width: 80vw; height: 80vh;"></div>
    <div v-show="showIndex == 4" ref="echartsRef5" style="width: 80vw; height: 80vh;"></div>
    <div v-show="showIndex == 5" ref="echartsRef2" style="width: 80vw; height: 80vh;"></div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import * as echarts from 'echarts';
import {
  getData,
  getLastQuarterYoY,
  getLastQuarterYoY2,
  getYearTotalData,
  getYearTotalData2
} from "@/api/buscmonitoring";
import {ElMessage} from "element-plus";

const showIndex = ref(1);
const echartsRef = ref(null);
const echartsRef2 = ref(null);
const echartsRef3 = ref(null);
const echartsRef4 = ref(null);
const echartsRef5 = ref(null);
const isForbidden = ref(false);
const currentYear = new Date().getFullYear();
const lastYear = currentYear - 1;
const setChartOption1 = async (res) => {
  if (res.code != 200) ElMessage.error(res.msg);
  const a = res.data.filter(item => item.lastQuarterCurrentTotal - item.lastQuarterLastTotal < 0)
  const names = a.map(q => q.enterpriseName + '  同比率' + (((q.lastQuarterCurrentTotal - q.lastQuarterLastTotal) / q.lastQuarterLastTotal) * 100).toFixed(2) + '%').reverse();
  const currentYearData = a.map(q => q.lastQuarterCurrentTotal?.toFixed(0)).reverse();
  const lastYearData = a.map(q => q.lastQuarterLastTotal?.toFixed(0)).reverse();
  const chart = echarts.init(echartsRef.value);
  chart.setOption({
    title: {
      text: '第一季度     共：' + names.length + '家',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: [lastYear.toString(), currentYear.toString()]
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      data: names
    },
    series: [
      {
        name: lastYear.toString(),
        type: 'bar',
        data: lastYearData,
      },
      {
        name: currentYear.toString(),
        type: 'bar',
        data: currentYearData
      }
    ],
    color: [
      '#fa8c89',
      '#6bbefa',
    ],
    dataZoom: [{ // 这是一个 dataZoom 组件，可以控制 x 轴或 y 轴的区域缩放
      type: 'inside', // 这里设置为 slider 类型，表示使用滑动条形式的 dataZoom 组件
      yAxisIndex: 0, // 表示这个 dataZoom 组件控制第一个 y 轴
      start: 100, // 数据窗口范围的起始百分比, 表示从10%的位置开始显示
      end: 85, // 数据窗口范围的结束百分比, 表示到60%的位置结束
      moveOnMouseWheel: true, // 启用滚轮滚动
      moveOnMouseMove: false,
      zoomOnMouseWheel: false,
    }]
  })
}
const setChartOption3 = async (res) => {
  if (res.code != 200) ElMessage.error(res.msg);
  const a = res.data.filter(item => item.lastQuarterCurrentTotal - item.lastQuarterLastTotal < 0)
  const names = a.map(q => q.enterpriseName + '  同比率' + (((q.lastQuarterCurrentTotal - q.lastQuarterLastTotal) / q.lastQuarterLastTotal) * 100).toFixed(2) + '%').reverse();
  const currentYearData = a.map(q => q.lastQuarterCurrentTotal?.toFixed(0)).reverse();
  const lastYearData = a.map(q => q.lastQuarterLastTotal?.toFixed(0)).reverse();
  const chart = echarts.init(echartsRef3.value);
  chart.setOption({
    title: {
      text: '第二季度     共：' + names.length + '家',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: [lastYear.toString(), currentYear.toString()]
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      data: names
    },
    series: [
      {
        name: lastYear.toString(),
        type: 'bar',
        data: lastYearData,
      },
      {
        name: currentYear.toString(),
        type: 'bar',
        data: currentYearData
      }
    ],
    color: [
      '#fa8c89',
      '#6bbefa',
    ],
    dataZoom: [{ // 这是一个 dataZoom 组件，可以控制 x 轴或 y 轴的区域缩放
      type: 'inside', // 这里设置为 slider 类型，表示使用滑动条形式的 dataZoom 组件
      yAxisIndex: 0, // 表示这个 dataZoom 组件控制第一个 y 轴
      start: 100, // 数据窗口范围的起始百分比, 表示从10%的位置开始显示
      end: 85, // 数据窗口范围的结束百分比, 表示到60%的位置结束
      moveOnMouseWheel: true, // 启用滚轮滚动
      moveOnMouseMove: false,
      zoomOnMouseWheel: false,
    }]
  })
}
const setChartOption4 = async (res) => {
  if (res.code != 200) ElMessage.error(res.msg);
  const a = res.data.filter(item => item.lastQuarterCurrentTotal - item.lastQuarterLastTotal < 0)
  const names = a.map(q => q.enterpriseName + '  同比率' + (((q.lastQuarterCurrentTotal - q.lastQuarterLastTotal) / q.lastQuarterLastTotal) * 100).toFixed(2) + '%').reverse();
  const currentYearData = a.map(q => q.lastQuarterCurrentTotal?.toFixed(0)).reverse();
  const lastYearData = a.map(q => q.lastQuarterLastTotal?.toFixed(0)).reverse();
  const chart = echarts.init(echartsRef4.value);
  chart.setOption({
    title: {
      text: '第三季度     共：' + names.length + '家',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: [lastYear.toString(), currentYear.toString()]
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      data: names
    },
    series: [
      {
        name: lastYear.toString(),
        type: 'bar',
        data: lastYearData,
      },
      {
        name: currentYear.toString(),
        type: 'bar',
        data: currentYearData
      }
    ],
    color: [
      '#fa8c89',
      '#6bbefa',
    ],
    dataZoom: [{ // 这是一个 dataZoom 组件，可以控制 x 轴或 y 轴的区域缩放
      type: 'inside', // 这里设置为 slider 类型，表示使用滑动条形式的 dataZoom 组件
      yAxisIndex: 0, // 表示这个 dataZoom 组件控制第一个 y 轴
      start: 100, // 数据窗口范围的起始百分比, 表示从10%的位置开始显示
      end: 85, // 数据窗口范围的结束百分比, 表示到60%的位置结束
      moveOnMouseWheel: true, // 启用滚轮滚动
      moveOnMouseMove: false,
      zoomOnMouseWheel: false,
    }]
  })
}
const setChartOption5 = async (res) => {
  if (res.code != 200) ElMessage.error(res.msg);
  const a = res.data.filter(item => item.lastQuarterCurrentTotal - item.lastQuarterLastTotal < 0)
  const names = a.map(q => q.enterpriseName + '  同比率' + (((q.lastQuarterCurrentTotal - q.lastQuarterLastTotal) / q.lastQuarterLastTotal) * 100).toFixed(2) + '%').reverse();
  const currentYearData = a.map(q => q.lastQuarterCurrentTotal?.toFixed(0)).reverse();
  if(currentYearData[0] == null || currentYearData == undefined || currentYearData[0] == 0){
    isForbidden.value = true;
  }
  const lastYearData = a.map(q => q.lastQuarterLastTotal?.toFixed(0)).reverse();
  const chart = echarts.init(echartsRef5.value);
  chart.setOption({
    title: {
      text: '第四季度     共：' + names.length + '家',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: [lastYear.toString(), currentYear.toString()]
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      data: names
    },
    series: [
      {
        name: lastYear.toString(),
        type: 'bar',
        data: lastYearData,
      },
      {
        name: currentYear.toString(),
        type: 'bar',
        data: currentYearData
      }
    ],
    color: [
      '#fa8c89',
      '#6bbefa',
    ],
    dataZoom: [{ // 这是一个 dataZoom 组件，可以控制 x 轴或 y 轴的区域缩放
      type: 'inside', // 这里设置为 slider 类型，表示使用滑动条形式的 dataZoom 组件
      yAxisIndex: 0, // 表示这个 dataZoom 组件控制第一个 y 轴
      start: 100, // 数据窗口范围的起始百分比, 表示从10%的位置开始显示
      end: 85, // 数据窗口范围的结束百分比, 表示到60%的位置结束
      moveOnMouseWheel: true, // 启用滚轮滚动
      moveOnMouseMove: false,
      zoomOnMouseWheel: false,
    }]
  })
}
const setChartOption2 = async (res) => {
  if (res.code != 200) ElMessage.error(res.msg);
  const a = res.data.filter(item => item.currentYearTotal - item.lastYearTotal < 0)
  const names = a.map(q => q.enterpriseName + "  同比率" + (((q.currentYearTotal - q.lastYearTotal) / q.lastYearTotal) * 100).toFixed(2) + "%").reverse();
  const currentYearTotalData = res.data.map(q => q.currentYearTotal?.toFixed(0)).reverse();
  const lastYearTotalData = res.data.map(q => q.lastYearTotal?.toFixed(0)).reverse();
  const chart = echarts.init(echartsRef2.value);
  chart.setOption({
    title: {
      text: '税收减数企业一共：' + names.length + '家',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    color: [
      '#5e518f',
      '#5367af',
      '#61a0a8',
      '#d48265',
      '#91c7ae',
      '#749f83',
      '#ca8622',
      '#bda29a',
      '#6e7074',
      '#546570',
      '#c4ccd3'
    ],
    legend: {
      data: [lastYear.toString(), currentYear.toString()]
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      data: names
    },
    series: [
      {
        name: lastYear.toString(),
        type: 'bar',
        data: lastYearTotalData
      },
      {
        name: currentYear.toString(),
        type: 'bar',
        data: currentYearTotalData
      }
    ],
    dataZoom: [{ // 这是一个 dataZoom 组件，可以控制 x 轴或 y 轴的区域缩放
      type: 'inside', // 这里设置为 slider 类型，表示使用滑动条形式的 dataZoom 组件
      yAxisIndex: 0, // 表示这个 dataZoom 组件控制第一个 y 轴
      start: 100, // 数据窗口范围的起始百分比, 表示从10%的位置开始显示
      end: 85, // 数据窗口范围的结束百分比, 表示到60%的位置结束
      moveOnMouseWheel: true, // 启用滚轮滚动
      moveOnMouseMove: false,
      zoomOnMouseWheel: false,
    }]
  })
}
const getCurrentQuarter = () => {
  const month = new Date().getMonth() + 1;
  return Math.ceil(month / 3);
};
const init = async () => {
  const quarterRes1 = await getLastQuarterYoY2(1);
  const quarterRes2 = await getLastQuarterYoY2(2);
  const quarterRes3 = await getLastQuarterYoY2(3);
  const quarterRes4 = await getLastQuarterYoY2(4);
  const yearRes = await getYearTotalData2();
  setChartOption1(quarterRes1);
  setChartOption2(yearRes);
  setChartOption3(quarterRes2);
  setChartOption4(quarterRes3);
  setChartOption5(quarterRes4);
}
init();
</script>

<style>
/* 样式内容 */
</style>