/*my-workbench*/
<template>
  <div class="my-workbench">
    <div
      id="bgCanvas"
      :style="{
        backgroundImage: 'url(' + backgroundFileid + ')',
      }"
    ></div>
    <!-- <el-image :src="backgroundFileid" :fit="'contain'"></el-image> -->
    <!-- <img :src="backgroundFileid" /> -->
    <div class="content">
      <div class="item left">
        <div
          class="list"
          v-for="(list, index) in dataList"
          :key="index"
          v-if="index % 2 == 0"
          @click="toCase(list.name, list.state, list.number)"
        >
          <div class="desc">
            <img :src="getImage(list.cfdPicId)" />
            <p>{{ list.remark }}</p>
          </div>
          <img :src="getImage(list.platformLogoPicId)" />
        </div>
      </div>
      <div class="head-name">
        <div class="background">
          <img src="../../../assets/index/head.png" />
        </div>
        <div class="stars">
          <img
            v-for="(item, index) in starLevel"
            :key="index"
            :style="`transform: rotateZ(${
              startDeg + 25 * index
            }deg) translateY(58px)`"
            src="../../../assets/index/star.png"
          />
        </div>
        <div class="head">
          <img
            v-if="headProfile && headProfile != 'undefined'"
            :src="headProfile"
          />
          <img v-else src="../../../assets/index/default-head.jpg" />
        </div>
        <p>{{ name }}</p>
      </div>
      <div class="item right">
        <div
          class="list"
          v-for="(list, index) in dataList"
          :key="index"
          v-if="index % 2 != 0"
          @click="toCase(list.name, list.state, list.number)"
        >
          <img :src="getImage(list.platformLogoPicId)" />
          <div class="desc">
            <img :src="getImage(list.cfdPicId)" />
            <p>{{ list.remark }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { request, getImage } from '@/utils/request'
import { Lines, Stars } from '@/utils/canvas'
export default {
  name: 'Cae',
  components: {},
  data() {
    return {
      currentPage: 'solver',
      dataList: [],
      name: this.$store.getters.name,
      headProfile: '',
      backgroundFileid: getImage(this.$store.getters.backgroundFileid),
      starLevel: 0,
      startDeg: 180, //(starLevel==5:130;starLevel==4:142.5;starLevel==3:155;starLevel==2:167.5;starLevel==1:180;)
    }
  },
  created() {
    this.getUserInfo()
    this.getData()
  },
  mounted() {
    Lines('bgCanvas')
    Stars('bgCanvas')
  },
  methods: {
    getUserInfo() {
      let params = {
        transCode: 'B00001',
      }
      request(params)
        .then((res) => {
          this.$store.dispatch('user/changeState', {
            key: 'name',
            value: res.nickName,
          })
          this.$store.dispatch('user/changeState', {
            key: 'backgroundFileid',
            value: res.backgroundFileid,
          })
          this.name = res.nickName
          this.headProfile = getImage(res.headProfile)
          this.backgroundFileid = getImage(res.backgroundFileid)
          this.starLevel = parseInt(res.starLevel)
          this.startDeg =
            res.starLevel == 5
              ? 130
              : res.starLevel == 4
              ? 142.5
              : res.starLevel == 3
              ? 155
              : res.starLevel == 2
              ? 167.5
              : res.starLevel == 1
              ? 180
              : 180
        })
        .catch((err) => {})
    },
    getData() {
      let params = {
        transCode: 'C00036',
        type: 1,
      }
      request(params)
        .then((res) => {
          this.dataList = res.rows
        })
        .catch((err) => {})
    },
    getImage(id) {
      return getImage(id)
    },
    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)
              setTimeout(() => {
                window.open(
                  this.$store.getters.cfdUrl +
                    '?authCode=' +
                    res.authCode +
                    '&projectType=' +
                    projectType,
                  '_blank'
                )
              }, 1000)
            })
            .catch((err) => {})
        } else {
          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';
.my-workbench {
  position: relative;
  @include w_h(100%, 696px);
  min-height: 378px;
  max-height: 696px;
  background: #222020;
  overflow: hidden;
  #bgCanvas {
    @include position(absolute, 0, 0, 0, 0);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  img {
    @include w_h();
  }
  .el-image {
    @include w_h(100%, 100%);
  }
  .content {
    @include position(absolute, 0, 0);
    @include w_h(100%, 100%);
    @include flex(center);
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: $color_f;
    .item {
      @include w_h(300px, 300px);
      .list {
        @include flex();
        .desc {
          p {
            transition: all 0.3s;
          }
          img {
            @include w_h(auto, 13px);
            transition: all 0.3s;
          }
        }
        &:hover {
          cursor: pointer;
          color: #ee6a74;
          .desc {
            img {
              filter: invert(55%) sepia(100%) contrast(180%) hue-rotate(-60deg);
            }
          }
        }
      }
      img {
        @include w_h(60px);
      }
    }
    .left {
      @include flex(space-between, flex-end);
      flex-direction: column-reverse;
      @include position(relative, 0, 0, auto, -15px);
      .list {
        .desc {
          text-align: right;
        }
      }
    }
    .right {
      @include flex(space-between, flex-start);
      flex-direction: column;
      @include position(relative, 0, 0, auto, 15px);
    }
    .head-name {
      position: relative;
      @include w_h(250px, 250px);
      .background {
        @include w_h(100%, 100%);
        animation: rotate 50s linear infinite;

        img {
          @include w_h(100%);
        }
      }
      .rotate {
        transform: rotate(360deg);
      }
      .stars {
        @include position(absolute, 50%, auto, 50%, 0);
        transform: translate(-50%, -50%);
        @include w_h(20px, 20px);
        border-radius: 50%;
        img {
          @include w_h(16px, 16px);
          position: absolute;
        }
      }
      .head {
        @include w_h(75px, 75px);
        @include position(absolute, 50%, auto, 50%, 0);
        transform: translate(-50%, -50%);
        img {
          @include w_h(100%, 100%);
          // @include position(relative, -2px, auto, 2px, auto);
          border-radius: 50%;
          overflow: hidden;
        }
      }
      P {
        @include position(absolute, 74%, auto, 50%, 0);
        transform: translate(-50%, -50%);
        text-align: center;
      }
    }
  }
}
</style>
