<template>
  <!-- 排水专题 -->
  <div class="publicContainer draingeMapPage">
    <!-- 左侧内容 -->
    <div :class="['videoImg', ifExpand ? 'leftZk' : 'leftSq']" @click="ifExpand = !ifExpand"></div>
    <div :class="['assContentLeft', 'animate__animated', ifExpand ? 'animate__bounceInLeft' : 'animate__bounceOutLeft']">
      <div class="selectTitle">
        <div class="name">城市排水管网系统</div>
      </div>
      <div class="flex pipeSys">
        <p>雨水管线总里程：<span>128</span> km</p>
        <p>新、改建雨水管渠：<span>61.2</span> km</p>
      </div>
      <div id="pipelineChart" class="chartHeight"></div>

      <div class="selectTitle">
        <div class="name">城市泵站排水能力提升</div>
      </div>
      <el-table :data="tableDataBZ" style="width: 100%; margin: 10px auto" height="210">
        <el-table-column prop="name" label="泵站" />
        <el-table-column prop="type" label="类型" width="100" />
        <el-table-column prop="status" label="状态" />
        <el-table-column prop="val1" label="抽排能力(前)">
          <template #default="scope">
            <span class="red">{{ scope.row.val1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="val2" label="抽排能力(后)">
          <template #default="scope">
            <span class="green">{{ scope.row.val2 }}</span>
          </template>
        </el-table-column>
      </el-table>

      <div class="selectTitle">
        <div class="name">内涝治理(一点一策)</div>
      </div>
      <el-table :data="tableDataNL" style="width: 100%; margin: 10px auto" height="210">
        <el-table-column prop="type" label="故障类型" />
        <el-table-column prop="num" label="泵站数量" width="100" />
        <el-table-column prop="val1" label="消除进度">
          <template #default="scope">
            <span class="red">{{ scope.row.val1 }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 右侧内容 -->
    <div :class="['videoImgRCX', ifExpand2 ? 'rightZkCX' : 'rightSqCX']" @click="ifExpand2 = !ifExpand2"></div>
    <div :class="['assContentRight', 'animate__animated', ifExpand2 ? 'animate__bounceInRight' : 'animate__bounceOutRight']">
      <div class="selectTitle">
        <div class="name">不同重现期内涝积水情况</div>
        <div class="titleEnd">
          <el-select v-model="cxqDate" placeholder="请选择" style="width: 120px">
            <el-option label="50年一遇" value="1" />
          </el-select>
        </div>
      </div>
      <div id="barChart" class="chartHeight"></div>

      <div class="selectTitle">
        <div class="name">中心城区积水情况统计</div>
        <div class="titleEnd">
          <el-select v-model="cityDate" placeholder="请选择" style="width: 120px">
            <el-option label="2021" value="2021" />
            <el-option label="2022" value="2022" />
            <el-option label="2023" value="2023" />
          </el-select>
        </div>
      </div>
      <div id="centerAreaChart" class="chartHeight"></div>

      <div class="selectTitle">
        <div class="name">入河排口污染物浓度变化情况</div>
        <div class="titleEnd">
          <el-select v-model="wrwDate" placeholder="请选择" style="width: 120px">
            <el-option label="2021" value="2021" />
            <el-option label="2022" value="2022" />
            <el-option label="2023" value="2023" />
          </el-select>
        </div>
      </div>
      <div id="pkwrwChart" class="chartHeight"></div>
    </div>
  </div>
</template>

<script setup>
import optionChart from './chartOption.js';

const { proxy } = getCurrentInstance();
const ifExpand = ref(true);
const ifExpand2 = ref(true);
const cxqDate = ref('1');
const cityDate = ref('2023');
const wrwDate = ref('2023');
const pipeChart = shallowRef(null);
const zsqkChart = shallowRef(null);
const centerAreaChart = shallowRef(null);
const pkwrwChart = shallowRef(null);
const tableDataBZ = ref([{ name: '城西泵站', type: '扩建', status: '已完工', val1: '25m³/s', val2: '30m³/s' }]);
const tableDataNL = ref([{ type: '地势低洼', num: 23, val1: 60 }]);

// 城市排水管网系统echarts
function piplineChart() {
  pipeChart.value = proxy.echarts.init(document.getElementById('pipelineChart'));
  // permeableFloorAreaChart().then(res => {
  //   let datas = res.data;
  //   optionChart.option1.xAxis.data = datas.years;
  //   optionChart.option1.series[0].data = datas.permeableFloorAreaTotals;
  //   optionChart.option1.series[1].data = datas.permeableFloorAreaPercents;
  //   optionChart.option1.graphic.invisible = true; // 暂无数据
  //   pipeChart.value.clear();
  //   pipeChart.value.setOption(optionChart.option1);
  // });
  optionChart.option1.graphic.invisible = true; // 暂无数据
  pipeChart.value.clear();
  pipeChart.value.setOption(optionChart.option1);
}

// 不同重现期内涝积水情况echarts
function zsqkBarChart() {
  zsqkChart.value = proxy.echarts.init(document.getElementById('barChart'));
  optionChart.option2.graphic.invisible = true; // 暂无数据
  zsqkChart.value.clear();
  zsqkChart.value.setOption(optionChart.option2);
}

// 中心城区积水情况统计echarts
function zxcqChart() {
  centerAreaChart.value = proxy.echarts.init(document.getElementById('centerAreaChart'));
  optionChart.option3.graphic.invisible = true; // 暂无数据
  centerAreaChart.value.clear();
  centerAreaChart.value.setOption(optionChart.option3);
}

// 入河排口污染物浓度变化情况echarts
function rkpkwrwChart() {
  pkwrwChart.value = proxy.echarts.init(document.getElementById('pkwrwChart'));
  optionChart.option4.graphic.invisible = true; // 暂无数据
  pkwrwChart.value.clear();
  pkwrwChart.value.setOption(optionChart.option4);
}

//自适应
function resizeTheChart() {
  pipeChart.value.resize();
  zsqkChart.value.resize();
  pkwrwChart.value.resize();
  centerAreaChart.value.resize();
}

onMounted(() => {
  piplineChart(); //城市排水管网系统echarts
  zsqkBarChart(); //不同重现期内涝积水情况echarts
  zxcqChart(); //中心城区积水情况统计echarts
  rkpkwrwChart(); //入河排口污染物浓度变化情况echarts
  window.addEventListener('resize', resizeTheChart);
});
onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeTheChart); //销毁图表监听事件
  //先销毁实例
  pipeChart.value && pipeChart.value.dispose();
  zsqkChart.value && zsqkChart.value.dispose();
  pkwrwChart.value && pkwrwChart.value.dispose();
  centerAreaChart.value && centerAreaChart.value.dispose();
});
</script>

<style lang="scss">
@import '@/assets/styles/variables.module.scss';
.draingeMapPage {
  width: 100%;
  height: 100%;
  .selectTitle {
    background: url('@/assets/images/Sponge_screen/ListBox_Header_BG.png') no-repeat;
    background-size: 100% 100%;
    height: 38px;
    .name {
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      margin-left: 40px;
    }
  }
  .chartHeight {
    width: 100%;
    height: 230px !important;
  }
  .rightZkCX {
    right: 470px;
  }
  .leftZk {
    left: 470px;
  }
  .leftSq {
    left: 10px;
  }
  .videoImg {
    width: 13px;
    height: 147px;
    background: url('@/assets/newImgs/down.png');
    background-size: 100% 100%;
    color: #fff;
    position: absolute;
    top: 340px;
    z-index: 99;
    cursor: pointer;
    transition: 0.5s ease-in-out;
  }
  .assContentLeft {
    width: 450px;
    height: calc(100vh - 100px);
    // background: $mainBg;
    background: linear-gradient(0deg, #011431 0%, rgba(1, 20, 49, 0.8) 100%);
    border-radius: 8px;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 90;
    padding: 15px;
    overflow: auto;
    #chartST {
      width: 100%;
      height: 230px;
    }
    .pipeSys {
      border: 1px solid #439bf8;
      border-radius: 6px;
      color: #2992ff;
      justify-content: space-between;
      align-items: center;
      padding: 3px 10px;
      margin: 10px auto;
      span {
        color: #fff;
        font-family: YouSheBiaoTiHei;
        font-size: 22px;
      }
    }
  }
  .assContentRight {
    width: 450px;
    height: calc(100vh - 100px);
    // background: $mainColor1;
    background: linear-gradient(0deg, #011431 0%, rgba(1, 20, 49, 0.8) 100%);
    border-radius: 8px;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 90;
    padding: 15px;
    overflow: auto;
  }
}
</style>