<template>
  <!-- 控制路网 -->
  <!-- 厂站工情 -->
  <div class="lyInfoThree">
    <!-- 流域工情概览 -->
    <div class="scene">
      <div class="publicTitle">流域工情概览</div>
      <div class="lygqgl">
        <div class="part">
          <p class="title">污水处理量</p>
          <div class="bg">{{ sewagevalue.sewageTreatmentType1 }}万m³</div>
          <p>黄孝河{{ sewagevalue.sewageTreatmentType2 }}万m³</p>
          <p>机场河{{ sewagevalue.sewageTreatmentType3 }}万m³</p>
        </div>
        <div class="part">
          <p class="title">防洪排涝抽排量</p>
          <div class="bg">{{ floodvalue.waterloggingDrainagetilType1 }}万m³</div>
          <p>黄孝河{{ floodvalue.waterloggingDrainagetilType2 }}万m³</p>
          <p>机场河{{ floodvalue.waterloggingDrainagetilType3 }}万m³</p>
        </div>
        <div class="part">
          <p class="title">生态补水量</p>
          <div class="bg">{{ ecologicalvalue.ecologicalWaterSupplemenType1 }}万m³</div>
          <p>黄孝河{{ ecologicalvalue.ecologicalWaterSupplemenType2 }}万m³</p>
          <p>机场河{{ ecologicalvalue.ecologicalWaterSupplemenType3 }}万m³</p>
        </div>
      </div>
    </div>
    <!-- 厂站运行监控 -->
    <div class="rainCount">
      <div class="publicTitle">厂站运行监控</div>
      <div class="navBtn">
        <p :class="[yxjkIndex == 1 ? 'active' : '']" @click="checkYxjk(1)">黄孝河</p>
        <p :class="[yxjkIndex == 2 ? 'active' : '']" @click="checkYxjk(2)">机场河</p>
      </div>
      <div class="czyxjk">
        <n-tabs type="line" v-model:value="yxjkVal" @update:value="handleUpdateValue" justify-content="flex-end" animated>
          <n-tab-pane name="0" tab="污水系统">
            <div class="content">
              <div class="table">
                <n-data-table :columns="columns" :data="tableData" :loading="tableLoading" :bordered="false" />
              </div>
            </div>
          </n-tab-pane>
          <n-tab-pane name="3" tab="CSO管控系统">
            <div class="content">
              <div class="table">
                <n-data-table :columns="CSOcolumns" :data="CSOtableData" :loading="tableLoading" :bordered="false" />
              </div>
            </div>
          </n-tab-pane>
          <n-tab-pane name="1" tab="排涝系统">
            <div class="content">
              <n-data-table :columns="raincolumns" :data="raintableData" :loading="tableLoading" :bordered="false" />
            </div>
          </n-tab-pane>
          <n-tab-pane name="2" tab="补水系统">
            <div class="content">
              <n-data-table :columns="bushuicolumns" :data="BStableData" :loading="tableLoading" :bordered="false" />
            </div>
          </n-tab-pane>
        </n-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import { toRefs, onMounted, reactive, onBeforeUnmount, h } from 'vue';
import { czgqMonitor, sewageTreatment, floodControl, ecologicalWater, czgqrainMonitor, czgqCSOMonitor, czgqBSMonitor } from '@/services';
import bus from '@/utils/util';
import Popup from './Popup.vue';

export default {
  name: 'lyInfoThree',
  components: {
    Popup,
  },
  setup() {
    const allData = reactive({
      isPipelineflowShow: false,
      wushuisystem: null,
      yushuisystem: null,
      detailData: {},
      sewagevalue: {},
      floodvalue: {},
      ecologicalvalue: {},
      yxjkIndex: 1,
      yxjkVal: '0',
      percentage: '80',
      checkedLegend: [
        { isCheck: true, 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' },
      ],
      tableData: [],
      raintableData: [],
      CSOtableData: [],
      BStableData: [],
      tableLoading: false,
      columns: [
        { title: '工程类型', key: 'stationClass', align: 'center' },
        { title: '厂站名称', key: 'name', align: 'center' },
        { title: '日处理量m³', key: 'dailyProcessingCapacity', align: 'center' },
        { title: '累计万m³', key: 'sewageDisposalTotal', align: 'center' },
      ],
      raincolumns: [
        { title: '工程名称', key: 'name', align: 'center' },
        { title: '日抽排水量（万吨）', key: 'pumpingAndDrainageTotal', align: 'center' },
        { title: '开机台数', key: 'startUpNum', align: 'center' },
        { title: '前池水位（m）', key: 'foreBayLevel', align: 'center' },
      ],
      CSOcolumns: [
        { title: '工程类型', key: 'stationClass', align: 'center' },
        { title: '工程名称', key: 'name', align: 'center' },
        { title: ' 运行监控情况', key: 'monitorSituation', align: 'center' },
      ],
      bushuicolumns: [
        { title: '工程类型', key: 'stationClass', align: 'center' },
        { title: '工程名称', key: 'name', align: 'center' },
        { title: ' 补水水量（万吨）', key: 'rehydrationNum', align: 'center' },
      ],
    });
    // 切换河流
    const checkYxjk = (val) => {
      allData.yxjkIndex = val;
      getMonitor();
      if (val == 1) {
        // mapbox._map.setPitch(60).setBearing(45);
        // setTimeout(() => {
        //   mapbox.flyto([114.292596, 30.645028], 14, 0.8);
        // }, 300);
      } else {
        // mapbox._map.setPitch(55).setBearing(300);
        // setTimeout(() => {
        //   mapbox.flyto([114.225596, 30.65028], 13.8, 0.8);
        // }, 300);
      }
    };
    // 切换二级tab
    async function handleUpdateValue(val) {
      allData.yxjkVal = val;
      getMonitor();
    }
    // 获取相应数据
    async function getMonitor() {
      let params = {
        type: allData.yxjkIndex,
      };
      //污水系统
      let res1 = await czgqMonitor(params);
      if (res1 && res1.code == 200) {
        allData.tableData = res1.data;
      }
      //排涝系统
      let res2 = await czgqrainMonitor(params);
      if (res2 && res2.code == 200) {
        allData.raintableData = res2.data;
      }
      //CSO
      let res3 = await czgqCSOMonitor(params);
      if (res3 && res3.code == 200) {
        allData.CSOtableData = res3.data;
      }
      //补水系统
      let res4 = await czgqBSMonitor(params);
      if (res4 && res4.code == 200) {
        allData.BStableData = res4.data;
      }
    }

    // 工情概览数据  floodControl
    async function Sewageinfo() {
      let res = await sewageTreatment();
      if (res && res.code == 200) {
        allData.sewagevalue = res.data;
      }
    }
    async function Floodinfo() {
      let res = await floodControl();
      if (res && res.code == 200) {
        allData.floodvalue = res.data;
      }
    }
    async function Ecologicalinfo() {
      let res = await ecologicalWater();
      if (res && res.code == 200) {
        allData.ecologicalvalue = res.data;
      }
    }
    //添加弹窗
    const getMapJSON = async () => {
      for (let i = 0; i < 12; i++) {
        mapbox._map.on('click', 'layer' + i + '_layer', function (e) {
          e.preventDefault();
          const features = mapbox._map.queryRenderedFeatures(e.point);
          // 判断是否点击当前点位
          features.map((item) => {
            if (item.layer.id == 'layer' + i + '_layer') {
              // 拼接显示详情内容
              bus.emit('pointToDetail', item);
            }
          });
        });
        mapbox.changeTypeOfmouse('layer' + i + '_layer'); //切换鼠标样式
      }
      bus.on('pointToDetail', (param) => {
        mapbox.markerPopup(param, mapbox.createPopup(Popup, param.properties));
      });
    };

    onMounted(() => {
      let closePopup = false;
      bus.emit('closePopup', closePopup);
      newfiberMap.flyTo({
        lon: 114.264596,
        lat: 30.500028,
        heading: 2.281299097855777,
        zoom: 5358.12942752382,
        pitch: -25.2508969308367,
        roll: 0.005453465256790101,
      });
      Sewageinfo();
      Floodinfo();
      Ecologicalinfo();
      getMonitor();
      // getMapJSON();
      // mapbox._map.setPitch(60).setBearing(0);
      // setTimeout(() => {
      //   mapbox.flyto([114.275596, 30.610028], 13.2, 0.8);
      // }, 300);
      // // 设置默认选中的图例图层
      setTimeout(() => {
        bus.emit('showDefaultLegend', allData.checkedLegend);
      });
    });

    onBeforeUnmount(() => {
      //清空图例默认开启,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();
      // }
      // mapbox._map.setPitch(60).setBearing(0);
      // setTimeout(() => {
      //   mapbox.flyto([114.275596, 30.610028], 13.5, 0.8);
      // }, 300);
    });
    return {
      ...toRefs(allData),
      checkYxjk,
      handleUpdateValue,
      getMapJSON,
    };
  },
};
</script>
<style lang="less">
.lyInfoThree {
  width: 100%;
  height: 100%;
  .scene {
    margin-top: 10px;
    .lygqgl {
      margin-top: 20px;
      width: 430px;
      height: 200px;
      display: flex;
      justify-content: center;
      .part {
        width: 33%;
        font-size: 16px;
        .title {
          color: #fff;
          font-family: '';
        }
        p {
          text-align: center;
          font-family: PangMenZhengDao;
          margin-bottom: 5px;
        }
        .bg {
          width: 119px;
          height: 85px;
          line-height: 85px;
          text-align: center;
        }
      }
      .part:nth-of-type(1) {
        color: #d7494b;
        .bg {
          background: url('@/assets/Imgs/fangxunMap/lygqwsBg.png') no-repeat center;
        }
      }
      .part:nth-of-type(2) {
        color: #2abcc8;
        .bg {
          background: url('@/assets/Imgs/fangxunMap/lygqfhBg.png') no-repeat center;
        }
      }
      .part:nth-of-type(3) {
        color: #0dd77c;
        .bg {
          background: url('@/assets/Imgs/fangxunMap/lygqstBg.png') no-repeat center;
        }
      }
    }
  }
  .num {
    font-size: 20px;
    font-family: PangMenZhengDao;
  }
  .rainCount {
    margin-top: 20px;
    position: relative;
    .czyxjk {
      margin-top: 10px;
      width: 430px;
      .content {
        max-height: 440px;
        width: 100%;
        overflow: auto;
        padding: 5px 20px;
        font-size: 15px;
        .title {
          font-size: 14px;
          cursor: pointer;
        }
        .table {
          width: 100%;
          overflow: auto;
          .n-data-table-td,
          .n-data-table-th {
            padding: 6px !important;
            text-align: center;
          }
        }
        .pailiang {
          color: #0db56f;
          background: rgba(1, 27, 46, 0.7);
          padding: 10px 20px;
          border-radius: 3px;
          .percent {
            width: 100px;
            float: right;
            text-align: right;
          }
          .n-progress-graph-line-rail {
            margin-top: 10px;
            height: 5px;
            .n-progress-graph-line-indicator {
              display: none;
            }
          }
        }
        .bushuiLx {
          width: 358px;
          height: 335px;
          margin: 10px auto;
          background: url('@/assets/Imgs/fangxunMap/bsxtHxh.png') no-repeat center;
          position: relative;
          .line {
            position: absolute;
            height: 5px;
            background: url('@/assets/newImgs/lineArrow.png') no-repeat center;
          }
        }
        .bushuiJch {
          position: relative;
          width: 358px;
          height: 335px;
          margin: 10px auto;
          background: url('@/assets/Imgs/fangxunMap/bsxtJch.png') no-repeat center;
          .line {
            position: absolute;
            height: 5px;
            background: url('@/assets/newImgs/lineArrow.png') no-repeat center;
          }
        }
        .detailBushui {
          padding: 10px 20px 0;
          background: rgba(1, 27, 46, 0.3);
          display: flex;
          text-align: center;
          align-items: center;
          .bsxt {
            width: 33%;
            .dabiao {
              width: 54px;
              height: 21px;
              margin-left: 25px;
              background: url('@/assets/Imgs/fangxunMap/dabiao.png') no-repeat center;
            }
            .titleBs {
              font-size: 15px;
              margin: 10px auto;
            }
            .footer {
              width: 97px;
              height: 58px;
              margin-left: 10px;
              background: url('@/assets/Imgs/fangxunMap/bsxtBg.png') no-repeat center;
            }
          }
        }
        .detail {
          padding: 10px 20px;
          background: rgba(1, 27, 46, 0.3);
          .ljpl {
            color: #e28c20;
            width: 50%;
          }
          .qcsw {
            color: #16a2aa;
            width: 50%;
            text-align: left;
          }
          .bengzhan {
            display: flex;
            flex-wrap: wrap;
            .bzCount {
              width: 40px;
              margin: 10px;
              .normal {
                width: 40px;
                height: 40px;
              }
              p {
                text-align: center;
                margin-top: 5px;
                background: rgba(1, 27, 46, 0.7);
                border-radius: 20px;
              }
              .success {
                background: url('@/assets/Imgs/fangxunMap/bzSuccess.png') no-repeat center;
              }
              .fail {
                background: url('@/assets/Imgs/fangxunMap/bzFail.png') no-repeat center;
              }
            }
          }
        }
      }
      .n-tabs-nav-scroll-content {
        border-bottom: 1px solid rgba(0, 0, 0, 0) !important;
      }
      .n-tabs-tab-wrapper {
        padding-right: 20px;
      }
    }
    .navBtn {
      position: absolute;
      right: 0px;
      top: 5px;
      width: 160px;
      height: 30px;
      display: flex;
      p {
        width: 75px;
        height: 25px;
        line-height: 27px;
        text-align: center;
        color: #d4f7ff;
        cursor: pointer;
        margin-right: 10px;
      }
      .active {
        background: #16a2aa;
        border-radius: 10px;
        color: #000;
      }
    }
  }
}
</style>