<script setup lang="ts">
import { ElMessage } from "element-plus";
import { useTimeStore, useDataStore } from "@/stores/index";
import { storeToRefs } from "pinia";
const timeStore = useTimeStore()
const { nowTitle } = storeToRefs(timeStore)

const dataStore = useDataStore()
const { bkPay, zkPay, zsbPay, totalPay } = storeToRefs(dataStore)
const activeTab = ref(0);
const tabs = ref([
  { title: '本科', value: 0, dateList: ['05-30', '05-31', '06-01', '06-02', '06-03', "06-04"], numList: [0, 0, 0, 0, 0, 0] },
  { title: '专科', value: 0, dateList: ['05-30', '05-31', '06-01', '06-02', '06-03', "06-04"], numList: [0, 0, 0, 0, 0, 0] },
  { title: '专升本', value: 0, dateList: ['05-30', '05-31', '06-01', '06-02', '06-03', "06-04"], numList: [0, 0, 0, 0, 0, 0] },
]);

const changeTab = (index: number) => {
  activeTab.value = index;
  setOption(tabs.value[index].dateList, tabs.value[index].numList)
};

const option = ref({});

// 这里拿不到pinia的值 因为子组件比父组件先渲染
// 暴露出去 让父组件调用 来赋值------待修改
const getData = () => {
  // let dateList = ['05-30', '05-31', '06-01', '06-02', '06-03', "06-04"]
  // let numList = [0, 0, 0, 0, 0, 0]
  tabs.value[0].dateList = Object.keys(bkPay.value?.statistics)
  tabs.value[1].dateList = Object.keys(zkPay.value?.statistics)
  tabs.value[2].dateList = Object.keys(zsbPay.value?.statistics)
  tabs.value[0].numList = Object.values(bkPay.value?.statistics)
  tabs.value[1].numList = Object.values(zkPay.value?.statistics)
  tabs.value[2].numList = Object.values(zsbPay.value?.statistics)

  setOption(tabs.value[0].dateList, tabs.value[0].numList)
};
const setOption = async (xData: any[], yData: any[]) => {
  const zoomIndex = computed(() => {
    return (12 / xData.length)?.toFixed(1) as any * 100 || 0
  })
  const showZoom = computed(() => {
    return xData.length > 12
  })
  option.value = {
    xAxis: {
      type: "category",
      data: xData,
      boundaryGap: false, // 不留白，从原点开始
      splitLine: {
        // show: false,
        // lineStyle: {
        //   color: "rgba(31,99,163,.2)",
        // },
      },
      axisLine: {
        show: false, // 去除轴线
        // lineStyle: {
        //   color: "rgba(31,99,163,.1)",
        // },
      },
      axisLabel: {
        color: "#fff",
        fontWeight: "500",
        formatter: function (value: any) {
          // 去除前五位 只显示具体的日期
          return value.slice(5);
        }
      },
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: 'rgb(0, 148, 168)',
          type: 'solid',
          extraCssText: 'height:0;',
        },
      },
    },
    yAxis: {
      type: "value",
      splitLine: {
        show: false, // 去除网格线
        lineStyle: {
          color: "rgba(31,99,163,.2)",
        },
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "rgba(31,99,163,.1)",
        },
      },
      axisLabel: {
        color: "#fff", // 轴标文字颜色
        fontWeight: "500",
        formatter: function (value: any) {
          // 如果value是整数，则直接返回，否则返回四舍五入后的整数
          return value % 1 === 0 ? value : '';
        }
      },
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
    },
    grid: {
      //布局
      show: false,
      left: "15px",
      right: "30px",
      bottom: "10px",
      top: "30px",
      containLabel: true,
      // borderColor: "#1F63A3",
    },
    // 添加 dataZoom 组件来启用滚动条
    /* dataZoom: [
      {
        type: 'slider', // 这里是滑块型数据区域缩放组件
        show: true, // 是否显示滑块
        start: 0, // 数据窗口范围的起始百分比
        end: 100, // 数据窗口范围的结束百分比
        handleSize: 10, // 滑块的大小
        height: 15, // 滑块组件的高度
        xAxisIndex: [0], // 控制哪个x轴
        filterMode: 'empty' // 数据过滤模式，'empty'表示空数据不显示
      },
      {
        type: 'inside', // 内置型数据区域缩放，即鼠标滚轮缩放
        start: 0,
        end: 100
      }
    ], */
    // 只有当数据超过七条时才添加 dataZoom 配置
    dataZoom: [{
      show: showZoom,
      type: 'slider',
      start: 0,
      end: zoomIndex
    }], // 如果不需要 dataZoom，则设置为 null
    series: [
      {
        data: yData,
        type: "line",
        smooth: false,
        symbol: "circle", // 拐点样式 -- 这里是个圆
        symbolSize: 7, // 拐点大小
        name: "缴费人数",
        // color: "rgba(9,202,243,.7)",
        color: '#fff',
        markPoint: {
          data: [
            {
              name: "最大值",
              type: "max",
              valueDim: "y",
              symbol: "circle",
              symbolSize: [60, 26],
              symbolOffset: [0, -20],
              itemStyle: {
                color: "rgba(0,0,0,0)",
              },
              label: {
                color: "#09CAF3",
                fontSize: '16',
                // backgroundColor: "rgba(9,202,243,0.1)",
                // borderRadius: 6,
                // borderColor: "rgba(9,202,243,.5)",
                // padding: [7, 14],
                // formatter: "报警2：{c}",
                // borderWidth: 0.5,
              },
            },
            {
              name: "最大值",
              type: "max",
              valueDim: "y",
              symbol: "circle",
              symbolSize: 6,
              itemStyle: {
                color: "#09CAF3",
                shadowColor: "#09CAF3",
                shadowBlur: 8,
              },
              label: {
                formatter: "",
              },
            },
          ],
        },
        lineStyle: {
          width: 4, // 线条宽度  
          color: {
            type: 'linear', // 线性渐变  
            x: 0, // 渐变方向为从左到右  
            y: 0,
            x2: 0,
            y2: 1, // 渐变方向也可以设置为从下到上，调整 x2 和 y2 的值  
            colorStops: [
              // { offset: 0, color: 'rgba(0, 254, 157, 1)' }, // 0% 处的颜色  
              { offset: 0, color: 'rgba(2, 221, 241, 1)' }, // 50% 处的颜色  
              { offset: 1, color: 'rgba(0, 254, 157, 1)' } // 100% 处的颜色  -- 顶点处颜色
            ],
            global: false // 缺省为 false  
          },
        },
      }
    ],
  };
};

defineExpose({ getData })
</script>

<template>
  <div class="tabs">
    <div class="no-tab">
      <p>缴费总人数</p>
      <!-- <p> {{ bkPay?.todayPayDto?.payNum }} </p> -->
      <p> {{ totalPay ?? '0' }} </p>
    </div>
    <div v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }" @click="changeTab(index)">
      <p>{{ tab.title }}</p>
      <!-- <p v-if="index == 0">{{ bkPay?.todayPayDto?.bkPayNum }}</p>
      <p v-if="index == 1">{{ bkPay?.todayPayDto?.zkPayNum }}</p>
      <p v-if="index == 2">{{ bkPay?.todayPayDto?.zsbPayNum }}</p> -->
      <p v-if="index == 0">{{ bkPay?.num }}</p>
      <p v-if="index == 1">{{ zkPay?.num }}</p>
      <p v-if="index == 2">{{ zsbPay?.num }}</p>

    </div>
  </div>
  <!-- <div class="tab-content"> -->
  <!-- <div v-for="(tab, index) in tabs" :key="index" v-show="activeTab === index"> -->
  <v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
  <!-- </div> -->
  <!-- </div> -->
</template>

<style scoped lang="scss">
.tabs {
  display: flex;
  justify-content: space-between;

  div {
    width: 80px;
    padding: 10px;
    cursor: pointer;
    background: linear-gradient(0deg, rgba(145, 175, 207, 0.1) 10%, rgba(145, 175, 207, 0.4) 100%);
    border-top: 2px solid rgb(152, 194, 221);
    box-shadow: 0px -10px 5px rgba(145, 175, 207, 0.2);
  }

  div.active {
    // background-color: #ccc;
    background: linear-gradient(0deg, rgba(145, 175, 207, 0.1) 10%, rgba(0, 155, 228, 0.6) 100%);
    border-top: 2px solid #00A2FF;
    box-shadow: 0px -10px 5px rgba(0, 162, 255, 0.2);

  }

  .no-tab {
    width: 160px;
    height: 80px;
    cursor: default;
  }
}

.chart {
  height: 250px;
}
</style>
