<template>
  <div id="OM" class="OM" :class="{'slider':isSlider,'sliderLeft':sliderLeft}">
    <div class="show">
      <div class="tipPic" :class="{'show-active':isActive}" @click="toggleClick" />
    </div>
    <div>
      <div class="item" style="text-align:center;font-size: 14px" @click="tofillOM">
        <div class="omlist">
          <img style="width:100%" src="../../assets/images/devops1.png" alt="">
        </div>
        报障
      </div>
      <div class="item" style="text-align:center;font-size: 14px" @click="toList">
        <div class="omlist">
          <img style="width:100%" src="../../assets/images/devops2.png" alt="">
        </div>
        记录
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSlider: true,
      sliderLeft: true,
      isActive: true
    }
  },
  computed: {
    userInfo() {
      const user = JSON.parse(sessionStorage.getItem('user') || '{}')
      return {
        userId: this.$store.state.user.keys,
        nickname: this.$store.state.user.name,
        username: this.$store.state.user.username,
        unitName: this.$store.state.user.unitName,
        ...user
      }
    }
  },
  methods: {
    hide() {
      this.isSlider = true
      this.sliderLeft = false
    },
    toggleClick() {
      this.isActive = !this.isActive
      if (this.sliderLeft) {
        this.isSlider = !this.isSlider
        this.sliderLeft = false
      } else {
        this.sliderLeft = !this.sliderLeft
        this.isSlider = false
      }
    },
    tofillOM() {
      const { nickname, username, userId, unitName } = this.userInfo
      if (!userId) {
        this.$message.warning('请先登录')
        return
      }
      const source = 10
      window.open(`${process.env.VUE_APP_DEVOPS}/#/auth?info=${btoa(encodeURI(JSON.stringify({ userId, username: username || '', name: nickname || unitName || '游客', ts: Date.now() })))}&source=${source}&roleType=outer&redirect=/repair/outerAdd`)
    },
    toList() {
      const { nickname, username, userId, unitName } = this.userInfo
      if (!userId) {
        this.$message.warning('请先登录')
        return
      }
      const source = 10
      window.open(`${process.env.VUE_APP_DEVOPS}/#/auth?info=${btoa(encodeURI(JSON.stringify({ userId, username: username || '', name: nickname || unitName || '游客', ts: Date.now() })))}&source=${source}&roleType=outer&redirect=/repair/outer`)
    }
  }
}
</script>

<style lang="scss" scoped>

.OM {
  .omlist {
    width: 40px;
    height: 40px;
    margin: 10px  auto;
    font-size: 13px;
    img {
      width: 100%;
    }
  }
  width: 80px;
  height: auto;
  background: #fff;
  padding: 10px 0;
  position: fixed;
  margin-right: 42px;
  border-radius: 20px;
  right: -100px;
  bottom: 150px;
  cursor: pointer;
  box-shadow: 8px 8px 20px 0 rgba(0, 0, 0, 0.1);
  z-index: 1000;

  ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .el-card__body {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .show {
    width: 45px;
    height: 100%;
    position: absolute;
    left: -35px;
    top: 0;
    display: flex;
    align-items: center;
    z-index: 9999;
    transform: rotate(0);

  }

  .tipPic {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: url('../../assets/images/show.png');
    background-size: 100%;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  }

  .tipPic:hover {
    background: url('../../assets/images/active.png');
    background-size: 100%;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .show-active {
    transform: rotate(180deg);
  }

  .item{
    margin-bottom: 10px;
  }
  .item:last-child{
    margin-bottom: 0px;
  }
}
.slider {
  animation: mymove 1s ease-in-out 0s 1 alternate forwards;
}

.sliderLeft {
  animation: moveLeft 1s ease-in-out 0s 1 alternate forwards;
}

@keyframes mymove {
  0% {
    right: 0%;
  }

  100% {
    right: -100px;

  }
}

@-webkit-keyframes mymove {
  0% {

    /* right:6%; */
    right: 0%;
  }

  100% {
    right:-100px;
    /* right: -6%; */
  }
}

@keyframes moveLeft {
  0% {
    right: -100px;
  }
  100% {
    right: 0;
  }
}

@-webkit-keyframes moveLeft {
  0% {
    right: -100px;
  }

  100% {
    right: 0;
  }
}
</style>
