<template>
  <div class="sub-title">
    趋势统计
  </div>
  <div class="show-charts-div">
    <div class="button-div">
      <div :class="`button-item ${unit == 0 && 'select-button-item'}`" @click="unit = 0">天</div>
      <div :class="`button-item ${unit == 1 && 'select-button-item'}`" @click="unit = 1">月</div>
      <!-- <div class="button-item">季度</div> -->
    </div>
    <div style="height:100%;position:relative;top:-15px;" id="trendECharts"></div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref,toRaw, defineProps, watch} from "vue"
import * as echarts from 'echarts';
import { GetTrendData } from '@/api/statistical/index.ts'
const props = defineProps(['countyId','landType'])

 const unit = ref(0)
 const illegal = ref([])
 const buban = ref([])
 const fugeng = ref([])
 const other = ref([])
 const unillegal = ref([])
 const time = ref([])

let myChart:any = null

onMounted(() => {
  getData()
})
const getData = (isInit=true) => {
  GetTrendData({countyid:props.countyId,type:props.landType,datatype:unit.value}).then(res => {
    illegal.value = []
    buban.value = []
    fugeng.value = []
    other.value = []
    unillegal.value = []
    time.value = []
    res.forEach(item => {
      illegal.value.push(item.illegal)
      buban.value.push(item.buban)
      fugeng.value.push(item.fugeng)
      other.value.push(item.other)
      unillegal.value.push(item.unillegal)
      time.value.push(item.time)
    })
    if(isInit){
      initEcharts()
    }else{
      updataEcharts()
    }
    
  })
}


const initEcharts = () => {
  let chartDom = document.getElementById('trendECharts');
  myChart = echarts.init(chartDom);
  myChart.setOption({
    xAxis: {
      // type: 'category',
      axisLabel:{
        textStyle:{
          align: 'center',
          fontFamily: 'Arial',
          fontWeight: '400',
          fontSize: '7px',
          color: '#5092C1',
        },
        interval: 0,  
      },
      axisLine:{
        lineStyle:{
          color: '#65C6E7',
          opacity: 0.2,
        }
      },
      boundaryGap: false,
      data: time.value
    },
    yAxis: {
      type: 'value',
      splitLine:{
        lineStyle:{
          color: ['#65C6E7'],
          opacity: 0.2,
        }
      },
      axisLine:{
        lineStyle:{
          color: '#65ABE7',
          opacity: 0.7,
          fontFamily: 'Source Han Sans SC',
          fontWeight: '200',
          fontSize: '10px',
        },
      },
    },
    legend: {
      right:'0px',
      top: '50px',
      orient:'vertical',
      textStyle:{
        fontFamily:'Microsoft YaHei',
        fontWeight: '400',
        fontSize: '10px',
        color: '#FFFFFF',
      },
      data:['违法','合法','其他','拆除复耕','补办手续'],
    },
    series: [
      {
        name: '违法',
        type: 'line',
        data: illegal.value,
        itemStyle:{
          color:'#FF9C5D',
        }
      },
      {
        name: '合法',
        type: 'line',
        data: unillegal.value,
        itemStyle:{
          color:'#04CDF4',
        }
      },
      {
        name: '其他',
        type: 'line',
        data: other.value,
        itemStyle:{
          color:'#20A70A',
        }
      },
      {
        name: '拆除复耕',
        type: 'line',
        data: fugeng.value,
        itemStyle:{
          color:'#AD04F4',
        }
      },
      {
        name: '补办手续',
        type: 'line',
        data: buban.value,
        itemStyle:{
          color:'#F4E004',
        }
      },
    ],
    grid: {
      left: '3%',
      right: '25%',
      bottom: '15%',
      containLabel: true
    },
  });
}
const updataEcharts = () => {
  let chartDom = document.getElementById('trendECharts');
  let chart = echarts.getInstanceByDom(chartDom)
  chart?.setOption({
    xAxis: {
      // type: 'category',
      axisLabel:{
        textStyle:{
          align: 'center',
          fontFamily: 'Arial',
          fontWeight: '400',
          fontSize: '7px',
          color: '#5092C1',
        },
        interval: 0,  
      },
      axisLine:{
        lineStyle:{
          color: '#65C6E7',
          opacity: 0.2,
        }
      },
      boundaryGap: false,
      data: time.value
    },
    yAxis: {
      type: 'value',
      splitLine:{
        lineStyle:{
          color: ['#65C6E7'],
          opacity: 0.2,
        }
      },
      axisLine:{
        lineStyle:{
          color: '#65ABE7',
          opacity: 0.7,
          fontFamily: 'Source Han Sans SC',
          fontWeight: '200',
          fontSize: '10px',
        },
      },
    },
    legend: {
      right:'0px',
      top: '50px',
      orient:'vertical',
      textStyle:{
        fontFamily:'Microsoft YaHei',
        fontWeight: '400',
        fontSize: '10px',
        color: '#FFFFFF',
      },
      data:['违法','合法','其他','拆除复耕','补办手续'],
    },
    series: [
      {
        name: '违法',
        type: 'line',
        data: illegal.value,
        itemStyle:{
          color:'#FF9C5D',
        }
      },
      {
        name: '合法',
        type: 'line',
        data: unillegal.value,
        itemStyle:{
          color:'#04CDF4',
        }
      },
      {
        name: '其他',
        type: 'line',
        data: other.value,
        itemStyle:{
          color:'#20A70A',
        }
      },
      {
        name: '拆除复耕',
        type: 'line',
        data: fugeng.value,
        itemStyle:{
          color:'#AD04F4',
        }
      },
      {
        name: '补办手续',
        type: 'line',
        data: buban.value,
        itemStyle:{
          color:'#F4E004',
        }
      },
    ],
    grid: {
      left: '3%',
      right: '25%',
      bottom: '15%',
      containLabel: true
    },
  });
}
watch(() => [props.countyId,props.landType,unit.value], () => {
  getData(false)
})
window.addEventListener('resize', function () {
    // 当页面尺寸变化时，重新设置图表的大小
    myChart.resize();
});
</script>

<style lang="scss" scoped>
.sub-title{
  height: 33px;
  display: flex;
  align-items: center;
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 16px;
  color: #FFFFFF;
  text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
  -webkit-background-clip: text;
  text-shadow: 0px 2px 6px rgba(5,28,55,0.42);
  background: url('@/assets/statistical/sub_title.png');
  padding-left: 35px;
}
.show-charts-div{
  height: calc( 100% - 33px);
  z-index: 1;
  .button-div{
    display: flex;
    justify-content: end;
    .button-item{
      margin-top: 8px;
      width: 52px;
      height:20px;
      margin-right:8px;
      background: url('@/assets/statistical/charts_button.png') no-repeat;
      background-size: cover;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 10px;
      color: rgba(255,255,255,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .select-button-item{
      background: url('@/assets/statistical/selected_charts_button.png') no-repeat;
      background-size: cover;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 10px;
      color: #FFFFFF;
    }
  }
}
</style>
