<template>
    <div class="appmian">
      <el-container>
        <el-header>
          <div class="ve_menu_logo">
            <div class="ve_title">
              <div class="ve_logo_img">
                <el-image style="height: 100%" :src="logo" fit="contain"></el-image>
              </div>
              <h3 class="ve_logo_title">
                {{ title }}
              </h3>
            </div>
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              :popper-offset="2"
              style="width: 780px"
              background-color="#0D1639 "
              active-background-color="#0E50C8"
              text-color="#68ADFF"
              active-text-color="#fff"
              @select="handleSelect"
            >
              <el-menu-item index="1">灾害源设置</el-menu-item>
              <el-menu-item index="2">边界设置</el-menu-item>
  
              <el-menu-item index="3">灾害推演</el-menu-item>
              <el-menu-item index="4">推演结果</el-menu-item>
              <el-menu-item index="5">结果对比</el-menu-item>
            </el-menu>
            <div class="ve_right">
              <div class="ve_timeioc" v-if="aid == null" @click="titleclick()">
                <span>请选择</span>
              </div>
              <div v-else>
                <div class="ve_time" v-show="titlefalse" @click="titleclick()">
                  <span class="l_huoqing" >{{ headerobj.name }}</span>
                  <span class="l_time">{{ headerobj.time }}</span>
                </div>
              </div>
              <!-- <router-link to="/configurator"> -->
              <div class="ve_timeioc" @click="tiaozhuan()">
                <el-image :src="Vector" fit="contain"></el-image>
                <span>模型库</span>
              </div>
              <!-- </router-link> -->
            </div>
          </div>
        </el-header>
  
        <el-main>
          <Dialoges
            ref="lliudialog"
            :addselect="addselect"
            :valzaiqing="valzaiqing"
            :headerobj="headerobj"
            @leftsimulation="leftsimulation"
            @headerclick="headerclick"
            @handleSelect="handleSelect"
            @childfun="childfun"
            @moxingclick="moxingclick"
          ></Dialoges>
          <source-disaster ref="sourcedis" :classradio="classradio"  />
          <info-boundary ref="boundary" :classradio="classradio" />
          <info-animation ref="tanimation" :classradio="classradio" :aid="aid" />
          <InfoVtkmodel ref="vtkmodel" />
          <result ref="resultbidui" @titleclick="titleclick"  :classradio="classradio"></result>
        </el-main>
      </el-container>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, reactive, nextTick } from "vue";
  import { RouterView, RouterLink, useRouter } from "vue-router";
  // import NavigateBar from "@/components/layout/NavigateBar.vue";
  import Dialoges from "./InfoDialoges.vue";
  import logo from "@/assets/logo.png";
  import { ElMessage, ElButton, ElDialog, ElSelect, formEmits } from 'element-plus'
  // import myIndex  from "./index"
  import SourceDisaster from "./components/InfoDisaster.vue";
  import InfoBoundary from "./components/InfoBoundary.vue";
  import InfoAnimation from "./components/InfoAnimation.vue";
  import InfoVtkmodel from "./components/InfoVtkmodel.vue";
  import result from "./result.vue";
  import Vector from "@/assets/img/Vector.png";
  import { timestampToTime } from "@/js/lindex.js";
  import mitts from "@/utils/Bus";
  import { contains } from "@kitware/vtk.js/Common/DataModel/BoundingBox";
  // import { vtkmodel } from "@/control/vtkModel.js";
  
  let lliudialog = ref();
  let sourcedis = ref();
  let classradio = ref();
  let boundary = ref();
  let tanimation = ref();
  const title = "灾情推演软件";
  const activeIndex = ref("1");
  const activeIndex2 = ref("1");
  let titlefalse = ref(false);
  let resultbidui = ref();
  let mnindex = ref("");
  let resultleft = ref({});
  let datares=ref({});
  let resultright = ref({});
  let headerobj = ref({
    time: "",
    name: "",
  });
  let valzaiqing = ref("");
  let router = useRouter();
  let sgdata = ref({});
  let aid = ref();
  onMounted(() => {});
  // 跳转页面,{ aid:aid.value}
  const tiaozhuan = () => {
    activeIndex.value = "1";
    handleSelect( activeIndex.value);
    const key = activeIndex.value;
    sourcedis.value.changeModel();
    sourcedis.value.accident3(key);
    boundary.value.accident4(key);
    lliudialog.value.accident2(key);
    tanimation.value.monitor = false;
    router.push({ path: "/configurator" });
  
    // console.log(router.push("/configurator"))
  
    // console.log(router.push("/configurator"))
  };
  
  const addselect = () => {
    classradio.value = lliudialog.value.classradio;
  };
  // 获取模拟数据对比
  const leftsimulation = (res,data) => {
    if (mnindex.value == "1") {
      resultleft.value.coids = res.coids;
      resultleft.value.totaltime = res.totaltime;
      resultleft.value.reportstep = res.reportstep;
      resultleft.value.pickertime = res.acctime;
      resultleft.value.aid = res.aid;
      resultbidui.value.mntext1=data.name;
      
     
    } else {
      resultright.value.coids = res.coids;
      resultright.value.totaltime = res.totaltime;
      resultright.value.reportstep = res.reportstep;
      resultright.value.pickertime = res.acctime;
      resultright.value.aid = res.aid;
      resultbidui.value.mntext2=data.name;
    }
  
      //TODO 
      if(resultleft.value.aid==''||resultright.value.aid==''||resultleft.value.aid==undefined||resultright.value.aid==undefined){
   
  
      }else{
        if (resultleft.value.coids != resultright.value.coids) {
      ElMessage.error('污染物不一样，无法进行比较')
      return;
    }
  
    if (resultleft.value.totaltime != resultright.value.totaltime) {
      ElMessage.error('模拟时长不一样，无法进行比较')
      return;
    }
  
    if (resultleft.value.reportstep != resultright.value.reportstep) {
      ElMessage.error('输出步长不一样，无法进行比较')
      return;
    }
  
    if (resultleft.value.pickertime != resultright.value.pickertime ) {
      ElMessage.error('事故时间不一样，无法进行比较')
      return;
    }
      
  //TODO 获取物理量
  resultbidui.value.timeline=res.acctime;
  resultbidui.value.oldtime=res.acctime;
  // resultbidui.value.zdtime=res.acctime;
  resultbidui.value.endtime= Number(res.totaltime)/Number(res.reportstep);
  resultbidui.value.initAid(resultleft.value.aid,resultright.value.aid);
  resultbidui.value.clickflat=true;
      }
  
  
  };
  //判断两个对象是否相等
  const objequality = () => {};
  const moxingclick = (val) => {
    titlefalse.value = val;
  };
  // const qingsel=()=>{
  //     lliudialog.value.dialogVisible = true;
  // }
  //点击头部弹出弹框
  
  const titleclick = (val, index) => {
    mnindex.value = index;
    valzaiqing.value = val;
    if (val == "模拟数据") {
      lliudialog.value.dialogVisible = true;
    } else {
      lliudialog.value.dialogVisible = true;
      clearInterval();
    }
  };
  //获取aid
  const aidlist = () => {
    sgdata.value = lliudialog.value.sgdata;
    aid.value = sgdata.value.aid;
  };
  // 获取子组件的方法
  const childfun = () => {
  
    if(classradio.value=='Gass'){
      sourcedis.value.Gassgetdata(aid.value);
    }else{
      sourcedis.value.handledisaster(aid.value);
    }
    boundary.value.addboundary(aid.value);
    sourcedis.value.accident3();
  };
  const headerclick = (data) => {
    console.log(data);
    headerobj.value.name = data.name;
    headerobj.value.time = data.time;
    aid.value = data.aid;
  };
  const handleSelect = (key) => {
    activeIndex.value = "";
    switch (key) {
      case "1":
        sourcedis.value.changeModel();
        sourcedis.value.accident3(key);
        boundary.value.accident4(key);
        lliudialog.value.accident2(key);
        tanimation.value.monitor = false;
        resultbidui.value.accident6(key, aid.value);
        tanimation.value.accident5(aid.value, key);
        activeIndex.value = "1";
        break;
      case "2":
        boundary.value.changeModel();
        boundary.value.accident4(key);
        sourcedis.value.accident3(key);
        lliudialog.value.accident2(key);
        tanimation.value.monitor = false;
        resultbidui.value.accident6(key, aid.value);
        tanimation.value.accident5(aid.value, key);
        activeIndex.value = "2";
        break;
      case "3":
        lliudialog.value.changeModel();
        boundary.value.accident4(key);
        sourcedis.value.accident3(key);
        lliudialog.value.accident2(key);
        tanimation.value.monitor = false;
        activeIndex.value = "3";
        tanimation.value.accident5(aid.value, key);
        resultbidui.value.accident6(key, aid.value);
  
        break;
      case "4":
        boundary.value.accident4(key);
        tanimation.value.accident5(aid.value, key);
        sourcedis.value.accident3(key);
        lliudialog.value.accident2(key);
        resultbidui.value.accident6(key, aid.value);
        activeIndex.value = "4";
        break;
      case "5":
        sourcedis.value.changeModel();
        sourcedis.value.accident3(key);
        boundary.value.accident4(key);
        lliudialog.value.accident2(key);
        resultbidui.value.accident6(key, aid.value);
        tanimation.value.accident5(aid.value, key);
        tanimation.value.monitor = false;
        activeIndex.value = "5";
      default:
        break;
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .appmian {
    .el-main {
      --el-main-padding: 0 !important;
    }
  
    .el-header {
      padding: 0;
      margin: 0;
      width: 100%;
      position: absolute;
      z-index: 206;
      top: 0;
    }
  }
  
  .ve_menu_logo {
    width: 100%;
    height: 70px;
    background: #0d1639;
    white-space: nowrap;
    text-align: left;
    overflow: hidden;
    display: flex;
    background: #0d1639;
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
    border-radius: 0px 0px 0px 0px;
    border-bottom: 1px solid;
    box-sizing: border-box;
    border-image: linear-gradient(28deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0)) 1 1;
  
    .ve_title {
    }
  
    .ve_logo_img {
      padding-left: 30px;
      height: 100%;
      display: inline-block;
      box-sizing: border-box;
      vertical-align: middle;
      padding: 15px;
    }
  
    .ve_logo_title {
      width: 160px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      margin: 0;
      vertical-align: middle;
      color: #68adff;
      font-size: 20px;
    }
  
    .el-menu-demo {
      width: 60% !important;
      height: 70px;
      border: none !important;
      background: rgba(12, 97, 197, 0);
  
      .el-menu-item {
        position: relative;
        width: 97px;
        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
        font-weight: bold;
        font-size: 13px;
        color: #68adff;
        line-height: 15px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        width: 110px;
        height: 70px;
        border-radius: 0px 0px 0px 0px;
        border: none;
      }
  
      .is-active {
        width: 110px;
        height: 70px;
        background: radial-gradient(ellipse at 54px 0px, #3aa0ff -37%, #123066 53%);
        border-radius: 0px 0px 0px 0px;
        border: 1px solid;
        border-left: 1px solid rgba(16, 92, 240, 1);
        border-right: 1px solid rgba(18, 48, 102, 1);
        border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(18, 48, 102, 1)) 1
          1;
  
        &:after {
          width: 24px;
          height: 1px;
          background-color: #fff;
          -webkit-transition: all ease-out 0.2s;
          transition: all ease-out 0.2s;
          content: "";
          position: absolute;
          left: 50%;
          bottom: 15px;
          webkit-transform: translate(-50%, 0%);
          -moz-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
        }
      }
    }
  
    .ve_right {
      // width: 350px;
      height: 70px;
      overflow: hidden;
      position: absolute;
      right: 0;
      display: flex;
  
      .ve_time {
        width: 190px;
        height: 55px;
        padding-top: 15px;
        height: 70px;
        overflow: hidden;
        border-radius: 0px 0px 0px 0px;
        border-left: 2px solid rgba(12, 97, 197, 0.2);
        border-right: 2px solid rgba(12, 97, 197, 0.2);
        box-sizing: border-box;
        padding: 15px 5px;
        // border-image: linear-gradient(347deg, rgba(31, 107, 255, 1), rgba(164, 195, 255, 1)) 1 1;
        span {
          display: block;
          font-family: Microsoft YaHei UI, Microsoft YaHei UI;
          color: #ffffff;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
  
        .l_huoqing {
          font-size: 13px;
          line-height: 15px;
          font-weight: bold;
          line-height: 2;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
  
        .l_time {
          font-size: 12px;
          line-height: 14px;
          font-weight: 400;
        }
      }
  
      .ve_timeioc {
        width: 150px;
        height: 70px;
        // border-radius: 0px 0px 0px 0px;
        // border: 1px solid;
        // border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(164, 195, 255, 1)) 1 1;
        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
        font-weight: bold;
        font-size: 13px;
        color: #68adff;
        line-height: 15px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        display: flex;
        justify-content: center;
        align-items: center;
  
        span {
          padding-left: 15px;
        }
      }
    }
  }
  </style>
  
  <style>
  body {
    width: 100%;
    height: 100vh;
    background: #161a2a;
  }
  
  button:focus,
  button:focus-visible {
    outline: none;
  }
  
  .l_Dialog {
    /* position: absolute; */
    z-index: 206;
    top: 0;
  }
  </style>
  