<template>
  <div class="cityPlanPage">
    <div class="partTitleHM">城市规划</div>
    <div class="partContHM">
      <div class="hkns">
        <!-- 水安全规划 -->
        <div class="rightBox rightBox1">
          <div class="ListTitle" @click="showFlowTotalQuantity">水安全规划</div>
          <div class="precedence" @click="checkAreaKH">
            <div class="eachinfo">
              <div class="headText">年径流总量控制率</div>
              <div class="middleext">
                <div class="middleextA">
                  <p class="NumberListMB">目标:</p>
                  <p class="NumberList">&nbsp; 70%</p>
                </div>
                <div class="rightText">以上</div>
              </div>
            </div>
          </div>
          <div class="XqDetails">
            <div class="DetailsOne">排涝规则</div>
            <div class="DetailsTwo">
              <span class="DetailsTwoA">新建改造泵站</span>
              <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
            </div>
            <div class="DetailsTthree">
              <span>新建雨水管渠</span>
              <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
            </div>
          </div>
        </div>
        <!-- 水环境规划 -->
        <div class="rightBox rightBox2">
          <div class="ListTitle">水环境规划</div>
          <div class="precedence" v-for="item in policiesList" :key="item">
            <div class="eachinfo">
              <div class="headText">{{ item.name }}</div>
              <div class="middleext">
                <div class="middleextA">
                  <span class="NumberListMB">目标:</span>
                  <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
                </div>
                <div class="rightText">{{ item.content }}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 水生态规划 -->
        <div class="rightBox rightBox3">
          <div class="ListTitle">水生态规划</div>
          <div class="XqDetails" v-for="item in policiesListS">
            <div class="DetailsAquaticEcology">
              <div class="icon"></div>
              {{ item.name }}
            </div>
            <div class="DetailsAquaticEcologyTwo">
              <p class="DetailsTwoA">{{ item.NumberA }}</p>
              <p class="DetailsTwoB">{{ item.content }}</p>
            </div>
          </div>
        </div>

        <!-- 水资源规划 -->
        <div class="rightBox rightBox4">
          <div class="ListTitle">水资源规划</div>
          <div class="ListContent">
            <!-- 雨水资源利用 -->
            <div class="sewageResources">
              <div class="sewageTop">
                <div class="YStext">雨水资源利用</div>
              </div>
              <div>
                <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
              </div>
            </div>
            <!-- 污水资源利用 -->
            <div class="sewageResources">
              <div class="sewageTop">
                <div class="wstext">污水资源利用</div>
                <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
              </div>
              <div>
                <SewageEcharts></SewageEcharts>
              </div>
            </div>
          </div>
        </div>

        <!-- 供水规划 -->
        <div class="rightBox rightBox5">
          <div class="ListTitle">供水规划</div>
          <div class="ListContent">
            <div class="waterSupply">
              <div class="bottomBgc"></div>
              <div class="eachDescribe">
                <div class="icon bgcblue"></div>
                <div class="text">近期</div>
                <div class="sum colorBlue">68.7</div>
                <div class="unit">万立方米/日</div>
              </div>
              <div class="eachDescribe">
                <div class="icon bgcYellow"></div>
                <div class="text">远期</div>
                <div class="sum colorYellow">88.7</div>
                <div class="unit">万立方米/日</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 分区考核弹窗（应标） -->
  <el-dialog v-model="dialogArea" title="分区考核指标" style="width: 600px" append-to-body>
    <el-table :data="tableDataArea">
      <el-table-column label="分区名称" prop="name" />
      <el-table-column label="考核指标" prop="target" />
      <el-table-column label="实际达成" prop="now" />
    </el-table>
  </el-dialog>
</template>

<script setup>
import RainwaterTakeAdvantage from '@/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue'; //雨水资源利用图例
import SewageEcharts from '@/views/sponeScreen/Echarts/SewageEcharts.vue'; //污水资源利用图例
import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
import YSFQ2 from '@/assets/geojson/kaifeng/kaifengPSFQ2.json';
import bus from '@/bus/index';

// 水环境规划
const policiesList = ref([
  {
    name: '径流污染控制 ',
    NumberA: '60%',
    content: '以上',
  },
  {
    name: '黑臭水体消除比例',
    NumberA: '100%',
    content: '',
  },
  {
    name: '城市生活污水收集率 ',
    NumberA: '82%',
    content: '以上',
  },
]);
// 水生态规划
const policiesListS = ref([
  {
    name: '河流生态基流满足程度 ',
    NumberA: '2025年≥80%',
    content: '2035年≥95%',
  },
  {
    name: '生态岸线比例',
    NumberA: '2025年≥60%',
    content: '2035年≥80%',
  },
]);
const dialogArea = ref(false);
const tableDataArea = ref([
  { name: '运粮河西区排水分区', target: '72%', now: '72.3%' },
  { name: '运粮河东区排水分区', target: '72%', now: '72.2%' },
  { name: '马家河区排水分区', target: '72%', now: '72.2%' },
  { name: '秀溪河区排水分区', target: '70%', now: '70.2%' },
  { name: '马家河北支排水分区', target: '68%', now: '68%' },
  { name: '古城区排水分区', target: '65%', now: '66%' },
  { name: '城东区排水分区', target: '68%', now: '68.1%' },
  { name: '城西区排水分区', target: '68%', now: '68%' },
  { name: '城南区排水分区', target: '70%', now: '70.2%' },
  { name: '东郊沟区排水分区', target: '68%', now: '68.3%' },
  { name: '汴东区排水分区', target: '72%', now: '72.2%' },
  { name: '祥符区排水分区', target: '70%', now: '70.1%' },
  { name: '汪屯区排水分区', target: '72%', now: '72.2%' },
  { name: '西姜寨区排水分区', target: '72%', now: '72.1%' },
  { name: '朱仙镇区排水分区', target: '72%', now: '72%' },
]);

// 分区考核（应标）检查时再把弹窗放开
function checkAreaKH() {
  // dialogArea.value = true;
}

const showFlowTotalQuantity = () => {
  bus.emit('checkLandXDM', false);
  let YSFQ2_cope;

  //移除一心一核
  newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'none'); //下垫面
  newfiberMapBoxVectorLayer.removeByIds([
    'oneCenter',
    'oneCenter_label',
    'oneCenter1',
    'oneCenter1_label',
    'oneCenter2',
    'oneCenter2_label',
    'oneCenter3',
    'kaifengAllArea',
    'kaifengAllArea_label',
    'kaifengAllWater',
    'kaifengAllAreaLabel',
    'builtCity',
  ]);
  bus.emit('setIniteLayer', [
    {
      layername: 'topography',
      show: true,
    },
  ]);
  YSFQ2_cope = YSFQ2;
  YSFQ2_cope.features.forEach(element => {
    element.properties.name = element.properties.totalflow;
  });
  newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('rainAreaLayer', YSFQ2_cope);
  newfiberMapbox.map.setLayoutProperty('rainAreaLayer_label', 'text-allow-overlap', true);
  newfiberMapbox.map.easeTo({
    center: [114.315, 34.782],
    zoom: 10.4,
    pitch: 30,
  });
};
</script>

<style lang="scss" scoped>
.cityPlanPage {
  .hkns {
    height: 580px;
    overflow-x: hidden;
    overflow-y: auto;
    .rightBox {
      .ListTitle {
        width: 100%;
        height: 32px;
        line-height: 32px;
        background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
        background-size: 100% 100%;
        position: relative;
        padding-left: 30px;
        font-family: SourceHanSansCN-Medium;
        font-weight: bold;
        font-size: 15px;
        color: #e4f5ff;
      }
      .precedence {
        margin-top: 5px;
        width: 100%;
        height: 32px;
        // line-height: 32px;
        background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
        background-size: 100% 100%;
        .eachinfo {
          display: flex;
          height: 32px;
          color: #b8ecff;
          //   background: red;
          .headText {
            width: 60%;
            padding-left: 20px;
            line-height: 32px;
            font-size: 16px;
            // background: yellow;
          }
          .middleext {
            display: flex;
            width: 40%;
            text-align: center;
            line-height: 32px;
            font-size: 16px;
            align-items: center;
            // background: blue;
            .middleextA {
              width: 65%;
              text-align: center;
              //   background: red;
              display: flex;
              .NumberListMB {
                // background: #f7c987;
                width: 40%;
              }
              .NumberList {
                // background: lawngreen;
                width: 60%;
                font-size: 18px;
                color: #3afff8;
              }
            }
          }
          .rightText {
            width: 35%;
            line-height: 32px;
            text-align: center;
            // background: lawngreen;
          }
        }
      }
      .XqDetails {
        margin-top: 8px;
        height: 32px;
        display: flex;
        color: #b8ecff;
        font-family: SourceHanSansCN-Medium;
        font-weight: bold;
        font-size: 15px;
        // background: red;
        .DetailsOne {
          width: 18%;
          line-height: 30px;
          text-align: center;
          //   background: yellow;
        }
        .DetailsTwo {
          width: 40%;
          line-height: 30px;
          text-align: center;
          //   background: blueviolet;
          .DetailsTwoB {
            color: #f7c987;
          }
        }
        .DetailsTthree {
          width: 45%;
          line-height: 30px;
          text-align: center;
          //   background: #3afff8;
          .DetailsTthreeA {
            color: #3afff8;
          }
        }

        // 水生态规划
        .DetailsAquaticEcology {
          width: 45%;
          line-height: 30px;
          .icon {
            display: inline-block;
            border-color: #3afff8;
            border-style: solid;
            border-width: 2px;
            width: 0;
            height: 0;
            margin-right: 7px;
            position: relative;
            top: -3px;
            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
          }
          //   background: red;
        }
        .DetailsAquaticEcologyTwo {
          width: 55%;
          display: flex;
          align-items: center;
          //   background: yellowgreen;
          line-height: 30px;
          text-align: center;
          .DetailsTwoA {
            width: 50%;
            color: #3afff8;
            // background: red;
          }
          .DetailsTwoB {
            width: 50%;
            color: #f7c987;
            // background: rgb(205, 50, 50);
          }
        }
      }
      .ListContent {
        width: 100%;
        height: calc(100% - 34px);
        overflow: auto;
        // background: yellow;
        .sewageResources {
          // 污水资源利用
          .sewageTop {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 16px;
            padding: 10px 30px 0px 10px;
            .wsdescribe {
              color: #fff;
            }
            .wstext {
              color: #ffed52;
            }
            .YStext {
              color: #18ffff;
            }
          }
        }
      }

      // 供水规划
      .waterSupply {
        position: relative;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .eachDescribe {
          display: flex;
          align-items: center;
          font-family: Source Han Sans CN;
          font-weight: 400;
          padding-top: 5px;
          .unit {
            padding-top: 5px;
            color: #ffffff;
          }
          .icon {
            width: 8px;
            height: 8px;
            border-radius: 50%;
          }
          .colorYellow {
            color: #ffed52;
          }
          .colorBlue {
            color: #18ffff;
          }
          .bgcYellow {
            background: #ffed52;
          }
          .bgcblue {
            background: #18ffff;
          }
          .text {
            padding: 0 10px 0 6px;
            font-size: 16px;
          }
          .sum {
            font-size: 20px;
            padding-right: 10px;
          }
        }
        .bottomBgc {
          width: 100%;
          height: 16px;

          position: absolute;
          bottom: 0;
          left: 0;
          background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
        }
      }
    }
    .rightBox1 {
      height: 110px;
    }
    .rightBox2 {
      margin-top: 5px;
    }

    .rightBox3 {
      margin-top: 5px;
    }
    .rightBox4 {
      margin-top: 5px;
      // height: 200px;
      //   background: red;
    }
    .rightBox5 {
      margin-top: 5px;
    }
  }
}
</style>