<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>
          <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>
          <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"></div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
import ChartNlfz from './ChartNlfz.vue'; //内涝防治
import jsdChart from './jsdChart.vue'; //积水点

import ChartZsslyl from './ChartZsslyl.vue'; //再生水利用率

import bus from '@/bus';
const ryData = ref({});
const ryRefresh = ref('');
const aiList = ref([]);
const ryRefresh1 = ref('');
const zssList = ref({});
const ryRefresh2 = 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 FlList = ref([
  { name: '城市防洪', value: 1 },
  { name: '内涝防治', value: 2 },
  { name: '积水点消除', value: 3 },
]);
const YwList = ref([
  { name: '雨水资源化利用', value: 1 },
  { name: '再生水利用率', value: 2 },
]);
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 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: 32 },
    { 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();
}

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

onMounted(() => {
  getData();
  getNlfz();
  geZssLyl();
});
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;
          background: url('@/assets/images/Sponge_screen/csfh.png') no-repeat;
          background-size: 100% 100%;
        }
        .nlfz {
          width: 420px;
          height: calc(100% - 40px);
          margin: 5px auto;
          // background: url('@/assets/images/Sponge_screen/nlfz.png') no-repeat;
          // background-size: 100% 100%;
        }
        .jsdxc {
          width: 420px;
          height: calc(100% - 40px);
          margin: 5px auto;
          // background: url('@/assets/images/Sponge_screen/jsdxc.png') no-repeat;
          // background-size: 100% 100%;
        }
      }
      .YwBox {
        width: 430px;
        height: 40%;
        margin: 5px auto;
        // background: yellow;
        .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: 420px;
          height: calc(100% - 40px);
          margin: 5px auto;
          background: url('@/assets/images/Sponge_screen/yszl.png') no-repeat;
          background-size: 100% 100%;
        }
        .zsslyl {
          width: 420px;
          height: calc(100% - 80px);
          margin: 5px auto;
          // background: red;
          // background: url('@/assets/images/Sponge_screen/zss.png') no-repeat;
          // background-size: 100% 100%;
        }
        .BottomLook {
          margin: 5px auto;
          width: 430px;
          height: 35px;
          // background: blue;
          .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: url('@/assets/images/Sponge_screen/wssjcl.png') no-repeat;
    background-size: 100% 100%;
  }
}
.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>