<template>
  <!-- 长效治理 -->
  <div class="lyWaterFour">
    <!-- 河道巡查事件统计 -->
    <div class="scene">
      <div class="publicTitle">河道巡查事件统计</div>
      <div class="dateCheck">
        <n-date-picker v-model:value="dateBjtj" type="daterange" @update:value="checkSzbjtj()" />
      </div>
      <div class="shijian">
        <div class="leftCont">
          <div class="part">
            <p>待处理</p>
            <p class="num red">{{ xcsjCount.remainingProblems }}</p>
          </div>
          <div class="part">
            <p>处理中</p>
            <p class="num blue">{{ xcsjCount.executing }}</p>
          </div>
          <div class="part">
            <p>已闭环</p>
            <p class="num green">{{ xcsjCount.completedNum }}</p>
          </div>
        </div>
        <div id="echartZhili"></div>
      </div>
    </div>
    <!-- 巡逻值班安排 -->
    <div class="rainCount">
      <div class="publicTitle">巡逻值班安排</div>
      <div class="xunluo" v-if="patrolList.length > 0">
        <div class="onDuty" v-for="item in patrolList" :key="item.teamId">
          <div class="user"></div>
          <div class="detail">
            <p>{{ item.userName }}</p>
            <p>{{ item.mobile }}</p>
            <p>所在巡查组:{{ item.teamName }}</p>
          </div>
          <div class="status work" v-if="item.patrolStatus == '作业中'"></div>
          <div class="status rest" v-else></div>
        </div>
      </div>
      <div class="xunluo noData" v-if="patrolList.length == 0">暂无数据</div>
    </div>
    <!-- 政策法规 -->
    <div class="rainTime">
      <div class="publicTitle">政策法规</div>
      <div class="report" v-if="listData.length > 0">
        <vue3-seamless-scroll :list="listData" :singleHeight="66" :singleWaitTime="2000" :hover="true" class="scroll">
          <div class="content" v-for="(item, index) in listData" :key="index">
            <p>{{ item.title }}</p>
            <p>{{ item.createTime }}</p>
          </div>
        </vue3-seamless-scroll>
      </div>
      <div class="report noData" v-if="listData.length == 0">暂无数据</div>
    </div>
  </div>
</template>
<script>
import { onlineTrajectory } from '@/services';
import { toRefs, onMounted, reactive, h, nextTick, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import { zcfgSearch, riverPatrolEventStatistics, riverPatrolDutyArrangement } from '@/services';
import { formatDate } from '@/utils/util';

import xuncha from '@/assets/json/riverXC.json';
import xunchaline from '@/assets/json/XCLine.json';
import user from '@/assets/newImgs/user.png';
export default {
  name: 'lyWaterFour',
  components: {
    Vue3SeamlessScroll,
  },
  setup() {
    const allData = reactive({
      listData: [],
      dateBjtj: [Date.now() - 7 * 24 * 60 * 60 * 1000, Date.now()],
      patrolList: [],
      UserPoint: [],
      xcsjCount: {
        remainingProblems: null,
        executing: null,
        completedNum: null,
      },
    });

    // 河道巡查事件
    let echartDomHdxc = null;
    const echartXuncha = async () => {
      let option = {
        title: {
          text: '0个',
          x: '48%',
          y: '40%',
          textAlign: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 25,
            fontWeight: 'bold',
            color: '#0BA67B',
          },
          subtext: '总数',
          subtextStyle: {
            fontSize: 14,
            color: '#E58D1F',
          },
        },
        legend: {
          left: '15%',
          top: '0%',
          itemWidth: 5,
          itemHeight: 15,
          textStyle: {
            color: 'rgba(255,255,255,0.3)',
          },
          data: ['待处理', '处理中', '已闭环'],
        },
        series: {
          name: '河道巡查事件统计',
          type: 'pie',
          radius: ['50%', '70%'],
          color: ['#E58D1F', '#3F9F30', '#0EBD92'],
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 50, name: '待处理' },
            { value: 20, name: '处理中' },
            { value: 30, name: '已闭环' },
          ],
        },
      };
      let params = {
        startTime: formatDate(allData.dateBjtj[0]),
        endTime: formatDate(allData.dateBjtj[1]),
      };
      echartDomHdxc = echarts.init(document.getElementById('echartZhili'));
      let res = await riverPatrolEventStatistics(params);
      if (res && res.code == 200) {
        let datas = res.data;
        allData.xcsjCount.completedNum = datas.completedNum;
        allData.xcsjCount.executing = datas.executing;
        allData.xcsjCount.remainingProblems = datas.remainingProblems;
        option.title.text = datas.exceptionsTotal + '个';
        option.series.data[0].value = datas.remainingProblems;
        option.series.data[1].value = datas.executing;
        option.series.data[2].value = datas.completedNum;
      }

      echartDomHdxc.clear();
      echartDomHdxc.setOption(option);
    };
    // 河道巡查事件 日期点击
    async function checkSzbjtj() {
      echartXuncha();
    }
    // 获取政策法规
    const getZcfgList = async () => {
      let params = {
        current: 0,
        size: 999,
      };
      let res = await zcfgSearch(params);
      if (res && res.code == 200) {
        allData.listData = res.data.records;
      }
    };
    // 获取巡逻值班安排
    const getPatrolList = async () => {
      let res = await riverPatrolDutyArrangement();
      if (res && res.code == 200) {
        allData.patrolList = res.data;
      }
    };
    // 获取巡查人员位置
    const getXunChaUserPoint = async () => {
      let res = await onlineTrajectory();
      if (res && res.code == 200) {
        if (res.data.length > 0) {
          allData.UserPoint = [];
          res.data.forEach((element) => {
            element.name = element.company + '—' + element.teamName + '—' + element.personRealName;
            allData.UserPoint.push(element);
          });
          loadUserPoint();
        } else {
          allData.UserPoint = res.data;
          if (mapbox._map.getLayer('XunChaUser_layer')) {
            mapbox._map.removeLayer('XunChaUser_layer').removeSource('XunChaUser_layer');
          }
        }
      }
    };
    //地图添加巡查人员位置
    const loadUserPoint = () => {
      let features = [];
      allData.UserPoint.forEach((item) => {
        let Feature = {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [item.x, item.y],
          },
          properties: item,
        };
        features.push(Feature);
      });
      let UserGeojson = {
        type: 'FeatureCollection',
        features: features,
      };
      console.log(UserGeojson, 'UserGeojson');
      mapbox.loadPointsLayer(user, 'XunChaUser', UserGeojson, 'name', true);
    };
    onMounted(() => {
      getZcfgList();
      echartXuncha();
      getPatrolList();
      getXunChaUserPoint();
      window.getUserPoint = null;
      clearInterval(window.getUserPoint);
      window.getUserPoint = setInterval(() => {
        if (mapbox._map.getLayer('XunChaUser_layer')) {
          mapbox._map.removeLayer('XunChaUser_layer').removeSource('XunChaUser_source');
          getXunChaUserPoint();
        }
      }, 1000 * 60);
      if (mapbox._map.getLayer('kriging_layer')) {
        mapbox._map.removeLayer('kriging_layer');
        mapbox._map.removeLayer('marker_kriging_layer');
        mapbox._map.removeSource('kriging_source');
        mapbox._map.removeSource('marker_kriging_source');
      }
      mapbox._map.setPitch(10).setBearing(0);
      setTimeout(() => {
        mapbox.flyto([114.277596, 30.655028], 13, 0.8);
      }, 300);
      // mapbox.addactivativeicon(180, 'xunchaicon');
      // mapbox.displayNoiconPoint('xuncha', xuncha, true);
      // mapbox._map.setLayoutProperty('xuncha_layer', 'icon-image', 'xunchaicon'); //静态巡查头像
      // mapbox.addlighticon('xuncha', xuncha);
      // mapbox.XunChaLine(user, 'xunchaLine', xunchaline);
    });
    onBeforeUnmount(() => {
      // 需要清掉echarts的dom
      if (echartDomHdxc) echartDomHdxc.dispose();
      //清除图层
      clearInterval(window.timeranimatePoint);
      mapbox._map.removeLayer('XunChaUser_layer').removeSource('XunChaUser_source');
      // mapbox._map.removeLayer('xunchaLine_layer').removeSource('xunchaLine_source');
      // mapbox._map.removeLayer('xunchaLine_layer2').removeSource('xunchaLine_source2');
      !!window.timertuokuan && clearInterval(window.timertuokuan);
      !!window.timerspread && clearInterval(window.timerspread);
      !!window.timerbushui && clearInterval(window.timerbushui);
      clearInterval(window.getUserPoint);
      $('.marker').remove();
      if (!!mapbox._popXC) {
        mapbox._popXC.remove();
      }
    });
    return {
      ...toRefs(allData),
      checkSzbjtj,
      getXunChaUserPoint,
      loadUserPoint,
    };
  },
};
</script>
<style lang="less">
.lyWaterFour {
  width: 100%;
  height: 100%;
  .noData {
    text-align: center;
    line-height: 200px;
    color: #c6c6c6;
  }
  .scene {
    margin-top: 10px;
    position: relative;
    .dateCheck {
      position: absolute;
      right: 0px;
      top: 0px;
      .n-date-picker {
        width: 250px;
      }
    }
    .shijian {
      display: flex;
      align-items: center;
      .leftCont {
        width: 200px;
        height: 127px;
        background: url('@/assets/newImgs/hdxcBg.png');
        background-size: 100% 100%;
        display: flex;
        flex-wrap: wrap;
        .part {
          display: flex;
          width: 100%;
          align-items: center;
          height: 50px;
          p {
            width: 50%;
            text-align: center;
            font-size: 15px;
            margin-top: -20px;
          }
          .num {
            font-size: 30px;
            font-weight: bold;
            font-family: 'PangMenZhengDao';
            cursor: pointer;
          }
          .red {
            color: #cf5b3e;
          }
          .blue {
            color: #0d5dcf;
          }
          .green {
            color: #4bca37;
          }
        }
      }
      #echartZhili {
        margin-top: 20px;
        width: 230px;
        height: 200px;
      }
    }
  }
  .rainTime {
    margin-top: 20px;
    .report {
      margin-top: 10px;
      .scroll {
        height: 250px;
        overflow: hidden;
      }
      .content {
        height: 66px;
        background: #01273b;
        padding: 10px 20px;
        border-radius: 3px;
        p {
          font-size: 15px;
          color: #b4c9e0;
        }
        p:nth-of-type(2) {
          font-size: 12px;
        }
      }
      .content:nth-child(even) {
        background: #002e44;
      }
    }
  }
  .rainCount {
    margin-top: 20px;

    .xunluo {
      height: 250px;
      overflow: auto;
      margin-top: 10px;
      .onDuty {
        height: 74px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #0d659c;
        padding: 10px;
        margin-bottom: 20px;
        cursor: pointer;
        .user {
          width: 48px;
          height: 48px;
          background: url('@/assets/newImgs/user.png') no-repeat center;
          background-size: 100% 100%;
        }
        .detail {
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          margin: 0px 20px;
          p:nth-of-type(1) {
            font-size: 20px;
            color: #fff;
          }
          p:nth-of-type(2) {
            font-size: 20px;
            margin-left: 20px;
            color: #b4c9e0;
          }
          p:nth-of-type(3) {
            width: 100%;
            font-size: 14px;
            color: #b4c9e0;
          }
        }
        .status {
          width: 60px;
          height: 20px;
        }
        .work {
          background: url('@/assets/newImgs/work.png') no-repeat center;
          background-size: 100% 100%;
        }
        .rest {
          background: url('@/assets/newImgs/rest.png') no-repeat center;
          background-size: 100% 100%;
        }
      }
      .onDuty:hover {
        background: #03455a;
      }
    }
  }
}
.marker {
  background-position: center center;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background-image: url('src/assets/newImgs/user.png');
}
.mapboxgl-popup-close-button {
  position: absolute;
  right: 10px;
  top: 0;
  color: #fff;
  width: 15px;
  font-size: 24px;
  height: 15px;
  border: 0;
  border-radius: 0 3px 0 0;
  cursor: pointer;
  background-color: transparent;
}

.mapboxgl-popup-content {
  background: rgba(2, 53, 77, 1);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.69);
  padding: 0px;
  .markerBody {
    padding: 8px 12px;
    border-top: none;
    p {
      font-size: 14px;
      margin: 0 !important;
      line-height: 25px;
      color: #fff;
      text-align: left;
    }
  }
  .makerTop {
    margin-top: 30px;
    text-align: center;
    font-size: 16px;
    color: rgb(255, 255, 255);
  }
  .markerHear {
    width: 80%;
    font-size: 15px;
    line-height: 37px;
    padding-left: 12px;
    color: rgb(79, 120, 147);
    height: 30px;
    overflow: hidden;
    margin: 0;
  }
}
</style>