<template>
  <div class="fixed-menu" data-weiling-mobile-ui-wl-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="onToggle">
      <div :class="`icon ${modalVisible ? 'rotate' : ''}`">
        <WlPic :src="addIcon" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2023-07-20 19:31:18
 */
export default {
  name: "WlFixedMenu",
};
</script>

<script lang="ts" setup>
import { addIcon } from "@mobileUI/utils/cdn";
import { computed, ref, watchEffect } from "vue";
import WlPic from "@mobileUI/components/WlPic/src/index.vue";

type IData = {
  icon: string;
  text: string;
  isShow: boolean;
  key: number | string;
};

type Props = {
  data?: IData[];
  modelValue?: boolean;
};

const props = withDefaults(defineProps<Props>(), {
  data: null,
  modelValue: false,
});

const emit = defineEmits<{
  (e: "onClick");
  (e: "onChange", item: IData): void;
  (e: "update:modelValue", val: string);
}>();

const modalVisible = ref(false);

const fixedMenuButtonClass = computed(() => {
  return {
    animated: true,
    "fixed-menu-button": true,
    rotated: modalVisible.value,
  };
});

const onMenuClick = (item: IData) => {
  emit("onChange", item);
  modalVisible.value = false;
};

const onToggle = () => {
  emit("onClick");
  if ((props.data ?? []).length > 0) modalVisible.value = !modalVisible.value;
};

watchEffect(() => {
  modalVisible.value = props.modelValue;
});
</script>

<style lang="scss">
.fixed-menu[data-weiling-mobile-ui-wl-fixed-menu] {
  .blur-modal {
    position: fixed;
    z-index: 8;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(2px);
    filter: blur(2px);
  }

  .menu-btn {
    position: absolute;
    bottom: j(190);
    right: j(21);
    z-index: 8;

    li {
      height: j(40);
      padding: 0 j(15);
      margin-top: j(15);
      border-radius: j(30);
      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);
      }
    }
  }

  .fixed-menu-button {
    position: absolute;
    bottom: j(120);
    right: j(21);
    width: j(54);
    height: j(54);
    z-index: 8;
    border-radius: 50%;
    background-color: var(--wl-primary-color);
    @extend %flex-middle-center;
    @include btnClick();
    transition: background-color linear 300ms;
    box-shadow: 0px 8px 10px var(--wl-primary-color-light);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    &.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>
