<template>
  <!-- 自然地理 -->
  <div class="partTitleHM" @click="setLayerVisible">自然地理</div>
  <div class="partContHM">
    <div class="ListBox ListBox1">
      <div class="physicalGeography">
        <div class="waterSupply">
          <div class="bottomBgc"></div>
          <div class="eachDescribe">
            <div class="text" @click="showTotalArea()">总面积</div>
            <div class="sum bgcYellow">6118</div>
            <div class="unit">km²</div>
            <div class="icon colorBlue"></div>
            <div class="text" @click="showCenterCity()">中心城区</div>
            <div class="sum colorBlue">647.55</div>
            <div class="unit">km²</div>
            <div class="iconTwo bgcblue"></div>
            <div class="text" @click="showBuiltCity()">建成区</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" @click="showOneCenterLayer()">自然空间格局(一心、一核、一带、三片、三廊)</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>
</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 oneCenter from '@/assets/geojson/kaifeng/oneCenter.json';
import oneCenter1 from '@/assets/geojson/kaifeng/oneCenter1.json';
import oneCenter2 from '@/assets/geojson/kaifeng/oneCenter2.json';
import oneCenter3 from '@/assets/geojson/kaifeng/oneCenter3.json';
import newfiberVectorLayer from '@/views/sponeScreen/gisMF/newfiberVectorLayer.js';
import bus from '@/bus/index';
import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
const wmsVisibility = ref(false);
const policiesList = ref([
  {
    name: '一心',
    NumberA: '01',
    content: '中心城区',
  },
  {
    name: '一核',
    NumberA: '02',
    content: '开封新区',
  },
  {
    name: '一带',
    NumberA: '03',
    content: '沿黄河南岸形成的沿黄生态涵养带',
  },
  {
    name: '三片',
    NumberA: '04',
    content: '水源保护(北)、海绵城市建设(中)、卫生防护(南)',
  },
  {
    name: '三廊',
    NumberA: '05',
    content: '运粮河、开封西湖以及东护城大堤',
  },
]);
const showTotalArea = () => {
  if (newfiberMapbox.map.getLayer('hn_kf_hm_dltb')) {
    newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'none');
  }
  newfiberMapBoxVectorLayer.removeByIds([
    'oneCenter',
    'oneCenter_label',
    'oneCenter1',
    'oneCenter1_label',
    'oneCenter2',
    'oneCenter2_label',
    'oneCenter3',
    'rainAreaLayer', //年经总量控制率
    'rainAreaLayer_label',
  ]);
  bus.emit('setIniteLayer', [
    {
      layername: 'topography',
      show: false,
    },
    // {
    //   layername: 'buildingModel',
    //   show: true,
    // },
    {
      layername: 'builtCity',
      show: true,
    },
    {
      layername: 'centerCity',
      show: true,
    },
  ]);
  newfiberMapbox.map.easeTo({
    center: [114.312, 34.852],
    zoom: 10.4,
    pitch: 10,
  });
};
const showCenterCity = () => {
  if (newfiberMapbox.map.getLayer('hn_kf_hm_dltb')) {
    newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'none');
  }
  newfiberMapBoxVectorLayer.removeByIds([
    'oneCenter',
    'oneCenter_label',
    'oneCenter1',
    'oneCenter1_label',
    'oneCenter2',
    'oneCenter2_label',
    'oneCenter3',
    'rainAreaLayer', //年经总量控制率
    'rainAreaLayer_label',
  ]);
  bus.emit('setIniteLayer', [
    // {
    //   layername: 'buildingModel',
    //   show: true,
    // },
    {
      layername: 'topography',
      show: true,
    },
    {
      layername: 'builtCity',
      show: true,
    },
    {
      layername: 'centerCity',
      show: false,
    },
  ]);
  newfiberMapbox.map.easeTo({
    center: [114.312, 34.802],
    zoom: 10,
    pitch: 10,
  });
};
const showBuiltCity = () => {
  if (newfiberMapbox.map.getLayer('hn_kf_hm_dltb')) {
    newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'none');
  }
  newfiberMapBoxVectorLayer.removeByIds([
    'oneCenter',
    'oneCenter_label',
    'oneCenter1',
    'oneCenter1_label',
    'oneCenter2',
    'oneCenter2_label',
    'oneCenter3',
    'rainAreaLayer', //年经总量控制率
    'rainAreaLayer_label',
  ]);
  bus.emit('setIniteLayer', [
    // {
    //   layername: 'buildingModel',
    //   show: true,
    // },
    {
      layername: 'topography',
      show: true,
    },
    {
      layername: 'builtCity',
      show: false,
    },
    {
      layername: 'centerCity',
      show: true,
    },
  ]);
  newfiberMapbox.map.easeTo({
    center: [114.322, 34.852],
    zoom: 10.4,
    pitch: 10,
  });
  // newfiberMap.setCenter({
  //   lng: 114.312,
  //   lat: 34.262,
  //   heading: 2.281299097855777,
  //   zoom: 42358.12942752382,
  //   pitch: -35.2508969308367,
  //   roll: 0.005453465256790101,
  // });
};
const showOneCenterLayer = () => {
  if (newfiberMapbox.map.getLayer('hn_kf_hm_dltb')) {
    newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'none');
  }
  newfiberMapBoxVectorLayer.removeByIds([
    'rainAreaLayer', //年经总量控制率
    'rainAreaLayer_label',
  ]);
  bus.emit('setIniteLayer', [
    // {
    //   layername: 'buildingModel',
    //   show: true,
    // },
    {
      layername: 'topography',
      show: true,
    },
    {
      layername: 'builtCity',
      show: true,
    },
    {
      layername: 'centerCity',
      show: true,
    },
  ]);
  newfiberMapBoxVectorLayer.addGeojsonPolygon('oneCenter', oneCenter);
  newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter1', oneCenter1, 0, 2);
  newfiberMapBoxVectorLayer.addGeojsonPolygon('oneCenter2', oneCenter2);
  newfiberMapBoxVectorLayer.addLabelAlongLine('oneCenter3', oneCenter3);
  newfiberMapbox.map.easeTo({
    center: [114.315, 34.832],
    zoom: 10.7,
    pitch: 10,
  });
};
const setLayerVisible = () => {
  // wmsVisibility.value = !wmsVisibility.value;
  newfiberMapBoxVectorLayer.removeByIds([
    'oneCenter',
    'oneCenter_label',
    'oneCenter1',
    'oneCenter1_label',
    'oneCenter2',
    'oneCenter2_label',
    'oneCenter3',
    'rainAreaLayer', //年经总量控制率
    'rainAreaLayer_label',
  ]);
  // newfiberMap.removeByIds(['oneCenter']);
  // if (!newfiberMap.xdmWms) {
  //   newfiberMap.xdmWms = newfiberMap.loadWmsLayer({
  //     url: '/geoserver/demo/wms',
  //     layers: 'hn_kf_hm_dltb',
  //     visible: true,
  //   });
  //   return;
  // }
  // let imageryProvider = newfiberMap.getLayers([newfiberMap.xdmWms])[0];
  // imageryProvider.show = !!!imageryProvider.show;
  // if (wmsVisibility.value) {
  newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'visible');
  // } else {
  //   newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'none');
  // }
};

onMounted(() => {
  let mapboxTimer = setInterval(() => {
    if (!newfiberMapbox) return;
    if (!newfiberMapbox.map.getLayer('kaifengWaterLabel1')) return;
    newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'visible');
    // newfiberMapBoxVectorLayer.addGeojsonPolygon('oneCenter', oneCenter);
    // newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter1', oneCenter1, 0, 2);
    // newfiberMapBoxVectorLayer.addGeojsonPolygon('oneCenter2', oneCenter2);
    // newfiberMapBoxVectorLayer.addLabelAlongLine('oneCenter3', oneCenter3);
    newfiberMapbox.map.setLayoutProperty('kaifengWaterLabel1', 'visibility', 'none');
    newfiberMapbox.map.setLayoutProperty('kaifengWaterLabel2', 'visibility', 'none');
    clearInterval(mapboxTimer);
  });
  newfiberMapbox.map.easeTo({
    center: [114.315, 34.832],
    zoom: 10.7,
    pitch: 10,
  });

  // newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter1, 'oneCenter');
  // newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter2, 'oneCenter');
  // newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter, 'oneCenter');
  // newfiberMap.setCenter({
  //   lng: 114.312,
  //   lat: 34.742,
  //   heading: 2.281299097855777,
  //   zoom: 75358.12942752382,
  //   pitch: -80.2508969308367,
  //   roll: 0.005453465256790101,
  // });
});
</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;
      z-index: 111;
      // 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;
        z-index: 1000;
        cursor: pointer;
        // 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 6px 0 5px;
          font-size: 16px;
          color: #b8ecff;
        }
        .sum {
          font-size: 16px;
          padding-right: 3px;
          font-weight: bold;
        }
      }
      .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: 40px;
  height: 235px;
  // background: red;
}
.Lowerleft {
  margin-top: 10px;
}
</style>