<template>
  <div class="pd20">
    <div class="chartCard">
      <div class="title">档案出证情况</div>

      <div class="po_right">
        <el-radio-group v-model="radioA" size="small" @change="radioAChange">
          <el-radio-button label="本月" value="month" />
          <el-radio-button label="本季度" value="quarter" />
          <el-radio-button label="本年" value="year" />
        </el-radio-group>
      </div>

      <div ref="zhuRef" style="width: 100%; height: 40vh;"></div>
    </div>

    <div class="chartCard mt30">
      <div class="title">档案检索情况</div>
      <div class="po_right">
        <el-radio-group v-model="radioB" size="small" @change="radioBChange">
          <el-radio-button label="本月" value="month" />
          <el-radio-button label="本季度" value="quarter" />
          <el-radio-button label="本年" value="year" />
        </el-radio-group>
      </div>

      <div ref="lineRef" style="width: 100%; height: 40vh;"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref ,onUnmounted} from 'vue'
import _ from 'lodash'
import {autoToolTip} from "@/plugins/auto-toolTip";
import * as echarts from "echarts";
import * as api from "@/apiPc/common"

const zhuRef = ref(null)
const lineRef = ref(null)
const kindList = ref([])
const dataA = ref([])
const radioA = ref('month')
const radioB = ref('month')
let chartA
let chartB

let intervalA = null;
onMounted(() => {
  init()
  window.addEventListener('resize', handleResize);
})
const init = () => {
  if(!intervalA){
    getdata()
  }
  intervalA = setInterval(getdata, 1000*60*60);
}
const getdata = () => {
  clear()
  getAdata()
  getBdata()
}
const getAdata = () => {
  api.getJieDai({type: radioA.value}).then(res => {
    dataA.value = []
    kindList.value = []
    for(let n of res.data){
      if(n.count>0){
        kindList.value.push(n.name)
        dataA.value.push(n.count)
      }
    }
    setA()
  })
}
const getBdata = () => {
  api.getJianSuo({type: radioB.value}).then(res => {
    dataA.value = []
    kindList.value = []
    for(let n of res.data){
      if(n.count>0) {
        kindList.value.push(n.name)
        dataA.value.push(n.count)
      }
    }
    setB()
  })
}
const setA = () => {
  chartA = echarts.init(zhuRef.value)
  const option = {
    animation:true,
    // dataset: dataA.value,
    // dataZoom: [
    //   {
    //     show: false,
    //     start: 0,
    //     end: 100
    //   },
    //   {
    //     type: 'inside',
    //     start: 0,
    //     end: 100
    //   }
    // ],
    xAxis: [{
      data:  kindList.value,
      axisLabel: {
        inside: false,
        color: '#7ECEF4',
        fontSize: '1.1rem'
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'RGBA(38, 81, 128, 1)'
        }
      },
      z: 10
    }],
    yAxis: {
      name: '单位(次)',
      nameTextStyle: {
        color:'#7ECEF4',
        fontSize:'1.2rem'
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#7ECEF4',
        fontSize: '1.3rem'
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'RGBA(38, 81, 128, 1)',
          type: 'dashed'
        }
      }
    },
    tooltip:{
      alwaysShowContent:true,
      formatter: `<div style="text-align: center;font-size: 1.5rem">{b}<br/>{c}</div>`,
      backgroundColor: 'transparent',
      borderWidth: 0,
      extraCssText:'box-shadow:none',
      position: 'top',
      textStyle:{
        color: '#fff',
        fontWeight: 'bold',
        fontSize: '1rem'
      }
    },
    series: [
      {
        type: 'bar',
        barWidth: '10',
        showBackground: false,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 1, color: '#037FC9' },
            { offset: 0, color: '#0C3C7E' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 1, color: '#2378f7' },
              { offset: 0, color: '#83bff6' }
            ])
          }
        },
        data:dataA.value
      }
    ]
  }
  chartA.setOption(option)
  autoHover(chartA,option,0,2000)
}

const setB = () => {
  chartB = echarts.init(lineRef.value)
  const option = {
    animation:true,
    grid: {
      top: '15%',
      left: '12%',
      right: '12%',
      bottom: '12%'
    },
    // dataZoom: [
    //   {
    //     show: false,
    //     start: 0,
    //     end: 50
    //   },
    //   {
    //     type: 'inside',
    //     start: 0,
    //     end: 50
    //   }
    // ],
    tooltip: {
      trigger: 'item',
      formatter: `<div style="text-align: center;font-size: 1.5rem">{b}<br/>{c}</div>`,
      renderModer: 'html',
      // alignItems: 'center',
      className:'downDot',
      backgroundColor: 'rgba(8,13,86,0.2)',
      borderWidth: 0,
      extraCssText:'box-shadow:none',
      position: 'top',
      textStyle:{
        color: '#fff',
        fontWeight: 'bold',
        fontSize: '10rem'
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: kindList.value,
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#7ECEF4',
        fontSize: '1.1rem'
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'RGBA(38, 81, 128, 1)'
        }
      },
    },
    yAxis: {
      name: '单位(次)',
      nameTextStyle: {
        color:'#7ECEF4',
        fontSize:'1.2rem'
      },
      type: 'value',
      axisLabel: {
        fontSize: '1.3rem'
      },
      axisLine: {
        lineStyle: {
          color: '#03DAFD',
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'RGBA(38, 81, 128, 1)',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        data:  dataA.value,
        type: 'line',
        itemStyle: {
          borderWidth:'0',
          color: '#03DAFD',
        },
        emphasis: {
          itemStyle: {
            color: '#fff',
            borderColor: '#fff',
            borderWidth:'4',
            shadowColor: '#fff',
            shadowBlur: '4',
          }
        },
        label: {
          show: false,
          position: 'bottom',
          formatter: '{c}',
            fontSize: '1rem',
            color: '#03DAFD'
        }
      }
    ]
  }
  chartB.setOption(option)
  autoHover(chartB,option,0,2000)
}
const radioAChange = (e) => {
  clear()
  getAdata()
}
const radioBChange = (e) => {
  clear()
  getBdata()
}

const clear = () => {
  if (autoToolTip) {
    clearTimeout(autoToolTip);
  }
}
function autoHover(myChart, option, index, time) {
  autoToolTip(myChart, option, {
    interval: time,// 轮播间隔时间 默认2s
    loopSeries: false,// 是否循环轮播所有序列
    seriesIndex: index, // 第1个被轮播的序列下标
  });
}
function handleResize() {
  chartA.resize()
  chartB.resize()
}
onUnmounted(() => {
  if (intervalA) {
    clearInterval(intervalA);
  }
})
</script>

<style scoped lang="scss">
:deep(.el-radio-button--small .el-radio-button__inner){
  font-size: calc(12*100vw/1920);
  padding: calc(5*100vw/1920) calc(11*100vw/1920);
}

.title{padding: calc(12*100vw/1920) calc(50*100vw/1920) 0;
  font-family: 'YouSheBiaoTiHei';
  color: #FFFFFF;
  //text-shadow: 0px 4px 3px #003F85;
  font-size: calc(17*100vw/1920);
  background: linear-gradient(180deg, #fff 50%, #9CD2FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;position: relative;

  &::after{
    content: '';width: 100%;height: 100%;
    background: url("@/assets/img/line2.png") no-repeat;background-size: contain;
    position: absolute;top: calc(20*100vw/1920);left: 0;animation: movelr 4s ease-in infinite;
  }
}
@keyframes movelr {
  0% {
    left: 0;opacity: 1;
  }
  100% {
    left: calc(220*100vw/1920);opacity: 0;
  }
}
.chartCard{background: url("@/assets/img/box_bg.png") no-repeat top left;
  background-size: 100% 100%;position: relative;overflow: hidden;

  .po_right{position: absolute;right: calc(20*100vw/1920);top: calc(40*100vw/1920);z-index: 1;
    :deep(.el-radio-button){
      --el-radio-button-checked-bg-color: linear-gradient(0deg, #2C67B7, #40A5F4);
      --el-radio-button-checked-text-color: #fff;
      --el-radio-button-disabled-checked-fill: #03DAFD;
      --el-radio-button-checked-border-color: #0D599A;
      .el-radio-button__inner{color: #7ECEF4;background: transparent;
        border-color: #0D599A;
      }
      .el-radio-button__original-radio:checked+.el-radio-button__inner{
        color: #fff;background: linear-gradient(0deg, #2C67B7, #40A5F4);
      }
    }
  }
}
.downDot{position: relative;
  &::after{content: '';width: calc(6*100vw/1920);height: calc(6*100vw/1920);
    background: #fff;border-radius: 50%;
    position: absolute;bottom: 0;}
}
</style>