<template>
  <!-- 海绵监测分析 -->
  <div id="ZHHM_JCFX">
    <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
      <div class="ComBox">
        <!-- 降雨日历统计 -->
        <div class="Box_header">降雨日历统计</div>
        <div class="rainCal">
          <monitorCalender :hasClose="false" @change="getChangeDate" />
        </div>

        <!-- 内涝积水分析 -->
        <div class="Box_header" @click="showWaterloging">内涝积水分析</div>
        <div class="titSmall flex flex-align-center">
          <div class="flex">
            <span></span>
            <div class="name">内涝风险点</div>
          </div>
          <el-select
            clearable
            filterable
            v-model="waterlogingPoint"
            placeholder="请选择内涝风险点"
            size="small"
            class="picker"
            @change="selectWaterloggingPoint"
          >
            <el-option v-for="dict in riskList" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </div>
        <div class="chartHeight">
          <chartLogging :data="chartData1" :refresh="chartData1.refresh"></chartLogging>
        </div>
        <div class="flex flexLeg">
          <div class="legPart"><span class="yellow"></span>轻微内涝警戒线</div>
          <div class="legPart"><span class="red"></span>严重内涝警戒线</div>
        </div>

        <!-- 内涝分析成因分析 -->
        <div class="titSmall flex flex-align-center">
          <div class="flex">
            <span></span>
            <div class="name">内涝分析成因分析</div>
          </div>
        </div>
        <table class="tableFX">
          <tr>
            <td class="title">当前状况</td>
            <td>未出现内涝积水情况</td>
          </tr>
          <tr>
            <td class="title">数据分析</td>
            <td>初雨出流较慢但持续一段时间正常</td>
          </tr>
          <tr>
            <td class="title">历史成因</td>
            <td>区域局部地理位置较低，收水范围过大</td>
          </tr>
        </table>
      </div>
    </div>
    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
      <div class="ComBox">
        <!-- 典型项目分析 -->
        <div class="Box_header" @click="projectionShow">典型项目分析</div>
        <div class="flex flex-justcontent-end">
          <el-select
            clearable
            filterable
            v-model="projectionStation"
            placeholder="请选择典型项目"
            size="small"
            class="picker"
            style="margin: 10px 0px"
            @change="selectProjectionPoint"
          >
            <el-option v-for="dict in projectionList" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </div>
        <div style="height: 220px">
          <projectDX :data="chartData2" :refresh="chartData2.refresh"></projectDX>
        </div>

        <!-- 关键管网分析 -->
        <div class="Box_header" @click="pipeSupervisePoint">关键管网分析</div>
        <div class="flex flex-justcontent-spacearound">
          <el-select
            clearable
            filterable
            v-model="riskStation"
            placeholder="请选择分区"
            size="small"
            class="picker"
            style="margin: 10px 0px"
          >
            <el-option label="延河南岸分区" value="1" />
          </el-select>
          <el-select
            clearable
            filterable
            v-model="supervisePoint"
            placeholder="请选择管网监测点"
            size="small"
            class="picker"
            style="margin: 10px 0px"
            @change="selectSupervisePoint"
          >
            <el-option v-for="dict in supervisePointList" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </div>
        <div class="chartHeightR">
          <pipeFX :data="chartData3" :refresh="chartData3.refresh"></pipeFX>
        </div>
        <div class="flex flexLeg">
          <div class="legPart"><span class="yellow"></span>轻微风险警戒线</div>
          <div class="legPart"><span class="red"></span>溢流风险警戒线</div>
        </div>

        <!-- 风险成因分析 -->
        <div class="titSmall flex flex-align-center">
          <div class="flex">
            <span></span>
            <div class="name">风险成因分析</div>
          </div>
        </div>
        <table class="tableFX">
          <tr>
            <td class="title">当前状况</td>
            <td>未出现风险运行</td>
          </tr>
          <tr>
            <td class="title" rowspan="2">数据分析</td>
            <td>出流时间与降雨峰值有时间偏差</td>
          </tr>
          <tr>
            <td>降雨过后1小时后管网有积水</td>
          </tr>
          <tr>
            <td class="title">管网管径</td>
            <td>DN300</td>
          </tr>
          <tr>
            <td class="title" rowspan="2">风险分析</td>
            <td>管网普查报告中该段管网存在缺陷</td>
          </tr>
          <tr>
            <td>溢流风险运行35分钟</td>
          </tr>
        </table>
      </div>
    </div>
    <!-- 中部建议 -->
    <div :class="['centerSuggest', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
      <div class="flex">
        <div class="part">
          <div class="flex flex-align-center">
            <div class="left">
              <div>管网监测</div>
              <div style="font-weight: bold">(10/24)</div>
            </div>
            <div class="right">
              <div class="flex flex-justcontent-spacearound">今日预警站点(个):<span>10</span></div>
              <div class="flex flex-justcontent-spacearound">今日持续时长(分钟):<span>70</span></div>
            </div>
          </div>
        </div>
        <div class="part">
          <div class="flex flex-align-center">
            <div class="left">
              <div>排口监测</div>
              <div style="font-weight: bold">(20/29)</div>
            </div>
            <div class="right">
              <div class="flex flex-justcontent-spacearound">今日预警站点(个):<span>10</span></div>
              <div class="flex flex-justcontent-spacearound">今日持续时长(分钟):<span>70</span></div>
            </div>
          </div>
        </div>
        <div class="part">
          <div class="flex flex-align-center">
            <div class="left">
              <div>海绵地块</div>
              <div style="font-weight: bold">(10/12)</div>
            </div>
            <div class="right">
              <div class="flex flex-justcontent-spacearound">今日预警站点(个):<span>10</span></div>
              <div class="flex flex-justcontent-spacearound">今日持续时长(分钟):<span>70</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="ZHHM_JCFX">
import { ref, reactive, toRefs, onMounted, defineProps, defineEmits, onBeforeUnmount } from 'vue';
import { selectWaterlogging, selectExponent, selectPipenetwork } from '@/api/haimian/jcfxHM.js';
import monitorCalender from './monitorCalender.vue';
import chartLogging from './chartLogging'; //内涝积水点
import projectDX from './projectDX'; //典型项目分析
import pipeFX from './pipeFX'; //管网分析
import bus from '@/bus';
import yanAnProjection from '@/assets/yanAnProjection.json';

const showPanel = ref(true); //面板展开收起
const chartData1 = ref({
  xAxis: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
  inverse: true,
  yAxis: [1, 2, 2.3, 2, 1.1, 2.5, 1.9, 2.5, 2.8, 1.1, 2.1, 3], //降雨量
  yAxis2: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.3, 0.03, 0.6, 0.1, 0.2, 0.5], //流量
  refresh: 1,
});
const chartData2 = ref({
  xAxis: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
  yAxis1: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.5, 0.23, 0.6, 0.1, 0.2, 0.1], //水深
  yAxis2: [50, 55, 80, 50, 46, 65, 70, 50, 78, 52, 69, 90], //ss
  yAxisName1: '水深(cm)',
  yAxisName2: 'ss(mg/L)',
  refresh: 1,
});
const chartData3 = ref({
  xAxis: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
  inverse: true,
  yAxis1: [1, 2, 2.3, 2, 1.1, 2.5, 1.9, 2.5, 2.8, 1.1, 2.1, 3], //降雨量
  yAxis2: [20, 20.2, 21.3, 20.2, 22.1, 19.4, 20, 21, 23.6, 20.1, 21.2, 29], //水深
  yAxis3: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.3, 0.03, 0.6, 0.1, 0.2, 0.5], //流速
  refresh: 1,
});
const riskStation = ref('1');
const supervisePoint = ref('1');
const waterlogingPoint = ref('1');
const projectionStation = ref('1');
const riskList = ref([{ value: '1', label: '大砭沟与北大街交叉口', lonlat: '109.46877497809032,36.60720875935824' }]);
const supervisePointList = ref([{ value: '1', label: '延河南岸监测点1', lonlat: '109.49243789462459,36.601059437268574' }]);
const projectionList = ref([
  { value: '1', label: '长青路纺织花园侧风险点整治工程', lonlat: '109.50939984901683,36.614801063495705' },
  { value: '2', label: '王家坪纪念馆改造工程', lonlat: '109.47138061324954,36.60901773821534' },
  { value: '3', label: '边区银行及大礼堂旧址综合改造工程', lonlat: '109.47633416787454,36.58271490658465' },
]);
// 面板内容展开收起控制
const props = defineProps({
  showPanel: {
    type: Boolean,
  },
});
//内涝积水分析交互
const showWaterloging = () => {
  newfiberMapbox.map.easeTo({
    center: [109.488, 36.596],
    zoom: 12,
    pitch: 55,
  });
  // 先清空
  bus.emit('clearAllLayer');
  let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
  removedLayer.forEach(layer => {
    bus.emit('setLayerVisible', { layername: layer, isCheck: false });
  });
  bus.emit('SetLayerShow', ['内涝易涝点', '内涝风险点']);
};
//关键管网分析交互
const pipeSupervisePoint = () => {
  newfiberMapbox.map.easeTo({
    center: [109.488, 36.596],
    zoom: 12,
    pitch: 55,
  });
  // 先清空
  bus.emit('clearAllLayer');
  let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
  removedLayer.forEach(layer => {
    bus.emit('setLayerVisible', { layername: layer, isCheck: false });
  });
  bus.emit('SetLayerShow', ['排水管网监测']);
};
//典型项目分析交互
const projectionShow = () => {
  newfiberMapbox.map.easeTo({
    center: [109.488, 36.596],
    zoom: 12,
    pitch: 55,
  });
  // 先清空
  bus.emit('clearAllLayer');
  let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
  removedLayer.forEach(layer => {
    bus.emit('setLayerVisible', { layername: layer, isCheck: true });
  });
};
watch(
  () => props.showPanel,
  () => {
    showPanel.value = props.showPanel;
  },
  { immediate: true }
);
//内涝点change事件
const selectWaterloggingPoint = () => {
  if (waterlogingPoint.value) {
    let selectedPoint = riskList.value.filter(item => item.value == waterlogingPoint.value)[0];
    newfiberMapbox.map.easeTo({
      center: selectedPoint.lonlat.split(',').map(Number),
      zoom: 15.5,
    });
  }
};
//典型项目change事件
const selectProjectionPoint = () => {
  if (projectionStation.value) {
    let selectedPoint = projectionList.value.filter(item => item.value == projectionStation.value)[0];
    newfiberMapbox.map.easeTo({
      center: selectedPoint.lonlat.split(',').map(Number),
      zoom: 15.5,
    });
  }
};
//管网监测change事件
const selectSupervisePoint = () => {
  if (supervisePoint.value) {
    let selectedPoint = supervisePointList.value.filter(item => item.value == supervisePoint.value)[0];
    newfiberMapbox.map.easeTo({
      center: selectedPoint.lonlat.split(',').map(Number),
      zoom: 15.5,
    });
  }
};
const DataList = ref('');
// 日历点击获取相应日期
const getChangeDate = date => {
  console.log(date);
  // 模拟假数据，演示用
  if (date == '2024-08-07') {
    // 大雨
    DataList.value = '2024-08-07';
    getDataFX('1');
  } else {
    // 中雨
    DataList.value = '2024-08-03';
    getDataFX('0');
  }
};
// 内涝积水分析、项目分析、关键管网分析数据获取
function getDataFX(val) {
  // 内涝积水分析
  console.log(val, 'valvalval');
  selectWaterlogging({ value: val, date: DataList.value }).then(res => {
    let datas = res.data;
    chartData1.value.xAxis = datas.time;
    chartData1.value.yAxis = datas.jiangyuliang; //降雨量
    chartData1.value.yAxis2 = datas.jishuishen; //积水深
    chartData1.value.refresh = Math.random();
  });

  // 项目分析
  selectExponent({ value: val, date: DataList.value }).then(res => {
    let datas = res.data;
    chartData2.value.xAxis = datas.time;
    chartData2.value.yAxis1 = datas.jishuishen; //水深
    chartData2.value.yAxis2 = datas.ss; //SS
    chartData2.value.refresh = Math.random();
  });

  // 关键管网分析
  selectPipenetwork({ value: val, date: DataList.value }).then(res => {
    let datas = res.data;
    chartData3.value.xAxis = datas.time;
    chartData3.value.yAxis1 = datas.jyl; //降雨量
    chartData3.value.yAxis2 = datas.jishuishen; //水深
    chartData3.value.yAxis3 = datas.ls; //流速
    chartData3.value.refresh = Math.random();
  });
}
//添加海绵项目
const addProjectionLayer = () => {
  let projectionList = [
    {
      layername: 'HMJZYSQ',
      data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('建筑'))),
    },
    {
      layername: 'HMXGYLD',
      data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('公园'))),
    },
    {
      layername: 'HMXDLGC',
      data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('道路'))),
    },
    {
      layername: 'HMXSX',
      data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('水系'))),
    },
    {
      layername: 'GWPCYXF',
      data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('管网'))),
    },
    // 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS', 'other'
  ];
  console.log('projectionList---', projectionList);
  projectionList.forEach(item => {
    bus.emit('setGeoJSON', { json: item.data, key: item.layername });
  });
  //bus.emit('setLegendData', projectionList);
};
onMounted(() => {
  newfiberMapbox.map.easeTo({
    center: [109.488, 36.596],
    zoom: 13,
  });
  addProjectionLayer();
});
onBeforeUnmount(() => {
  bus.emit('clearAllLayer');
  bus.emit('SetLayerShow', ['蓝色地图']);
  let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
  removedLayer.forEach(layer => {
    bus.emit('setLayerVisible', { layername: layer, isCheck: false });
  });
});
</script>

<style lang="scss" scoped>
#ZHHM_JCFX {
  width: 100%;
  height: 100%;
  .centerSuggest {
    position: absolute;
    left: 480px;
    top: 110px;
    z-index: 90;
    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
    border-radius: 6px;
    border: 1px solid #15d2fd;
    padding: 15px;
    width: calc(100vw - 1000px);
    box-shadow: inset 0 0 10px 10px #47eef38a;
    .part {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      width: 31.8%;
      margin-left: 10px;
      text-align: center;
      background: linear-gradient(0deg, rgba(0, 252, 255, 0.8) 0%, rgba(0, 43, 67, 0.2) 100%);
      border-radius: 2px;
      border: 1px solid #74dde1;
      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
      padding: 6px 0px;
      line-height: 24px;
      .left {
        border-right: 1px solid #74dde1;
        width: 30%;
      }
      .right {
        flex: 1;
        span {
          font-family: Source Han Sans CN;
          font-weight: bold;
          font-size: 16px;
          color: #00f2ff;
          cursor: pointer;
        }
      }
    }
  }
  .chartHeight {
    width: 100%;
    height: calc(100vh - 720px);
    margin: 5px auto;
  }
  .chartHeightR {
    width: 100%;
    height: calc(100vh - 780px);
    margin: 5px auto;
  }
  .tableFX {
    border-collapse: collapse;
    width: 95%;
    margin: 10px 2%;
    td {
      border: 1px solid #1cf5fc;
      text-align: center;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      padding: 5px 0px;
      color: #a5d2ff;
      background: #075680;
    }
    .title {
      color: #00f2ff;
    }
  }
  .LeftBox {
    width: 450px;
    height: calc(100% - 98px);
    position: absolute;
    left: 10px;
    top: 70px;
    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
    border-radius: 6px;
    border: 1px solid #47eef3;
    box-sizing: border-box;
    padding: 10px;
    box-shadow: inset 0 0 5px 5px #47eef38a;
  }
  .RightBox {
    width: 450px;
    height: calc(100% - 98px);
    position: absolute;
    right: 10px;
    top: 70px;
    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
    border-radius: 6px;
    border: 1px solid #47eef3;
    box-sizing: border-box;
    padding: 10px;
    box-shadow: inset 0 0 5px 5px #47eef38a;
  }
  .ComBox {
    width: 100%;
    box-sizing: border-box;

    .Box_header {
      width: 100%;
      height: 43px;
      background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
      background-size: cover;
      font-family: PangMenZhengDao;
      font-weight: 400;
      font-size: 23px;
      color: #ebfeff;
      line-height: 43px;
      box-sizing: border-box;
      padding-left: 35px;
      cursor: pointer;
    }
    .titSmall {
      justify-content: space-between;
      padding: 0px 15px;
      margin-top: 10px;
      .flex {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 14px;
        color: #ebfeff;
        align-items: center;
        span {
          width: 10px;
          height: 10px;
          display: inline-block;
          margin-right: 6px;
          background: #fff;
          transform: rotate(45deg);
        }
        .name {
          background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
          padding: 0px 3px;
          height: 10px;
          line-height: 0px;
          margin-top: 6px;
        }
      }
    }
    .flexLeg {
      justify-content: center;
      margin-bottom: 20px;
      .legPart {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 14px;
        color: #ebfeff;
        text-align: center;
        margin-right: 20px;
        span {
          width: 10px;
          height: 10px;
          display: inline-block;
          margin-right: 6px;
        }
        .yellow {
          background: #ffff80;
        }
        .red {
          background: #e20f36;
        }
      }
    }
  }
}
</style>