<template>
  <!-- 规划引领---水安全保障提升 -->
  <div class="planWaterSafefy">
    <div class="selectTitleHM">
      <div class="name">水安全保障提升</div>
    </div>
    <div class="tabChangeList">
      <div
        class="tabChange"
        :class="tabactives == index ? 'tabactives' : ''"
        v-for="(item, index) in tabList"
        :key="index"
        @click="tabChangeClick(index, item)"
      >
        {{ item.name }}
      </div>
    </div>
    <div id="waterChar" class="chartHeightHM" v-show="tabactives == 0"></div>
    <div class="chartHeightHM1" v-show="tabactives == 1">
      <div class="flex pipeSys1">
        <p>新增城市雨水调蓄设施 <span>6</span> 处</p>
        <p>恢复天然水域面积 <span>8.9</span> km²</p>
      </div>
      <div id="expandChar" class="chartHeightHM1"></div>
      <div class="naturalChangeList1">
        <div class="OneLine" v-for="item in nsturalList" :key="item">
          <div class="lineLeft">{{ item.feature }}</div>
          <div class="lineRight">{{ item.specific }}</div>
        </div>
      </div>
    </div>

    <div v-show="tabactives == 2">
      <div class="flex pipeSys1">
        <p>排水能力由 <span>274</span> m³/s</p>
        <p>提高到 <span>374.16</span> m³/s</p>
      </div>
      <div class="planCont">
        <div class="planWater">
          <div class="planContList" v-for="p in planContList" :key="p">
            <div class="planName">{{ p.name }}</div>
            <div class="planState" :class="p.state == '1' ? 'green1' : 'red1'">{{ p.state == '1' ? '已完工' : '未完工' }}</div>
            <div class="yuandian">
              <div class="jindu" v-for="p in 18" :key="p"></div>
              <div class="planNumber">{{ p.number }}</div>
            </div>
          </div>
        </div>
        <!-- <div class="flex">
          <p class="title">城西泵站扩建</p>
          <el-progress :text-inside="true" :stroke-width="20" :percentage="44" status="success">
            <span class="name">30</span>
          </el-progress>
          <p class="title">已完工</p>
        </div>
        <div class="flex">
          <p class="title">河口泵站扩建</p>
          <el-progress :text-inside="true" :stroke-width="20" :percentage="100" status="success">
            <span class="name">100</span>
          </el-progress>
          <p class="title">已完工</p>
        </div>
        <div class="flex">
          <p class="title">东闸泵站扩建</p>
          <el-progress :text-inside="true" :stroke-width="20" :percentage="27" status="success">
            <span class="name">15</span>
          </el-progress>
          <p class="title">已完工</p>
        </div>
        <div class="flex">
          <p class="title">孝三路泵站新建</p>
          <el-progress :text-inside="true" :stroke-width="20" :percentage="10" status="success">
            <span class="name">10</span>
          </el-progress>
          <p class="title">已完工</p>
        </div>
        <div class="flex">
          <p class="title">英才学校泵站新建</p>
          <el-progress :text-inside="true" :stroke-width="20" :percentage="60" status="success">
            <span class="name">60</span>
          </el-progress>
          <p class="title">已完工</p>
        </div>
        <div class="flex">
          <p class="title">长兴泵站扩容改造</p>
          <el-progress :text-inside="true" :stroke-width="20" :percentage="80" status="success">
            <span class="name">80</span>
          </el-progress>
          <p class="title">已完工</p>
        </div> -->
      </div>
    </div>
    <div class="chartHeightHM" v-show="tabactives == 3">
      <div class="flex pipeSys1">
        <p>雨水管线总里程 <span>128</span> km</p>
        <p>新、改建雨水管渠 <span>61.7</span> km</p>
      </div>
      <div id="pipeEChart" class="chartHeightHM"></div>
    </div>
  </div>
</template>

<script setup>
import { nextTick } from 'vue';
import optionChart from '@/views/sponeScreen/newPage/chartOption.js';
const tabactives = ref(0);
const activeIndex = ref(1);
const waterEchart = shallowRef(null);
const ktxChart = shallowRef(null);
const networkchart = shallowRef(null);
const { proxy } = getCurrentInstance();
const tabList = ref([
  { index: 1, name: '畅通道' },
  { index: 2, name: '扩调蓄' },
  { index: 3, name: '建泵站' },
  { index: 4, name: '织管网' },
]);
const nsturalList = ref([
  { id: 1, feature: '王母湖退垸还湖治理工程', specific: '2310.37亩' },
  { id: 2, feature: '野猪湖退垸还湖治理工程', specific: '2368.70亩' },
]);
const planContList = ref([
  { index: 1, name: '城西泵站扩建', state: '1', number: '30m³/s' },
  { index: 2, name: '河口泵站扩建', state: '1', number: '70m³/s' },
  { index: 3, name: '东闸泵站扩建', state: '1', number: '30m³/s' },
  { index: 4, name: '孝三路泵站新建', state: '2', number: '30m³/s' },
  { index: 5, name: '英才学校泵站新建', state: '1', number: '4m³/s' },
  { index: 6, name: '长兴泵站扩容改造', state: '1', number: '8.0m³/s' },
]);
// Tab切换
const tabChangeClick = async (index, val) => {
  activeIndex.value = val;
  tabactives.value = index;
  waterEchart.value && waterEchart.value.dispose();
  ktxChart.value && ktxChart.value.dispose();
  networkchart.value && networkchart.value.dispose();

  nextTick(() => {
    switch (index) {
      case 0:
        waterBarChart();
        break;
      case 1:
        expandBarChar();
        break;
      case 3:
        pipeNetworkChart();
        break;
    }
  });
};

// 畅通道echart
function waterBarChart() {
  let waterBar = JSON.parse(JSON.stringify(optionChart.option2));
  waterEchart.value = proxy.echarts.init(document.getElementById('waterChar'));
  waterBar.graphic.invisible = true; // 暂无数据
  waterBar.series = [
    {
      name: '拓宽公里数',
      type: 'bar',
      barWidth: 20,
      data: [10, 20, 14, 8, 24],
    },
  ];
  waterBar.xAxis = {
    type: 'category',
    data: ['老澴河水生态综合治理（一期）PPP项目', '邓家河片区综合利用', '箍湖河新河北段', '箍湖河新河南段'],
    axisLabel: {
      formatter: function (params) {
        let newParamsName = '';
        let paramsNameNumber = params.length;
        let provideNumber = 5; // 一行显示几个字 然后就超过字数就会自动换行
        let rowNumber = Math.ceil(paramsNameNumber / provideNumber);
        if (paramsNameNumber > provideNumber) {
          for (let p = 0; p < rowNumber; p++) {
            let tempStr = '';
            let start = p * provideNumber;
            let end = start + provideNumber;
            if (p === rowNumber - 1) {
              tempStr = params.substring(start, paramsNameNumber);
            } else {
              tempStr = params.substring(start, end) + '\n';
            }
            newParamsName += tempStr;
          }
        } else {
          newParamsName = params;
        }
        return newParamsName;
      },
    },
  };
  // waterBar.dataZoom = [
  //   { type: 'slider', start: 10, end: 60 }, // start 左边在 10% 的位置  end 右边在 60% 的位置
  //   { type: 'inside', start: 30, end: 70 }, //鼠标控制滚轮缩放
  // ];
  waterBar.yAxis.name = '单位: 公里';
  waterEchart.value.clear();
  waterEchart.value.setOption(waterBar);
}

// 扩调蓄echart
function expandBarChar() {
  let expandEChart = JSON.parse(JSON.stringify(optionChart.option6));
  ktxChart.value = proxy.echarts.init(document.getElementById('expandChar'));
  expandEChart.graphic.invisible = true; // 暂无数据
  ktxChart.value.clear();
  ktxChart.value.setOption(expandEChart);
}

// 织管网echarts
function pipeNetworkChart() {
  let pipeNetwork = JSON.parse(JSON.stringify(optionChart.option1));
  networkchart.value = proxy.echarts.init(document.getElementById('pipeEChart'));
  // 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; // 暂无数据
  //   networkchart.value.clear();
  //   networkchart.value.setOption(optionChart.option1);
  // });
  pipeNetwork.graphic.invisible = true; // 暂无数据
  networkchart.value.clear();
  networkchart.value.setOption(pipeNetwork);
}

//自适应
function resizeTheChart() {
  waterEchart.value.resize();
  networkchart.value.resize();
  ktxChart.value.resize();
}

onMounted(() => {
  waterBarChart();
  window.addEventListener('resize', resizeTheChart); //销毁图表监听事件
});

onBeforeUnmount(() => {
  waterEchart.value && waterEchart.value.dispose();
  ktxChart.value && ktxChart.value.dispose();
  networkchart.value && networkchart.value.dispose();
});
</script>

<style lang="scss">
@import '@/assets/styles/variables.module.scss';
.planWaterSafefy {
  width: 100%;
  .chartHeightHM {
    width: 100%;
    height: calc(100vh - 730px);
  }
  .chartHeightHM1 {
    width: 100%;
    height: 230px;
  }
  .tabChangeList {
    display: flex;
    align-items: center;
    justify-content: space-around;
    .tabChange {
      width: 145px;
      height: 20px;
      font-family: PingFang SC;
      margin: 10px 0 5px 0px;
      font-size: 16px;
      font-weight: 400;
      line-height: 20px;
      text-align: center;
      cursor: pointer;
      &:hover {
        color: #00d1ff;
      }
    }
    .active {
      color: #00d1ff;
    }
  }
  .tabactives {
    color: #26acfe;
  }
  .pipeSys1 {
    border: 1px solid #439bf8;
    border-radius: 6px;
    color: #2992ff;
    justify-content: space-between;
    align-items: center;
    padding: 3px 2px;
    margin: 10px auto;
    span {
      color: #fff;
      font-family: YouSheBiaoTiHei;
      font-size: 18px;
    }
  }
  .naturalChangeList1 {
    height: 80px;
  }

  .planCont {
    width: 100%;
    .planWater {
      .planContList {
        display: flex;
        height: 40px;
        align-items: center;
        .planState {
          width: 40px;
          height: 20px;
          line-height: 20px;
          align-items: center;
          border-radius: 20%;
          margin-left: 10px;
          text-align: center;
          font-size: 12px;
          font-weight: 500;
        }
        .planName {
          width: 100px;
        }
      }
    }
  }
  .yuandian {
    display: flex;
    position: relative;
    width: 60%;
    height: 25px;
    background: #051b3e;
    margin: 10px auto;
    .jindu {
      height: 15px;
      width: 3px;
      background: #2992ff;
      margin: 5px 2px 5px 2px;
    }
    .planNumber {
      position: absolute;
      right: 10px;
      line-height: 25px;
      text-align: center;
      color: #fff;
      font-weight: 500;
    }
  }
}
.green1 {
  background: #20c02c;
  color: #fff;
}
.red1 {
  background: #e95251;
  color: #fff;
}
</style>