<template>
  <!-- 厂站运维 -->
  <div class="lyWaterOne">
    <!-- 本月工单完成率 -->
    <div class="scene">
      <div class="publicTitle">本月工单完成率</div>
      <div class="gdwcl">
        <div class="part">
          <p class="title">巡检工单</p>
          <p class="percent"><n-number-animation ref="numberAnimationInstRef" :from="0" :to="xjNum" />%</p>
        </div>
        <div class="part">
          <p class="title">保养工单</p>
          <p class="percent"><n-number-animation ref="numberAnimationInstRef" :from="0" :to="byNum" />%</p>
        </div>
        <div class="part">
          <p class="title">维修工单</p>
          <p class="percent"><n-number-animation ref="numberAnimationInstRef" :from="0" :to="wxNum" />%</p>
        </div>
      </div>
    </div>
    <!-- 设备养护情况 -->
    <div class="rainTime">
      <div class="publicTitle">本月设备养护情况</div>
      <div class="navBtn">
        <p :class="[currentIndex == 1 ? 'active' : '']" @click="checkInfo(1)">完好率</p>
        <p :class="[currentIndex == 2 ? 'active' : '']" @click="checkInfo(2)">故障率</p>
      </div>
      <div class="sbyhqk">
        <div class="part" v-for="(item, index) in equipmentList" :key="index">
          <p class="title">{{ item.name }}</p>
          <n-progress type="line" :show-indicator="false" processing :percentage="item.value" />
          <p class="value">{{ item.value }}%</p>
        </div>
      </div>
    </div>
    <!-- 本月工作情况 -->
    <div class="rainCount">
      <div class="publicTitle">本月工作情况</div>
      <div class="table">
        <n-data-table :columns="columns" :data="tableData" striped :max-height="210" :loading="tableLoading" :bordered="false" />
      </div>
    </div>
  </div>
</template>
<script>
import { toRefs, onMounted, reactive, onBeforeUnmount, ref } from 'vue';
import bus from '@/utils/util';
import YWPopup from './YunWeiPopup.vue';
import { deviceStatisticsDp, deviceStatistics, jobAnalysisData } from '@/services';

export default {
  name: 'lyWaterOne',
  components: {
    YWPopup,
  },
  setup() {
    const allData = reactive({
      currentIndex: 1,
      tableLoading: true,
      xjNum: 0,
      byNum: 0,
      wxNum: 0,
      timer: null,
      checkedLegend: [
        { isCheck: false, layername: 'layer1' },
        { isCheck: false, layername: 'layer3' },
        { isCheck: false, layername: 'layer4' },
        { isCheck: false, layername: 'layer5' },
        { isCheck: false, layername: 'layer6' },
        { isCheck: false, layername: 'layer8' },
        { isCheck: false, layername: 'layer9' },
        { isCheck: false, layername: 'layer11' },
        { isCheck: false, layername: 'layer12' },
      ],
      columns: [
        { title: '班组', key: 'jobTeamName', width: '150', ellipsis: { tooltip: true } },
        { title: '已完成', key: 'wcAmount' },
        { title: '待完成', key: 'dbAmount' },
        { title: '逾期', key: 'yqAmount' },
        { title: '完好率(%)', key: 'completionRate', width: '80' },
      ],
      tableData: [],
      equipmentList: [],
    });

    const numberAnimationInstRef = ref(null);
    //初始化图层
    async function initLayer() {
      mapbox._map.on('click', 'layer1_layer', function (e) {
        e.preventDefault();
        const features = mapbox._map.queryRenderedFeatures(e.point);
        // 判断是否点击当前点位
        features.map((item) => {
          if (item.layer.id == 'layer1_layer') {
            // 拼接显示详情内容
            bus.emit('pointToDetail', item);
          }
        });
      });
      mapbox._map.on('click', 'layer3_layer', function (e) {
        e.preventDefault();
        const features = mapbox._map.queryRenderedFeatures(e.point);
        // 判断是否点击当前点位
        features.map((item) => {
          if (item.layer.id == 'layer3_layer') {
            // 拼接显示详情内容
            bus.emit('pointToDetail', item);
          }
        });
      });
      mapbox._map.on('click', 'layer4_layer', function (e) {
        e.preventDefault();
        const features = mapbox._map.queryRenderedFeatures(e.point);
        // 判断是否点击当前点位
        features.map((item) => {
          if (item.layer.id == 'layer4_layer') {
            // 拼接显示详情内容
            bus.emit('pointToDetail', item);
          }
        });
      });
      mapbox._map.on('click', 'layer5_layer', function (e) {
        e.preventDefault();
        const features = mapbox._map.queryRenderedFeatures(e.point);
        // 判断是否点击当前点位
        features.map((item) => {
          if (item.layer.id == 'layer5_layer') {
            // 拼接显示详情内容
            bus.emit('pointToDetail', item);
          }
        });
      });
      mapbox._map.on('click', 'layer6_layer', function (e) {
        e.preventDefault();
        const features = mapbox._map.queryRenderedFeatures(e.point);
        // 判断是否点击当前点位
        features.map((item) => {
          if (item.layer.id == 'layer6_layer') {
            // 拼接显示详情内容
            bus.emit('pointToDetail', item);
          }
        });
      });
      mapbox._map.on('click', 'layer8_layer', function (e) {
        e.preventDefault();
        const features = mapbox._map.queryRenderedFeatures(e.point);
        // 判断是否点击当前点位
        features.map((item) => {
          if (item.layer.id == 'layer8_layer') {
            // 拼接显示详情内容
            bus.emit('pointToDetail', item);
          }
        });
      });
      mapbox._map.on('click', 'layer9_layer', function (e) {
        e.preventDefault();
        const features = mapbox._map.queryRenderedFeatures(e.point);
        // 判断是否点击当前点位
        features.map((item) => {
          if (item.layer.id == 'layer9_layer') {
            // 拼接显示详情内容
            bus.emit('pointToDetail', item);
          }
        });
      });
      mapbox._map.on('click', 'layer11_layer', function (e) {
        e.preventDefault();
        const features = mapbox._map.queryRenderedFeatures(e.point);
        // 判断是否点击当前点位
        features.map((item) => {
          if (item.layer.id == 'layer11_layer') {
            // 拼接显示详情内容
            bus.emit('pointToDetail', item);
          }
        });
      });
      mapbox._map.on('click', 'layer12_layer', function (e) {
        e.preventDefault();
        const features = mapbox._map.queryRenderedFeatures(e.point);
        // 判断是否点击当前点位
        features.map((item) => {
          if (item.layer.id == 'layer12_layer') {
            // 拼接显示详情内容
            bus.emit('pointToDetail', item);
          }
        });
      });
      mapbox.changeTypeOfmouse('layer1_layer'); //切换鼠标样式
      mapbox.changeTypeOfmouse('layer3_layer'); //切换鼠标样式
      mapbox.changeTypeOfmouse('layer4_layer'); //切换鼠标样式
      mapbox.changeTypeOfmouse('layer5_layer'); //切换鼠标样式
      mapbox.changeTypeOfmouse('layer6_layer'); //切换鼠标样式
      mapbox.changeTypeOfmouse('layer8_layer'); //切换鼠标样式
      mapbox.changeTypeOfmouse('layer9_layer'); //切换鼠标样式
      mapbox.changeTypeOfmouse('layer11_layer'); //切换鼠标样式
      mapbox.changeTypeOfmouse('layer12_layer'); //切换鼠标样式

      bus.on('pointToDetail', (param) => {
        mapbox.markerPopup(param, mapbox.createPopup(YWPopup, param.properties));
      });
    }
    // 获取本月工单完成率
    const getOrderFinish = async () => {
      let res = await deviceStatisticsDp();
      if (res && res.code == 200) {
        let datas = res.data;
        datas.map((item) => {
          if (item.jobTypeName == '巡检') {
            allData.xjNum = item.intactnessRate;
          } else if (item.jobTypeName == '维修') {
            allData.wxNum = item.intactnessRate;
          } else {
            allData.byNum = item.intactnessRate;
          }
        });
      }
    };
    // 本月设备养护情况
    const checkInfo = async (val) => {
      allData.currentIndex = val;
      let res = await deviceStatistics();
      if (res && res.code == 200) {
        allData.equipmentList = res.data.map((item) => {
          if (val == 1) {
            // 设备故障率
            return {
              name: item.locationName,
              value: item.intactnessRate,
            };
          } else {
            // 设备完好率
            return {
              name: item.locationName,
              value: item.breakdownRate,
            };
          }
        });
      }
    };
    // 本月工作情况
    const getWork = async () => {
      allData.tableLoading = true;
      let res = await jobAnalysisData();
      if (res && res.code == 200) {
        allData.tableData = res.data;
      }
      allData.tableLoading = false;
    };

    onMounted(() => {
      getOrderFinish();
      checkInfo(1);
      getWork();
      // 数字动效
      numberAnimationInstRef.value?.play();
      //初始化图层
      initLayer();
      //设置初始化视角
      mapbox._map.setPitch(60).setBearing(0);
      setTimeout(() => {
        mapbox.flyto([114.265596, 30.640028], 12.5, 0.8);
      }, 300);
      // 设置默认选中的图例图层
      setTimeout(() => {
        bus.emit('showDefaultLegend', allData.checkedLegend);
      });
    });
    onBeforeUnmount(() => {
      clearInterval(allData.timer);
      allData.timer = null;
      //清空图例默认开启,true 代表关闭图层
      bus.emit('showDefaultLegend', [
        { isCheck: true, layername: 'layer1' },
        { isCheck: true, layername: 'layer3' },
        { isCheck: true, layername: 'layer4' },
        { isCheck: true, layername: 'layer5' },
        { isCheck: true, layername: 'layer6' },
        { isCheck: true, layername: 'layer8' },
        { isCheck: true, layername: 'layer9' },
        { isCheck: true, layername: 'layer11' },
        { isCheck: true, layername: 'layer12' },
      ]);
      //清除选中图层
      !!window.timertuokuan && clearInterval(window.timertuokuan);
      !!window.timerspread && clearInterval(window.timerspread);
      !!window.timerbushui && clearInterval(window.timerbushui);
      //清除弹窗
      bus.off('pointToDetail');
      if (!!mapbox._popup) {
        mapbox._popup.remove();
      }
    });
    return {
      ...toRefs(allData),
      checkInfo,
      initLayer,
    };
  },
};
</script>
<style lang="less">
.lyWaterOne {
  width: 100%;
  height: 100%;
  .scene {
    margin-top: 10px;
    .gdwcl {
      display: flex;
      margin-top: 20px;
      .part {
        width: 33%;
        text-align: center;
        .title {
          color: #5df5ff;
          font-size: 18px;
        }
        .percent {
          width: 120px;
          height: 62px;
          line-height: 102px;
          background: url('@/assets/newImgs/other/hddmjcBg.png');
          font-size: 24px;
          color: #fff;
          margin-left: 10px;
        }
      }
    }
  }
  .rainTime {
    margin-top: 20px;
    position: relative;
    .publicTitle {
      width: 260px;
    }
    .sbyhqk {
      height: 300px;
      overflow: auto;
      padding-top: 10px;
      .part {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: center;
        height: 40px;
        line-height: 40px;
        background: rgba(1, 27, 46, 0.6);
        .title {
          width: 100px;
        }
        .n-progress.n-progress--line {
          flex: 1;
        }
        .n-progress-graph-line-fill {
          background: linear-gradient(90deg, #fedc45 0%, #0db56f 100%);
        }
        .value {
          width: 60px;
          color: #0db56f;
          font-size: 16px;
        }
      }
      .part:nth-child(odd) {
        background: rgba(1, 27, 46, 0.3);
      }
    }
    .navBtn {
      position: absolute;
      right: 0px;
      top: 5px;
      width: 160px;
      height: 30px;
      display: flex;
      p {
        width: 75px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        color: #d4f7ff;
        cursor: pointer;
        margin-right: 10px;
      }
      .active {
        background: #16a2aa;
        border-radius: 10px;
      }
    }
  }
  .rainCount {
    margin-top: 20px;
    .publicTitle {
      width: 300px;
    }
    .table {
      width: 100%;
      margin-top: 10px;
      overflow: auto;
      .n-data-table-td,
      .n-data-table-th {
        padding: 6px !important;
        text-align: center;
      }
    }
  }
}
</style>