<template>
  <div style="width:100vh,height:100vh">
    <BasicInformation />
  </div>
  <div>
    <DeviceDetailMode @register="registerModal" />
  </div>
  <Dialog :width="1110" :height="110" :dialogVisable="visible" :title="geologicalTitle">
    <GeologyDetail :geologicalInfo="geologicalInfo" />
  </Dialog>
  <drainageBasinInfo v-if="drainageBasinInfoId" :pageAction="drainageBasinInfAction" :id="drainageBasinInfoId" />
  <Dialog sjl="sjl" :width="1110" :height="110" :dialogVisable="videoVisible" :title="videoTitle">
    <playVideo :videoInfo="videoInfo" />
  </Dialog>
</template>

<script>
import BasicInformation from '/@/views/map/EngineeringModel/index.vue';
import { getIngenieurInformatikDetails } from '/@/api/map/getData.ts';
import { useMonitorDevicesStore } from '/@/store/modules/monitorDevices';
import { useModal } from '/@/components/Modal';
import DeviceDetailMode from './deviceDetailMode.vue';
import GeologyDetail from '../dialog/GeologyDetail.vue';
import { queryGeologicalById } from '/@/api/map/geologicalApi';
import Dialog from '/@/components/Dialog/index.vue';
import { ref } from 'vue';
import drainageBasinInfo from '/@/views/map/drainageBasin/drainageBasinInfo.vue';
import eventBus from '/@/utils/eventBus';
import playVideo from './playVideo.vue';
import { reactive } from 'vue';
import TFMapUitl from '/@/utils/TFMapUitl.ts';
export default {
  name: 'DetailsInfo',
  components: {
    BasicInformation, //工程信息详情
    DeviceDetailMode,
    GeologyDetail,
    Dialog,
    drainageBasinInfo,
    playVideo,
  },
  setup() {
    let geologicalInfo = ref(null);
    let geologicalTitle = ref('');
    let visible = ref(false);
    let videoVisible = ref(false);
    let videoTitle = ref('');
    let index = ref(false);
    const [registerModal, { openModal }] = useModal();
    const videoInfo = reactive({});
    //视频详情
    window.openModelVideo = function (e, type) {
      console.log('打开视频？');
      TFMapUitl.clearObject(videoInfo);
      Object.assign(videoInfo, e);
      videoVisible.value = !videoVisible.value;
      videoTitle.value = '视频详情';
      setTimeout(() => {
        var dom = document.getElementsByClassName('dialogClass');
        if (dom) dom[0].style.zIndex = type ? -1 : 10;
        var dom = document.querySelector('body .ant-modal-root .ant-modal-wrap');
        if (dom) dom.style.zIndex = type ? -1 : 1000;
      }, 5);
      if (map.popup) map.popup.remove();
    };
    //监测设备信息详情
    window.openModel = function (e) {
      console.log('打开监测设备信息详情？');
      console.log('chart:', e);
      getMonitorChart(e);
      if (map.popup) {
        map.popup.remove();
      }
    };
    const monitorDevicesStore = useMonitorDevicesStore();
    function getMonitorChart(code) {
      console.log('打开弹窗');
      openModal(true, { code });
      document.getElementById('popupClear').click();
      // monitorDevicesStore
      //   .LiGongMonitorChart({
      //     sensorInnerCode: code.sensorInnerCode,
      //     sTime: '2023-04-15 00:00:00',
      //     eTime: '2023-04-19 00:00:00',
      //   })
      //   .then((res) => {
      //     if (res) {
      //       document.getElementById('popupClear').click();
      //     }
      //   });
    }
    //地灾点信息
    window.openModelDzd = async (e) => {
      let res = await queryGeologicalById(e);
      if (res.code === 1) {
        res.result['yxgc'] = '';
        console.log('地灾信息', res);
        (geologicalInfo.value = res.result),
          (geologicalInfo.value['id'] = e),
          (geologicalTitle.value = `${Object.hasOwnProperty.call(res.result, 'dzmc') ? res.result.dzmc : '无'}(${
            Object.hasOwnProperty.call(res.result, 'dzbhmc') ? res.result.dzbhmc : '无'
          })`);
        visible.value = !visible.value;
        if (map.popup) {
          map.popup.remove();
        }
      }
    };
    /**
     * 流域信息
     */
    let drainageBasinInfoId = ref(null);
    let drainageBasinInfAction = ref(false);
    eventBus.on('drainageBasinInfoShow', (e) => {
      drainageBasinInfoId.value = e;
      drainageBasinInfAction.value = !drainageBasinInfAction.value;
    });
    return {
      getMonitorChart,
      videoInfo,
      registerModal,
      visible,
      index,
      videoVisible,
      videoTitle,
      geologicalTitle,
      geologicalInfo,
      drainageBasinInfoId,
      drainageBasinInfAction,
    };
  },
};
</script>

<style></style>
