<template>
  <div
    :class="{
      feedBack: true,
      'feedBack-in': show,
      'feedBack-out': show === false,
    }"
    @click.stop="open"
    v-if="isShow"
  >
    <i class="el-icon-chat-dot-square icon"></i>
    <transition name="fade">
      <div class="checkBox" v-show="visible" @click.stop="() => false">
        <span @click.stop="openFeedBack">{{
          $t("triials:feedBack:botton:opinion")
        }}</span>
        <span @click.stop="openFeedBackTable">{{
          $t("triials:feedBack:botton:mine")
        }}</span>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  name: "feedBack",
  data() {
    return {
      visible: false,
      show: null,
    };
  },
  mounted() {
    document.getElementsByTagName("body")[0].addEventListener("click", () => {
      this.visible = false;
      if (this.show) {
        this.show = false;
      }
    });
  },
  computed: {
    isShow() {
      if (this.hasPermi(["role:ir", "role:crc"])) {
        return true;
      }
      return false;
    },
  },
  methods: {
    open() {
      if (this.show) {
        this.visible = !this.visible;
      }
      this.show = true;
    },
    // 打开意见反馈
    openFeedBack() {
      this.$FB({
        type: "feedback",
        trialId: this.$route.query.trialId,
      });
    },
    // 打开反馈列表
    openFeedBackTable() {
      this.$FBT();
    },
  },
};
</script>
<style lang="scss" scoped>
.feedBack {
  position: fixed;
  bottom: 50px;
  right: -25px;
  z-index: 3000;
  width: 50px;
  height: 50px;
  background: rgba(64, 158, 255, 0.533);
  line-height: 50px;
  text-align: center;
  color: rgb(255, 255, 255);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  .icon {
    font-size: 30px;
  }
  .checkBox {
    width: 100px;
    border: 1px solid #ddd;
    border-radius: 2px;
    background-color: #fff;
    color: #000;
    position: absolute;
    left: calc(-50% - 50px);
    top: -58px;
    span {
      display: block;
      width: 98px;
      line-height: 24px;
      font-size: 14px;
      cursor: pointer;
      &:first-child {
        border-bottom: 1px solid #ddd;
      }
      &:hover {
        color: #409eff;
        background: #ecf5ff;
      }
    }
  }
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: 0.5s;
}
.fade-enter-to {
  opacity: 1;
}
.feedBack-out {
  animation-duration: 0.5s;
  animation-name: btn-in-out;
  animation-fill-mode: both;
}
.feedBack-in {
  animation-duration: 0.5s;
  animation-name: btn-out-in;
  animation-fill-mode: both;
}
@keyframes btn-out-in {
  0% {
    right: -25px;
  }
  100% {
    right: 25px;
  }
}
@keyframes btn-in-out {
  0% {
    right: 25px;
  }
  100% {
    right: -25px;
  }
}
</style>