<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, onUnmounted, ref} 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([80, 60, 55, 62, 50, 55, 60, 62, 48, 53])
const radioA = ref('month')
const radioB = ref('month')
let chartA
let chartB
let intervalA = null
onMounted(() => {
  init()
  window.addEventListener('resize', handleResize);
})
const init = () => {
  clear()
  if(!intervalA){
    getdata()
  }
  intervalA = setInterval(getdata, 1000*60*60);
}
const getdata = () => {
  getA()
  getB()
}
const getA = () => {
  //定时更新
  api.getJieYue({type: radioA.value}).then(res=>{
    dataA.value = []
    kindList.value = []
    for(let n of res.data){
      kindList.value.push(n.name)
      dataA.value.push(n.count)
    }
    setA()
  })
}

const setA = () => {
  chartA = echarts.init(zhuRef.value)
  const option = {
    animation: true,
    dataZoom: [
      {
        show: false,
        start: 0,
        end: 100
      },
      {
        type: 'inside',
        start: 0,
        end: 100
      }
    ],
    xAxis: [{
      data: kindList.value,
      axisLabel: {
        inside: false,
        color: '#7ECEF4'
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'RGBA(38, 81, 128, 1)'
        }
      },
      z: 10
    }],
    yAxis: {
      name: '单位(K)',
      nameTextStyle: {
        color: '#7ECEF4',
        fontSize: '9px'
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#7ECEF4'
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'RGBA(38, 81, 128, 1)',
          type: 'dashed'
        }
      }
    },
    tooltip: {
      alwaysShowContent: true,
      formatter: '{c}',
      backgroundColor: 'transparent',
      borderWidth: 0,
      extraCssText: 'box-shadow:none',
      position: 'top',
      textStyle: {
        color: '#fff',
        fontWeight: 'bold',
        fontSize: 14
      }
    },
    series: [
      {
        type: 'pictorialBar',
        barGap: '0%',
        symbol: 'path://M0,10 L10,10 C8,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
        showBackground: false,
        itemStyle: {
          borderWidth: 0,
          borderColor: '#B8FFF4',
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {offset: 1, color: 'rgba(184, 255, 244, 0.1)'},
            {offset: 0, color: 'rgba(184, 255, 244, 0.8)'}
          ])
        },
        emphasis: {
          svgPath: 'M0,0 L5,0 L5,5 L0,5 Z',
          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 getB = () => {
  api.getJieShou({type: radioB.value}).then(res=>{
    dataA.value = []
    kindList.value = []
    for(let n of res.data){
      kindList.value.push(n.name)
      dataA.value.push(n.count)
    }
    setB()
  })
}
const setB = () => {
  chartB = echarts.init(lineRef.value)
  const option = {
    animation: true,
    dataZoom: [
      {
        show: false,
        start: 0,
        end: 100
      },
      {
        type: 'inside',
        start: 0,
        end: 100
      }
    ],
    tooltip: {
      trigger: 'item',
      formatter: '{c}',
      renderModer: 'html',
      className: 'downDot',
      backgroundColor: 'transparent',
      borderWidth: 0,
      extraCssText: 'box-shadow:none',
      position: 'top',
      textStyle: {
        color: '#fff',
        fontWeight: 'bold',
        fontSize: 14
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: kindList.value,
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#7ECEF4',
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'RGBA(38, 81, 128, 1)'
        }
      },
    },
    yAxis: {
      name: '单位(份)',
      nameTextStyle: {
        color: '#7ECEF4',
        fontSize: '9px'
      },
      type: 'value',
      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: '#3A80D5',
        },
        emphasis: {
          itemStyle: {
            color: '#fff',
            borderColor: '#fff',
            borderWidth: '4',
            shadowColor: '#fff',
            shadowBlur: '4',
          }
        },
        label: {
          show: false,
          position: 'bottom',
          formatter: '{c}',
          fontSize: 12,
          color: '#03DAFD'
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(128, 255, 165,0.5)'
            },
            {
              offset: 1,
              color: 'rgba(1, 191, 236,0.5)'
            }
          ])
        }
      }
    ]
  }
  chartB.setOption(option)
  autoHover(chartB, option, 0, 2000)
}
const radioAChange = (e) => {
  getA()
}
const radioBChange = (e) => {
  getB()
}

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">
.title{padding: 12px 50px 0;font-family: 'YouSheBiaoTiHei';
  color: #FFFFFF;
  //text-shadow: 0px 4px 3px #003F85;
  background: linear-gradient(180deg, #fff 50%, #9CD2FF 100%);
  -webkit-background-clip: text;
  font-size: 17px;
  -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: 20px;left: 0;animation: movelr 4s ease-in infinite;
  }
}
@keyframes movelr {
  0% {
    left: 0;opacity: 1;
  }
  100% {
    left: 220px;opacity: 0;
  }
}

.chartCard {
  background: url("@/assets/img/box_bg.png") no-repeat top left;
  background-size: 100% 100%;
  position: relative;

  .po_right {
    position: absolute;
    right: 20px;
    top: 40px;
    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: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
  }
}
</style>