<template>
  <div
    class="water-analysis-page"
    v-loading="loading"
    element-loading-text="数据加载中..."
    element-loading-background="rgba(122, 122, 122, 0.8)"
  >
    <div class="top" v-if="!isComponent">
      <!-- <div class="icon" v-if="result">
        <div class="tittle">2023年项目开工情况</div>
        <div class="tittle">项目开工情况1</div>
        <div>
          <echart v-if="echartsif" :data="top" ref="topRef" @select-echart="data => selectEchart('opend', data)"></echart>
        </div>
        <div>
          <echart v-if="echartsif" :data="center" ref="centerRef" @select-echart="data => selectEchart('completed', data)"></echart>
        </div>
        <div>
          <echart v-if="echartsif" :data="foot" ref="bottomRef" @select-echart="data => selectEchart('realyCompleted', data)"></echart>
        </div>
      </div> -->
      <!-- 图例 -->
      <div class="tuli">
        <div v-for="i in tuliList1" :key="i" class="tuli_img" v-if="tuliType == 'opend'">
          <img :src="i.icon" alt="" />
          <div>{{ i.label }}</div>
        </div>
        <div v-for="i in tuliList2" :key="i" class="tuli_img" v-if="tuliType == 'completed'">
          <img :src="i.icon" alt="" />
          <div>{{ i.label }}</div>
        </div>
        <div v-for="i in tuliList3" :key="i" class="tuli_img" v-if="tuliType == 'realyCompleted'">
          <img :src="i.icon" alt="" />
          <div>{{ i.label }}</div>
        </div>
      </div>
      <MapBox :initJson="`/static/libs/mapbox/style/preventionSFQ.json`" l7=""></MapBox>
    </div>
    <div class="content" style="width: 800px">
      <el-table ref="tableModal" :data="tableData" max-height="300" v-loading="tableLoading" @row-click="clickModal" highlight-current-row>
        <el-table-column label="序号" type="index" width="55" />
        <el-table-column label="考核年份" prop="year" />
        <el-table-column label="项目完工数" prop="projectCompleteNumber" />
        <el-table-column label="计划投资金额" prop="targetProjectCompleteSpongeInvest" />
        <el-table-column label="项目目标完工数" prop="targetProjectCompleteNumber" />
        <el-table-column label="完成投资金额" prop="projectCompleteSpongeInvest" />
        <el-table-column label="达标情况" prop="isStandard">
          <template #default="{ row }">
            {{ row.isStandard === '1' ? '达标' : '未达标' }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog v-model="visible" title="项目合理性" :close-on-click-modal="false" width="85%" :before-close="close">
      <rationality :id="approveId" v-if="approveId" />
    </el-dialog>

    <div class="PopupWaterlogging" id="PopupWaterlogging" v-if="pipePopupShow">
      <div class="titleTop">
        <el-tabs class="PopupWaterloggingtabs">
          <el-tab-pane label="工程详细信息">
            <div class="allContent">
              <div>项目名称：{{ pipePopupdata.projectName }}</div>
              <div>项目编号：{{ pipePopupdata.projectNo }}</div>
              <div>建设类别 ：{{ findText('build_category', pipePopupdata.buildCategory) }}</div>
              <div>项目完工时间 ：{{ pipePopupdata.projectTime }}</div>
              <div>项目位置 ：{{ pipePopupdata.projectLocation }}</div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="closePopup">
        <el-icon :size="18" @click="closePopup"><Close /></el-icon>
      </div>
    </div>
  </div>
</template>
<script setup>
import echart from './echart.vue';
import { ElMessage } from 'element-plus';
import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
import { top, center, foot } from './index';
import rationality from './rationality/index.vue';
import { selectProjectEcharts, projectCompleteStatusByYear } from '@/api/spongePerformance/projectCompletionStatus';
const { proxy } = getCurrentInstance();
let isComponent = ref(0);
const loading = ref(true);
const floodPointList = ref([]);
const pipePopupShow = ref(false);
const { build_category } = proxy.useDict('build_category');
const dicts = {
  build_category,
};
const findText = (prop, type) => {
  console.log(prop, type, 9);
  const item = dicts[prop].value.find(it => it.value === type);
  return item?.label || '';
};
const pipePopupdata = ref([]);
let visible = ref(false);
const echartsif = ref(false);
const tuliType = ref('opend');
const tableData = ref([]);
const tableModal = ref(null);
const resultList = ref([]);
const tableLoading = ref(false);
let tuliList1 = ref([
  { label: '已完工', id: 1, icon: '/images/2.1.jpg' },
  { label: '未完工', id: 0, icon: '/images/2.2.jpg' },
]);
let tuliList2 = ref([
  { label: '开工', id: 1, icon: '/images/2.1.jpg' },
  { label: '已完工', id: 0, icon: '/images/2.2.jpg' },
]);
let tuliList3 = ref([
  { label: '计划完成投资', id: 1, icon: '/images/2.1.jpg' },
  { label: '实际完成投资', id: 0, icon: '/images/2.2.jpg' },
]);
let result = null;
const approveId = ref('1704040731365404674');

async function selectProjectEchartsM() {
  let { data } = await selectProjectEcharts();
  console.log('data', data);
  result = data;
  top.value.xdata = data.opend.map(item => item.year);
  top.value.data = data.opend.map(item => item.oneCount);
  console.log('top.value', top.value);
  center.value.xdata = data.realyCompleted.map(item => item.year);
  center.value.data = data.realyCompleted.map(item => item.oneCount);
  center.value.data1 = data.completed.map(item => item.oneCount);
  center.value.namme1 = '应完成项目';
  foot.value.xdata = data.realyCompleted.map(item => item.year);
  foot.value.data = data.realyCompleted.map(item => item.oneCount);
  loading.value = false;
  // echartsif.value = true;
}
const draw = (data, queryType) => {
  console.log(data, 6666667372323);
  // if(data[0].id){
  //proxy.$refs.mapRef.clear();
  approveId.value = '';
  if (!data?.length) return;
  setTimeout(() => {
    let mapData = [];
    if (data) {
      mapData = data
        .filter(item => item.projectLocation)
        .map(item => {
          if (item.projectLocation) {
            item.geometrys = `POINT(${item.projectLocation.split(',').join(' ')})`;
            console.log('item.geometrys', item.geometrys);
          }
        });
    }
  }, 100);
  // }
  // else{
  //   ElMessage({
  //     message: '该项目未进行只能审查',
  //     type: 'warning',
  //   })
  // }
};

const toCenterByGeoJson = geojson => {
  let coords = turf.getCoords(geojson.features[0].geometry).flat();
  let flag = geojson.features.length == 1 && coords.length == 2;
  if (!!geojson.features.length && !flag) {
    newfiberMap.getMap().camera.flyTo({
      destination: new Cesium.Rectangle.fromDegrees(...turf.bbox(turf.transformScale(turf.bboxPolygon(turf.bbox(geojson)), 2))),
    });
  } else {
    newfiberMap.setCenter({
      roll: 0.01658908985506884,
      pitch: -87.24924906709752,
      heading: 5.026928271138224,
      lng: coords[0],
      lat: coords[1],
      height: 943.5996932813425,
    });
  }
};

const selectEchart = (queryType, data) => {
  tuliType.value = queryType;
  console.log(queryType, data, 7777);
  proxy.$refs.topRef.restSelect();
  proxy.$refs.centerRef.restSelect();
  proxy.$refs.bottomRef.restSelect();
  data.callback && data.callback();
  const info = result[queryType] || [];
  const item = info.find(it => it.year === data.name);
  draw(item?.simpleProjectInfoList || [], queryType);
};
// 项目完成情况数据获取
async function getData() {
  tableLoading.value = true;
  let res = await projectCompleteStatusByYear();
  if (res && res.code == 200) {
    tableLoading.value = false;
    tableData.value = res.data;
    console.log(tableData.value, ' tableData.value');
    tableModal.value.setCurrentRow(tableData.value[0], true); //表格默认第一个高亮选中
    resultList.value = tableData.value[0].resultList;
    addProjectLayer(tableData.value[0].projectInfoList, 'projectLayer');
    // let moduleGeojson = getFeatureGeojson(tableData.value[0].partitionList);
    // let moduleBoundaryGeojson = getGeojsonBoundary(moduleGeojson);
    // let modulelabelGeojson = getGeojsonCenter(moduleGeojson);
    // //gis渲染内涝区域
    // addModuleLayer(moduleGeojson, 'moduleFlood', '#95f204');
    // addModuleBoundary(moduleBoundaryGeojson, 'moduleFloodBoundary');
    // addGeojsonLable(modulelabelGeojson, 'moduleFloodlabel', '#ffffff');
  }
  tableLoading.value = false;
}
const closePopup = () => {
  pipePopupShow.value = false;
};
//表格点击
function clickModal(row) {
  console.log('rowrowrowrow', row);
  floodPointList.value = [];
  floodPointList.value = row.projectInfoList;
  // gis渲染点位
  addProjectLayer(floodPointList.value, 'projectLayer');
}
//地图添加工程
const addProjectLayer = (data, layerName) => {
  if (newfiberMapbox.map.getLayer('projectLayer')) {
    newfiberMapbox.map.removeLayer('projectLayer');
    newfiberMapbox.map.removeLayer('projectLayerlabel');
    newfiberMapbox.map.removeSource('projectLayer');
    newfiberMapbox.map.removeSource('projectLayerlabel');
  }
  let features = [];
  data.forEach(element => {
    if (!element.projectLocation) {
      return;
    } else {
      element.color = '#cee3b8';
      let lonlat = element.projectLocation.split(',');
      let projectPoint = turf.point([Number(lonlat[0]), Number(lonlat[1])], element);
      features.push(projectPoint);
    }
  });
  let projectGeojson = turf.featureCollection(features);
  !!!newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: projectGeojson });
  !!!newfiberMapbox.map.getLayer(layerName) &&
    newfiberMapbox.map.addLayer({
      id: layerName,
      type: 'circle',
      source: layerName,
      paint: {
        'circle-color': ['get', 'color'],
        'circle-radius': 7,
      },
    });
  !!!newfiberMapbox.map.getSource(layerName + 'label') &&
    newfiberMapbox.map.addSource(layerName + 'label', { type: 'geojson', data: projectGeojson });
  !!!newfiberMapbox.map.getLayer(layerName + 'label') &&
    newfiberMapbox.map.addLayer({
      id: layerName + 'label',
      type: 'symbol',
      source: layerName + 'label',
      paint: {
        'text-color': '#ffffff',
      },
      layout: {
        'text-allow-overlap': false,
        'text-field': '{projectName}',
        'text-font': ['KlokanTech Noto Sans Regular'],
        'text-size': 16,
        'text-line-height': 3,
        'text-anchor': 'bottom',
        'text-max-width': 50,
        'text-offset': [0, -1],
      },
    });
};
onMounted(() => {
  getData();
  selectProjectEchartsM();
  setTimeout(() => {
    newfiberMapbox.map.on('click', e => {
      let clickfeature = newfiberMapbox.map
        .queryRenderedFeatures([
          [e.point.x - 10 / 2, e.point.y - 10 / 2],
          [e.point.x + 10 / 2, e.point.y + 10 / 2],
        ])
        .filter(i => i.layer.id == 'projectLayer');
      console.log('clickfeature', '点击事件', clickfeature);
      if (!clickfeature.length) return;
      pipePopupShow.value = true;
      pipePopupdata.value = clickfeature[0].properties;
      console.log(dicts.build_category, 'dicts');
    });
  }, 5000);
});
onBeforeUnmount(() => {
  if (!!!newfiberMapbox) return;
  !!newfiberMapbox.map.getLayer('projectLayer') && newfiberMapbox.map.removeLayer('projectLayer');
  !!newfiberMapbox.map.getSource('projectLayer') && newfiberMapbox.map.removeSource('projectLayer');
  !!newfiberMapbox.map.getLayer('projectLayerlabel') && newfiberMapbox.map.removeLayer('projectLayerlabel');
  !!newfiberMapbox.map.getSource('projectLayerlabel') && newfiberMapbox.map.removeSource('projectLayerlabel');
});
</script>
<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';
#map {
  width: 100%;
  height: 100%;
}
.form {
  left: 10px;
  top: 10px;
  z-index: 111;
  position: absolute;
  width: 20%;
}
.top {
  position: relative;
  height: 86vh;
}
.icon {
  right: 0;
  top: 0;
  z-index: 111;
  position: absolute;
  width: 25%;
  div {
    margin: 10px 0;
  }
}
.tuli {
  left: 20px;
  bottom: 40px;
  z-index: 111;
  position: absolute;
  padding: 15px;
  background: $mainColor1;
  display: flex;
  align-items: center;
  color: #fff;
  div {
    margin-right: 10px;
  }
  .tuli_img {
    display: flex;
    align-items: center;
    img {
      margin-right: 10px;
    }
  }
}
.tittle {
  font-size: 16px;
  font-weight: bold;
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin: 5px 0;
  color: #fff;
}
.tittle1 {
  background: transparent;
}
.water-analysis-page {
  padding: 20px;
  overflow-y: hidden;
}
.content {
  width: 500px;
  background: $mainBg;
  border-radius: 8px;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 90;
  padding: 15px;
  overflow: auto;
  .chartHeight {
    width: 100%;
    height: 240px !important;
  }
}
#PopupWaterlogging {
  position: fixed;
  left: 52%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 210px;
  background: #021534;
  border: 1px solid #114f89;
  z-index: 2000;
  display: flex;
  .allContent {
    width: 425px;
    height: 300px;
    display: flex;
    flex-direction: column;
  }
  #chartPopupRain {
    width: 425px;
    height: 200px;
  }
  .titleTop {
    width: 95%;
    display: flex;
    padding-top: 8px;
    margin-left: 20px;
  }
  .closePopup {
    width: 5%;
    margin: 15px;

    cursor: pointer;
  }
  .PopupWaterloggingtabs {
    width: 100%;
  }
}
</style>