<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">项目开工情况</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 style="margin: 10px; font-size: 18px">图例</div> -->
        <div v-for="i in tuliList" class="tuli_img">
          <img :src="i.icon" alt="" />
          <div>{{ i.label }}</div>
        </div>
      </div>
      <mapBox id="map" ref="mapRef" :isShowTool="false" @clickMap="clickMap" />
    </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>
</template>
<script setup>
import echart from './echart.vue';
import { ElMessage } from 'element-plus';

import mapBox from '@/components/Map';
import { top, center, foot } from './index';
import rationality from './rationality/index.vue';
import { selectProjectEcharts } from '@/api/projectCompletionStatus';
const { proxy } = getCurrentInstance();
const ruleForm = ref(null);
let isComponent = ref(0);
const FormList = ref({});
const loading = ref(true);
let visible = ref(false);
const echartsif = ref(false);
let tuliList = ref([
  { label: '开工', id: 1, icon: '/2.1.jpg' },
  { label: '未开工', id: 0, icon: '/2.2.jpg' },
]);
let result = null;
const approveId = ref('1704040731365404674');
// 获取列表数据
const clickMap = feature => {
  console.log('feature', feature);
  if(!feature.properties.data._value.id){ 
    ElMessage({
    message: '该项目未进行只能审查',
    type: 'warning',
  })
    return 
  }
  let geojson = turf.featureCollection(
    newfiberMap
      .getLayers([feature.key])
      .filter(i => !!i.properties)
      .filter(i => i.properties.getValue().name == feature.name)
      .map(i => turf.feature(Terraformer.WKT.parse(i.properties.getValue().geometrys)))
  );
  if (!!geojson.features.length) toCenterByGeoJson(geojson);
  // if(!feature.properties?.data?._value) return proxy.$modal.msgError('数据异常！')
  if (!feature.properties?.data?._value) return;
  approveId.value = '1704040731365404674';
  visible.value = true;
};
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.totalInvest);
  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 => {
          let options = {};
          if (item.projectLocation.includes('POINT')) {
            options = {
              type: NewFiberMap.Enum.VectorType.SPECIAL_CIRCLE,
              id: 'point',
              data: {
                ...item,
                queryType,
              },
              name: (item.projectName || '').substr(0, 10) + (item.projectName.length > 10 ? '.....' : ''),
              style: {
                radius: 10,
                clampToGround: false,
                material: new NewFiberMap.Material.CircleDiffuseMaterialProperty({
                  color: Cesium.Color.fromCssColorString('rgba(134, 216, 130, 0.8)'),
                  speed: 20,
                }),
              },
              labelOptions: {
                font: '17px PingFang SC',
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                outlineColor: 'rgba(20,83,154,1)',
                outline: true,
                outlineWidth: 3,
                color: '#ffffff',
                pixelOffset: [0, -6],
                distanceDisplayCondition: [0, 2100000],
              },
              geometrys: item.projectLocation,
            };
          } else if (item.projectLocation.includes('LINE')) {
            options = {
              type: NewFiberMap.Enum.VectorType.POLYLINE,
              id: 'line',
              data: {
                ...item,
                queryType,
              },
              name: (item.projectName || '').substr(0, 10) + (item.projectName.length > 10 ? '.....' : ''),
              geometrys: item.projectLocation,
              style: {
                width: 5,
                material: 'rgba(134, 216, 130, 0.8)',
                color: 'rgba(134, 216, 130, 0.8)',
                clampToGround: true,
              },
              labelOptions: {
                font: '17px PingFang SC',
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                outlineColor: 'rgba(20,83,154,1)',
                outline: true,
                outlineWidth: 3,
                color: '#ffffff',
                pixelOffset: [0, -6],
                distanceDisplayCondition: [0, 2100000],
              },
            };
          } else if (item.projectLocation.includes('POLYGON')) {
            options = {
              type: NewFiberMap.Enum.VectorType.POLYGON,
              style: {
                material: 'rgba(134, 216, 130, 0.8)',
                color: 'rgba(134, 216, 130, 0.8)',
              },
              geometrys: item.projectLocation,
              id: 'area',
              data: {
                ...item,
                queryType,
              },
              name: (item.projectName || '').substr(0, 10) + (item.projectName.length > 10 ? '.....' : ''),
              labelOptions: {
                font: '17px PingFang SC',
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                outlineColor: 'rgba(20,83,154,1)',
                outline: true,
                outlineWidth: 3,
                color: '#ffffff',
                pixelOffset: [0, -6],
                distanceDisplayCondition: [0, 2100000],
              },
            };
          }
          return options;
        });
    }
    if (!mapData.length) return;
    let geojson = NewFiberMap.Data.ToGeoJSON.beansWktToGeoJson(mapData);
    toCenterByGeoJson(geojson);
    newfiberMap.geojsonToMap(geojson);
  }, 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) => {
  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);
};
onMounted(() => {
  selectProjectEchartsM();
});
</script>
<style lang="scss" scoped>
#map {
  width: 100%;
  height: 89vh;
}
.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;
  width: 180px;
  height: 50px;
  background: #ffffff;
  display: flex;
  align-items: center;
  color: #000;
  div {
    flex: 1;
  }
  .tuli_img {
    display: flex;
    width: 100px;
    align-items: center;
  }
}
.tittle {
  font-size: 16px;
  font-weight: bold;
  width: 200px;
  height: 40px;
  background: #fafafc;
  line-height: 40px;
  text-align: center;
  margin: 5px 0;
  color: #848484;
}
.tittle1 {
  background: transparent;
}
.water-analysis-page {
  padding: 20px;
  overflow-y: hidden;
}
// :deep(.el-dialog__body) {
//   height: 520px;
//   overflow: auto;
// }
</style>