<template>
  <div class="sub-title">
    线索汇总统计
  </div>
  <div style="height: calc( 100% - 33px);" id="patch-summary"></div>
</template>

<script setup lang="ts">
import { onMounted,ref,defineProps,watch} from "vue"
import * as echarts from 'echarts'
import { GetTuBanSummary } from '@/api/statistical/index.ts'

const props = defineProps(['countyId','landType'])

const shaft = ref([])
const sywfgdgdmj = ref([])
const sywfgdtbzs = ref([])
const xfmj = ref([])
const xftbzs = ref([])
let myChart:any = null
onMounted(() => {
  let chartsDom = document.getElementById('patch-summary')
  myChart = echarts.init(chartsDom)
  GetTuBanSummary({countyid:props.countyId,type:props.landType}).then(res => {
    shaft.value = []
    sywfgdgdmj.value = []
    sywfgdtbzs.value = []
    xfmj.value = []
    xftbzs.value = []
    res.forEach(item => {
      shaft.value.push(item.countyname)
      sywfgdgdmj.value.push(item.sywfgdgdmj)
      sywfgdtbzs.value.push(item.sywfgdtbzs)
      xfmj.value.push(item.xfmj)
      xftbzs.value.push(item.xftbzs)
    })
    myChart.setOption({
      legend:[
        {
          data:['总面积(亩/平方米）','耕地面积(亩/平方米）'],
          right:'0px',
          top:'10px',
          itemWidth: 7,
          itemHeight: 7,
          textStyle:{
            fontFamily: 'Microsoft YaHei',
            fontWeight: '400',
            fontSize: '10px',
            color: '#FFFFFF',
          }
        },
        {
          data:['下发总数(个）','剩余总数（个）'],
          left:'0px',
          top:'10px',
          itemWidth: 7,
          itemHeight: 7,
          gridIndex: 2,
          textStyle:{
            fontFamily: 'Microsoft YaHei',
            fontWeight: '400',
            fontSize: '10px',
            color: '#FFFFFF',
          }
        }
      ],
      grid: [
        // 左
        {
          left: "0%",
          width: "40%",
          height: "90%",
          containLabel: true,
        },
        // 中
        {
          width: "0%",
        },
        // 右
        {
          right: "0%",
          width: "60%",
          height: "90%",
          containLabel: true,
        },
      ],
      xAxis: [
        {
          type: "value",
          inverse: true,
          show: false,
          axisTick: {
            show: false,
          },
          axisLine: {
            //轴线
            // show: false,
            lineStyle: {
              color: "rgba(25, 35, 57,0.2)",
            },
          },
        },
        {
          gridIndex: 1,
          show: true,
          axisTick: {
            //y轴刻度线
            show: false,
          },
          axisLine: {
            //轴线
            show: false,
          },
        },
        {
          gridIndex: 2,
          type: "value",
          show: false,
          splitLine: {
            // 网格线
            show: false,
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
        },
      ],
      yAxis: [
        {
          axisLabel: {
            show: false,
          },
          align: "center",
          type: "category",
          axisTick: {
            //y轴刻度线
            show: false,
          },
          data: shaft.value,
          axisLine: {
            //轴线
            // show: false,
            lineStyle: {
              color: "#FFFFFF",
              opacity: 0.6,
            },
          },
        },
        {
          gridIndex: 1,
          position: "center",
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          type: "category",
          inverse: false,
          axisTick: {
            //y轴刻度线
            show: false,
          },
          data: shaft.value, //使用空格使文字居中
        },
        {
          gridIndex: 2,
          position: "left",
          axisLabel: {
            fontFamily: 'PingFang SC',
            fontWeight: '500',
            fontSize: '11px',
            color: '#FFFFFF',
            show: true,
            margin: 30,
            // width: 100,
            align: 'center',
          },
          type: "category",
          inverse: false,
          axisTick: {
            //y轴刻度线
            show: false,
          },
          axisLine: {
            //轴线
            // show: false,
            lineStyle: {
              color: "#FFFFFF",
              opacity: 0.6,
            },
          },
          data: shaft.value,
        },
      ],
      series: [
        {
          type: "bar",
          barWidth: 8,
          stack:'left',
          name: "耕地面积(亩/平方米）",
          itemStyle: {
            color: "#FF9C5D",
          },
          label:{
            show: true,
            position: 'bottom',
            fontFamily: 'DIN',
            fontWeight: '500',
            fontSize: '11px',
            color: '#FFFFFF',
          },
          data: sywfgdgdmj.value,
        },
        {
          type: "bar",
          barWidth: 8,
          name: "总面积(亩/平方米）",
          stack:'left',
          itemStyle: {
            color: "#00AEFF",
            barBorderRadius:[4, 0, 0, 4],
          },
          label:{
            show: true,
            position: 'top',
            fontFamily: 'DIN',
            fontWeight: '500',
            fontSize: '11px',
            color: '#FFFFFF',
          },
          data: xfmj.value,
        },
        
        {
          type: "bar",
          barWidth: 8,
          stack:'right',
          xAxisIndex: 2,
          yAxisIndex: 2,
          name: "下发总数(个）",
          itemStyle: {
            color: "#3058E1",
          },
          label:{
            show: true,
            position: 'bottom',
            fontFamily: 'DIN',
            fontWeight: '500',
            fontSize: '11px',
            color: '#FFFFFF',
          },
          data: xftbzs.value,
        },
        {
          type: "bar",
          barWidth: 8,
          xAxisIndex: 2,
          yAxisIndex: 2,
          stack:'right',
          name: "剩余总数（个）",
          itemStyle: {
            color: "#16C8C5",
            barBorderRadius:[0, 4, 4, 0],
          },
          label:{
            show: true,
            position: 'top',
            fontFamily: 'DIN',
            fontWeight: '500',
            fontSize: '11px',
            color: '#FFFFFF',
          },
          data: sywfgdtbzs.value,
        },
      ],
    })
  })
})
watch(() => [props.countyId,props.landType],() => {
  GetTuBanSummary({countyid:props.countyId,type:props.landType}).then(res => {
    shaft.value = []
    sywfgdgdmj.value = []
    sywfgdtbzs.value = []
    xfmj.value = []
    xftbzs.value = []
    res.forEach(item => {
      shaft.value.push(item.countyname)
      sywfgdgdmj.value.push(item.sywfgdgdmj)
      sywfgdtbzs.value.push(item.sywfgdtbzs)
      xfmj.value.push(item.xfmj)
      xftbzs.value.push(item.xftbzs)
    })
    myChart.setOption({
      legend:[
        {
          data:['总面积(亩/平方米）','耕地面积(亩/平方米）'],
          right:'0px',
          top:'10px',
          itemWidth: 7,
          itemHeight: 7,
          textStyle:{
            fontFamily: 'Microsoft YaHei',
            fontWeight: '400',
            fontSize: '10px',
            color: '#FFFFFF',
          }
        },
        {
          data:['下发总数(个）','剩余总数（个）'],
          left:'0px',
          top:'10px',
          itemWidth: 7,
          itemHeight: 7,
          gridIndex: 2,
          textStyle:{
            fontFamily: 'Microsoft YaHei',
            fontWeight: '400',
            fontSize: '10px',
            color: '#FFFFFF',
          }
        }
      ],
      grid: [
        // 左
        {
          left: "0%",
          width: "40%",
          height: "90%",
          containLabel: true,
        },
        // 中
        {
          width: "0%",
        },
        // 右
        {
          right: "0%",
          width: "60%",
          height: "90%",
          containLabel: true,
        },
      ],
      xAxis: [
        {
          type: "value",
          inverse: true,
          show: false,
          axisTick: {
            show: false,
          },
          axisLine: {
            //轴线
            // show: false,
            lineStyle: {
              color: "rgba(25, 35, 57,0.2)",
            },
          },
        },
        {
          gridIndex: 1,
          show: true,
          axisTick: {
            //y轴刻度线
            show: false,
          },
          axisLine: {
            //轴线
            show: false,
          },
        },
        {
          gridIndex: 2,
          type: "value",
          show: false,
          splitLine: {
            // 网格线
            show: false,
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
        },
      ],
      yAxis: [
        {
          axisLabel: {
            show: false,
          },
          align: "center",
          type: "category",
          axisTick: {
            //y轴刻度线
            show: false,
          },
          data: shaft.value,
          axisLine: {
            //轴线
            // show: false,
            lineStyle: {
              color: "#FFFFFF",
              opacity: 0.6,
            },
          },
        },
        {
          gridIndex: 1,
          position: "center",
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          type: "category",
          inverse: false,
          axisTick: {
            //y轴刻度线
            show: false,
          },
          data: shaft.value, //使用空格使文字居中
        },
        {
          gridIndex: 2,
          position: "left",
          axisLabel: {
            fontFamily: 'PingFang SC',
            fontWeight: '500',
            fontSize: '11px',
            color: '#FFFFFF',
            show: true,
            margin: 30,
            // width: 100,
            align: 'center',
          },
          type: "category",
          inverse: false,
          axisTick: {
            //y轴刻度线
            show: false,
          },
          axisLine: {
            //轴线
            // show: false,
            lineStyle: {
              color: "#FFFFFF",
              opacity: 0.6,
            },
          },
          data: shaft.value,
        },
      ],
      series: [
        {
          type: "bar",
          barWidth: 8,
          stack:'left',
          name: "耕地面积(亩/平方米）",
          itemStyle: {
            color: "#FF9C5D",
          },
          label:{
            show: true,
            position: 'bottom',
            fontFamily: 'DIN',
            fontWeight: '500',
            fontSize: '11px',
            color: '#FFFFFF',
          },
          data: sywfgdgdmj.value,
        },
        {
          type: "bar",
          barWidth: 8,
          name: "总面积(亩/平方米）",
          stack:'left',
          itemStyle: {
            color: "#00AEFF",
            barBorderRadius:[4, 0, 0, 4],
          },
          label:{
            show: true,
            position: 'top',
            fontFamily: 'DIN',
            fontWeight: '500',
            fontSize: '11px',
            color: '#FFFFFF',
          },
          data: xfmj.value,
        },
        
        {
          type: "bar",
          barWidth: 8,
          stack:'right',
          xAxisIndex: 2,
          yAxisIndex: 2,
          name: "下发总数(个）",
          itemStyle: {
            color: "#3058E1",
          },
          label:{
            show: true,
            position: 'bottom',
            fontFamily: 'DIN',
            fontWeight: '500',
            fontSize: '11px',
            color: '#FFFFFF',
          },
          data: xftbzs.value,
        },
        {
          type: "bar",
          barWidth: 8,
          xAxisIndex: 2,
          yAxisIndex: 2,
          stack:'right',
          name: "剩余总数（个）",
          itemStyle: {
            color: "#16C8C5",
            barBorderRadius:[0, 4, 4, 0],
          },
          label:{
            show: true,
            position: 'top',
            fontFamily: 'DIN',
            fontWeight: '500',
            fontSize: '11px',
            color: '#FFFFFF',
          },
          data: sywfgdtbzs.value,
        },
      ],
    })
  })
})

window.addEventListener('resize', function () {
    // 当页面尺寸变化时，重新设置图表的大小
    myChart.resize();
});
</script>

<style lang="scss" scoped>
.sub-title{
  height: 37px;
  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;
}
</style>
