<template>
  <div class="a">
    <div class="partTitleHM">现状问题</div>

    <div class="partContHM">
      <div class="HeadContent">
        <div class="head-center">
          <div
            class="head-item"
            v-for="(item, index) in CurrentIssuesrList"
            :key="item"
            :class="activedname == item.name ? 'activedright' : ''"
            @click="CurrentIssuesrclick(item, index)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>

      <div class="box-body">
        <div class="precedence" v-for="item in CurrentListS">
          <div class="headText">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const activedname = ref('内涝风险高');
const CurrentIssuesrList = ref([
  { name: '内涝风险高', value: 1 },
  { name: '汛期水质无法稳定达标', value: 2 },
  { name: '雨水资源化利用不足', value: 3 },
]);
const CurrentListS = ref([
  {
    name: '先天排水条件差，城市扩张加剧内涝',
  },
  {
    name: '调蓄空间被侵占，蓄排平衡被破坏',
  },
  {
    name: '排水防涝体系衔接不畅，排水通道能力有限',
  },
  {
    name: '管渠、泵站排水能力不足，养护不到位',
  },
]);
function CurrentIssuesrclick(val) {
  activedname.value = val.name;
  if (activedname.value == '内涝风险高') {
    // console.log('内涝风险高111');
  } else if (activedname.value == '汛期水质无法稳定达标') {
    CurrentListS.value = [
      {
        name: '老城区合流制溢流污染控制不足',
      },
      {
        name: '分流制区域雨污混错接点多面广',
      },
      {
        name: '雨水径流污染控制弱',
      },
      {
        name: ' 雨源型河道缺乏生态补水，河流自净能力不足',
      },
    ];
    // console.log('汛期水质无法稳定达标');
  } else {
    CurrentListS.value = [
      {
        name: '资源型缺水城市',
      },
      {
        name: '水资源供需矛盾突出',
      },
      {
        name: '  雨水资源利用水平低',
      },
    ];
    // console.log('雨水资源化利用不足');
  }
}
onMounted(() => {
  console.log(activedname.value, 'activedname.value111');
});
</script>

<style lang="scss" scoped>
.a {
  margin-top: 5px;
  height: 200px;
  // background: red;
  .HeadContent {
    width: 100%;
    height: 30px;
    // background: #2270ff;
    text-align: center;
    line-height: 25px;

    .head-center {
      height: 30px;
      cursor: pointer;
      font-size: 14px;
      display: flex;
      overflow: hidden;
      overflow-x: auto;
      color: #ffffff;
      .head-item {
        margin-left: 10px;
        padding: 2px 3px;
        border: 1px solid transparent;
        background: #013a73;
        height: 30px;
        text-align: center;
        min-width: 100px;
        border: 1px solid #2270ff;
      }
      .activedright {
        border: 1px solid #2cfce9;
        color: #e4f5ff;
        background: #166f84;
      }
    }
  }
  .box-body {
    height: calc(100vh - 830px);

    position: relative;
    overflow: auto;
    .precedence {
      margin-top: 10px;
      width: 100%;
      height: 32px;
      // line-height: 32px;
      background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
      background-size: 100% 100%;
      .headText {
        line-height: 32px;
        font-size: 16px;
        text-align: center;
        color: #a5d9f7;
        // background: yellow;
      }
    }
  }
}
</style>