<template>
  <div class="fixed-menu">
    <div
      class="blur-modal animate__animated animate__fadeIn"
      v-show="modalVisible"
      @click="modalVisible = false"
    ></div>
    <ul class="menu-btn" v-show="modalVisible">
      <li
        class="add-follow animate__animated animate__bounceInRight"
        v-for="item in data"
        :key="item.key"
        v-show="item.isShow"
        @click="onMenuClick(item)"
      >
        <div class="icon">
          <WlPic :src="item.icon" />
        </div>
        <p>{{ item.text }}</p>
      </li>
    </ul>
    <div :class="fixedMenuButtonClass" @click="modalVisible = !modalVisible">
      <div :class="`icon ${modalVisible ? 'rotate' : ''}`">
        <WlPic :src="require('@packages/assets/images/add.png')" />
      </div>
    </div>
  </div>
</template>

<script>
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2021-10-13 16:03:04
 */
import WlPic from "@packages/components/Common/WlPic/src/index.vue";
export default {
  name: "WlFixedMenu",
  components: { WlPic },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      modalVisible: false,
    };
  },
  computed: {
    fixedMenuButtonClass() {
      return {
        "fixed-menu-button": true,
        animated: true,
        rotated: this.modalVisible,
      };
    },
  },
  methods: {
    onMenuClick(item) {
      this.modalVisible = false;
      this.$emit("onChange", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.fixed-menu {
  .blur-modal {
    position: fixed;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(2);
    filter: blur(2);
  }
  .menu-btn {
    position: absolute;
    bottom: j(130);
    right: j(21);
    z-index: 4;
    li {
      height: j(40);
      border-radius: j(30);
      padding: 0 j(15);
      margin-top: j(15);
      box-sizing: border-box;
      @include btnClick();
      @extend %flex-middle-center;
      color: #1b9fff;
      border: j(1) solid #1b9fff;
      background-image: linear-gradient(to right, #fff, #e3f0fa);
      .icon {
        margin-right: j(3);
        width: j(18);
        height: j(18);
      }
    }
  }
  &-button {
    position: absolute;
    bottom: j(52);
    right: j(21);
    width: j(54);
    height: j(54);
    z-index: 4;
    border-radius: 50%;
    background-color: #1c9fff;
    @extend %flex-middle-center;
    @include btnClick();
    transition: background-color linear 300ms;
    box-shadow: 0px 8px 10px rgba(28, 159, 255, 0.2);
    &.rotated {
      background-color: #d8d8d8;
      box-shadow: 0px 8px 10px rgba(216, 216, 216, 0.2);
    }
    .icon {
      width: j(20);
      height: j(20);
      transition: transform linear 300ms;
      &.rotate {
        transform: rotate(45deg);
      }
    }
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes bounceInRight {
    from,
    60%,
    75%,
    90%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
      opacity: 0;
      -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
      transform: translate3d(3000px, 0, 0) scaleX(3);
    }

    60% {
      opacity: 1;
      -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
      transform: translate3d(-25px, 0, 0) scaleX(1);
    }

    75% {
      -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
      transform: translate3d(10px, 0, 0) scaleX(0.98);
    }

    90% {
      -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
      transform: translate3d(-5px, 0, 0) scaleX(0.995);
    }

    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  .animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  .animate__fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
  }
  .animate__bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
  }
}
</style>
