<template>
  <!-- 海绵综合一张图 城市概况 -->
  <div class="cityPage">
    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
      <!-- 自然地理 -->
      <div class="partTitleHM">自然地理</div>
      <div class="partContHM">
        <div class="ListBox ListBox1">
          <div class="physicalGeography">
            <div class="waterSupply">
              <div class="bottomBgc"></div>
              <div class="eachDescribe">
                <div class="text">总面积</div>
                <div class="sum bgcYellow">6118</div>
                <div class="unit">km²</div>
                <div class="icon colorBlue"></div>
                <div class="text">中心城区</div>
                <div class="sum colorBlue">647.55</div>
                <div class="unit">km²</div>
                <div class="iconTwo bgcblue"></div>
                <div class="text">建成区</div>
                <div class="sum bgcblue">117</div>
                <div class="unit">km²</div>
              </div>
            </div>
          </div>
          <tslyqk_constituent_3d></tslyqk_constituent_3d>
        </div>
        <div class="ListBox ListBox3">
          <div class="ListTitle">自然空间格局(一心、一核、一带、三片、三廊)</div>
          <div class="ListContent">
            <div class="SpatialPattern" v-for="item in policiesList">
              <div class="eachinfo cyan">
                <div class="number">{{ item.NumberA }}</div>
                <div class="headText">{{ item.name }}</div>
                <div class="rightText">{{ item.content }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 降雨特征 -->
      <div class="Lowerleft">
        <rainfall />
      </div>
    </div>

    <!-- 头部 -->
    <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
      <headHMAimg></headHMAimg>
    </div>

    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
      <!-- 城市规划 -->
      <cityplanning></cityplanning>

      <!-- 现状问题 -->
      <CurrentIssues></CurrentIssues>
    </div>
  </div>
</template>

<script setup>
import tslyqk_constituent_3d from '@/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue'; //3d图例
import rainfall from '@/views/sponeScreen/cityGK/rainfall.vue'; //降雨页面
import cityplanning from '@/views/sponeScreen/cityGK/cityplanning.vue'; //城市规划页面
import CurrentIssues from '@/views/sponeScreen/cityGK/CurrentIssues.vue'; //现状问题
import headHMAimg from '@/views/sponeScreen/cityGK/headHMAimg.vue'; //头部

const { proxy } = getCurrentInstance();
const showPanel = ref(true); //面板展开收起
const policiesList = ref([
  {
    name: '一心',
    NumberA: '01',
    content: '中心城区',
  },
  {
    name: '一核',
    NumberA: '02',
    content: '开封新区',
  },
  {
    name: '一带',
    NumberA: '03',
    content: '沿黄河南岸形成的沿黄生态涵养带',
  },
  {
    name: '三片',
    NumberA: '04',
    content: '北部水源保护区、中部海绵城市重点建设区、南部卫生防护区',
  },
  {
    name: '三廊',
    NumberA: '05',
    content: '沿运粮河、开封西湖以及东护城大堤形成的三条生态廊道',
  },
]);
// 面板内容展开收起控制
const props = defineProps({
  showPanel: {
    type: Boolean,
  },
});
watch(
  () => props.showPanel,
  () => {
    console.log('val---', props.showPanel);
    showPanel.value = props.showPanel;
  },
  { immediate: true }
);

onMounted(() => {});
</script>

<style lang="scss" scoped>
.ListBox {
  .ListTitle {
    width: 100%;
    height: 32px;
    line-height: 32px;
    background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    // box-sizing: border-box;
    padding-left: 30px;
    font-family: SourceHanSansCN-Medium;
    font-weight: bold;
    font-size: 15px;
    color: #e4f5ff;
  }
  .ListContent {
    width: 100%;
    height: calc(100% - 32px);
    overflow: auto;
    // background: red;
  }
  .SpatialPattern {
    padding-top: 5px;
    overflow: auto;
    // background: red;
    .eachinfo {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      // background: yellow;
      margin-bottom: 3px;
      cursor: pointer;
    }
    .headText {
      font-weight: 500;
      font-size: 16px;
      min-width: 50px;
      color: #18ffff;
      margin-left: 15px;
      text-align: center;
      // background: red;
    }
    .rightText {
      overflow: hidden;
      text-overflow: ellipsis; /* 超出部分省略号 */
      word-break: break-all; /* break-all(允许在单词内换行。) */
      display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
      -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
      -webkit-line-clamp: 1; /* 显示的行数 */
      padding-left: 10px;
      color: #b8ecff;
      // background: yellow;
    }
    .cyan {
      background: url('@/assets/newImgs/HMScreen/Numberbox.png') no-repeat;
      background-size: 100% 100%;
      .number {
        color: #d1dff7;
        font-weight: 400;
        font-size: 16px;
        position: relative;
        left: 8px;
        // background: blueviolet;
      }
    }
  }

  width: 100%;
  margin-top: 2px;
  height: 150px;
  position: relative;
  // background: red;
  .physicalGeography {
    position: absolute;
    top: 0;
    width: 100%;
    // background: yellowgreen;
    .waterSupply {
      position: relative;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .eachDescribe {
        display: flex;
        align-items: center;
        font-family: SourceHanSansCN-Regular;
        font-weight: 300;
        // background: red;
        .unit {
          padding-top: 2px;
          color: #ffffff;
        }
        .icon {
          display: inline-block;
          border-color: #3afff8;
          border-style: solid;
          border-width: 2px;
          width: 0;
          height: 0;
          margin-right: 7px;
          position: relative;
          top: -2px;
          -moz-transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          transform: rotate(45deg);
          margin-left: 7px;
        }
        .iconTwo {
          display: inline-block;
          border-color: #18e87a;
          border-style: solid;
          border-width: 2px;
          width: 0;
          height: 0;
          margin-right: 7px;
          position: relative;
          top: -2px;
          -moz-transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          transform: rotate(45deg);
          margin-left: 7px;
        }
        .colorYellow {
          color: #ffed52;
        }
        .colorBlue {
          color: #18ffff;
        }
        .bgcYellow {
          color: #ffed52;
        }
        .bgcblue {
          color: #18e87a;
        }
        .text {
          padding: 0 5px 0 5px;
          font-size: 16px;
          color: #b8ecff;
        }
        .sum {
          font-size: 16px;
          padding-right: 10px;
        }
      }
      .bottomBgc {
        width: 100%;
        height: 16px;
        position: absolute;
        bottom: 0;
        left: 0;
        background: url('@/assets/newImgs/HMScreen/bottomBgcimg.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
.ListBox3 {
  margin-top: 20px;
  height: 235px;
  // background: red;
}
.Lowerleft {
  margin-top: 15px;
}
</style>