<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">内涝积水分析</div>
        <div class="titSmall flex flex-align-center">
          <div class="flex">
            <span></span>
            <div class="name">内涝风险点</div>
          </div>
          <el-select clearable filterable v-model="riskStation" placeholder="请选择内涝风险点" size="small" class="picker">
            <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">典型项目分析</div>
        <div class="flex flex-justcontent-end">
          <el-select
            clearable
            filterable
            v-model="riskStation"
            placeholder="请选择典型项目"
            size="small"
            class="picker"
            style="margin: 10px 0px"
          >
            <el-option v-for="dict in riskList" :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">关键管网分析</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="riskStation"
            placeholder="请选择管网监测点"
            size="small"
            class="picker"
            style="margin: 10px 0px"
          >
            <el-option label="延河南岸监测点1" value="1" />
          </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">
      <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 } from 'vue';
import monitorCalender from './monitorCalender.vue';
import chartLogging from './chartLogging'; //内涝积水点
import projectDX from './projectDX'; //典型项目分析
import pipeFX from './pipeFX'; //管网分析

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 riskList = ref([{ value: '1', label: '大砭沟与北大街交叉口' }]);

// 面板内容展开收起控制
const props = defineProps({
  showPanel: {
    type: Boolean,
  },
});
watch(
  () => props.showPanel,
  () => {
    showPanel.value = props.showPanel;
  },
  { immediate: true }
);

// 日历点击获取相应日期
const getChangeDate = date => {
  console.log(date);
};

onMounted(() => {});
</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;
    }
    .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>