<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 == '内涝防治'"></div>
          <div class="jsdxc" v-if="Flcname == '积水点消除'"></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 == '再生水利用率'"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- 污水收集处理 -->
  <div class="Sewagecollection">
    <div class="ListBoxHeader" @click="showSewageFectory">
      <div class="ListBoxHeader_font">污水收集处理</div>
    </div>
    <div class="wssjEch"></div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
import bus from '@/bus';
const categoryList = ref([
  { name: '2023', value: 1 },
  { name: '2024', value: 2 },
  { name: '2025', value: 3 },
]);
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 showSewageFectory() {
  newfiberMapbox.map.easeTo({
    center: [109.528, 36.626],
    zoom: 13,
    pitch: 55,
  });
  bus.emit('SetLayerShow', ['污水处理厂']);
}
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;

        .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% - 40px);
          margin: 5px auto;
          background: url('@/assets/images/Sponge_screen/zss.png') no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}
.Sewagecollection {
  width: 450px;
  height: 25%;
  // background: yellowgreen;
  .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>