<template>
  <div class="pictureOnMap">
    <TopTab />
    <div class="mainContentBox">
      <MapBox :initJson="`/static/libs/mapbox/style/wh_dhgx.json`" :loadCallback="loadCallback" @mapClick1="mapClick1"></MapBox>
      <router-view></router-view>
      <recordPage></recordPage>
      <LayerControl></LayerControl>
    </div>

    <el-dialog
      modal-class="pmpSitNewDialog"
      v-model="dialogConfig.visible"
      :append-to-body="true"
      style="height: 750px; width: 1200px"
      :destroy-on-close="true"
      :draggable="true"
      :z-index="999"
    >
      <DialogTabs
        :dataID="dialogConfig.dataID"
        :dataCode="dialogConfig.dataCode"
        :comIDs="dialogConfig.comIDs"
        :typeName="dialogConfig.typeName"
        :customComponents="dialogConfig.customData"
        :RefName="dialogConfig.RefName"
        :title="dialogConfig.title"
        :arrstcode="arrstcode"
        :arrid="arrid"
        :Getproperties="Getproperties"
        :Getmenuarr="Getmenuarr"
        @closeFun="closeFun"
      ></DialogTabs>
    </el-dialog>
  </div>
</template>
<script setup>
import line from '../../../public/static/libs/mapbox/json/line.json';
import point from '../../../public/static/libs/mapbox/json/point.json';
import { ref, reactive, onMounted, nextTick } from 'vue';
import TopTab from './TopTab/index.vue';
import MapBox from '../../components/Map/MapBox';
import bus from '@/bus';
import useUserStore from '@/store/modules/user';
import DialogTabs from '@/views/pictureOnMap/page/components/DialogTabs/dialogTabs.vue';
import { drainageDispatchGetMenu } from '@/api/MonitorAssetsOnMap';
import recordPage from '@/views/voice/recordPage/index';
import usepartitionStore from '@/store/modules/partition';

import LayerControl from '@/views/pictureOnMap/LayerControl.vue';
import { FALSE } from 'ol/functions';

const useStore = usepartitionStore();

const appStore = useUserStore();

const { proxy } = getCurrentInstance();
const Getproperties = ref({});
const Getmenuarr = ref([]);
const GetcomIDs = ref([]);
const dialogConfig = reactive({
  visible: false,
  dataID: '',
  dataCode: '',
  data: {},
  comIDs: [],
  customData: [],
  RefName: '',
  title: '详情',
  typeName: '',
});
const closediaMeth = () => {
  dialogConfig.visible = false;
};
// 站点数组
const arrstcode = ref([
  // 站点类型名称: 编码
  'outlet_water_level', // 排口流量
  'outlet_quality', // 排口水质
  'channel_quality', // 港渠水质
  'channel_water_level', // 港渠水位
  'lake_water_level', // 湖泊水位
  'waterlogging', // 渍水监测点（注意：这里编码没有后缀，可能是特例或故意为之）
  'rain', // 雨量站
  'rainwater_pipeline_quality', // 雨水管网水质
  'sewage_pipeline_quality', // 污水管网水质
  'rainwater_pipeline_quality_area', // 接驳口
  'rainwater_pipeline_water_level', // 雨水管网液位
  'reservoir_water_level', //水库水位
  'rainPumpStation', //雨水泵站
  'dirtyPumpStation', //污水泵站
  'sewageStation', //污水厂
  'gateStation', //闸门
]);
// 基本数据
const arrid = ref([
  'diversion_well_info', // 分流井
  'drainage_info', // 排水户
  'lake_info', // 湖泊
  'outlet_info', // 排口
  'port_channel_info', // 港渠
  'rain_water_pump_station_info', // 雨水泵站
  'region_info', // 分区信息
  'reservoir_info', // 水库
  'sewage_factory_info', // 污水处理厂
  'sewage_factory_station_info', //污水处理站
  'sewage_pump_station_info', // 污水泵站
  'storage_tank_info', // 调蓄池
  'water_gate_info', // 水闸
  'waterlogging_point_info', // 渍水点
  'water_region_info', // 水系汇水分区
  'storehouse', //物资仓库
  'dikeGood', //堤防备料
]);
// 基础数据
const switchStcode = (Name, type) => {
  if (type == 'outlet_info') {
    pkClick(Getproperties.value);
  }
  console.log('GetcomIDs.value', GetcomIDs.value);

  if (arrid.value.includes(type)) {
    dialogConfig.visible = true;
    dialogConfig.dataCode = type;
    dialogConfig.comIDs = GetcomIDs.value;
    dialogConfig.title = Getproperties.value.name.split('\n')[0];
    dialogConfig.dataID = Getproperties.value.pid ? Getproperties.value.pid : Getproperties.value.id;
    dialogConfig.RefName = GetcomIDs.value.length ? GetcomIDs[0] : '';
  } else {
    return;
  }
};
// 类型弹框判断
const typecodeswitch = type => {
  if (diabox[type]) {
    // console.log('diabox[type]', diabox[type]);
    window[type + '_map'] = diabox[type]
      .filter(i => i.geometry)
      .map((item, index) => {
        let coordinates = turf.getCoords(turf.center(Terraformer.WKT.parse(item.geometry)));
        const popup = new mapboxgl1.Popup({
          closeButton: false,
          closeOnClick: false,
        });
        popup
          .setLngLat(coordinates)
          .setDOMContent(document.getElementById(type + index))
          .addTo(newfiberMap.map);
        popup.coordinates = coordinates;
        return popup;
      });

    nextTick(() => {
      window[type + '_map'].forEach(i => i._setOpacity(0));
    });
  }
};
const switchArr = () => {
  let typearr = [];
  for (var k in diabox) {
    typearr.push(k);
    appStore.MapData.map(item => {
      if (item.pointType == k) {
        diabox[k] = item.data;
      }
    });
  }
  nextTick(() => {
    for (var k in typearr) {
      typecodeswitch(typearr[k]);
    }
  });
};

// 站点
const switchid = (Name, type, properties) => {
  if (arrstcode.value.includes(type)) {
    dialogConfig.visible = true;
    dialogConfig.dataCode = type;
    dialogConfig.dataID = Getproperties.value.stCode;

    dialogConfig.comIDs = GetcomIDs.value;
    dialogConfig.title = Getproperties.value.name.split('\n')[0];
    dialogConfig.RefName = GetcomIDs.value.length ? GetcomIDs.value[0].menuName : '';
  } else {
    return;
  }
};
// 智慧水务大脑一张图 特定大屏动态菜单
const specificFun = type => {
  // 监测预警模块弹框
  // value值 统一菜单类型
  //name值 特指智慧水务大脑获取的动态菜单类型
  let arr = [
    {
      name: 'dp_zsfx', //渍水点
      value: 'waterlogging',
    },
    {
      name: 'dp_hhsq', //河湖水情
      value: 'lake_water_level',
    },
    {
      name: 'dp_bzgq', //泵站工情
      value: 'rainPumpStation', //雨水泵站
    },
    {
      name: 'dp_gwfx', //管网风险
      value: 'rainwater_pipeline_water_level', //雨水管网液位
    },
    {
      name: 'dp_gwfx', //管网风险
      value: 'rainwater_pipeline_quality', //雨水管网水质
    },
    {
      name: 'dp_gwfx', //接驳口
      value: 'rainwater_pipeline_quality_area', //接驳口
    },
    {
      name: 'dp_wsgwfx', //大屏污水管网风险分析弹框
      value: 'sewage_pipeline_quality', //雨水管网水质
    },
    // {
    //   name: "dp_ysgwfx", //大屏雨水管网风险分析弹框
    //   value: "rainwater_pipeline_quality", //雨水管网水质
    // },
  ];
  return arr.find(item => item.value == type)?.name || null;
};

// 获取动态弹框菜单
const GetBoxmenu = (Name, type) => {
  console.log('name', Name);
  console.log('type', type);
  GetcomIDs.value = [];
  let dataId = '';
  if (arrstcode.value.includes(type)) {
    dataId = Getproperties.value.stCode;
  }

  if (arrid.value.includes(type)) {
    dataId = Getproperties.value.pid ? Getproperties.value.pid : Getproperties.value.id;
  }
  console.log('dataId', dataId);
  if (!dataId) {
    // proxy.$modal.msgSuccess('');
    return;
  }
  // debugger;
  let params = {
    dataCode: specificFun(type) || type,
    scene: 'basis_monitor',
    dataId: dataId,
  };
  drainageDispatchGetMenu(params).then(res => {
    console.log('获得的菜单', res.data);
    Getmenuarr.value = res.data;
    if (res.data && res.data.length) {
      res.data.map(item => {
        GetcomIDs.value.push(item.moduleName);
      });
    }

    nextTick(() => {
      switchStcode(Name, type);
      switchid(Name, type);
    });
  });
};

const pointandlineOpen = (type, properties) => {
  dialogConfig.visible = true;
  switch (type) {
    case 'pipeline_info_text':
      dialogConfig.title = '管线信息';
      break;
    case 'pipeline_info':
      dialogConfig.title = '管线信息';
      break;
    case 'pipeline_point':
      dialogConfig.title = '管点信息';
      break;
    case 'point':
      dialogConfig.title = '问题管线';
      break;
  }

  Getmenuarr.value = [
    {
      menuName: '管网信息',
      show: true,
      moduleName: 'PointAndLine',
    },
  ];

  // dialogConfig.dataID = '0371000003';
  dialogConfig.comIDs = ['PointAndLine'];
  dialogConfig.RefName = 'PointAndLine';
};
const loadCallback = () => {};
// 排口溯源
const pkClick = async properties => {
  // debugger;
  if (!properties.wellCode) return;
  let results = await upStreamAnalyse({ endPointNumber: properties.wellCode });
  let pipelines = results.data.pipelineInfoList
    .map(i =>
      turf.feature(Terraformer.WKT.parse(i.geometrys), {
        ...i,
        area: i.pipelineType == 'Rain' ? '雨水' : '污水',
      })
    )
    .map(i => (i.properties.flowDirection == 0 ? turf.lineString(turf.getCoords(i).reverse(), i.properties) : i));
  newfiberMap
    .getLayers()
    .filter(i => i.newfiberId == '水系流向')[0]
    .getSource()
    .setData(turf.featureCollection(pipelines));
};

const a = properties => {
  const keys_ = ['雨水', '污水'];
  const keys = ['1_泵站', '1_污水处理厂', '分区流向', '分区流向1'];
  bus.emit('removeMapDatas', keys);
  newfiberMap
    .getLayers()
    .filter(i => i.newfiberId == keys[3])[0]
    .getSource()
    .setData(turf.featureCollection([]));
  const key = properties.c_layer.includes(keys_[0]) ? keys_[0] : keys_[1];
  const nameKey = properties.name.substring(0, 2);
  let features = line.features.filter(i => i.properties.area.includes(key) && i.properties.name.includes(nameKey));
  let features1 = point.features.filter(i => i.properties.area.includes(key) && i.properties.system.includes(nameKey));
  let points = _.groupBy(features1, a => a.properties.type);
  features.forEach(i => {
    i.properties.type = keys[2];
    i.properties.color = key == keys_[0] ? 'rgba(21,127,176,1)' : 'rgba(255,0,0,1)';
  });
  Object.keys(points).map(key =>
    bus.emit('setGeoJSON', {
      json: turf.featureCollection(
        points[key].map(i => ({
          type: i.type,
          geometry: i.geometry,
          properties: { ...i.properties, type: '1_' + key },
        }))
      ),
      key: '1_' + key,
    })
  );
  bus.emit('setGeoJSON', { json: turf.featureCollection(features), key: keys[2] });
  newfiberMap
    .getLayers()
    .filter(i => i.newfiberId == keys[3])[0]
    .getSource()
    .setData(turf.featureCollection(features));
};

const mapClick1 = (lngLat, properties = {}, layerId) => {
  console.log('经纬度', lngLat);
  console.log('数据', properties);
  console.log('layerid', layerId);

  // 处理标注
  Getproperties.value = properties;
  let type = properties ? properties.type : '' || 1;
  let Name = properties ? properties.pointTypeName : '' || '';
  // Annotation(properties);
  console.log('1111', type, layerId);

  if (properties.layer == '排水分区') {
    // a(properties);

    // if (Getproperties.value.c_layer.includes('雨水分区_1')) {
    //   type = 'water_region_info';
    //   GetBoxmenu('雨水分区', type);
    // }

    // if (Getproperties.value.c_layer.includes('污水分区')) {
    //   type = 'region_info';
    //   GetBoxmenu('污水分区', type);
    // }

    return;
  }

  let layerIdarr = ['湖泊', '湖泊_text', '港渠', '港渠_text', '水库管理范围', '水库管理范围_text'];
  let newsetarr = [
    { name: '湖泊', value: 'lake_info' },
    { name: '湖泊_text', value: 'lake_info' },
    { name: '港渠', value: 'port_channel_info' },
    { name: '港渠_text', value: 'port_channel_info' },
    { name: '水库管理范围', value: 'reservoir_info' },
    { name: '水库管理范围_text', value: 'reservoir_info' },
  ];
  if (layerIdarr.includes(layerId)) {
    type = newsetarr.find(item => {
      return layerId == item.name;
    }).value;

    GetBoxmenu(layerId, type);

    return;
  }

  let arr = ['pipeline_point', 'pipeline_info', 'pipeline_info_text'];

  if (arr.includes(layerId)) {
    console.log('进了方法');
    pointandlineOpen(layerId);
    dialogConfig.dataCode = layerId;
  } else if (properties.type && properties.type == '问题管线') {
    pointandlineOpen('point');
    dialogConfig.dataCode = 'point';
  } else {
    if (type) {
      GetBoxmenu(Name, type);
    }
  }
};

// 根据类型处理接口返回的标注内容
const AnnotationArr = ref([]);
const StringName = ref('');
const Annotation = properties => {
  if (properties.siteData && properties.siteData.length) {
    let arr = JSON.parse(properties.siteData);
    AnnotationArr.value = arr;
    console.log('数据', arr);
    let string = '';

    switch (properties.type) {
      case 'rain':
        AnnotationArr.value = [{ valueName: '监测时间', value: properties.recordTime }, ...arr];
        break;
    }
    string = Methtion(string);
    console.log('数据', string);
  }
};

const Methtion = StringName => {
  if (AnnotationArr.value.length) {
    AnnotationArr.value.map(item => {
      StringName += `${item.valueName}:${item.value}+'/n' `;
    });
    return StringName;
  }
};

const allScreen = () => {
  let domElement = document.documentElement;
  if (domElement.requestFullscreen) {
    domElement.requestFullscreen();
  } else if (domElement.mozRequestFullScreen) {
    domElement.mozRequestFullScreen();
  } else if (domElement.webkitRequestFullScreen) {
    domElement.webkitRequestFullScreen();
  }
};
const closeFun = is => {
  dialogConfig.visible = is;
};
function anotherMeht(item) {
  let properties = {};
  Getproperties.value.stCode = item.stCode || item.siteCode || item.lakeCode;
  Getproperties.value.dataCode = item.dataCode;
  Getproperties.value.wellcode = item.wellCode || item.dataName || item.pipeLine;
  Getproperties.value.id = item.id;
  Getproperties.value.gwMonitorId = item.gwMonitorId || item.id; //管网坡面
  Getproperties.value.dataId = item.dataId || '';
  Getproperties.value.stType = item.stType;

  Getproperties.value.geometry = item.geometry || item.geometrys || '';
  // Terraformer.WKT.convert(turf.point(item.lonLat.split(",").map(Number)).geometry);

  Getproperties.value.waterRegionCode = item.lakeCode || item.waterRegionCode; //河湖水情  查询水系分区详情
  Getproperties.value.GWDADataNow = item.GWDADataNow ? item.GWDADataNow : false;
  if (item.daterange) {
    Getproperties.value.daterange = item.daterange;
  } else {
    Getproperties.value.daterange = null;
  }
  console.log('Getproperties', Getproperties.value);
  if (arrstcode.value.includes(item.stType)) {
    properties.stCode = item.stCode;
  }

  if (arrid.value.includes(item.stType)) {
    properties.id = item.pid || item.id;
  }
  GetBoxmenu('', item.stType);
}

onMounted(() => {
  allScreen();
  useStore.getsewageData();
  bus.on('DynamicBus', item => {
    console.log('item', item);
    dialogConfig.RefName = item.RefName || '';
    dialogConfig.title = item.stName || item.name;
    // debugger;
    if (!!!item.NoPromise) {
      anotherMeht(item);
    } else {
      // 将不进行接口请求,直接写死弹窗内容
      dialogConfig.dataCode = item.type;
      Getmenuarr.value = item.Getmenuarr;
      dialogConfig.comIDs = item.comIDs;
      dialogConfig.dataID = item.pid ? item.pid : item.id;
      Getproperties.value.stCode = item.stCode;
      Getproperties.value.dataCode = item.dataCode;
      Getproperties.value.wellcode = item.wellCode || item.dataName || item.startPointNumber;
      Getproperties.value.id = item.relationId || item.id; //item.relationId监测告警的普通id
      Getproperties.value.dataId = item.dataId || '';
      Getproperties.value.stType = item.stType;
      Getproperties.value.geometry =
        item.geometry || item.geometrys || Terraformer.WKT.convert(turf.point(item.lonLat.split(',').map(Number)).geometry);
      dialogConfig.visible = true;
    }
  });
  bus.on('closedia', e => {
    closediaMeth();
  });
  bus.on('changeData', e => {
    // switchArr();
  });
  // 部分公共弹窗需要使用一个查询时间,目前不确定后期有没有人使用同类型的弹窗,在此初始化,增加公共弹窗的兼容性
  // localStorage.setItem("JCFXDialogTimer", moment().format("YYYY-MM-DD"));
});

onBeforeUnmount(() => {
  bus.off('DynamicBus');
  bus.off('closedia');
  bus.off('changeData');
});
</script>
<style lang="scss">
@import '@/assets/styles/pictureOnMap.scss';
.pictureOnMap {
  width: 100%;
  height: 100%;
  background: url('@/assets/images/pictureOnMap/maxBgc.png') no-repeat center;
  background-size: 100% 100%;
  color: #fff;
  overflow: hidden;
  .mainContentBox {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    // &::before{
    //   content: '';
    //   position: absolute;
    //   top: 0;
    //   left: 0;
    //   width: 100%;
    //   height: 100%;
    //   // background: radial-gradient(rgba(255, 255, 255, 0) 30%, #071542 100%);
    //   background: url("@/assets/images/pictureOnMap/bg.png") no-repeat;
    //   background-size: 100% 100%;
    //   /*设置径向渐变*/
    //   pointer-events: none;
    //   z-index:5;
    // }
  }
}
</style>