<template>
  <div class="columnar-container">
    <!-- columnar 下发线索 柱状图 -->
    <div class="columnar-title">
      <div class="title">{{ props.typeName }}</div>
      <div class="month">
        <!-- <div class="filter-container">
          <div class="filter-name" @click="handlerChangeFilterOptions">{{ currentFilterName }}</div>
          <div class="filter-icon" @click="handlerChangeFilterOptions">
            <img src="/statistical/up.png" alt="" v-if="showFilterOptions" />
            <img src="/statistical/down.png" alt="" v-else />
          </div>
          <div class="filter-item-container" v-if="showFilterOptions">
            <div
              v-for="(item, index) in filters"
              :key="index"
              :class="item.value === currentFilter ? 'filter-item active' : 'filter-item'"
              @click="handlerCheckedFilter(item)"
              >{{ item.label }}</div
            >
          </div>
        </div> -->

        <div class="filter-container">

          <div class="filter-name" @click="handlerChangeFilterOptions('issued')">{{ monthSelect['issued'] != 0 ? yearSelect['issued']+"年"+monthSelect['issued']+"月" : '全部' }}</div>
          
          <CloseCircleOutlined v-show="monthSelect['issued'] !=0" style="margin-right:6px;" @click="handlerGetAllDate('issued')" />

          <div class="filter-icon" @click="handlerChangeFilterOptions('issued')">
              <img src="/statistical/up.png" alt="" v-if="showFilterOptions['issued']" />
              <img src="/statistical/down.png" alt="" v-else />
          </div>

          <div class="filter-item-container" v-if="showFilterOptions['issued']">
              <div class="date-select-contaienr">
                  <div class="year-select-container">
                      <div class="last-year" @click="handlerMinusYear('issued')" >
                          <DoubleLeftOutlined/>
                      </div>
                      <div class="current-year">
                          {{yearSelect['issued']}}年
                      </div>
                      <div class="next-year" @click="handlerAddYear('issued')">
                          <DoubleRightOutlined/>
                      </div>
                  </div>
                  <div class="month-select-container">
                      <div class="month-item" v-for="item in 12" :key="item" @click="handlerMonth('issued',item)">
                          {{ item }}月
                      </div>
                  </div>
              </div>
          </div>
      </div>
      </div>
    </div>
    <div class="columnar-content">
      <div id="columnar" style="height: 25vh"> </div>
      <!-- <span class="columnar-unit">单位：</span> -->
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, watch } from 'vue';
  import * as echarts from 'echarts';
  import { monthAllOptions } from '@/utils/global';
  import { caseOffenceEcharts } from '@/api/statistical/index';
  import {DoubleLeftOutlined,DoubleRightOutlined,CloseCircleOutlined} from '@ant-design/icons-vue'
  const filters = monthAllOptions();
  const showFilterOptions = ref({
    issued:false,
    verify:false,
    rectification:false,
})
const currentFilter = ref({
    issued:0,
    verify:0,
    rectification:0,
});

  const currentFilterName = ref({
      issued:"全部",
      verify:"全部",
      rectification:"全部",
  });

  function handlerChangeFilterOptions(type) {
    showFilterOptions.value[type] = !showFilterOptions.value[type];
  }


  const yearSelect = ref({
    issued:parseInt(new Date().getFullYear()),
    verify:parseInt(new Date().getFullYear()),
    rectification:parseInt(new Date().getFullYear()),
})

const monthSelect = ref({
    issued:parseInt(new Date().getMonth()),
    verify:parseInt(new Date().getMonth()),
    rectification:parseInt(new Date().getMonth()),
})



function handlerAddYear(type){
    yearSelect.value[type] = yearSelect.value[type]+1;
    handlerCheckedFilter(type,1,true);
}

function handlerMinusYear(type){
    yearSelect.value[type] = yearSelect.value[type]-1;
    handlerCheckedFilter(type,0,true);
}

function handlerMonth(type,item){
    monthSelect.value[type] = item;
    handlerCheckedFilter(type,item);
}

function handlerGetAllDate(type){
    monthSelect.value[type] = 0;
    handlerCheckedFilter(type,0);
}


  // function handlerCheckedFilter(item) {
  //   currentFilter.value = item.value;
  //   currentFilterName.value = item.label;
  //   showFilterOptions.value = false;
  // }

  function handlerCheckedFilter(type,item,state=false) {
    currentFilter.value[type] = item.value;
    currentFilterName.value[type] = yearSelect.value[type]+"-"+monthSelect.value[type];
    if(!state){
      showFilterOptions.value[type] = false;
    }
    getData();
  }


  const props = defineProps({
    typeName: {
      type: String,
      default: '下发线索',
    },
    type: {
      type: Number,
      default: 1,
    },
  });
  watch(
    () => props.type,
    (val) => {
      getData();
    },
  );
  const countyList: any = ref([]);
  const tbAreaList: any = ref([]);
  const gdAreaList: any = ref([]);
  const ntAreaList: any = ref([]);
  const xfAreaList: any = ref([]);
  function getData() {
    
    const querys = {
      type: props.type,
      month:monthSelect.value["issued"]>0?yearSelect.value["issued"]+"-"+monthSelect.value["issued"] : null,
      // month: yearSelect.value['issued']+"-"+monthSelect.value["issued"],
    };
    caseOffenceEcharts(querys).then((res) => {

      // res.sort((a, b) => a.countyid - b.countyid);
      countyList.value = [];
      tbAreaList.value = [];
      gdAreaList.value = [];
      ntAreaList.value = [];
      xfAreaList.value = [];

      res.forEach((element) => {
        countyList.value.push(element.countyname);
        tbAreaList.value.push(element.tbmj);
        gdAreaList.value.push(element.gdmj);
        ntAreaList.value.push(element.yjjbntmj);
        xfAreaList.value.push(element.tbzs);
      });
      chartData();
    });
  }
  function chartData() {
    var chartDom = document.getElementById('columnar');
    var myChart = echarts.init(chartDom);
    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
          label: {
            show: true,
          },
        },
      },
      grid: {
        left: '4%',
        top: '18%',
        right: '5%',
        bottom: '22%',
      },
      legend: {
        data: ['线索面积', '耕地面积', '永农面积', '宗数'],
        top: '4%',
        textStyle: {
          color: '#fff',
          fontSize: 14,
        },
      },
      xAxis: {
        data: countyList.value,
        axisLine: {
          show: true, //隐藏X轴轴线
          lineStyle: {
            color: '#3d5269',
            width: 1,
          },
        },
        axisTick: {
          show: true, //隐藏X轴刻度
          alignWithLabel: true,
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff', //X轴文字颜色
            fontSize: 12,
          },
          interval: 0,
          // rotate: 30,
        },
      },
      yAxis: [
        {
          type: 'value',
          name: '单位（亩）',
          nameTextStyle: {
            color: '#fff',
            fontSize: 14,
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 0.5,
              color: '#3d5269',
              type: 'dashed',
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#396A87',
              fontSize: 14,
            },
          },
        },
        {
          type: 'value',
          name: '单位（宗）',
          nameTextStyle: {
            color: '#fff',
            fontSize: 14,
          },
          position: 'right',
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#396A87',
              width: 2,
            },
          },
        },
      ],
      series: [
        {
          name: '线索面积',
          type: 'bar',
          barWidth: 14,
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(22, 40, 45,0.6)',
          },
          barGap: 0,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#E5410E',
                },
                {
                  offset: 1,
                  color: '#172830',
                },
              ]),
            },
          },
          data: tbAreaList.value,
        },
        {
          name: '耕地面积',
          type: 'bar',
          barWidth: 14,
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(22, 40, 45,0.6)',
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#E5A10E',
                },
                {
                  offset: 1,
                  color: '#172830',
                },
              ]),
            },
          },
          data: gdAreaList.value,
        },
        {
          name: '永农面积',
          type: 'bar',
          barWidth: 14,
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(22, 40, 45,0.6)',
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#00D532',
                },
                {
                  offset: 1,
                  color: '#172830',
                },
              ]),
            },
          },
          data: ntAreaList.value,
        },
        {
          name: '宗数',
          type: 'line',
          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
          showAllSymbol: true, //显示所有图形。
          symbol: 'circle', //标记的图形为实心圆
          symbolSize: 6, //标记的大小
          itemStyle: {
            //折线拐点标志的样式
            color: '#FF9C5D',
            borderColor: '#FF9C5D',
            width: 2,
            shadowColor: '#FF9C5D',
            shadowBlur: 2,
          },
          label: {
            show: true,
            color: '#fff',
            position: 'top',
          },
          lineStyle: {
            color: '#FF9C5D',
            width: 2,
            shadowBlur: 2,
          },
          data: xfAreaList.value,
        },
      ],
    };
    option && myChart.setOption(option);
  }
  onMounted(() => {
    getData();
    // chartData();
  });
</script>
<style lang="less" scoped>
  .columnar-container {
    z-index: 10;
    width: 100%;
  }
  .columnar-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    align-items: center;
    .title {
      padding-left: 10px;
      width: 258px;
      height: 36px;
      line-height: 36px;
      background-image: url('/statistical/right-title-bg.png');
      color: #fff;
    }
  }
  .columnar-content {
    width: 100%;
    position: relative;
  }
  .columnar-unit {
    position: absolute;
    left: 100px;
    top: 16px;
    color: #fff;
    z-index: 10;
    font-size: 14px;
  }
  .month {
    margin-right: 20px;
  }
  .filter-container {
    z-index: 10;
    position: relative;
    width: 124px;
    border-radius: 6px;
    height: 29px;
    background-image: url('/statistical/select-bg.png');
    line-height: 29px;
    color: #fff;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    text-indent: 0px;
    font-size:14px;
    img {
      width: 10px;
    }
    .filter-name {
      width: 80px;
      text-align: center;
      padding: 0px 2px;
      font-size: 14px;
      position: relative;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      margin-left: 4px;
    }
    .filter-item-container {
      position: absolute;
      background: rgba(11, 39, 68, 0.8);
      border: 1px solid #0a62c6;
      top: 36px;
      right: 0px;
      overflow: auto;
      &::-webkit-scrollbar {
            display: none;
        }
        
      .filter-item {
        height: 36px;
        text-align: center;
        &:hover {
          cursor: pointer;
          background: #054234;
        }
      }
      .filter-item.active {
        background: #054234;
        color: #e1ecf8;
      }
      .filter-item {
        background: #086953;
        color: #fff;
      }
      .date-select-contaienr{
        width:240px;
        .year-select-container{
            width:100%;
            height:40px;
            border-bottom:1px solid #0a62c6;
            display: flex;
            line-height:40px;
            .next-year{
                width:40px;
                height:40px;
                flex:1;
                text-align: center;
            }
            .current-year{
                flex:auto;
                text-align: center;
            }
            .last-year{
                width:40px;
                text-align: center;
                height:40px;
                flex:1;
            }
        }
        .month-select-container{
            width:100%;
            display:flex;
            flex-wrap: wrap;
            .month-item{
                flex: 1 1 33%;
                box-sizing: border-box;
                text-align:center;
                line-height:40px;
                &:hover {
                    background:#035341;
                }
            }
        }
      }
    }
  }
</style>
