<template>
  <!-- 防汛物资 -->
  <div class="floodWZPage">
    <div class="partTitleHM" @click="materialShow">防汛物资</div>
    <div class="partContHM">
      <div class="scrollMapHM" @click="ChartBar3DClick">
        <ChartBar3D :refresh="refresh" :echartData="echartData"></ChartBar3D>
      </div>
    </div>
    <el-dialog :title="title" v-model="open" width="1200px" append-to-body :close-on-click-modal="false">
      <el-table :data="dataList" v-loading="loading" stripe>
        <el-table-column type="index" width="55" label="序号" />
        <el-table-column label="物资储备地点" prop="specificLocation" />
        <el-table-column label="具体位置" prop="address" />
        <el-table-column label="主要储备物资" prop="materialDetails" width="600" />
        <el-table-column label="负责人" prop="header" />
        <el-table-column label="联系方式" prop="headerPhone" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { FloodPreventionMaterialList } from '@/api/longoPeration/MaterialManagement';
import ChartBar3D from '@/views/sponeScreen/Echarts/echartBar3D.vue';
import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
import yuanTous from '@/assets/newImgs/layerIcon/floodPreventionMaterial.png';
import bus from '@/bus/index';

const { proxy } = getCurrentInstance();
const open = ref(false);
const title = ref('');
const dataList = ref([]);
const loading = ref(true);
const refresh = ref(1);
const isMaterialShow = ref(false);
const echartData = ref({
  xAxis: ['车辆类', '泵类', '编织物料', '救生设备', '其他'],
  seriesData: [5, 35, 690, 86, 290],
});
let initeLayerList = [
  {
    layername: 'YSBZ', //雨水泵站
    show: false,
  },
  {
    layername: 'combineBengZhan', //合流泵站
    show: false,
  },
  {
    layername: 'sewageFactory', //污水处理厂
    show: false,
  },
  {
    layername: 'ysLine1', //雨水管网
    show: false,
  },
  {
    layername: 'hsLine1', //合流管网
    show: false,
  },
  {
    layername: 'pipeline_info_flow', //管网流向
    show: false,
  },
  {
    layername: 'pipeMonitor', //管网监测点，测试
    show: false,
  },
  {
    layername: 'waterCourse', //河道水位计
    show: false,
  },
];
/** 搜索列表 */
const getList = async () => {
  loading.value = true;
  let res = await FloodPreventionMaterialList({});
  if (res && res.code == 200) {
    dataList.value = res.data || [];
    // console.log(dataList.value);
  }
  loading.value = false;
};
//图例点击事件
function ChartBar3DClick() {
  open.value = true;
  title.value = '查看物资管理';
  getList();
}
const materialShow = async () => {
  isMaterialShow.value = !isMaterialShow.value;
  if (isMaterialShow.value) {
    let res = await FloodPreventionMaterialList({});
    if (res && res.code == 200) {
      let data = res.data;
      let materialFeatures = [];
      let materialPolygonFeatures = [];
      data.forEach(element => {
        let feature = turf.point([Number(element.lon), Number(element.lat)], element);
        feature.properties.name = element.address;
        element.materialName = element.address;
        element.lonLat = element.lon + ',' + element.lat;
        materialFeatures.push(feature);
        if (element.geometry) {
          materialPolygonFeatures.push(turf.feature(Terraformer.WKT.parse(element.geometry), { fillcolor: 'rgba(25, 101, 141,0.2)' }));
        }
      });
      let materialGeojson = turf.featureCollection(materialFeatures);
      console.log('materialGeojson---', materialGeojson);
      let materialPolygonGeojson = turf.featureCollection(materialPolygonFeatures);
      newfiberMapBoxVectorLayer.addGeojsonSymbol('materialFeatures', materialGeojson, yuanTous); //地图添加防汛物资
      newfiberMapBoxVectorLayer.addGeojsonPolygon('materialPolygonFeatures', materialPolygonGeojson);
      initeLayerList.forEach(item => {
        item.show = isMaterialShow.value;
      });
      bus.emit('setIniteLayer', initeLayerList);
    }
  } else {
    initeLayerList.forEach(item => {
      item.show = isMaterialShow.value;
    });
    bus.emit('setIniteLayer', initeLayerList);
    newfiberMapBoxVectorLayer.removeByIds(['materialFeatures']);
    newfiberMapbox.map.removeImage('materialFeatures');
    newfiberMapBoxVectorLayer.removeByIds(['materialPolygonFeatures']);
  }
};
onMounted(() => {
  getList();
  newfiberMapbox.map.on('click', 'materialFeatures', e => {
    const clickfeature = newfiberMapbox.map.queryRenderedFeatures([
      [e.point.x - 10 / 2, e.point.y - 10 / 2],
      [e.point.x + 10 / 2, e.point.y + 10 / 2],
    ])[0];
    console.log(e);
    console.log('clickfeature--', clickfeature.properties);
    bus.emit('popupcontent', {
      popupShow: true,
      point: [e.lngLat.lng, e.lngLat.lat],
      popupInfo: clickfeature.properties,
    });
  });
});
</script>

<style lang="scss" scoped>
.floodWZPage {
  width: 100%;
  .scrollMapHM {
    height: calc(100vh - 800px);
    p {
      width: 30%;
    }
  }
}
</style>