/*cae*/
<template>
  <div class="cae">
    <div class="tab">
      <div
        :class="[
          'tab-list',
          'tab-before',
          currentPage === 'pretreatment' ? 'tab-on' : '',
        ]"
        @click="selectTab('pretreatment')"
      >
        前处理
      </div>
      <div class="logo">
        <img src="../../../assets/sourceFile/logo/qy-logo.png" />
      </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="solver">
        <div class="solver-list">
          <img src="../../../assets/sourceFile/workbench/acoustics-bg.png" />
          <div class="mask">
            <div class="desc">
              <div class="icon-outer">
                <div class="icon-inner">
                  <svg-icon icon-class="acoustics" />
                </div>
              </div>
              <span>声学分析</span>
            </div>
          </div>
          <div class="drawer">
            <div class="title">
              <span>声学分析</span> <svg-icon icon-class="acoustics" />
            </div>
            <div class="case">
              <div class="case-list" @click="toCase('CAALab')">
                <p>CAALab</p>
                <span>声学比拟法气动噪声仿真软件</span>
              </div>
            </div>
          </div>
        </div>
        <div class="solver-list">
          <img src="../../../assets/sourceFile/workbench/optics-bg.png" />
          <div class="mask">
            <div class="desc">
              <div class="icon-outer">
                <div class="icon-inner">
                  <svg-icon icon-class="optics" />
                </div>
              </div>
              <span>光学分析</span>
            </div>
          </div>
          <div class="drawer">
            <div class="title">
              <span>光学分析</span> <svg-icon icon-class="optics" />
            </div>
          </div>
        </div>
        <div class="solver-list">
          <img src="../../../assets/sourceFile/workbench/physics-bg.png" />
          <div class="mask">
            <div class="desc">
              <div class="icon-outer">
                <div class="icon-inner">
                  <svg-icon icon-class="physics" />
                </div>
              </div>
              <span>多物理场分析</span>
            </div>
          </div>
          <div class="drawer">
            <div class="title">
              <span>多物理场分析</span> <svg-icon icon-class="physics" />
            </div>
            <div class="case">
              <div class="case-list" @click="toCase('Multi-SimLab')">
                <p>Multi-SimLab</p>
                <span>通用多物理场耦合仿真软件</span>
              </div>
              <div class="case-list" @click="toCase('HFSILab')">
                <p>HFSILab</p>
                <span>混合网格飞行器动弹性仿真软件</span>
              </div>
              <div class="case-list" @click="toCase('SFSILab')">
                <p>SFSILab</p>
                <span>多块拼接网格飞行器动弹性仿真软件</span>
              </div>
              <div class="case-list" @click="toCase('OverFSILab')">
                <p>OverFSILab</p>
                <span>多块重叠网格飞行器动弹性仿真软件</span>
              </div>
            </div>
          </div>
        </div>
        <div class="solver-list">
          <img src="../../../assets/sourceFile/workbench/radiation-bg.png" />
          <div class="mask">
            <div class="desc">
              <div class="icon-outer">
                <div class="icon-inner">
                  <svg-icon icon-class="radiation" />
                </div>
              </div>
              <span>辐射分析</span>
            </div>
          </div>
          <div class="drawer">
            <div class="title">
              <span>辐射分析</span> <svg-icon icon-class="radiation" />
            </div>
          </div>
        </div>
        <div class="solver-list">
          <img src="../../../assets/sourceFile/workbench/structure-bg.png" />
          <div class="mask">
            <div class="desc">
              <div class="icon-outer">
                <div class="icon-inner">
                  <svg-icon icon-class="structure" />
                </div>
              </div>
              <span>结构分析</span>
            </div>
          </div>
          <div class="drawer">
            <div class="title">
              <span>结构分析</span> <svg-icon icon-class="structure" />
            </div>
            <div class="case">
              <div class="case-list" @click="toCase('fem')">
                <p>FEMLab</p>
                <span>有限元法结构力学仿真软件</span>
              </div>
              <div class="case-list" @click="toCase('Bladesign')">
                <p>Bladesign</p>
                <span>有限元法梁结构仿真软件</span>
              </div>
              <div class="case-list" @click="toCase('MPMLab')">
                <p>MPMLab</p>
                <span>物质点法结构力学仿真软件</span>
              </div>
            </div>
          </div>
        </div>
        <div class="solver-list">
          <img
            src="../../../assets/sourceFile/workbench/electromagnetism-bg.png"
          />
          <div class="mask">
            <div class="desc">
              <div class="icon-outer">
                <div class="icon-inner">
                  <svg-icon icon-class="electromagnetism" />
                </div>
              </div>
              <span>电磁分析</span>
            </div>
          </div>
          <div class="drawer">
            <div class="title">
              <span>电磁分析</span> <svg-icon icon-class="electromagnetism" />
            </div>
          </div>
        </div>
        <div class="solver-list">
          <img src="../../../assets/sourceFile/workbench/fluid-bg.png" />
          <div class="mask">
            <div class="desc">
              <div class="icon-outer">
                <div class="icon-inner">
                  <svg-icon icon-class="fluid" />
                </div>
              </div>
              <span>流体分析</span>
            </div>
          </div>
          <div class="drawer">
            <div class="title">
              <span>流体分析</span> <svg-icon icon-class="fluid" />
            </div>
            <div class="case">
              <div class="case-list" @click="toCase('hcfd')">
                <p>HCFDLab</p>
                <span>混合网格空气动力学仿真软件</span>
              </div>
              <div class="case-list" @click="toCase('SCFDLab')">
                <p>SCFDLab</p>
                <span>多块拼接网格空气动力学仿真软件</span>
              </div>
              <div class="case-list" @click="toCase('OverCFDLab')">
                <p>OverCFDLab</p>
                <span>多块重叠网格空气动力学仿真软件</span>
              </div>
              <div class="case-list" @click="toCase('ChCFDLab')">
                <p>ChCFDLab</p>
                <span>多块拼接网格热化学非平衡流仿真软件</span>
              </div>
              <div class="case-list" @click="toCase('ICFDLab')">
                <p>ICFDLab</p>
                <span>混合网格气动、水动、多相流仿真软件</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { request } from '@/utils/request'
export default {
  name: 'Cae',
  components: {},
  data() {
    return {
      currentPage: 'solver',
    }
  },
  created() {},
  methods: {
    selectTab(index) {
      this.currentPage = index
    },
    toCase(str) {
      let loginStatus = this.$store.getters.loginStatus
      let userType = this.$store.getters.userType
      if (loginStatus) {
        if (userType == 1)
          return this.$message.warning('只有子账户或个人账户才能进入！')
        if (str == 'hcfd' || str == 'fem') {
          const params = {
            transCode: 'A00006',
          }
          request(params)
            .then((res) => {
              this.$message.success(' 即将进入' + str)
              setTimeout(() => {
                window.open(
                  this.$store.getters.cfdUrl +
                    '?authCode=' +
                    res.authCode +
                    '&projectType=' +
                    str,
                  '_blank'
                )
              }, 1000)
            })
            .catch((err) => {})
        } else {
          return this.$message.info(str + ' 正在开发中...')
        }
      } 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';
.cae {
  // @include w_h(100%, 100%);
  @include w_h(100%);
  font-size: 12px;
  color: $color_b;
  padding: 0 $pad;
  background: #181818;
  .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%);
      img {
        @include w_h(auto, 100%);
      }
    }
  }
  .container {
    // @include w_h(100%, calc(100% - 60px));
    @include w_h(100%);
    padding: 20px 0 10px;
    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%);
        margin: 0 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%;
              .svg-icon {
                margin: 0;
              }
            }
          }
        }
        .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;
          }
          .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);
              }
            }
          }
        }
        &:hover .mask {
          opacity: 0;
        }
        &:hover .drawer {
          opacity: 1;
        }
      }
    }
  }
}
</style>
