<template>
  <div v-if="isDrag" class="metronomeMinConMask"></div>
  <div
    class="metronomeMinCon"
    :class="[metronomeMinConBoxClass, metronomeShow && 'metronomeMinConHide']"
    :style="metronomeMinConDragData.styleDrag.value"
    @mousedown="hanldeMetronomeMinmousedown"
    v-if="metronomeShow || windowMet"
  >
    <div class="topMetronomeMin">
      <img
        class="zhen"
        :style="{
          '--rotateWagTime': rotateWagTime + 's'
        }"
        :class="[
          playState === 'play' && 'playWagAnimation' + beatSymbolOpt[beatSymbol]
        ]"
        src="./imgs/zhen.png"
      />
      <img class="bai" src="./imgs/bai.png" />
    </div>
    <div class="bomMetronomeMin">
      <img class="setting" @click="handleSetting" src="./imgs/setting.png" />
      <img
        class="play"
        v-if="playState === 'pause'"
        @click="
          () => {
            metronomeDom?.startPlay();
          }
        "
        src="./imgs/paly.png"
      />
      <img
        class="pause"
        @click="
          () => {
            metronomeDom?.pausePlay();
          }
        "
        v-else
        src="./imgs/pause.png"
      />
      <img class="close" @click="handleCloseMet" src="./imgs/close.png" />
    </div>
  </div>

  <!-- @mask-click="handleCloseMet" -->
  <NModal
    :style="{
      ...dragStyle,
      '--transformOrigin': transformOrigin
    }"
    class="metronomeNModal"
    v-model:show="metronomeShow"
    :class="[dragClass, windowMet ? 'transformOrigin' : '']"
    :display-directive="'show'"
    :mask-closable="false"
    @esc="handleCloseMet"
    @after-enter="
      () => {
        animationEnds = true;
      }
    "
    @after-leave="
      () => {
        animationEnds = false;
      }
    "
  >
    <div>
      <div class="topDragDom"></div>
      <Metronome
        v-if="windowMet || metronomeShow || animationEnds"
        ref="metronomeDom"
        @closeMet="handleCloseMet"
        @windowMet="handleWindowMet"
        @playStateChange="handlePlayStateChange"
      ></Metronome>
    </div>
  </NModal>
</template>

<script setup lang="ts">
import { NModal } from 'naive-ui';
import { computed, ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
import Metronome from './Metronome.vue';
import { useUserStore } from '@/store/modules/users';
import useDrag from '@/hooks/useDrag';

const modalClickMask = false;

const props = defineProps<{
  modelValue: boolean;
  dragClass: string;
  dragStyle: Record<string, any>;
}>();
const emits = defineEmits<{
  (e: 'update:modelValue', value: boolean): void;
}>();
const animationEnds = ref(true); //防止动画没结束 窗口就消失了
const metronomeDom = ref<InstanceType<typeof Metronome>>();
/* 窗口化 */
const windowMet = ref(false);
const metronomeShow = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emits('update:modelValue', value);
  }
});
watch(metronomeShow, () => {
  if (metronomeShow.value) {
    windowMet.value = false;
  }
});
const playState = ref<'play' | 'pause'>('pause');
function handlePlayStateChange(state: 'play' | 'pause') {
  if (state === 'play') {
    rotateWagTime.value = parseFloat(
      (60 / metronomeDom.value!.speedNum).toFixed(4)
    );
    beatSymbol.value = metronomeDom.value!.beatSymbol;
  }
  playState.value = state;
}
const beatSymbol = ref('1');
const beatSymbolOpt = {
  '1': '1',
  '0.5-0.5': '2',
  '0.3333333-0.3333333-0.3333333': '3',
  '0.25-0.25-0.25-0.25': '4',
  '0.6666666-0.3333333': '5',
  '0.75-0.25': '6',
  '0.5-0.25-0.25': '7'
};
const rotateWagTime = ref(60 / 90);
onMounted(() => {
  document.addEventListener('visibilitychange', documentHidePause);
});
onUnmounted(() => {
  document.removeEventListener('visibilitychange', documentHidePause);
});
function documentHidePause() {
  if (document.visibilityState === 'hidden') {
    metronomeDom.value?.pausePlay();
  }
}
function handleCloseMet() {
  metronomeShow.value = false;
  windowMet.value = false;
  playState.value = 'pause';
}
function handleWindowMet() {
  windowMet.value = true;
  nextTick(() => {
    computedTransformOrigin();
    metronomeShow.value = false;
  });
}
function handleSetting() {
  metronomeShow.value = true;
}
/* 指针拖动 */
const users = useUserStore();
const metronomeMinConBoxClass = 'metronomeMinConBoxClass_drag';
const metronomeMinConDragData = useDrag(
  [`${metronomeMinConBoxClass}`],
  metronomeMinConBoxClass,
  windowMet,
  users.info.id
);
const transformOrigin = ref('initial');
function computedTransformOrigin() {
  const dragDom = document.querySelector(`.${props.dragClass}`) as HTMLElement;
  const dragRect = dragDom.getBoundingClientRect();
  const metMinLeft =
    metronomeMinConDragData.pos.value.left === -1
      ? 12 //初始化时候窗口的left
      : metronomeMinConDragData.pos.value.left;
  const metMinTop =
    metronomeMinConDragData.pos.value.top === -1
      ? document.body.clientHeight - 81 - 10 //初始化时候窗口的高
      : metronomeMinConDragData.pos.value.top;
  const dragLeft = dragRect.left;
  const dragTop = dragRect.top;
  transformOrigin.value = `${metMinLeft - dragLeft}Px ${metMinTop - dragTop}Px`;
}
const isDrag = ref(false); // 拖动metronomeMin的时候防止iframe
function hanldeMetronomeMinmousedown() {
  isDrag.value = true;
  document.addEventListener('mouseup', onMouseup);
  function onMouseup() {
    isDrag.value = false;
    document.removeEventListener('mouseup', onMouseup);
  }
}
</script>

<style lang="less" scoped>
.metronomeMinConMask {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 9;
}
.metronomeMinCon {
  position: fixed;
  left: 12px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  height: 81px;
  &.metronomeMinConHide {
    visibility: hidden;
  }
  .topMetronomeMin {
    position: relative;
    display: flex;
    pointer-events: none;
    .bai {
      width: 37px;
      height: 46px;
    }
    .zhen {
      width: 13px;
      height: 35px;
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      transform-origin: 50% 100%;
      &.playWagAnimation1 {
        animation: rotateWag1 var(--rotateWagTime) linear infinite alternate;
      }
      @keyframes rotateWag1 {
        0% {
          transform: translateX(-50%) rotate(-90deg);
        }
        100% {
          transform: translateX(-50%) rotate(90deg);
        }
      }
      &.playWagAnimation2 {
        animation: rotateWag2 var(--rotateWagTime) linear infinite;
      }
      @keyframes rotateWag2 {
        0% {
          transform: translateX(-50%) rotate(-90deg);
        }
        50% {
          transform: translateX(-50%) rotate(90deg);
        }
        100% {
          transform: translateX(-50%) rotate(-90deg);
        }
      }
      &.playWagAnimation3 {
        animation: rotateWag3 var(--rotateWagTime) linear infinite alternate;
      }
      @keyframes rotateWag3 {
        0% {
          transform: translateX(-50%) rotate(-90deg);
        }
        33.33% {
          transform: translateX(-50%) rotate(90deg);
        }
        66.66% {
          transform: translateX(-50%) rotate(-90deg);
        }
        100% {
          transform: translateX(-50%) rotate(90deg);
        }
      }
      &.playWagAnimation4 {
        animation: rotateWag4 var(--rotateWagTime) linear infinite;
      }
      @keyframes rotateWag4 {
        0% {
          transform: translateX(-50%) rotate(-90deg);
        }
        25% {
          transform: translateX(-50%) rotate(90deg);
        }
        50% {
          transform: translateX(-50%) rotate(-90deg);
        }
        75% {
          transform: translateX(-50%) rotate(90deg);
        }
        100% {
          transform: translateX(-50%) rotate(-90deg);
        }
      }
      &.playWagAnimation5 {
        animation: rotateWag5 var(--rotateWagTime) linear infinite;
      }
      @keyframes rotateWag5 {
        0% {
          transform: translateX(-50%) rotate(-90deg);
        }
        66.66% {
          transform: translateX(-50%) rotate(90deg);
        }
        100% {
          transform: translateX(-50%) rotate(-90deg);
        }
      }
      &.playWagAnimation6 {
        animation: rotateWag6 var(--rotateWagTime) linear infinite;
      }
      @keyframes rotateWag6 {
        0% {
          transform: translateX(-50%) rotate(-90deg);
        }
        75% {
          transform: translateX(-50%) rotate(90deg);
        }
        100% {
          transform: translateX(-50%) rotate(-90deg);
        }
      }
      &.playWagAnimation7 {
        animation: rotateWag7 calc(var(--rotateWagTime) * 2) linear infinite;
      }
      @keyframes rotateWag7 {
        0% {
          transform: translateX(-50%) rotate(-90deg);
        }
        25% {
          transform: translateX(-50%) rotate(90deg);
        }
        37.5% {
          transform: translateX(-50%) rotate(-90deg);
        }
        50% {
          transform: translateX(-50%) rotate(90deg);
        }
        75% {
          transform: translateX(-50%) rotate(-90deg);
        }
        87.5% {
          transform: translateX(-50%) rotate(90deg);
        }
        100% {
          transform: translateX(-50%) rotate(-90deg);
        }
      }
    }
  }
  .bomMetronomeMin {
    margin-top: 10px;
    display: flex;
    & > img {
      cursor: pointer;
      width: 34px;
      height: 25px;
    }
    .play,
    .pause {
      margin: 0 4px;
    }
  }
}
.metronomeNModal {
  position: relative;
  box-shadow: initial;
  &.transformOrigin {
    transform-origin: var(--transformOrigin) !important;
  }
  .topDragDom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
  }
}
</style>
