<template>
  <!-- 地图 -->
  <div class="position-r" id="map">
    <newFiberMapBox :initJson="`/static/libs/mapbox/style/HaiMianScreen.json`"></newFiberMapBox>
    <!-- 搜索框 -->
    <div class="searchBoxA">
      <van-field
        placeholder="请选择站点名称"
        show-word-limit
        @click="AllData.showYearStation = true"
        v-model="AllData.userId"
        readonly
        class="searchInputA"
        is-link
      />
      <!-- 请选择站点名称 -->
      <van-popup v-model:show="AllData.showYearStation" round position="bottom">
        <van-picker :columns="stationList" @confirm="onConfirmTne" @cancel="AllData.showYearStation = false">
        </van-picker>
      </van-popup>

      <!-- 弹框信息详情 -->
      <van-popup v-model:show="showProblem" position="center" closeable round :style="{ width: '100%', height: '80%' }">
        <!-- 水位监测站 -->
        <van-cell-group inset v-if="problemDetail.type == 'waterCourse'">
          <van-cell title="名称:" :label="problemDetail.stName" />
          <van-cell title="安装地址:" :label="problemDetail.address" />
          <van-cell title="负责人:" :label="problemDetail.chargeUser" />
          <van-cell title="建设方式:" :label="findText('camera_access_type', problemDetail.buildType)" />
          <!-- <van-cell title="在线状态:" :label="findText('onlineStatus', problemDetail.onlineStatus)" /> -->
          <van-cell title="安装日期:" :label="problemDetail.installDate" />
        </van-cell-group>
        <!-- 雨量站 -->
        <van-cell-group inset v-if="problemDetail.type == 'rainStation'">
          <van-cell title="名称:" :label="problemDetail.stName" />
          <van-cell title="建设方式:" :label="findText('camera_access_type', problemDetail.buildType)" />
          <van-cell title="当前降雨量(mm):" :label="problemDetail.pj || '--'" />
          <van-cell title="过去1h降雨量(mm):" :label="problemDetail.ago1h || '--'" />
          <van-cell title="过去3h降雨量(mm):" :label="problemDetail.ago3h || '--'" />
          <van-cell title="过去6h降雨量(mm):" :label="problemDetail.ago6h || '--'" />
          <van-cell title="过去12h降雨量(mm):" :label="problemDetail.ago12h || '--'" />
          <van-cell title="过去24h降雨量(mm):" :label="problemDetail.ago24h || '--'" />
          <van-cell title="过去72h降雨量(mm):" :label="problemDetail.ago72h || '--'" />
        </van-cell-group>
        <!-- YSBZ -->
        <van-cell-group inset v-if="problemDetail.type == 'YSBZ'">
          <van-cell title="名称:" :label="problemDetail.pumpName" />
          <van-cell title="编码:" :label="problemDetail.pumpCode" />
          <van-cell
            title="类型:"
            :label="
              problemDetail.pumpType == 'rain_water'
                ? '雨水泵站'
                : problemDetail.pumpType == 'sewage_water'
                ? '污水泵站'
                : '雨污合建'
            "
          />
          <van-cell title="建筑面积(㎡):" :label="problemDetail.buildArea || '--'" />
          <van-cell
            title="设计规模(m³/s):"
            :label="
              Number(rainpumpdeviceCount.designScaleSecond) + Number(sweagepumpdeviceCount.designScaleSecond) || '--'
            "
          />
          <van-cell
            title="泵机台数(台):"
            :label="Number(rainpumpdeviceCount.deviceCount) + Number(sweagepumpdeviceCount.deviceCount) || '--'"
          />
          <van-cell title="建设单位:" :label="problemDetail.unitDep || '--'" />
          <van-cell title="地址:" :label="problemDetail.address || '--'" />
        </van-cell-group>
        <!-- WSBZ -->
        <van-cell-group inset v-if="problemDetail.type == 'WSBZ'">
          <van-cell title="名称:" :label="problemDetail.pumpName" />
          <van-cell title="编码:" :label="problemDetail.pumpCode" />
          <van-cell
            title="类型:"
            :label="
              problemDetail.pumpType == 'rain_water'
                ? '雨水泵站'
                : problemDetail.pumpType == 'sewage_water'
                ? '污水泵站'
                : '雨污合建'
            "
          />
          <van-cell title="建筑面积(㎡):" :label="problemDetail.buildArea || '--'" />
          <van-cell
            title="设计规模(m³/s):"
            :label="
              Number(rainpumpdeviceCount.designScaleSecond) + Number(sweagepumpdeviceCount.designScaleSecond) || '--'
            "
          />
          <van-cell
            title="泵机台数(台):"
            :label="Number(rainpumpdeviceCount.deviceCount) + Number(sweagepumpdeviceCount.deviceCount) || '--'"
          />
          <van-cell title="建设单位:" :label="problemDetail.unitDep || '--'" />
          <van-cell title="地址:" :label="problemDetail.address || '--'" />
        </van-cell-group>
        <!-- combineBengZhan -->
        <van-cell-group inset v-if="problemDetail.type == 'combineBengZhan'">
          <van-cell title="名称:" :label="problemDetail.pumpName" />
          <van-cell title="编码:" :label="problemDetail.pumpCode" />
          <van-cell
            title="类型:"
            :label="
              problemDetail.pumpType == 'rain_water'
                ? '雨水泵站'
                : problemDetail.pumpType == 'sewage_water'
                ? '污水泵站'
                : '雨污合建'
            "
          />
          <van-cell title="建筑面积(㎡):" :label="problemDetail.buildArea || '--'" />
          <van-cell
            title="设计规模(m³/s):"
            :label="
              Number(rainpumpdeviceCount.designScaleSecond) + Number(sweagepumpdeviceCount.designScaleSecond) || '--'
            "
          />
          <van-cell
            title="泵机台数(台):"
            :label="Number(rainpumpdeviceCount.deviceCount) + Number(sweagepumpdeviceCount.deviceCount) || '--'"
          />
          <van-cell title="建设单位:" :label="problemDetail.unitDep || '--'" />
          <van-cell title="地址:" :label="problemDetail.address || '--'" />
        </van-cell-group>
        <!-- waterLoging -->
        <van-cell-group inset v-if="problemDetail.type == 'waterLoging'">
          <van-cell title="名称:" :label="problemDetail.name" />
          <van-cell title="编码:" :label="problemDetail.pointCode" />
          <van-cell title="位置:" :label="problemDetail.address || '--'" />
          <van-cell title="治理方案:" :label="problemDetail.solution || '--'" />
          <van-cell title="现状积水深度(cm):" :label="problemDetail.nowPondingDeep || '--'" />
          <van-cell title="现状积水时间(h):" :label="problemDetail.nowPongdingTime || '--'" />
          <van-cell title="建设开始时间:" :label="problemDetail.transformStartTime || '--'" />
          <van-cell title="建设结束时间:" :label="problemDetail.transformEndTime || '--'" />
        </van-cell-group>
        <!-- spongeFacility -->
        <van-cell-group inset v-if="problemDetail.type == 'spongeFacility'">
          <van-cell title="名称:" :label="problemDetail.stName" />
          <van-cell title="编码:" :label="problemDetail.stCode" />
          <van-cell title="项目名称:" :label="problemDetail.projectName || '--'" />
          <van-cell title="经纬度:" :label="problemDetail.lonlat || '--'" />
        </van-cell-group>
        <!-- pipeMonitor -->
        <van-cell-group inset v-if="problemDetail.type == 'pipeMonitor'">
          <van-cell title="名称:" :label="problemDetail.stName" />
          <van-cell title="编码:" :label="problemDetail.stCode" />
          <van-cell title="项目名称:" :label="problemDetail.projectName || '--'" />
          <van-cell title="经纬度:" :label="problemDetail.lonlat || '--'" />
        </van-cell-group>
        <!-- sewageFactory -->
        <van-cell-group inset v-if="problemDetail.type == 'sewageFactory'">
          <van-cell title="名称:" :label="problemDetail.sewageName" />
          <van-cell title="编码:" :label="problemDetail.sewageCode" />
          <van-cell title="地址:" :label="problemDetail.address || '--'" />
          <van-cell title="排放水体:" :label="problemDetail.intoWater || '--'" />

          <van-cell title="纬度:" :label="problemDetail.lat || '--'" />
          <van-cell title="经度:" :label="problemDetail.lon || '--'" />
          <van-cell title="设计规模(万吨/日):" :label="problemDetail.planScale || '--'" />
          <van-cell title="实际平均处理量(万吨/日):" :label="problemDetail.region || '--'" />
          <van-cell title="工艺:" :label="problemDetail.workmanship || '--'" />
        </van-cell-group>
      </van-popup>
    </div>
  </div>
</template>

<script setup name="informationManagement">
import newFiberMapBox from '@/views/xuncha/gisCommonPage/newFiberMapBox.vue';
import { getImgPatrol } from '@/utils/common.js';
import { artificialSiteSearch } from '@/api/informationManagement.js';
import {
  oneMapFacilityPumpList,
  haiMianfacilitySewagePage,
  waterloggingPointList,
  queryProjectStation,
  getStationList,
  realtimeRainfallStatistics,
} from '@/api/informationManagement.js';
import bus from '@/utils/utils';
// import rainStation_icon from '@/assets/cesiumMap/legendIcon/rainStation_icon.png';
// import sewageBenZhan_icon from '@/assets/cesiumMap/legendIcon/sewageBenZhan_icon.png';
// import rainBengZhan_icon from '@/assets/cesiumMap/legendIcon/rainBengZhan_icon.png';
// import combineBengZhan_icon from '@/assets/cesiumMap/legendIcon/combineBengZhan_icon.png';
// import waterCourse_icon from '@/assets/cesiumMap/legendIcon/combineBengZhan_icon.png';
// import sewageFactory_icon from '@/assets/cesiumMap/legendIcon/sewageFactory_icon.png';
// import pipeMonitor_icon from '@/assets/cesiumMap/legendIcon/pipeMonitor_icon.png';
const showProblem = ref(false);
const problemDetail = ref({});

const rainpumpdeviceCount = ref({});
const sweagepumpdeviceCount = ref({});
import { useDict } from '@/utils/dict';
const { camera_access_type, onlineStatus, faultStatus } = useDict('camera_access_type', 'onlineStatus', 'faultStatus');

const dicts = {
  camera_access_type,
  onlineStatus,
  faultStatus,
};
const findText = (prop, type) => {
  const item = dicts[prop].value.find((it) => it.value === type);
  return item?.label || '';
};
const AllData = reactive({
  searchV: '',
  userId: '',
  showYearStation: false,
  formData: {
    stationCode: '',
  },
  lengend: [
    {
      isCheck: true,
      name: '雨水泵站',
      layername: 'YSBZ',
      data: {},
    },
    {
      isCheck: true,
      name: '污水泵站', //图层+json   √
      layername: 'WSBZ',
      data: {},
    },
    {
      isCheck: true,
      name: '合流泵站', //图层+json   √
      layername: 'combineBengZhan',
      data: {},
    },
    {
      isCheck: true,
      name: '污水处理厂',
      layername: 'sewageFactory', //图层+json   √
      data: {},
    },
    {
      isCheck: true,
      name: '内涝积水点',
      layername: 'waterLoging', //图层+json  √
      data: {},
    },
    {
      isCheck: true,
      name: '河道断面',
      layername: 'waterCourse',
      data: {},
    },
    {
      isCheck: true,
      name: '雨量站',
      layername: 'rainStation',
      data: {},
    },
    {
      isCheck: true,
      name: '源头地块',
      layername: 'origine', //图层+json  √
      data: {},
    },
    {
      isCheck: true,
      name: '海绵设施',
      layername: 'spongeFacility',
      data: {},
    },
    {
      isCheck: true,
      name: '管网监测',
      layername: 'pipeMonitor',
      data: {},
    },
    // {
    //   isCheck: true,
    //   name: '供水厂',
    //   data: {},
    // },
  ],
});

//获取各类型站点
const getStationData = async () => {
  let resRainwater = await oneMapFacilityPumpList();
  if (resRainwater && resRainwater.code == 200) {
    let YSBZDataList = resRainwater.data.filter((data) => data.pumpType == 'rain_water'); //雨水泵站
    let WSBZDataList = resRainwater.data.filter((data) => data.pumpType == 'sewage_water'); //污水泵站
    let HLBZDataList = resRainwater.data.filter((data) => data.pumpType == 'confluence'); //合流泵站
    AllData.lengend[0].data = getGeojsonData(YSBZDataList);
    AllData.lengend[1].data = getGeojsonData(WSBZDataList);
    AllData.lengend[2].data = getGeojsonData(HLBZDataList);
  }
  let resWSCLC = await haiMianfacilitySewagePage();
  if (resWSCLC && resWSCLC.code == 200) {
    let WSCLCDataList = resWSCLC.data;
    AllData.lengend[3].data = getGeojsonData(WSCLCDataList); //污水处理厂
  }

  let rainStation = await realtimeRainfallStatistics({ monitorTargetType: 'rainfall', orderBy: 'tt desc' });
  if (rainStation && rainStation.code == 200) {
    let rainDataList = rainStation.data; //雨量站
    AllData.lengend[6].data = getGeojsonData(rainDataList);
  }
  let stationDataList = await getStationList();
  if (stationDataList && stationDataList.code == 200) {
    let riverDataList = stationDataList.data.filter((data) => data.siteType == 'water_level'); //河道监测

    AllData.lengend[5].data = getGeojsonData(riverDataList);
  }
  //let waterFactoryDatalist = results[4];

  //AllData.lengend[10].data = getGeojsonData(waterFactoryDatalist.data); //水厂

  let waterLogingRes = await waterloggingPointList();
  if (waterLogingRes && waterLogingRes.code == 200) {
    AllData.lengend[4].data = getGeojsonData(waterLogingRes.data); //内涝点
  }
  let params = {};
  let projectStationRes = await queryProjectStation(params);
  if (projectStationRes && projectStationRes.code == 200) {
    AllData.lengend[8].data = getGeojsonData(projectStationRes.data); //海绵设施
  }
  // 管网监测点 测试用
  AllData.lengend[9].data = getGeojsonData([
    {
      projectNo: 'JZGW02',
      projectName: '汴京路管网监测点',
      stCode: '2109600028',
      stName: '汴京路管网监测点',
      lonlat: '114.3141225,34.79221',
    },
  ]);
  console.log(AllData.lengend);
  bus.emit('setLegendData', AllData.lengend);
  AllData.lengend.forEach((item) => {
    bus.emit('setLayerVisible', item);
  });
};
//构建geojson格式
const getGeojsonData = (dataList) => {
  let features = [];
  let feature = {};
  dataList.forEach((data) => {
    if (data.lonLat) {
      let lonlat = data.lonLat.split(',');
      feature = {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [Number(lonlat[0]), Number(lonlat[1])],
        },
        properties: data,
      };
    } else if (data.lonlat) {
      let lonlat = data.lonlat.split(',');
      feature = {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [Number(lonlat[0]), Number(lonlat[1])],
        },
        properties: data,
      };
    } else if (data.lon && data.lat) {
      feature = {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [Number(data.lon), Number(data.lat)],
        },
        properties: data,
      };
    } else if (data.originalX && data.originalY) {
      feature = {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [Number(data.originalX), Number(data.originalY)],
        },
        properties: data,
      };
    } else if (data.longitude && data.latitude) {
      feature = {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [Number(data.longitude), Number(data.latitude)],
        },
        properties: data,
      };
    }
    features.push(feature);
  });
  return {
    type: 'FeatureCollection',
    features: features,
  };
};
//获取所有站点
const stationList = ref([]);
const getAllStationInfo = async () => {
  let res = await artificialSiteSearch();
  if (res && res.code == 200) {
    res.data.map((v) => {
      stationList.value.push({
        value: v.id,
        text: v.siteName,
        lonlat: v.lonlat,
      });
    });
    console.log(stationList.value, '    stationList.value');
  }
};

// 请选择站点名称
const onConfirmTne = ({ selectedOptions }) => {
  console.log('下拉框查询点击事件', selectedOptions);
  AllData.showYearStation = false;
  AllData.userId = selectedOptions[0].text;
  AllData.formData.stationCode = selectedOptions[0].value;
  if (selectedOptions[0].lonlat) {
    let lonlat = selectedOptions[0].lonlat.split(',').map(Number);
    newfiberMap.map.easeTo({
      center: lonlat,
      zoom: 15,
    });
  }
};

onMounted(() => {
  getAllStationInfo();
  let initeMapTimer = setInterval(() => {
    if (!newfiberMap) return;
    if (!newfiberMap.map.getLayer('point')) return;
    getStationData();
    newfiberMap.map.on('click', 'point', (e) => {
      const feature = (
        newfiberMap.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)[0];
      problemDetail.value = {};
      showProblem.value = true;
      problemDetail.value = feature.properties;
      console.log('feature---111', feature.properties);
      if (
        feature.properties.type == 'YSBZ' ||
        feature.properties.type == 'WSBZ' ||
        feature.properties.type == 'combineBengZhan'
      ) {
        rainpumpdeviceCount.value = JSON.parse(feature.properties.rainpump);
        sweagepumpdeviceCount.value = JSON.parse(feature.properties.sweagepump);
      }

      //少爷这里加弹窗
    });
    clearInterval(initeMapTimer);
  }, 100);
});
</script>
<style lang="less" scoped>
.position-r {
  position: relative;
  width: 100%;
  height: 100%;
  // background: #c6c6c6;
  .searchBoxA {
    width: 100%;
    height: 80px;
    // background: red;
    position: absolute;
    z-index: 99;
    .searchInputA {
      width: 100%;
      box-sizing: border-box;
      padding: 13px 36px 0 20px;
      height: 73px;
      background: #f3f3f3b3;
    }
    .SearchIconA {
      width: 45px;
      height: 45px;
      position: absolute;
      right: 50px;
      top: 15px;
    }
  }
}
</style>