/*indexLayout*/
<template>
  <div  ref="getIndexHeight" class="index">
    <div class="container">
      <transition name="fade-transform" mode="out-in">
        <router-view />
      </transition>
    </div>
    <div ref="getFooterHeight" class="footer" v-show="xigong">
      <div class="tab" >
           <!-- <div class="tab-list" v-if="currentPage == 'data'"  id='z'  >
          <div class='tab-listcontent'>
            <div class="btnimg "><img src="../../assets/index/icon1.png" /></div>
          <h1>数据中心</h1>
          
       </div>   
      </div>
      <div class="tab-list" id='b' v-else  @click="selectTab('data')">
          <div class='tab-listcontent'>
            <div class="btnimg"><img src="../../assets/index/icon1.png" /></div>
          <h1>数据中心</h1>
          
       </div>   
      </div> -->
       <div class="tab-list"  v-if="currentPage == 'data'"  id='z'  >
          <div class='tab-listcontent'>
            <div class="btnimg "><img src="../../assets/index/icon1.png" /></div>
          <h1>数据中心</h1>
          
       </div>   
      </div>
      <div class="tab-list" id='b' v-else @click="selectTab('data')" >
          <div class='tab-listcontent'>
            <div class="btnimg "><img src="../../assets/index/icon1.png" /></div>
          <h1>数据中心</h1>
          
       </div>   
      </div>
         <!-- <div class="tab-list" v-if="currentPage == 'data'"   id='z' >
          <div class='tab-listcontent'>
            <div class="btnimg juhe"><img src="../../assets/index/icon1.png" /></div>
          <h1>数据中心</h1>
          
       </div>   
      </div>
        <div class="tab-list"  v-else   id='b'   @click="selectTab('data')" >
          <div class='tab-listcontent'>
            <div class="btnimg"><img src="../../assets/index/icon1.png" /></div>
          <h1>数据中心</h1>
          
       </div>   
        </div> -->
         
        <div class="tab-list"  v-if=" currentPage == 'workbench' || currentPage == 'cae'
            " id='z' @click="selectTab('data')"  >
          <div class='tab-listcontent'>
            <div class="btnimg "><img src="../../assets/index/icon2.png" /></div>
          <h1>聚合仿真</h1>
          
       </div>   
      </div>
       
      <div v-else class="tab-list" id='b'  @click="selectTab('workbench')">
          <div class='tab-listcontent'>
            <div class="btnimg "><img src="../../assets/index/icon2.png" /></div>
          <h1>聚合仿真</h1>
          
       </div>   
      </div>
        <div class="tab-list"  v-if="currentPage == 'design'"  id='z'  >
          <div class='tab-listcontent'>
            <div class="btnimg "><img src="../../assets/index/icon3.png" /></div>
          <h1>设计中心</h1>
          
       </div>   
      </div>
      <div class="tab-list" id='b' v-else @click="selectTab('design')" >
          <div class='tab-listcontent'>
            <div class="btnimg "><img src="../../assets/index/icon3.png" /></div>
          <h1>设计中心</h1>
          
       </div>   
      </div>
      </div>
      <div class="info"> 
        <img class="background" src="../../assets/index/background.png" />
      
      </div>
        <div class="image imgtupian"  @click="xiaoxi()"></div>
    </div>
    <!-- 进入前沿的首页 -->
    <div ref="getFooterHeight" class="footer" v-show="qianyan" >
      <div class="tab">
           <div class="tab-list qiany"  v-if="
              currentPage == 'workbench' ||
              currentPage == 'home'"   id='z'    @click="selectTab('workbench')" >
          <div class='tab-listcontent'>
          <h1>云求解器</h1>
          
       </div>   
      </div>
         <div class="tab-list qiany" id='b'  v-else  @click="selectTab('workbench')" >
          <div class='tab-listcontent'>
          <h1>云求解器</h1>
          
       </div>   
      </div>
        <div class="tab-list qiany"   v-if="currentPage == 'guanyuwe'"   id='z'     @click="selectTab('guanyuwe')">
          <div class='tab-listcontent'>
          <h1>关于我们</h1>
             
      </div>
      </div>
         <div class="tab-list qiany" v-else  id='b'  @click="selectTab('guanyuwe')">
           <div class='tab-listcontent'>
          <h1>关于我们</h1>
             
      </div>
          
       </div>   
       
         <div class="tab-list qiany" id='b' >
          <div class='tab-listcontent'>
          <h1>云前处理</h1>
          
       </div>   
      </div>
      </div>
      <div class="info">
       <img class="background" src="../../assets/index/background.png" />
      
      </div>
        <div class="image imgtupian"  @click="xiaoxi()"></div>
    </div>
    <Workbench
      :workbench-config="workbenchConfig"
      @putWorkbench="getWorkbench"
    />
  </div>

</template>

<script>
 import Workbench from './components/Workbench'
import { request } from '@/utils/request'

export default {
  name: 'IndexLayout',
  components: { Workbench},
  data() {
    return {
      currentPage: 'home',
      visible: false,
      qianyan:false,
      xigong:false,
      workbenchConfig: {
        isShow: false,
        currentPage: '',
        dataList: [],
      },
    }
  },
    watch: {
    $route: {
      handler: function (route) {
   
      },
    },
  },
  created() {
    const path = this.$route.path
     this.qianyan=true;
 // 判断当前跳入的是哪个页面
  // if((path.indexOf('workbench')>0 && path.indexOf('my-workbench')<0 ) ){
  //   this.qianyan=true;
  //   this.xigong=false;
  // } else{
  //   this.qianyan=false;
  //    this.xigong=true;
  //   //     this.qianyan=true;
  //   // this.xigong=false;
  // }
  
 

    let pathArr = path.split('/');
    if (pathArr.length == 3 && pathArr[2]) {
      this.currentPage = pathArr[2]
    } else {
      this.currentPage = 'home'
    }
    if (path === '/' || path === '/indexLayout' || path === '/indexLayout/') {
      this.$router.replace({ path: '/indexLayout/' + this.currentPage })
    }
  },
  mounted() {
    //   let _this = this
    // if (_this.$route.path.indexOf('/indexLayout') != -1) {
    //   setTimeout(() => {
    //     _this.getContainerHeright()
    //   }, 100)

    //   window.addEventListener('resize', function () {
    //     _this.getContainerHeright()
    //   })
    // }
  },
  methods: {
    //  getContainerHeright() {
    //   this.containerHeight =
    //     this.$refs.getIndexHeight.clientHeight -
    //     this.$refs.getFooterHeight.clientHeight +
    //     'px'
    // },
   xiaoxi(){
     console.log(111);
     var tempwindow=window.open('_blank');
      tempwindow.location='https://www.xiright.com/';
    },
    // 切换tab
    selectTab(router) {
   console.log(router);
      if (router == 'workbench'||router == 'home') {
        const params = {
          transCode: 'C00038',
        }
        request(params)
          .then((res) => {;
            let id=res.rows[0].platformId;
            let pretreatment=res.rows[0].preprocessDisplayStyle;
            let solver=res.rows[0].cfdDisplayStyle;
            sessionStorage.setItem("id",id);
             sessionStorage.setItem("pretreatment",pretreatment);
              sessionStorage.setItem("pretreatment",solver);
            if(this.qianyan==true){
              this.$router.replace({
                path: '/indexLayout/workbench',
                // query: {id, pretreatment, solver },
              })
            }else{

          this.$router.replace({
                path: '/indexLayout/workbench',
                // query: {id, pretreatment, solver },
              })
            // this.workbenchConfig = {
            //   isShow: true,
            //   currentPage: this.$store.getters.workbench,
            //   dataList: res.rows,
            // }
              }
          })
          .catch((err) => {})
      }else if(router=='guanyuwe'){
         this.$router.replace({
                path: '/indexLayout/guanyuwe',
              })

      }
       else {
        this.$router.replace({ path: '/indexLayout/' + router })

      }
       
    },
    getWorkbench(data) {
      this.workbenchConfig.isShow = false
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.index {
  .container {
    @include w_h();
  }
   .btnimg{
           width:30%;
          // height: w_h();
        }
        .sheji{
          width: 28.3%;
        }
        .juhe{
             width:17%;
        }
  .footer {
    @include w_h(100%);
    position: relative;
    padding:8.5px 6px;
    background: #222020;
    overflow: hidden;
    padding-bottom: 35px;
    .tab {
      @include w_h();
      @include flex(flex-start);
      position: relative;
      z-index: 1;
      .tab-list {
        @include w_h(28.2%);
        overflow: hidden;
        // background:url(../../assets/index/b.png) no-repeat center;
        margin-right: 5px;
        transition: all 0.3s;
        &:hover {
          cursor: pointer;
          transform: translateY(-5px);
        }
        img {
          @include w_h();
        }
       
        .tab-listcontent{
             display: flex;
            justify-content: center;
            align-items: center;
                padding: 4%;
           h1{
             color: #fff;
          font-size:3.2vh;
          font-weight: 500;
          font-family: '黑体';
        }
       
        }
      }
      .qiany{
        padding: 2.07%;
      }
      #b{
        background:url(../../assets/index/b.jpg) no-repeat center;
      }
      #z{
        background:url(../../assets/index/z.jpg) no-repeat center;
      }
    }
    .info {
      @include position(absolute, auto, 0, auto, 0, 0);
      height: calc(100% - 20px);
      .background {
        @include w_h(auto, 100%);

      }
     
    //    .image {
    //    // @include position(absolute, 25%, auto, auto, 5%, 0);
    //       position: absolute;
    //       top: 30%;
    //       bottom: auto;
    //       left: auto;
    //       right: 6%;
    //       z-index: 0;
    //       width: 41%;
    //       height: 38px;
    //   //  @include w_h(45%);
    //   &:hover{
    //       background: url("../../assets/index/copyright.png") no-repeat;
    //               background-size: 100%;
    // //  -webkit-background-size: cover;
    // // -o-background-size: cover;  
    //    background-position: center 0;
    //   }
    //   }
    //   .imgtupian{ background: url("../../assets/index/copyright1.png") no-repeat ;
    //    background-size: 100%;
    // //  -webkit-background-size: cover;
    // // -o-background-size: cover;  
    //    background-position: center 0;
    //   }
      
    }
  }
}
 .image {
         position: absolute;
        top: 41%;
        bottom: auto;
        left: auto;
        right: 2%;
        z-index: 1;
        width: 11.7%;
        height: 38px;
      &:hover{
       background: url("../../assets/index/copyright.png") no-repeat;
       background-size: 100%;
       background-position: center 0;
      }
      }
      .imgtupian{ 
        cursor: pointer;
       background: url("../../assets/index/copyright1.png") no-repeat ;
       background-size: 100%;
       background-position: center 0;
      }
.title {
  @include flex();
  font-size: 18px;
  font-weight: 700;
  color: $color_3;
  .operation {
    font-size: 24px;
    color: $color_6;
    transition: all 0.3s;
    &:hover {
      cursor: pointer;
      color: $color_3;
    }
  }
}
.content {
  padding: 15px 5px;
  max-height: 300px;
  overflow: auto;
  p {
    padding: 5px 0;
    font-size: 16px;
    color: $color_3;
    font-weight: 600;
    transition: all 0.3s;
    &.on {
      color: $color_on;
    }
    &:hover {
      color: $color_on;
      cursor: pointer;
    }
  }
}
</style>
