<template>
  <!--  产出绩效 -->
  <div class="chanChuJiXiao">
    <div class="partTitleHM">
      产出绩效
      <div class="tabs flex">
        <div class="tabItem" v-for="item in tabList" :key="item.id" :class="{ active: curTab === item.id }" @click="tabClick(item)">
          {{ item.name }}
        </div>
      </div>
    </div>

    <div class="ConstrucClass">
      <div class="content">
        <div class="target flex flex-j-left flex-align-center">
          <div class="titles titlesmb">
            <div class="mbs">目标</div>
          </div>
          <div class="valsText" :title="quotaInfo.improveGoals">{{ quotaInfo.improveGoals }}</div>
        </div>
        <div class="measures flex flex-j-left flex-align-center">
          <div class="titles titlecs">
            <div class="mbs">措施</div>
          </div>
          <div class="valsText" :title="quotaInfo.reformMethod">{{ quotaInfo.reformMethod }}</div>
        </div>
        <el-table ref="table" :data="tableData" height="120">
          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
        </el-table>

        <div class="achievements flex flex-align-center">
          <div class="titles titlecg">
            <div class="mbs">成果</div>
          </div>
          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
          </div>
        </div>
        <div class="bottom flex-v">
          <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import bus from '@/bus';
import { quotaCommomInfoList, hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js';
import { waterloggingPointList } from '@/api/sponeScreen/syntherticData.js';
import { waterLoggingCleanProject } from '@/api/spongePerformance/prevention';
import kaifengFangHong from '@/assets/geojson/kaifeng/kaifengFangHong.json'; //防洪标准
import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
import tuLi72X from '@/assets/newImgs/tuLi72X.png';

const { proxy } = getCurrentInstance();
const tabList = ref([
  { id: 'fhbz', name: '防洪标准' },
  { id: 'nlbz', name: '内涝标准' },
  { id: 'nlxc', name: '内涝消除' },
]);

const curTab = ref('');
const quotaInfo = ref({ isCompliance: 1 }); //改造措施数据
const tableData = ref([]);
const waterLoggingData = ref([]);
const waterLoggingDataByType = ref([]);

const tabClick = item => {
  curTab.value = item.id;
  getjb();
  getkhzn();
  bus.emit('removeKHLayer'); //清除图层
  if (curTab.value == 'fhbz') {
    // 防洪标准
    newfiberMapBoxVectorLayer.addGeojsonSymbol('kaifengFangHong', kaifengFangHong, tuLi72X, 20, 1.3); //图层名、图层geojson，图标，标注每行多少个字，行间距
    setTimeout(() => {
      newfiberMapbox.map.easeTo({
        center: [114.315, 34.802],
        zoom: 11.2,
      });
    }, 1000);
  } else if (curTab.value == 'nlbz') {
    // 内涝防治标准
    bus.emit('setIniteLayer', [{ layername: 'cesiumPaishuiArea2', show: false }]);
    setTimeout(() => {
      newfiberMapbox.map.easeTo({
        center: [114.315, 34.802],
        zoom: 11.2,
      });
    }, 200);
  } else {
    // 内涝消除
    dynamic_page_data_typeM();
    setTimeout(() => {
      newfiberMapbox.map.easeTo({
        center: [114.295, 34.822],
        zoom: 11.8,
      });
    }, 200);
  }
};

// 产出绩效公共指标信息
async function getjb() {
  let res = await quotaCommomInfoList({
    quotaCode: curTab.value,
  });
  if (res && res.code == 200) {
    let data = res.data;
    quotaInfo.value = data && data.length ? data[0] : {};
    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
  }
}
// 产出绩效公共指标信息
async function getkhzn() {
  let res = await hmyztQuotaDataList({
    quotaType: curTab.value,
  });
  if (res && res.code == 200) {
    tableData.value = res.data;
  }
}

// 获取积水点数据
const dynamic_page_data_typeM = async () => {
  let res = await waterLoggingCleanProject({ examineType: 'water_logging', examineMethod: 'engineering ' });
  if (res && res.code == 200) {
    let datas = res.data;
    addWaterLoggingByType(datas[0].floodPointList);
  }
};

//地图添加消除与未消除内涝点
const addWaterLoggingByType = data => {
  let success_zishuiDate = [];
  let error_zishuiDate = [];
  if (data.length) {
    data.map(item => {
      item.color = '#d9001b';
      item.isClear = false;
    });
    error_zishuiDate = data;
    waterLoggingData.value.forEach(element => {
      data.forEach(item => {
        if (item.name != element.name) {
          success_zishuiDate.push(element);
        }
      });
    });
    waterLoggingDataByType.value = success_zishuiDate.concat(error_zishuiDate);
  } else waterLoggingDataByType.value = waterLoggingData.value;
  let waterLogjson = getWaterloggingGeojson(waterLoggingDataByType.value);
  if (!newfiberMapbox.map.getLayer('waterLoging')) {
    addWaterloggingLayer(waterLogjson, 'waterLoging');
  } else {
    newfiberMapbox.map.getSource('waterLoging').setData(waterLogjson);
  }
  addwaterlogingPopup(waterLogjson);
};
//获取18个内涝点
const getWaterlogging = async () => {
  let res = await waterloggingPointList();
  if (res && res.code == 200) {
    waterLoggingData.value = res.data;
    waterLoggingData.value.forEach(element => {
      element.color = '#70b603';
      element.isClear = true;
    });
  }
};
//内涝点geojson
const getWaterloggingGeojson = data => {
  let features = [];
  data.forEach(element => {
    let feature = {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [Number(element.longitude), Number(element.latitude)],
      },
      properties: element,
    };
    features.push(feature);
  });
  return {
    type: 'FeatureCollection',
    features: features,
  };
};
//地图渲染内涝点
const addWaterloggingLayer = (geojson, layerName) => {
  !!!newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson });
  !!!newfiberMapbox.map.getLayer(layerName) &&
    newfiberMapbox.map.addLayer({
      id: layerName,
      type: 'circle',
      source: layerName,
      paint: {
        'circle-color': ['get', 'color'],
        'circle-radius': 7,
      },
    });
};
//添加弹窗
const addwaterlogingPopup = geojson => {
  console.log('-----', newfiberMapbox.popupService.popups);
  newfiberMapbox.popupService.popups.forEach(popup => {
    nextTick(() => {
      newfiberMapbox.removePopup(popup);
    });
  });
  geojson.features.forEach(feature => {
    let popupClass;
    !!feature.properties.isClear ? (popupClass = 'successPopup') : (popupClass = 'errorPopup');
    !!feature.properties.isClear ? (feature.properties.isClear = '已消除') : (feature.properties.isClear = '未消除');
    return newfiberMapbox.addPopup(
      new mapboxL7.Popup({
        title: '',
        html: `
          <div class=${popupClass}><div class='title'>${feature.properties.name}</div>
          <div class='part'>${feature.properties.isClear}</div>
          </div>`,
        lngLat: {
          lng: feature.geometry.coordinates[0],
          lat: feature.geometry.coordinates[1],
        },
        anchor: 'center',
        offsets: [0, 40],
        autoClose: false,
      })
    );
  });
};

onMounted(() => {
  getWaterlogging();
  setTimeout(() => {
    tabClick(tabList.value[0]);
  });
});
</script>
<style lang="scss">
.l7-popup-tip {
  display: none;
}
.l7-popup .l7-popup-content {
  padding: 0px;
  background: #033b4f;
  border-radius: 8px;
}
.l7-popup .l7-popup-content .l7-popup-close-button {
  display: none;
}
.errorPopup {
  border-radius: 8px;
  background-color: rgba(247, 189, 15, 0.5);
  border: 2px solid rgba(255, 177, 83, 0.5);
  padding: 5px;
  color: #f7bd0f;
  .part {
    color: #d9001b;
  }
}
.successPopup {
  border-radius: 8px;
  background-color: rgba(0, 59, 109, 0.5);
  border: 2px solid rgba(106, 206, 254, 0.5);
  padding: 5px;
  color: #b8ecff;
  .part {
    color: #70b603;
  }
}
.title {
  font-size: 16px;
}

.chanChuJiXiao {
  width: 460px;

  .ConstrucClass {
    background: rgba(8, 75, 125, 1);
    padding: 10px;
    margin-top: -3px;
    .content {
      width: 100%;
      height: 100%;

      .target,
      .measures,
      .achievements {
        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
        border-radius: 3px;
        width: 100%;
        height: 40px;
        padding: 0 10px;

        .titles {
          width: 50px;
          font-size: 16px;
          color: #ffffff;
          position: relative;
          height: 20px;
          margin-top: 15px;

          .mbs {
            position: absolute;
            top: -10px;
            left: 5px;
          }
        }

        .titlesmb {
          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
        }

        .titlecs {
          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
        }

        .titlecg {
          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
        }
      }

      .measures {
        margin-top: 5px;
      }

      .valsText {
        width: 350px;
        color: #58d6ff;
        margin-left: 10px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .renovation {
        width: 100%;
        height: 78px;
        .renovationcons {
          height: 50px;
          color: #58d6ff;
          font-size: 14px;
          padding: 5px;

          .sy,
          .mj {
            width: 50%;
            text-align: center;
          }
        }
      }

      .achievements {
        font-family: Source Han Sans CN;
        font-size: 18px;
        margin-top: 10px !important;

        .vals {
          color: #00fe00 !important;
          margin-left: 20px;
        }
        .colors1 {
          color: #00fe00;
        }
        .colors2 {
          color: #ff5e66;
        }
      }

      .bottom {
        width: 100%;
        height: 50px;
        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
        color: #58d6ff;
        font-size: 14px;
        padding: 5px;
        justify-content: flex-start;
        display: flex;
        overflow: auto;
      }
    }
  }

  .tabs {
    float: right;
    margin: 8px 40px 0px 0px;
    .tabItem {
      width: 78px;
      height: 24px;
      line-height: 24px;
      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
      background-size: 100% 100%;
      margin-left: 10px;
      font-size: 14px;
      color: #ffffff;
      text-align: center;
      cursor: pointer;

      &:first-of-type {
        margin-left: 0;
      }

      &.active {
        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
</style>