<template>
  <div class="circulation-container">
    <!-- circulation 下发线索趋势 折线图 -->
    <div class="circulation-title">
      <div class="title">数据分析</div>
      <div class="month">
        <div class="month-list">
          <div
            v-if="false"
            v-for="item in monthOptions"
            :key="item.value"
            @click="monthClick(item.value)"
            :class="item.value == monthVal ? 'active' : ''"
            >{{ item.label }}</div
          >
        </div>

        <div class="filter-container-date">

          <div class="filter-name" @click="handlerChangeFilterOptionsDate('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="showFilterOptionsDate['issued']" />
              <img src="/statistical/down.png" alt="" v-else />
          </div>

          <div class="filter-item-container" v-if="showFilterOptionsDate['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 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 props.countyList"
              :key="index"
              :class="item.id == currentFilter ? 'filter-item active' : 'filter-item'"
              @click="handlerCheckedFilter(item)"
              >{{ item.name }}</div
            >
          </div>
        </div>

      </div>
    </div>
    <div class="circulation-content">
      <div class="circulation-left">
        <div class="circulation-left-left">
          <div class="circulation-content-title">下发线索</div>
          <div class="circulation-content-number">
            <div>
              <span>下发线索(宗数)</span>
              <span>{{ data.xftb }}</span>
            </div>
            <div>
              <span>耕地面积(亩)</span>
              <span>{{ data.gdmj }}</span>
            </div>
          </div>
          <div class="circulation-content-compare">
            <div class="compare-title">环比</div>
            <div>
              <img src="/statistical/go-up.png" alt="" v-if="data.xftbhb > 0" />
              <img src="/statistical/decline.png" alt="" v-else />
              <span> {{ data.xftbhb }}%</span>
            </div>
            <div>
              <img src="/statistical/go-up.png" alt="" v-if="data.gdmjhb > 0" />
              <img src="/statistical/decline.png" alt="" v-else />
              <span> {{ data.gdmjhb }}%</span>
            </div>
          </div>
        </div>
      </div>
      <div class="circulation-right">
        <div class="circulation-left-left">
          <div class="circulation-content-title">新增违法</div>
          <div class="circulation-content-number">
            <div>
              <span>下发线索(宗数)</span>
              <span>{{ data.xzwf }}</span>
            </div>
            <div>
              <span>耕地面积(亩)</span>
              <span>{{ data.xzwfmj }}</span>
            </div>
          </div>
          <div class="circulation-content-compare">
            <div class="compare-title">环比</div>
            <div>
              <img src="/statistical/go-up.png" alt="" v-if="data.wftbhb > 0" />
              <img src="/statistical/decline.png" alt="" v-else />
              <span> {{ data.wftbhb }}%</span>
            </div>
            <div>
              <img src="/statistical/go-up.png" alt="" v-if="data.xzwfgdmjhb > 0" />
              <img src="/statistical/decline.png" alt="" v-else />
              <span> {{ data.xzwfgdmjhb }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, watch } from 'vue';
  import { monthOptions } from '@/utils/global';
  import { getAnalysisData } from '@/api/statistical/index';
  import {DoubleLeftOutlined,DoubleRightOutlined,CloseCircleOutlined} from '@ant-design/icons-vue'
  const props = defineProps({
    countyList: Object,
  });
  watch(
    () => props.countyList,
    (val) => {
      currentFilter.value = props.countyList[0].id;
      currentFilterName.value = props.countyList[0].name;
      getCount();
    },
  );

  const monthVal = ref(monthOptions[monthOptions.length - 1].value);
  const data: any = ref({});
  function monthClick(val) {
    monthVal.value = val;
    getCount();
  }
  const showFilterOptions = ref(false);
  const currentFilter = ref();
  const currentFilterName = ref();

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

  const showFilterOptionsDate = ref({
    issued:false,
    verify:false,
    rectification:false,
})

  function handlerChangeFilterOptionsDate(type) {
    showFilterOptionsDate.value[type] = !showFilterOptionsDate.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()+1),
    verify:parseInt(new Date().getMonth()+1),
    rectification:parseInt(new Date().getMonth()+1),
})



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

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

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

function handlerGetAllDate(type){
    monthSelect.value[type] = 0;
    handlerCheckedFilterDate(type,0);
}
function handlerCheckedFilterDate(type,item,state=false) {
    
    if(!state){
      showFilterOptionsDate.value[type]= false;
    }
    getCount();
  }

  function handlerCheckedFilter(item) {
    currentFilter.value = item.id;
    currentFilterName.value = item.name;
    showFilterOptions.value = false;
    getCount();
  }
  
  function getCount() {
    const querys = {
      // month: monthVal.value,
      month:monthSelect.value["issued"]>0?yearSelect.value["issued"]+"-"+monthSelect.value["issued"] : null,
      countyid: currentFilter.value,
    };
    getAnalysisData(querys).then((res) => {
      data.value = res;
    });
  }
  onMounted(() => {});
</script>
<style lang="less" scoped>
  .circulation-container {
    z-index: 10;
    width: 100%;
    height: 26vh;
    margin-top: 10px;
  }
  .circulation-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    .title {
      padding-left: 10px;
      width: 258px;
      height: 36px;
      line-height: 36px;
      background-image: url('/statistical/right-title-bg.png');
      color: #fff;
    }
  }
  .month {
    margin-right: 20px;
    display: flex;
    .month-list {
      display: flex;
      div {
        width: 61px;
        height: 27px;
        background: #22293d;
        border-radius: 3px 0px 0px 3px;
        color: #fff;
        text-align: center;
        line-height: 27px;
        cursor: pointer;
      }
      .active {
        background: linear-gradient(-38deg, #3058e1, #4cbbf5);
        box-shadow: 0px 1px 3px 0px rgba(3, 10, 26, 0.25);
      }
    }
  }
  .circulation-content {
    color: #7ebbff;
    display: flex;
    justify-content: space-around;
  }
  .circulation-content-title {
    width: 28px;
    height: 106px;
    padding: 10px 0;
    background-image: url('/statistical/data-analysis-title-bg.png');
    background-size: 100% 100%;
    color: #fff;
    text-align: center;
  }

  .circulation-left-left {
    display: flex;
  }
  .circulation-content-number {
    display: flex;
    flex-direction: column;
    margin-left: 18px;
    div {
      display: flex;
      flex-direction: column;
      span:last-child {
        color: #fff;
        font-weight: 500;
        font-size: 28px;
        margin: 10px 0;
      }
    }
  }
  .circulation-content-compare {
    border: 1px solid rgb(42, 137, 218, 0.39);
    width: 240px;
    margin-left: 32px;
    .compare-title {
      height: 38px;
      line-height: 38px;
      text-align: center;
      background-image: url('/statistical/huanbi.webp');
    }
    div {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    span {
      color: #fff;
      font-weight: 500;
      font-size: 28px;
      margin: 10px;
    }
    img {
      width: 30px;
    }
  }
  .filter-container {
    z-index: 10;
    position: relative;
    width: 104px;
    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;
    img {
      width: 10px;
    }
    .filter-name {
      width: 70px;
      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 {
      width: 100%;
      position: absolute;
      background: rgba(11, 39, 68, 0.8);
      border: 1px solid #0a62c6;
      top: 36px;
      left: 0px;
      height: 140px;
      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;
      }
    }
  }
  .filter-container-date {
    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>
