/*workbench*/
<template>
  <div class="workbench">
    <div class="tab" v-show="tab">
      <div
        :class="[
          'tab-list',
          'tab-before',
          currentPage === 'pretreatment' ? 'tab-on' : '',
        ]"
        @click="selectTab('pretreatment')"
      >
        前处理
      </div>
      <div class="logo">
        <img
          :src="dataList[0] ? getImage(dataList[0].platformTitlePicId) : ''"
        />
      </div>
      <div
        :class="[
          'tab-list',
          'tab-after',
          currentPage === 'solver' ? 'tab-on' : '',
        ]"
        @click="selectTab('solver')"
      >
        求解器
      </div>
    </div>
    <!-- <div class="container" v-if="currentPage === 'pretreatment'">
      <h3>前处理</h3>
      <div class="content">敬请期待！</div>
    </div>
    <div class="container" v-if="currentPage === 'solver'"> -->
    <div class="container">
      <div class="solver">
        <div
          :class="[
            'solver-list',
            dataList[0].preprocessDisplayStyle == 2 ||
            dataList[0].cfdDisplayStyle == 2
              ? 'full'
              : '',
          ]"
          v-for="(list, index) in dataList[0] ? dataList[0].kindRows : []"
          :key="index"
        >
          <el-image
            v-if="list.kindId"
            :src="getImage(list.kindId)"
            :fit="fit"
          ></el-image>
          <!-- <img v-if="list.kindId" :src="getImage(list.kindId)" /> -->
          <img
            v-else-if="
              dataList[0].preprocessDisplayStyle == 2 ||
              dataList[0].cfdDisplayStyle == 2
            "
            src="../../../assets/sourceFile/starry-sky.png"
          />
          <img
            v-else
            src="../../../assets/sourceFile/workbench/physics-bg.png"
          />
          <div class="mask">
            <div class="desc">
              <div class="icon-outer">
                <div class="icon-inner">
                  <div class="img" v-if="list.kindPicIconId">
                    <img :src="getImage(list.kindPicIconId)" />
                  </div>
                  <svg-icon v-else icon-class="acoustics" />
                </div>
              </div>
              <span>{{ list.kindName }}</span>
            </div>
          </div>
          <div class="drawer">
            <div class="title">
              <span>{{ list.kindName }}</span>
              <div class="img" v-if="list.kindPicIconId">
                <img :src="getImage(list.kindPicIconId)" />
              </div>
              <svg-icon v-else icon-class="acoustics" />
            </div>
            <div class="case">
              <div
                class="case-list"
                :class="[{'colordisplay':item.state=='2'},'nav4']" 
                v-for="(item, index) in list.cfdRows"
                :key="index"
                @click="toCase(item.name, item.state, item.number)"
              >
                <p>{{ item.name }}</p>
                <span>{{ item.remark }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </div>

</template>

<script>
import { request, getImage } from '@/utils/request'
import { lesseeId} from '@/settings'
export default {
  name: 'Cae',
  components: {},
  data() {
    return {
      currentPage: 'solver',
      platformIds: '',
      pretreatment: '',
      solver: '',
      dataList: [],
      fit: 'fill',
      tab:false,
      displaystyle:false,
    }
  },
  watch: {
    $route: {
      handler: function (route) {
       if (route.query && route.query.type == 'reLogin') {
          this.toLogin()
        }
      },
      immediate: true,
    },
  },
    inject: ['toLogin'],
  created() {

  },
  beforeDestroy() {
    this.$store.dispatch('user/changeState', {
      key: 'workbench',
      value: '',
    })
  },
  mounted(){
this.jiazai();
  },
  methods: {
    // 获取id
  jiazai(){
        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;
          this.platformIds = id;
           this.pretreatment =pretreatment;
           this.solver =solver;
           this.currentPage = solver != 0 ? 'solver' : 'pretreatment';
           this.getData();
          })
          .catch((err) => {})
  },
       // 切换tab
  
    selectTab(index) {
      if (
        (index == 'pretreatment' && this.pretreatment == 0) ||
        (index == 'solver' && this.solver == 0)
      )
        return
      this.currentPage = index
      this.getData()
    },
    getImage(id) {
      return getImage(id)
    },
    getData() {
      const params = {
        transCode: 'C00035',
        platformIds: this.platformIds,
        cfdType:
          this.currentPage == 'solver'
            ? '2'
            : this.currentPage == 'pretreatment'
            ? '1'
            : '', //(1:前处理，2：求解器)
      }
      request(params)
        .then((res) => {
          this.dataList = res.platformRows
          this.$store.dispatch('user/changeState', {
            key: 'workbench',
            value: res.platformRows[0].platformNumber,
          })
        })
        .catch((err) => {})
    },
    toCase(name, state, projectType) {
      let loginStatus = this.$store.getters.loginStatus
      let userType = this.$store.getters.userType
      if (loginStatus) {
        if (state == 1) {
          if (userType == 1)
            return this.$message.warning('只有子账户或个人账户才能进入！')
          const params = {
            transCode: 'A00006',
          }
          request(params)
            .then((res) => {
              this.$message.success(' 即将进入' + name)
               let lesseeId=this.$store.getters.lesseeId;
              setTimeout(() => {
                window.open(
                  this.$store.getters.cfdUrl +
                    '?authCode=' +
                    res.authCode +
                    '&projectType=' +
                    projectType+
                     '&lesseeId=' +
                    lesseeId,
                  '_blank'
                )
              }, 1000)
            })
            .catch((err) => {})
        } else {
          this.colordisplay=true;
          return this.$message.info(name + ' 正在开发中...')
        }
      } else {
        this.$confirm('你还未登录，请登录后再操作, 是否登录?', '提示', {
          confirmButtonText: '登录',
          cancelButtonText: '取消',
          center: true,
          closeOnClickModal: false,
          type: 'warning',
        })
          .then(() => {
            this.$router.replace(`/indexLayout/home?type=reLogin`)
          })
          .catch(() => {
            this.$message.info('已取消！')
          })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.workbench {
  // @include w_h(100%, 100%);
  @include w_h(100%);
  font-size: 12px;
  color: $color_b;
  padding: 0 $pad;
  background: #181818;
  overflow: hidden;
  .tab {
    @include flex(space-between, flex-start);
    overflow: hidden;
    &-before {
      position: relative;
      background: linear-gradient(92deg, #181818 0%, #464646 68%);
      &::after {
        content: '';
        position: absolute;
        top: 0px;
        right: -40px;
        z-index: 0;
        @include w_h(40px, 40px);
        background: #464646;
      }
    }
    &-after {
      position: relative;
      background: linear-gradient(92deg, #454545 33%, #181818 100%);
      &::before {
        content: '';
        position: absolute;
        top: 0px;
        left: -40px;
        z-index: 0;
        @include w_h(40px, 40px);
        background: #464646;
      }
    }
    &-list {
      @include w_h(45%, 40px);
      line-height: 40px;
      text-align: center;

      &:hover {
        cursor: pointer;
        color: $color_on;
        border-bottom: 1px solid $color_on;
      }
    }
    &-on {
      color: $color_on;
      border-bottom: 1px solid $color_on;
    }
    .logo {
      @include w_h(240px, 60px);
      @include flex(center);
      padding: 10px;
      position: relative;
      z-index: 1;
      background: linear-gradient(0deg, #575757 0%, #181818 100%);
      box-shadow: 1px 4px 33px 6px rgba(0, 0, 0, 0.28);
      -webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
      clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
      font-size: 14px;
      color: $color_f;
      img {
        @include w_h(auto, 100%);
      }
    }
  }
  .container {
    // @include w_h(100%, calc(100% - 60px));
    @include w_h(100%);
    min-height: 378px;
    max-height: 720px;
    padding: 21px 0 12px;
    h3 {
      font-size: 18px;
      line-height: 40px;
    }
    .content {
      margin-top: 150px;
      @include w_h(100%, 408px);
      font-size: 60px;
      text-align: center;
    }
    .solver {
      @include w_h(100%,100%);
      @include flex(flex-start);
      &-list {
        // @include w_h(13.8%, 92%);
        min-width: 127px;
        min-height: 300px;
        margin: 26px 5px;
        @include w_h(13.8%);
        position: relative;
        img {
          @include w_h(100%, 100%);
        }
        .mask {
          @include position(absolute, 0, 0, 0, 0, 1);
          @include flex(center);
          background: rgba(0, 0, 0, 0.5);
          opacity: 1;
          transition: all 0.8s;
          .desc {
            font-size: 12px;
            color: $color_f;
            text-align: center;
            .icon-outer {
              margin: 10px auto;
              @include w_h(46px, 46px);
              @include flex(center);
              background: linear-gradient(180deg, #6fc8f2 0%, #005277 100%);
              border-radius: 50%;
            }
            .icon-inner {
              @include w_h(38px, 38px);
              @include flex(center);
              font-size: 16px;
              background: linear-gradient(180deg, #56c0f1 0%, #00a0e9 100%);
              box-shadow: 0 0 5px 0 #6fc8f2;
              border-radius: 50%;
              .img {
                @include w_h(16px, 16px);
                img {
                  @include w_h();
                }
              }
            }
          }
        }
        .drawer {
          @include position(absolute, auto, 0, 0, 0, 1);
          @include w_h();
          max-height: 100%;
          color: $color_f;
          opacity: 0;
          transition: all 0.8s;
          overflow: auto;
          .title {
            @include w_h(100%, 40px);
            @include flex();
            padding: 0 15px;
            font-size: 16px;
            background: $color_on;
            .img {
              @include w_h(16px, 16px);
              img {
                @include w_h();
              }
            }
          }
          .case {
            @include w_h();
            max-height: calc(100% - 40px);
            overflow-y: auto;
            overflow-x: hidden;
            &-list {
              padding: 8px 15px;
              font-size: 12px;
              background: rgba(246, 100, 31, 0.8);
              transition: all 0.8s;
              p {
                font-size: 14px;
                margin-bottom: 5px;
              }
              span {
                line-height: 16px;
              }
              &:hover {
                cursor: pointer;
                color: $color_3;
                background: rgba(255, 255, 255, 0.8);
              }
            }
            .colordisplay{
                &:hover{
                    cursor: pointer;
                    color:rgba($color: #333333, $alpha: 0.4); 
                   }
            
            }
          }
        }
        &:hover .mask {
          opacity: 0;
        }
        &:hover .drawer {
          opacity: 1;
        }
      }
      .full {
        @include w_h(100%, 100%);
        @include flex(center);
      }
    }
  }
}
.colordisplay{
color: rgba($color: #ffffff, $alpha: 0.4);
} 

.index {
  .container {
    @include w_h();
  }
  .footer {
    @include w_h(100%);
    position: relative;
    padding: 6px;
    background: #222020;
    overflow: hidden;
    .tab {
      @include w_h();
      @include flex(flex-start);
      position: relative;
      z-index: 1;
      .tab-list {
        @include w_h(28.2%);
        margin-right: 5px;
        transition: all 0.3s;
        &:hover {
          cursor: pointer;
          transform: translateY(-5px);
        }
        img {
          @include w_h();
        }
      }
    }
    .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);
        @include w_h(45%);
      }
    }
  }
}
.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>
