<template>
  <div class="brokenline-container">
    <!-- brokenline 下发图斑趋势 折线图 -->
    <div class="brokenline-title">
      <div class="title">{{ props.typeName }}趋势</div>
      <div class="month">
        <div class="month-list">
          <div
            v-for="item in options"
            :key="item.value"
            @click="monthClick(item.value)"
            :class="item.value == monthVal ? 'active' : ''"
            >{{ item.name }}</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"
              :class="item.id == currentFilter ? 'filter-item active' : 'filter-item'"
              :key="index"
              @click="handlerCheckedFilter(item)"
              >{{ item.name }}</div
            >
          </div>
        </div>
      </div>
    </div>
    <div class="brokenline-content">
      <div id="brokenline" style="height: 25vh"> </div>
      <!-- <span class="brokenline-unit">单位：</span> -->
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, watch } from 'vue';
  import * as echarts from 'echarts';
  import { getTrendEchartsData } from '@/api/statistical/index';

  const options = ref([
    {
      name: '天',
      value: 0,
    },
    {
      name: '月',
      value: 1,
    },
  ]);
  const monthVal = ref(0);

  function monthClick(val) {
    monthVal.value = val;
    getData();
  }

  const showFilterOptions = ref(false);
  const currentFilter = ref();
  const currentFilterName = ref();

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

  function handlerCheckedFilter(item) {
    currentFilter.value = item.id;
    currentFilterName.value = item.name;
    showFilterOptions.value = false;
    getData();
  }

  const props = defineProps({
    typeName: {
      type: String,
      default: '下发图斑',
    },
    type: {
      type: Number,
      default: 1,
    },
    countyList: Object,
  });
  watch(
    () => props.countyList,
    (val) => {
      currentFilter.value = props.countyList[0].id;
      currentFilterName.value = props.countyList[0].name;
      getData();
    },
  );
  watch(
    () => props.type,
    (val) => {
      getData();
    },
  );
  const timeList: any = ref([]);
  const tbAreaList: any = ref([]);
  const gdAreaList: any = ref([]);
  const ntAreaList: any = ref([]);
  const xfAreaList: any = ref([]);
  function getData() {
    timeList.value = [];
    tbAreaList.value = [];
    gdAreaList.value = [];
    ntAreaList.value = [];
    xfAreaList.value = [];
    const querys = {
      type: props.type,
      countyid: currentFilter.value,
      datatype: monthVal.value,
    };
    getTrendEchartsData(querys).then((res) => {
      res.forEach((element) => {
        timeList.value.push(element.time);
        tbAreaList.value.push(element.tnmj);
        gdAreaList.value.push(element.gdmj);
        ntAreaList.value.push(element.yjjbntmj);
        xfAreaList.value.push(element.tbzs);
      });
      chartData();
    });
  }

  function chartData() {
    var chartDom = document.getElementById('brokenline');
    var myChart = echarts.init(chartDom);
    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      legend: {
        data: ['图斑面积', '耕地面积', '永农面积', '宗数'],
        top: '4%',
        textStyle: {
          color: '#fff',
          fontSize: 14,
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: timeList.value,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff', //X轴文字颜色
              fontSize: 12,
            },
            interval: 0,
            // rotate: 30,
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '单位（亩）',
          nameTextStyle: {
            color: '#fff',
            fontSize: 14,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#396A87',
              fontSize: 14,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 0.5,
              color: '#3d5269',
              type: 'dashed',
            },
          },
        },
        {
          type: 'value',
          name: '单位（宗）',
          nameTextStyle: {
            color: '#fff',
            fontSize: 14,
          },
          position: 'right',
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#396A87',
              width: 2,
            },
          },
        },
      ],
      color: ['#069EC3', '#3249CD', '#0C725D'],
      series: [
        {
          name: '图斑面积',
          type: 'line',
          stack: 'Total',
          symbol: 'none',
          areaStyle: {},
          emphasis: {
            focus: 'series',
          },
          data: tbAreaList.value,
        },
        {
          name: '耕地面积',
          type: 'line',
          stack: 'Total',
          symbol: 'none',
          areaStyle: {},
          emphasis: {
            focus: 'series',
          },
          data: gdAreaList.value,
        },
        {
          name: '永农面积',
          type: 'line',
          stack: 'Total',
          symbol: 'none',
          areaStyle: {},
          emphasis: {
            focus: 'series',
          },
          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,
            position: 'top',
            color: '#fff',
          },
          lineStyle: {
            color: '#FF9C5D',
            width: 2,
            shadowBlur: 2,
          },
          data: xfAreaList.value,
        },
      ],
    };
    option && myChart.setOption(option);
  }
  onMounted(() => {
    chartData();
  });
</script>
<style lang="less" scoped>
  .brokenline-container {
    z-index: 10;
    width: 100%;
  }
  .brokenline-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;
    }
  }
  .brokenline-content {
    width: 100%;
    position: relative;
  }
  .brokenline-unit {
    position: absolute;
    left: 100px;
    top: 16px;
    color: #fff;
    z-index: 10;
    font-size: 14px;
  }
  .month {
    display: flex;
    margin-right: 20px;
    .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);
      }
    }
  }
  .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;
      }
    }
  }
</style>
