<template>
  <div class="scal">
      <div class="toolbar-part-detail lbg_color1 ">
         <!-- <div class="toolbar-content"> -->
             <!-- <div class="imgcontent">
                 
                    
             </div> -->
        
             <el-tabs  :tab-position="tabPosition" v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="几何建模" name="one"><geometry></geometry></el-tab-pane>
          <el-tab-pane label="网格划分" name="two"> <meshindex></meshindex></el-tab-pane>
          <el-tab-pane label="几何与单元属性" name="three"> <jiheorclass></jiheorclass></el-tab-pane>
          <el-tab-pane label="材料属性" name="four">  <Materials></Materials></el-tab-pane>
           <el-tab-pane label="接触与连接" name="five"><touch></touch></el-tab-pane>
          <el-tab-pane label="初始条件" name="six">  <initial></initial></el-tab-pane>
          <el-tab-pane label="边界条件" name="seven"> <boundary></boundary></el-tab-pane>
          <el-tab-pane label="网格自适应" name="eight"> <Meshauto></Meshauto>  </el-tab-pane>
           <el-tab-pane label="载荷工况" name="nine"> <loadcase></loadcase></el-tab-pane>
          <el-tab-pane label="作业任务" name="ten">      <zuoye></zuoye></el-tab-pane>
          <el-tab-pane label="结果查看" name="eleven">    <result></result></el-tab-pane>
          <el-tab-pane label="工具箱" name="twelve"><toolindex></toolindex></el-tab-pane>
            <el-tab-pane label="操作" name="thirteen"><caozuo ></caozuo></el-tab-pane>
           
        </el-tabs>
        <div class="textselsect">
         <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="value1" placeholder="请选择">
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select> 
          </div>
         </div> 
    <div class="content">
         
     <transition name="slide-fade">
    <div class="left lbg_color3" v-show="showtrue">   </div>
   </transition>
    <div class="right lbg_color2">
        <div class="part-panel-collapse-handle lbg_color3" @click="showtrue=!showtrue">
            <i class="el-icon-arrow-left"></i>
  </div>
    </div>
    </div>
  </div>
</template>
<script>






// 引入组件
import geometry from './geometry/index.vue'
import meshindex from './meshindex/index.vue'
import jiheorclass from './Geometryandper/index.vue'
import Materials from './Materials/index.vue'
import touch from './touch/index.vue'
import initial from './initial/index.vue'
import boundary from './boundary/index.vue'
import Meshauto from './Meshauto/index.vue'
import loadcase from './loadcase/index.vue'
import zuoye from './zuoye/index.vue'
import result from './result/index.vue'
import toolindex from './tool/index.vue'
import caozuo from './caozuo/index.vue'
export default {
  components:{geometry,meshindex,jiheorclass,Materials,touch,initial,boundary,Meshauto,loadcase,zuoye,result,caozuo,toolindex},
  data() {
    return {
        // current:0,
      activeName: 'one',
        tab:[
            {index:0,name:"几何建模"},
            {index:1,name:"网格划分"},
            {index:2,name:"几何与单元属性"},
            {index:3,name:"材料属性"},
            {index:4,name:"接触与连接"},
            {index:5,name:"初始条件"},
            {index:6,name:" 边界条件"},
            {index:7,name:"网格自适应"},
            {index:8,name:"载荷工况"},
            {index:9,name:"作业任务"},
            {index:10,name:"结果查看"},
            {index:11,name:" 工具箱"},
            ],
        tabPosition: 'bottom',
        showtrue:true,
           drawer: true,
        direction: 'rtl',
  options:[
        {value: '0',label: 'FEMLab(结构力学)'},
        { value: '1',label: 'MPMLab(结构力学)'},
        { value: '3',label: 'Bladesign(结构力学)'},
        {value: '4',label: 'Marc(结构力学)'},
        { value: '5',label: 'Abaqus(结构力学)'},
        { value: '6',label: 'Natran(结构力学)'},
        { value: '7', label: 'ANSYS-FLUENT(结构力学)'},
        {value: '8',label: 'STAR_CCM(流体力学)'},
        {value: '9', label: 'Pointwise(流体力学)' },
        {value: '10',label: 'ANSYS_ICEMCFD(流体力学)' }
        ],
        value:'0',
  options1:[
    {value: '0',label: '结构分析'},
    { value: '1',label: '传热分析'},
    {value: '2',label: '热/电耦合'},
    { value: '3',label: '电/热耦合'},
    {value: '4',label: '电/热/力耦合'},
    { value: '5',label: '静电场分析'},
    {value: '6',label: '静电场/结构耦合'},
    { value: '7',label: '压力分析'},
    {value: '8',label: '热/压力'},
    { value: '9',label: '声场分析'},
    {value: '10',label: '声场/结构耦合'},
    { value: '11',label: '静磁场分析'},
    {value: '12',label: '静磁/热'},
    { value: '13',label: '静磁/结构'},
    {value: '14',label: '电磁场分析'},
    { value: '15',label: '电磁/热'},
    {value: '16',label: '电磁/热/结构'},
    { value: '17',label: '流体分析'},
    {value: '18',label: '流体/传热'},
    { value: '19',label: '流固耦合分析'},
    {value: '20',label: '流体/传热/结构耦合分析'},
    { value: '21',label: '轴承分析'},
    {value: '22',label: '扩散分析'},
    { value: '23',label: '扩散/热分析'},
    {value: '24',label: '扩散结构分析'},
    { value: '25',label: '土壤分析'},

        ],
        value1:'0',
    }


},
methods:{
        hide(){
            this.showtrue=!this.showtrue;
          },
        handleClick(tab, event) {

        }
      }
}
</script>
<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.scal{
.toolbar-part-detail{
// background-color: #757070;

.toolbar-content{
    padding: 5px;
    border-top:1px solid #999;
    // border-bottom:1px solid #999;
       .imgcontent{
    display: flex;
  
   .item{
       padding-right: 5px;

   }
}
}
}
html,body{
    width: 100%;
    height: 100%;
}
.el-tabs__content{
  padding: 0 5px;
}
.content{
    display: flex;
    height: 100%;
    position: relative;
    .left{
    width: 200px;
    height: 100%;
    flex-direction: column;
    padding: 15px;
    position: relative;
    height: 88vh;
   box-shadow: 2px 0 15px 0 rgb(232, 232, 232);
    -webkit-box-shadow: 2px 0 15px 0 rgb(232, 232, 232);
    -moz-box-shadow: 2px 0 15px 0 rgb(232, 232, 232);
             
    }
     .part-panel-collapse-handle {
    position: absolute;
    // right: -56px;
    left: -38px;
    top: 44%;
    width: 94px;
    height: 0;
    cursor: pointer;
    text-align: center;
    border-width: 0 20px 18px;
    line-height: 18px;
    border-style: none solid solid;
    transform: rotateZ(
90deg);
    font-size: 19px;
}
.lbg_color3 i:before{
  transform: rotateZ(
0);
}
    .right{
        padding: 15px;
        flex: 1;
         height: 100%;
          height: 88vh;
          position: relative;
        
    }
.imgcontent img{
    font-size: 16px;
}
    .slide-fade-enter-active {
  transition: all .3s ease;
}
}
.tablist{
      border-bottom:1px solid #999;
      padding: 3px 0;
}
.tablist .tabitem{
    color: #b6b6b6;
    font-size: 16px;
    padding-right: 5px;
    cursor: pointer;
   &.current{
       color: #Fff ;
   }
}
.el-tabs--bottom .el-tabs__header.is-bottom{
  margin: 0;
}
.imgcontent{
      padding: 0 15px;
    }
    .el-tabs__item{
      height: 30px;
      line-height: 30px;
      padding: 0 8px;
      font-size: 12px;
    }
.imgzong{
    display: flex;
    padding-top: 4px;
      flex-wrap:wrap;
  .el-image{
      width: 24px;

  }  
}

.imgzong .item1{
    padding-right: 4px;
    padding: 4px 4px ;
 
}
.shu{
    padding: 4px 10px;
    color: #666;

}
.el-tabs__item{
    height: 25px;
    line-height: 25px;
    padding: 0 6px;
    color:#b6b6b6
}
}
</style>
<style>

  .item1 .el-image{
    width: 24px;
    cursor: pointer;
  }
.el-tabs--border-card{
    background-color: none;
}
.baoshi{
    margin-top: 4px;
    color: #b6b6b6;
}

.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
  background-color: #757070;

}
.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
    border-top:1px solid #757070;
  border-bottom:none;
  border-top: 1px solid transparent;
}
.el-dialog__header{
      padding: 15px 20px 10px;
    background: #757070;
    color: #fff
}
.el-button--primary{
   background: #757070;
  border-color: #757070;
}
.textselsect{
      position: absolute;
    z-index: 9;
    bottom: 1px;
    right: 7px;
    z-index: 9;
}
 .dialoglocation{
    position: absolute;
    right:0px;
    top: -15vh;
  }
  .el-dialog__wrapper{
          top: 15vh;
  }
</style>
<style lang="scss" scoped>
 /deep/.toolbar-part-detail{
  position: relative;
}
.el-form-item{
      margin-bottom: 5px;
}
</style>