<template>
  <!-- 产出绩效 -->
  <div class="Outputperformance">
    <div class="ListBoxHeader">
      <div class="ListBoxHeader_font">产出绩效</div>
    </div>
    <div class="OutputperBox">
      <!-- 年份切换 -->
      <div class="subRightBox">
        <div
          class="headcenter"
          v-for="(item, index) in categoryList"
          :key="item"
          :class="activedname == item.name ? 'activedright' : ''"
          @click="categoryclick(item, index)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="ComBox">
        <!-- 内涝防治 -->
        <div class="NlfzBox">
          <div class="topVehicl flex">
            <div class="icon"></div>
            <div class="name">内涝风险点</div>
            <div class="NlfzList">
              <div
                class="head-item"
                v-for="(item, index) in FlList"
                :key="item"
                :class="Flcname == item.name ? 'activedright' : ''"
                @click="Flclick(item, index)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="specifics" v-if="Flcname == '城市防洪'">
            <div class="info flex flex-justcontent-start">
              <div class="weight">提升目标:</div>
              <div class="text">防洪标准满足100年一遇</div>
            </div>
            <div class="info flex flex-justcontent-start infotwo">
              <div class="weightO">改造措施:</div>
              <div class="text">防洪体系工程防洪保护圈</div>
            </div>
            <div class="CsfhCls">
              <ChartCsfl :data="CsList" :refresh="ryRefresh3" />
            </div>
            <div class="BeCautious flex flex-justcontent-spacebetween flex-align-center">
              堤防保护圈满足100 —— 遇防洪目标
              <div class="ViewTReport">查看报告</div>
            </div>
          </div>
          <div class="nlfz" v-if="Flcname == '内涝防治'">
            <ChartNlfz :echartData="ryData" :refresh="ryRefresh" />
          </div>
          <div class="jsdxc" v-if="Flcname == '积水点消除'">
            <jsdChart :echartData="aiList" :refresh="ryRefresh1" />
          </div>
        </div>

        <!-- 雨污水资源利用 -->
        <div class="YwBox">
          <div class="topYwBox flex">
            <div class="icon"></div>
            <div class="name">雨污水资源利用</div>
            <div class="NlfzList">
              <div
                class="head-item"
                v-for="(item, index) in YwList"
                :key="item"
                :class="Ywcname == item.name ? 'activedright' : ''"
                @click="Ywclick(item, index)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="utilize" v-if="Ywcname == '雨水资源化利用'">
            <div class="rainChartInfo flex">
              <div class="square"></div>
              <div style="margin-left: 5px">调蓄池</div>
              <div class="squareA"></div>
              <div style="margin-left: 5px">雨水塘</div>
            </div>
            <div class="FK_bodyBox">
              <div class="FK_bodyBox_list" v-for="item in XCFKData">
                <span class="FK_bodyBox_list_label">{{ item.name }}</span>
                <div class="FK_BigBox">
                  <div class="FK_CenBox1" :style="getWidth(item, 1)">{{ item.num1 }}</div>
                  <div class="FK_CenBox2" :style="getWidth(item, 2)">{{ item.num2 }}</div>
                </div>
              </div>
            </div>
            <div class="BottomLook flex" v-if="Ywcname == '雨水资源化利用'">
              <div class="ConstrucBot flex" v-for="(item, index) in YszyList">
                <div class="ConstruBox flex flex-justcontent-spacebetween flex-align-center">
                  <div class="left">{{ item.name }}</div>
                  <div class="right">{{ item.value }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="zsslyl" v-if="Ywcname == '再生水利用率'">
            <ChartZsslyl :echartData="zssList" :refresh="ryRefresh2" />
          </div>
          <div class="BottomLook flex" v-if="Ywcname == '再生水利用率'">
            <div class="ConstrucBot flex" v-for="(item, index) in YwsList">
              <div class="ConstruBox flex flex-justcontent-spacebetween flex-align-center">
                <div class="left">{{ item.name }}</div>
                <div class="right">{{ item.value }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 污水收集处理 -->
  <div class="Sewagecollection">
    <div class="topVehicl flex" @click="showSewageFectory">
      <div class="icon"></div>
      <div class="name">污水收集处理</div>
    </div>
    <div class="wssjEch">
      <ChartWssjcl :data="CsWssj" :refresh="ryRefresh4" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
import ChartNlfz from './ChartNlfz.vue'; //内涝防治
import jsdChart from './jsdChart.vue'; //积水点
import ChartCsfl from './ChartCsfl.vue'; //城市内涝
import ChartZsslyl from './ChartZsslyl.vue'; //再生水利用率
import ChartWssjcl from './ChartWssjcl.vue'; //污水收集

import * as echarts from 'echarts';
import bus from '@/bus';
const ryData = ref({});
const ryRefresh = ref('');
const aiList = ref([]);
const ryRefresh1 = ref('');
const zssList = ref({});
const ryRefresh2 = ref('');
const CsList = ref({});
const ryRefresh3 = ref('');
const CsWssj = ref([]);
const ryRefresh4 = ref('');

const categoryList = ref([
  { name: '2023', value: 1 },
  { name: '2024', value: 2 },
  { name: '2025', value: 3 },
]);
const YwsList = ref([
  { name: '合计', value: '899.55万m³' },
  { name: '利用率为', value: '23.05%' },
]);
const YszyList = ref([
  { name: '调蓄容积合计', value: '50568' },
  { name: '雨水利用量合计', value: '343509' },
]);

const FlList = ref([
  { name: '城市防洪', value: 1 },
  { name: '内涝防治', value: 2 },
  { name: '积水点消除', value: 3 },
]);
const YwList = ref([
  { name: '雨水资源化利用', value: 1 },
  { name: '再生水利用率', value: 2 },
]);

const XCFKData = ref([
  {
    name: '调蓄容积（m³）',
    num1: 5851,
    num2: 44717,
  },
  {
    name: '雨水利用量（m³）',
    num1: 31841,
    num2: 311668,
  },
]);
const Flcname = ref('城市防洪');
const activedname = ref('2023');
const Ywcname = ref('再生水利用率');
// 点击事件
function categoryclick(val) {
  activedname.value = val.name;
}
function Flclick(val) {
  Flcname.value = val.name;
}
function Ywclick(val) {
  Ywcname.value = val.name;
}

// 城市防洪
function getDataCs() {
  let obj = {
    listName: ['延河', '南川河', '西川河', '杜甫川河', '王瑶水库'],
    diduan: ['39', '29', '40', '40', '50'],
    zhengzhi: ['25', '21', '28', '28', '31'],
  };
  CsList.value = obj;
  console.log(CsList.value, '  CsList.value');
  ryRefresh3.value = Math.random();
}

// 内涝防治
function getData() {
  let obj = {
    xData: ['濠河', '黄梅港', '王家河', '松杨湖', '北港河', '芭蕉湖', '南津河', '东风湖'],
    data: [39, 59, 23, 39, 60, 45, 52, 62],
    num: [],
  };
  let max = JSON.parse(JSON.stringify(obj.data));
  let one = max.sort((a, b) => b - a)[0];
  max.forEach(i => {
    obj.num.push(one);
  });
  ryData.value = obj;
  ryRefresh.value = Math.random();
}

// 内涝防治
async function getNlfz() {
  let obj = [
    { name: '源头减排', value: 10 },
    { name: '其他', value: 45 },
    { name: '过程控制', value: 20 },
    { name: '末端治理', value: 38 },
  ];

  aiList.value = obj;
  ryRefresh1.value = Math.random();
}

// 再生水利用率
function geZssLyl() {
  let obj = {
    xData: ['工业建筑', '城市杂用量', '绿化浇灌', '生态及再生水'],
    data: [160, 20, 23, 700, 60, 45, 52, 95],
    num: [],
  };
  let max = JSON.parse(JSON.stringify(obj.data));
  let one = max.sort((a, b) => b - a)[0];
  max.forEach(i => {
    obj.num.push(one);
  });
  zssList.value = obj;
  ryRefresh2.value = Math.random();
}

const initEcharts3 = () => {
  let obj = [
    { value: 7, name: '桥沟污水厂', percent: '52%' },
    { value: 5, name: '新区污水厂', percent: '11%' },
    { value: 1.5, name: '姚店污水厂', percent: '17%' },
  ];
  CsWssj.value = obj;
  ryRefresh4.value = Math.random();
};

// 动态计算盒子的宽度
const getWidth = (item, num) => {
  let widthNum = 0;
  if (num == 1) {
    widthNum = (item.num1 / (item.num1 + item.num2)) * 100;
  } else {
    widthNum = (item.num2 / (item.num1 + item.num2)) * 100;
  }
  return `width:${widthNum}%`;
};

function showSewageFectory() {
  newfiberMapbox.map.easeTo({
    center: [109.528, 36.626],
    zoom: 13,
    pitch: 55,
  });
  bus.emit('SetLayerShow', ['污水处理厂']);
}

onMounted(() => {
  getDataCs();
  getData();
  getNlfz();
  geZssLyl();
  initEcharts3();
});
onBeforeUnmount(() => {
  bus.emit('clearAllLayer');
});
</script>

<style lang="scss" scoped>
.Outputperformance {
  width: 450px;
  height: 73%;
  .OutputperBox {
    width: 450px;
    height: calc(100% - 55px);
    margin: 5px auto;
    .subRightBox {
      width: 450px;
      margin: 0 auto;
      height: 35px;
      display: flex;
      cursor: pointer;
      font-size: 14px;
      color: #ffffff;

      .headcenter {
        width: 136px;
        height: 26px;
        padding: 4px 3px;
        background: #00344f;
        text-align: center;
        margin-top: 3px;
        margin-left: 10px;
      }
      .activedright {
        border: 1px solid #2cfce9;
        color: #e4f5ff;
        background: #166f84;
      }
    }
    .ComBox {
      width: 430px;
      height: calc(100% - 40px);
      margin: 5px auto;

      .NlfzBox {
        width: 430px;
        height: 60%;
        margin: 5px auto;
        .topVehicl {
          font-family: Source Han Sans CN;
          font-weight: bold;
          font-size: 14px;
          color: #ebfeff;
          align-items: center;
          height: 30px;
          .icon {
            position: relative;
            top: -1px;
            width: 25px;
            height: 25px;
            background: url('@/assets/newImgs/xtb_img.png') no-repeat;
          }

          .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;
          }
          .NlfzList {
            position: relative;
            left: 25px;
            display: flex;
            width: 70%;
            height: 26px;
            cursor: pointer;
            // background: rgb(2, 224, 32);
            .head-item {
              width: 100px;
              height: 26px;
              margin-left: 5px;
              padding: 2px 3px;
              background: #03576eff;
              text-align: center;
            }
            .activedright {
              border: 1px solid #2cfce9;
              color: #e4f5ff;
              background: #03b6a0ff;
            }
          }
        }
        .specifics {
          width: 420px;
          height: calc(100% - 40px);
          margin: 5px auto;

          .info {
            height: 34px;
            background: linear-gradient(0deg, #102755 0%, #009dab 0%, #034d66 100%);
            border-radius: 3px;
            border: 1px solid #1cf5fc;
            padding: 0 18px;
            align-items: center;
            .weight {
              font-family: Source Han Sans CN;
              font-weight: bold;
              font-size: 16px;
              color: #09ffbc;
            }
            .weightO {
              font-family: Source Han Sans CN;
              font-weight: bold;
              font-size: 16px;
              color: #e8b65f;
            }
            .text {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 14px;
              color: #d3f6ff;
              margin-left: 30px;
            }
          }
          .infotwo {
            margin-top: 5px;
          }
          .CsfhCls {
            height: calc(100% - 120px);
            margin-top: 5px;
          }
          .BeCautious {
            margin-top: 5px;
            height: 37px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 14px;
            color: #5fbeff;
            .ViewTReport {
              width: 90px;
              height: 24px;
              background: #003756;
              border-radius: 12px;
              text-align: center;
              border: 1px solid #0091ffff;
              line-height: 22px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              font-size: 14px;
              color: #ffffff;
              cursor: pointer;
            }
          }
        }
        .nlfz {
          width: 420px;
          height: calc(100% - 40px);
          margin: 5px auto;
        }
        .jsdxc {
          width: 420px;
          height: calc(100% - 40px);
          margin: 5px auto;
        }
      }
      .YwBox {
        width: 430px;
        height: 40%;
        margin: 5px auto;

        .topYwBox {
          font-family: Source Han Sans CN;
          font-weight: bold;
          font-size: 14px;
          color: #ebfeff;
          align-items: center;
          height: 30px;

          .icon {
            position: relative;
            top: -1px;
            width: 25px;
            height: 25px;
            background: url('@/assets/newImgs/xtb_img.png') no-repeat;
          }
          .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;
          }
          .NlfzList {
            position: relative;
            left: 46px;
            display: flex;
            width: 59%;
            height: 26px;
            cursor: pointer;

            .head-item {
              width: 120px;
              height: 26px;
              margin-left: 5px;
              padding: 2px 3px;
              background: #03576eff;
              text-align: center;
            }
            .activedright {
              border: 1px solid #2cfce9;
              color: #e4f5ff;
              background: #03b6a0ff;
            }
          }
        }
        .utilize {
          width: 430px;
          height: calc(100% - 40px);
          margin: 5px auto;

          .rainChartInfo {
            margin-top: 5px;
            height: 20px;
            width: 100%;
            color: #c6c6c6;
            justify-content: center;

            .square {
              width: 10px;
              height: 10px;
              display: inline-block;
              background-color: #00ffbeff;
              margin-left: 50px;
              margin-top: 4px;
            }
            .squareA {
              width: 10px;
              height: 10px;
              background-color: #00a2ffff;
              margin-left: 30px;
              margin-top: 4px;
            }
          }
          .FK_bodyBox {
            height: calc(100% - 60px);
            overflow: auto;
            box-sizing: border-box;
            // background: rgb(224, 224, 210);
            .FK_bodyBox_list {
              height: 40%;
              margin-top: 8px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              font-size: 14px;
              color: #ffffff;
              // background: blue;
              .FK_bodyBox_list_label {
                display: block;
                font-family: Source Han Sans CN;
                font-weight: 500;
                font-size: 14px;
                color: #ffffff;
              }
              .FK_BigBox {
                margin-top: 2px;
                display: block;
                height: 20px;
                margin-top: 5px;
                .FK_CenBox1 {
                  display: inline-block;
                  height: 20px;
                  background: linear-gradient(-90deg, #20d8aaff 0%, #0883a0ff 100%);
                  font-family: Source Han Sans CN;
                  font-weight: bold;
                  font-size: 14px;
                  color: #ffffff;
                  text-align: right;
                  line-height: 20px;
                  box-sizing: border-box;
                  padding: 0 10px;
                }
                .FK_CenBox2 {
                  display: inline-block;
                  height: 20px;
                  background: linear-gradient(90deg, #01a1ffff 0%, #2176ffff 100%);
                  font-weight: bold;
                  font-size: 14px;
                  color: #ffffff;
                  text-align: right;
                  line-height: 20px;
                  box-sizing: border-box;
                  padding: 0 10px;
                }
              }
            }
          }
          .BottomLook {
            margin: 5px auto;
            width: 430px;
            height: 35px;

            .ConstrucBot {
              width: 205px;
              height: 32px;
              background: url('@/assets/images/Sponge_screen/HmbjZp.png') no-repeat;
              background-size: 100% 100%;
              .ConstruBox {
                position: relative;
                left: 30px;
                width: 160px;
                .left {
                  font-family: Source Han Sans CN;
                  font-weight: 400;
                  font-size: 14px;
                  color: #ffffff;
                }
                .right {
                  font-family: Source Han Sans CN;
                  font-weight: 500;
                  font-size: 16px;
                  color: #ffed98;
                }
              }
            }
          }
        }
        .zsslyl {
          width: 420px;
          height: calc(100% - 80px);
          margin: 5px auto;
        }
        .BottomLook {
          margin: 5px auto;
          width: 430px;
          height: 35px;

          .ConstrucBot {
            width: 205px;
            height: 32px;
            background: url('@/assets/images/Sponge_screen/HmbjZp.png') no-repeat;
            background-size: 100% 100%;
            margin-left: 7px;
            .ConstruBox {
              position: relative;
              left: 30px;
              width: 160px;
              // background: red;
              .left {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 14px;
                color: #ffffff;
              }
              .right {
                font-family: Source Han Sans CN;
                font-weight: 500;
                font-size: 16px;
                color: #ffed98;
              }
            }
          }
        }
      }
    }
  }
}
.Sewagecollection {
  width: 450px;
  height: 25%;

  .topVehicl {
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 14px;
    color: #ebfeff;
    align-items: center;
    height: 30px;
    // background: teal;
    cursor: pointer;
    .icon {
      position: relative;
      top: -1px;
      width: 25px;
      height: 25px;
      background: url('@/assets/newImgs/xtb_img.png') no-repeat;
    }

    .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;
    }
  }
  .wssjEch {
    margin: 5px auto;
    width: 420px;
    height: calc(100% - 55px);
    // background: yellow;
  }
}
.ListBoxHeader {
  height: 44px;
  line-height: 50px;
  width: 98%;
  background: url('@/assets/newImgs/partBg.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 7px 0px 0px 8px;
  cursor: pointer;
  .ListBoxHeader_font {
    font-family: PangMenZhengDao;
    font-weight: 400;
    font-size: 23px;
    color: #ebfeff;
    padding-left: 34px;
  }
}
</style>