<template>
  <div class="index-content">
    <img src="@/assets/images/clueledger/index-title.png" alt="" />
    <div class="content-top flex">
      <div class="content-top-left flex js-b">
        <div class="top-left-left">
          <div class="today-clue flex flex-col">
            <div class="today-clue-count flex al-c">
              <img src="@/assets/images/clueledger/today-clue-icon.png" alt="" />
              <div class="flex flex-col">
                <span class="today-clue-number">{{ caseOffenceData.countAll }}</span>
                <span class="today-clue-name">今日线索总数</span>
              </div>
            </div>
            <div class="today-clue-classify flex flex-col">
              <div class="classify-item flex al-c js-b">
                <div class="classify-item-name">
                  <i class="nongyong"></i>
                  <span>农用地</span>
                </div>
                <span>{{ caseOffenceData.nydcount }}</span>
              </div>
              <div class="classify-item flex al-c js-b">
                <div class="classify-item-name">
                  <i class="jianshe"></i>
                  <span>建设用地</span>
                </div>
                <span>{{ caseOffenceData.jsydcount }}</span>
              </div>
            </div>
          </div>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="top-left-right">
          <div class="left-right-top flex al-c js-a">
            <div class="static-item flex al-c one-bg">
              <div class="static-item-img">
                <img src="@/assets/images/clueledger/one.png" alt="" />
              </div>
              <div class="flex flex-col">
                <span class="static-item-count">{{ caseOffenceData.xiafacount }}</span>
                <span class="static-item-name">下发线索数（宗）</span>
              </div>
            </div>
            <div class="static-item flex al-c two-bg">
              <div class="static-item-img">
                <img src="@/assets/images/clueledger/two.png" alt="" />
              </div>
              <div class="flex flex-col">
                <span class="static-item-count">{{ caseOffenceData.tubanarea }}</span>
                <span class="static-item-name">线索面积(亩)</span>
              </div>
            </div>
          </div>
          <div class="left-right-bottom flex al-c js-a">
            <div class="static-item flex al-c three-bg">
              <div class="static-item-img">
                <img src="@/assets/images/clueledger/three.png" alt="" />
              </div>
              <div class="flex flex-col">
                <span class="static-item-count">{{ caseOffenceData.gengdiarea }}</span>
                <span class="static-item-name">耕地面积(亩)</span>
              </div>
            </div>
            <div class="static-item flex al-c four-bg">
              <div class="static-item-img">
                <img src="@/assets/images/clueledger/four.png" alt="" />
              </div>
              <div class="flex flex-col">
                <span class="static-item-count">{{ caseOffenceData.jibenarea }}</span>
                <span class="static-item-name">永农面积（亩）</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-top-right flex al-c">
        <div id="main"></div>
        <div class="static-classify flex flex-col">
          <div class="static-classify-item flex al-c js-b">
            <div class="static-classify-item-name flex al-c">
              <i class="two-bg"></i>
              <span>新增违法个数(个)</span>
            </div>
            <div class="static-classify-item-number">{{
              Number(caseOffenceData.nongyongdicount) + Number(caseOffenceData.jianshecount)
            }}</div>
          </div>
          <div class="static-classify-item flex al-c js-b">
            <div class="static-classify-item-name flex al-c">
              <i class="two-bg"></i>
              <span>耕地面积(亩)</span>
            </div>
            <div class="static-classify-item-number">{{ caseOffenceData.gengdiarea }}</div>
          </div>
          <div class="static-classify-item flex al-c js-b">
            <div class="static-classify-item-name flex al-c">
              <i class="two-bg"></i>
              <span>永农面积(亩)</span>
            </div>
            <div class="static-classify-item-number">{{ caseOffenceData.jibenarea }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="content-bottom flex js-b">
      <div class="content-bottom-left">
        <div class="content-bottom-left-title"> 线索数据统计 </div>
        <div class="content-bottom-left-content">
          <a-select
            ref="select"
            v-model:value="time"
            style="width: 120px"
            :options="timeOptions"
            @change="handleChange"
          />
          <div id="mainS"> </div>
        </div>
      </div>
      <div class="content-bottom-right">
        <div class="content-bottom-left-title">
          线索数据统计
          <span>您有{{ total }}条线索未查看</span>
        </div>
        <div class="search-box">
          <a-input-search
            v-model:value="clueSearchVal"
            placeholder="搜索关键词"
            enter-button
            size="large"
            @search="getClueList"
          />
        </div>
        <div class="clues-list">
          <div class="clues-item flex al-c js-b" v-for="item in clueList">
            <div class="clues-item-content flex">
              <span class="item-icon" v-if="item.typename == '建设用地'">建</span>
              <span class="item-icon nongyong" v-else>农</span>
              <div class="item-content flex flex-col">
                <span>{{ item.case_description }}</span>
                <span>{{ item.tubanlaiyuan }}</span>
              </div>
            </div>
            <span class="clues-item-status">{{ item.handle_status_name }}</span>
          </div>
        </div>
        <div class="more-btn" @click="moreBtn">更多线索</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import * as echarts from 'echarts';
  import {
    caseOffenceEcharts_sdt,
    caseOffence_sdt,
    caseOffenceList_sdt,
  } from '@/api/statistical/clue';
  import { router } from '@/router';

  const caseOffenceData = ref({
    countAll: 0,
    nydcount: 0,
    jsydcount: 0,
    xiafacount: 0,
    tubanarea: 0,
    gengdiarea: 0,
    jibenarea: 0,
    nongyongdicount: 0,
    jianshecount: 0,
  });
  const clueList = ref([]);
  const total = ref(0);
  const activeName = ref('线索台账');
  const menuList = ref([
    {
      name: '线索台账',
      url: './index.html',
      icon: 'menu',
    },
    {
      name: '数据报表',
      url: './dataReport.html',
      icon: 'document',
    },
    {
      name: '线索列表',
      url: './clueList.html',
      icon: 'connection',
    },
  ]);
  const time = ref('月度');
  const timeOptions = ref([
    {
      value: '月度',
      label: '月度',
    },
    {
      value: '季度',
      label: '季度',
    },
    {
      value: '年度',
      label: '年度',
    },
  ]);
  const clueSearchVal = ref('');
  const menuClick = (item) => {
    activeName.value = item.name;
  };
  //   获取顶部数据
  const getTopData = async () => {
    caseOffence_sdt().then((res) => {
      caseOffenceData.value = res;
      const chartData = [
        { value: Number(res.nongyongdicount) + Number(res.jianshecount), name: '新增违法个数' },
        { value: res.gengdiarea, name: '耕地面积' },
        { value: res.jibenarea, name: '永农面积' },
      ];
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c}',
        },
        series: [
          {
            type: 'pie',
            radius: [20, 110],
            center: ['48%', '50%'],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 5,
            },
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            emphasis: {
              label: {
                show: false,
              },
            },
            data: chartData,
          },
        ],
      };

      option && myChart.setOption(option);
    });
  };
  //   获取柱状图数据
  const getBarData = async () => {
    caseOffenceEcharts_sdt().then((res) => {
      const time = [];
      const nyData = [];
      const jsData = [];
      res.forEach((element) => {
        time.push(element.date);
        nyData.push(element.nydcount);
        jsData.push(element.jsydcount);
      });
      var optionS;
      var chartDomS = document.getElementById('mainS');
      var myChartS = echarts.init(chartDomS);

      optionS = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          top: '1%',
          left: '5%',
        },
        xAxis: {
          type: 'category',
          data: time,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '农用地',
            type: 'bar',
            color: '#4892FE',
            data: nyData,
          },
          {
            name: '建设用地',
            type: 'bar',
            color: '#FA9D2A',
            data: jsData,
          },
        ],
      };

      optionS && myChartS.setOption(optionS);
    });
  };
  //   获取线索列表
  const getClueList = () => {
    caseOffenceList_sdt({
      page: 1,
      limit: 10,
      key: clueSearchVal.value,
    }).then((res) => {
      console.log(res);
      clueList.value = res.items;
      total.value = res.total;
    });
  };
  const moreBtn = () => {
    router.push({
      path: '/statistical/patchsummary',
    });
  };
  onMounted(() => {
    getTopData();
    getBarData();
    getClueList();
  });
</script>

<style lang="less" scoped>
  .flex {
    display: flex;
  }

  .flex-col {
    flex-direction: column;
  }

  .js-a {
    justify-content: space-around;
  }

  .js-b {
    justify-content: space-between;
  }

  .al-c {
    align-items: center;
  }

  .index-content {
    // width: calc(100% - 210px);
  }

  .index-content img {
    width: 100%;
  }

  .content-top {
    z-index: 2;
    position: relative;
    width: 100%;
  }

  .content-top-left {
    width: 65%;
    background: #fff;
    border-radius: 10px;
    height: 26vh;
    margin: -20px 10px 20px 20px;
    padding: 0 10px;
  }

  .content-top-left .el-divider--vertical {
    height: 80%;
    margin-top: 2%;
  }

  .top-left-left {
    width: 32%;
  }

  .today-clue {
  }

  .today-clue-count img {
    width: 80px;
    margin: 20px;
  }

  .today-clue-number {
    font-family: Barlow, Barlow;
    font-weight: 500;
    font-size: 40px;
    color: #171725;
  }

  .today-clue-name {
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #696974;
    margin-top: 10px;
  }

  .classify-item {
    background: #f5f5f5;
    border-radius: 6px;
    margin: 10px 20px;
    padding: 6px;
  }

  .classify-item > span {
    font-family: Barlow, Barlow;
    font-weight: 500;
    font-size: 20px;
    color: #171725;
    margin-right: 20px;
  }

  i.nongyong {
    width: 10px;
    height: 10px;
    background: #4892fe;
    display: inline-block;
    border-radius: 5px;
    margin: 0 10px;
  }

  i.jianshe {
    width: 10px;
    height: 10px;
    background: #fa9d2a;
    display: inline-block;
    margin: 0 10px;
    border-radius: 5px;
  }

  .top-left-right {
    width: 63%;
  }

  .static-item {
    width: 45%;
    color: #fff;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 12px 0 0;
  }

  .static-item-img {
    background: #fff;
    border-radius: 6px;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-right: 20px;
  }

  .static-item img {
    width: 22px;
  }

  .static-item-count {
    font-size: 20px;
  }

  .static-item-name {
    font-size: 14px;
    margin-top: 6px;
  }

  .content-top-right {
    width: 35%;
    background: #fff;
    border-radius: 10px;
    height: 26vh;
    margin: -20px 20px 20px 10px;
  }

  #main {
    width: 240px;
    height: 200px;
    margin-left: 20px;
  }

  .static-classify {
    margin-left: 30px;
    font-size: 14px;

    .static-classify-item {
      background: #ededed;
      padding: 6px 10px;
      width: 220px;
      margin-bottom: 10px;

      .static-classify-item-name {
        i {
          width: 6px;
          height: 6px;
          display: inline-block;
          margin: 0 10px;
        }
      }

      .static-classify-item-number {
        font-family: Barlow, Barlow;
        font-weight: 500;
        font-size: 18px;
        color: #171725;
      }
    }

    .static-classify-item:first-child {
      border-left: 4px solid #327efd;
    }

    .static-classify-item:nth-child(2) {
      border-left: 4px solid #2dd5f6;
    }

    .static-classify-item:last-child {
      border-left: 4px solid #f7ba1e;
    }
  }

  .content-bottom {
    margin: 0 20px 20px 20px;
  }

  .content-bottom-left {
    width: 59%;
    height: 56vh;
    background: #fff;
    border-radius: 10px;
    padding: 20px;

    .content-bottom-left-content {
      position: relative;
      ::v-deep .ant-select {
        position: absolute;
        top: 0;
        right: 60px;
        z-index: 2;
      }
      #mainS {
        width: 100%;
        height: 52vh;
        margin-top: 20px;
      }
    }
  }

  .content-bottom-left-title {
    height: 28px;
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #333333;

    span {
      display: block;
      font-family:
        PingFangSC,
        PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #969b9f;
      margin-top: 6px;
    }
  }

  .content-bottom-right {
    width: 40%;
    height: 56vh;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
  }

  .search-box {
    margin-top: 30px;
  }
  .clues-list {
    margin-top: 10px;
    height: 35vh;
    overflow-y: scroll;
    .clues-item-content {
      margin-top: 20px;
    }

    .item-icon {
      width: 40px;
      height: 40px;
      background: #4892fe;
      border-radius: 10px;
      text-align: center;
      line-height: 35px;
      color: #fff;
      margin: 0 10px;
    }

    .item-icon.nongyong {
      background: #fa9d2a;
    }

    .item-content {
      margin-left: 10px;

      span:last-child {
        font-family:
          PingFangSC,
          PingFang SC;
        font-size: 13px;
        color: #969b9f;
        margin-top: 10px;
      }
    }

    .clues-item-status {
      width: 70px;
      height: 32px;
      background: #4892fe;
      border-radius: 6px;
      text-align: center;
      line-height: 35px;
      color: #fff;
      margin: 0 10px;
    }
  }

  .more-btn {
    border: 1px solid #4892fe;
    border-radius: 6px;
    padding: 10px 20px;
    width: 80%;
    margin: 20px auto;
    text-align: center;
    color: #4892fe;
    cursor: pointer;
  }

  .one-bg {
    background: #fa9d2a;
  }

  .two-bg {
    background: #2966f1;
  }

  .three-bg {
    background: #47cff5;
  }

  .four-bg {
    background: #4bd884;
  }
</style>
