<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 style="margin-bottom: 15px"
                   v-for="(item, index) in tableData"
                   :key="'a' + index">
                <div class="title"
                     @click="rainsystem(1)">{{ item.stationName }}</div>
                <div class="pailiang">
                  日抽排量 <span class="num">{{ item.dayPullMount }} </span>m³
                  <div class="percent num">{{ percentage }}%</div>
                  <n-progress type="line"
                              status="success"
                              :percentage="percentage"
                              :indicator-placement="'inside'" />
                </div>
                <div class="detail">
                  <div style="display: flex">
                    <p class="ljpl">
                      累计排量 <span class="num">{{ item.dayPullMount }} </span>万m³
                    </p>
                    <p class="qcsw">
                      前池水位 <span class="num">{{ item.aheadPoolHigh }} </span>m
                    </p>
                  </div>
                  <div class="bengzhan">
                    <div class="bzCount">
                      <div class="normal fail"></div>
                      <p>1#</p>
                    </div>
                    <div class="bzCount">
                      <div class="normal fail"></div>
                      <p>2#</p>
                    </div>
                    <div class="bzCount">
                      <div class="normal fail"></div>
                      <p>3#</p>
                    </div>
                    <div class="bzCount">
                      <div class="normal fail"></div>
                      <p>4#</p>
                    </div>
                    <div class="bzCount">
                      <div class="normal fail"></div>
                      <p>5#</p>
                    </div>
                  </div>
                </div>
              </div> -->
            </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 v-for="(item, index) in tableData"
                   :key="'b' + index"
                   style="margin-bottom: 15px">
                <div class="pailiang"
                     @click="bushuisystem(1)">
                  {{ item.stationName }} 日补水量： <span class="num">{{ item.dayRepleMount }}</span>m³
                </div>
              </div>
              <div class="bushuiLx"
                   v-if="yxjkIndex == 0"> -->
              <!-- 箭头流向 -->
              <!-- <div class="line"
                     style="width: 190px; left: 62px; bottom: 32px; transform: rotate(-180deg)"></div>
                <div class="line"
                     style="width: 190px; left: 62px; bottom: 170px; transform: rotate(0deg)"></div>
                <div class="line"
                     style="width: 76px; left: 182px; bottom: 234px; transform: rotate(0deg)"></div>
                <div class="line"
                     style="width: 76px; left: 180px; bottom: 110px; transform: rotate(0deg)"></div>
                <div class="line"
                     style="width: 25px; left: 312px; bottom: 234px; transform: rotate(0deg)"></div>
                <div class="line"
                     style="width: 15px; left: 328px; bottom: 244px; transform: rotate(-90deg)"></div>
                <div class="line"
                     style="width: 75px; left: 108px; bottom: 318px; transform: rotate(0deg)"></div>
                <div class="line"
                     style="width: 40px; left: 39px; bottom: 53px; transform: rotate(-90deg)"></div>
                <div class="line"
                     style="width: 40px; left: 39px; bottom: 153px; transform: rotate(-90deg)"></div>
                <div class="line"
                     style="width: 35px; left: 42px; bottom: 284px; transform: rotate(-90deg)"></div>
                <div class="line"
                     style="width: 255px; left: 51px; bottom: 214px; transform: rotate(90deg)"></div>
              </div>
              <div class="bushuiJch"
                   v-if="yxjkIndex == 1">
                <div class="line"
                     style="width: 170px; left: 147px; bottom: 44px; transform: rotate(0deg)"></div>
                <div class="line"
                     style="width: 120px; left: 147px; bottom: 86px; transform: rotate(0deg)"></div>
                <div class="line"
                     style="width: 170px; left: 147px; bottom: 129px; transform: rotate(0deg)"></div>
                <div class="line"
                     style="width: 120px; left: 147px; bottom: 177px; transform: rotate(0deg)"></div>
                <div class="line"
                     style="width: 120px; left: 147px; bottom: 261px; transform: rotate(0deg)"></div>
                <div class="line"
                     style="width: 170px; left: 147px; bottom: 221px; transform: rotate(0deg)"></div>
                <div class="line"
                     style="width: 30px; left: 110px; bottom: 177px; transform: rotate(0deg)"></div>
                <div class="line"
                     style="width: 126px; left: 83px; bottom: 104px; transform: rotate(90deg)"></div>
                <div class="line"
                     style="width: 80px; left: 106px; bottom: 224px; transform: rotate(-90deg)"></div>
                <div class="line"
                     style="width: 75px; left: 31px; bottom: 234px; transform: rotate(90deg)"></div>
              </div> -->
            </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 { NTag } from 'naive-ui';
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
      }
    }

    const rainsystem = val => { };

    const bushuisystem = val => { };

    // 污水系统 场站名称点击
    async function checkCzName(row) { }

    // 工情概览数据  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(() => {
      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.timeranhan && clearInterval(window.timeranhan);
      //!!window.timerwater && clearInterval(window.timerwater);
      !!window.timertuokuan && clearInterval(window.timertuokuan);
      !!window.timerspread && clearInterval(window.timerspread);
      //!!window.timerflow && clearInterval(window.timerflow);
      !!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,
      checkCzName,
      rainsystem,
      bushuisystem,
      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>