<template>
  <div class="timerMeter">
    <div class="timeCon">
      <div class="timeBox">
        <div class="timeInput mmTimeIpt">
          <div
            class="timeInputBtn"
            v-if="timeType === 'countdown'"
            :class="{ palyDisabled: playState === 'play' }"
          >
            <div @click="handleTimeNum(600)">
              <img src="./img/upBtn.png" />
            </div>
            <div @click="handleTimeNum(60)">
              <img src="./img/upBtn.png" />
            </div>
          </div>
          <div class="timeInputBox">
            <n-input-number
              :disabled="true"
              placeholder=""
              :value="mmValue"
              :format="(value: number | null)=>{
                return value?(value<10?`0${value}`:value+''):'00'
              }"
              @update:value="(num:number)=>{
                if(num){
                  if(num<0){
                    num=0
                  }else if(num>59){
                    num=59
                  }
                  timeNum=num * 60 + ssValue
                }
              }"
              :show-button="false"
            />
          </div>
          <div
            class="timeInputBtn"
            v-if="timeType === 'countdown'"
            :class="{ palyDisabled: playState === 'play' }"
          >
            <div @click="handleTimeNum(-600)">
              <img src="./img/downBtn.png" />
            </div>
            <div @click="handleTimeNum(-60)">
              <img src="./img/downBtn.png" />
            </div>
          </div>
        </div>
        <img class="midBg" src="./img/midBg.png" />
        <div class="timeInput ssTimeIpt">
          <div
            class="timeInputBtn"
            v-if="timeType === 'countdown'"
            :class="{ palyDisabled: playState === 'play' }"
          >
            <div @click="handleTimeNum(10)">
              <img src="./img/upBtn.png" />
            </div>
            <div @click="handleTimeNum(1)">
              <img src="./img/upBtn.png" />
            </div>
          </div>
          <div class="timeInputBox">
            <n-input-number
              :disabled="true"
              placeholder=""
              :value="ssValue"
              :format="(value: number | null)=>{
                return value?(value<10?`0${value}`:value+''):'00'
              }"
              @update:value="(num:number)=>{
                if(num){
                  if(num<0){
                    num=0
                  }else if(num>59){
                    num=59
                  }
                  timeNum=mmValue * 60 + num
                }
              }"
              :show-button="false"
            />
          </div>
          <div
            class="timeInputBtn"
            v-if="timeType === 'countdown'"
            :class="{ palyDisabled: playState === 'play' }"
          >
            <div @click="handleTimeNum(-10)">
              <img src="./img/downBtn.png" />
            </div>
            <div @click="handleTimeNum(-1)">
              <img src="./img/downBtn.png" />
            </div>
          </div>
        </div>
      </div>
      <div class="timeTools">
        <div class="timeType">
          <div class="timeTypeBox">
            <div
              class="timeTypeName"
              :class="{ timeTypeActive: timeType === 'countdown' }"
              @click="handleChangeTimeType('countdown')"
            >
              倒计时
            </div>
            <div
              class="timeTypeName"
              :class="{ timeTypeActive: timeType === 'countup' }"
              @click="handleChangeTimeType('countup')"
            >
              正计时
            </div>
          </div>
        </div>
        <div class="playState">
          <img
            v-if="playState === 'play'"
            @click="handlePause"
            src="./img/play.png"
          />
          <img v-else @click="handlePlay" src="./img/pause.png" />
        </div>
        <div class="resetting">
          <img @click="handleInitTime" src="./img/resetting.png" />
        </div>
      </div>
    </div>
    <div class="timeBomCon">
      <div
        v-if="timeType === 'countdown'"
        class="timeDownBom"
        :class="{ palyDisabled: playState === 'play' }"
      >
        <div @click="handleTimeNum(300)">5分</div>
        <div @click="handleTimeNum(60)">1分</div>
        <div @click="handleTimeNum(30)">30秒</div>
        <div @click="handleTimeNum(5)">5秒</div>
      </div>
      <img v-else class="timeUpBom" src="./img/timeUpBom.png" />
      <Dragbom />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onUnmounted, onMounted } from 'vue';
import { NInputNumber } from 'naive-ui';
import soundWav from './timer.mp3';
import Dragbom from '@/hooks/useDrag/dragbom';

const soundVIdeo = new Audio(soundWav);

onMounted(() => {
  /*  n-input-number 有bug  input-props设置maxlength不上去 */
  const iptDoms = document.querySelectorAll(
    '.timerMeter .timeInput .timeInputBox .n-input__input-el'
  );
  iptDoms.forEach(item => {
    item.setAttribute('maxlength', '2');
  });
});
onUnmounted(() => {
  clearInterval(_time);
  soundVIdeo.pause();
});

// 计时类型
const timeType = ref<'countdown' | 'countup'>('countdown');
function handleChangeTimeType(type: 'countdown' | 'countup') {
  if (timeType.value === type) {
    return;
  }
  timeType.value = type;
  handleInitTime();
}
// 清空状态
function handleInitTime() {
  handlePause();
  timeNum.value = 0;
  mmValue.value = 0;
  ssValue.value = 0;
}
// 播放状态
const playState = ref<'pause' | 'play'>('pause');
//统计时间
const timeNum = ref(0);
const mmValue = ref(0);
const ssValue = ref(0);
watch(timeNum, () => {
  mmValue.value = Math.floor(timeNum.value / 60);
  ssValue.value = timeNum.value % 60;
});
function handleTimeNum(num: number) {
  if (playState.value === 'play') return;
  let timeNumNow = timeNum.value + num;
  if (timeNumNow >= 3599) {
    timeNumNow = 3599;
  }
  if (timeNumNow <= 0) {
    timeNumNow = 0;
  }
  timeNum.value = timeNumNow;
}
// 开始
function handlePlay() {
  if (timeType.value === 'countdown') {
    if (timeNum.value <= 0) {
      return;
    }
    playState.value = 'play';
    handleCountdownStart();
  } else {
    if (timeNum.value >= 3599) {
      return;
    }
    playState.value = 'play';
    handleCountUpStart();
  }
}
// 暂停
function handlePause() {
  clearInterval(_time);
  playState.value = 'pause';
  soundVIdeo.pause();
}

let _time: NodeJS.Timer;
// 倒计时
function handleCountdownStart() {
  // 由于时间结束之后还会有尾音，所以开始时候可能音乐在播放，所以这里先暂停
  soundVIdeo.pause();
  soundVIdeo.currentTime = 0;
  if (timeNum.value <= 3) {
    soundVIdeo.currentTime = 3 - timeNum.value;
    soundVIdeo.play();
  }
  _time = setInterval(() => {
    timeNum.value--;
    if (timeNum.value === 3) {
      soundVIdeo.play();
    }
    if (timeNum.value <= 0) {
      // 结束的时候音乐不暂停
      clearInterval(_time);
      playState.value = 'pause';
    }
  }, 1000);
}
// 正计时
function handleCountUpStart() {
  _time = setInterval(() => {
    timeNum.value++;
    if (timeNum.value >= 3599) {
      handlePause();
    }
  }, 1000);
}
</script>

<style lang="less" scoped>
.timerMeter {
  width: 620px;
  height: 316px;
  background: url('./img/bg.png') no-repeat;
  background-size: 100% 100%;
  padding: 46px 25px 0 24px;
  .timeCon {
    display: flex;
    justify-content: space-between;
    .timeBox {
      width: 432px;
      height: 190px;
      background: #3a3939;
      box-shadow: 0px 3px 0px 0px rgba(255, 255, 255, 0.46),
        0px -1px 3px 0px rgba(255, 255, 255, 0.65),
        inset 0px 3px 8px 0px rgba(0, 0, 0, 0.5);
      border-radius: 53px;
      padding: 20px 46px 20px 42px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .midBg {
        width: 10px;
        height: 36px;
      }
      .timeInput {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 132px;
        height: 100%;
        position: relative;
        &.mmTimeIpt,
        &.ssTimeIpt {
          &::before {
            content: 'M';
            position: absolute;
            font-weight: bold;
            font-size: 18px;
            color: #ffffff;
            top: 9px;
            right: -16px;
          }
          &.ssTimeIpt::before {
            right: -10px;
            content: 'S' !important;
          }
        }
        .timeInputBox {
          flex-grow: 1;
          overflow: hidden;
          :deep(.n-input-number) {
            height: 100%;
            .n-input {
              height: 100%;
              --n-height: 100% !important;
              --n-color-focus: initial !important;
              --n-color: initial !important;
              --n-padding-left: initial !important;
              --n-padding-right: initial !important;
              --n-color-disabled: initial !important;
              --n-caret-color: #ffffff !important;
              .n-input__border,
              .n-input__state-border {
                display: none;
              }
              .n-input__input-el {
                text-align: center;
                font-family: DINA !important;
                font-weight: bold !important;
                font-size: 136px !important;
                color: #ffffff !important;
                &::selection {
                  background: #555252;
                }
              }
              &.n-input--disabled {
                cursor: initial;
                .n-input__input-el {
                  cursor: initial;
                }
              }
            }
          }
        }
        .timeInputBtn {
          width: 100%;
          flex-shrink: 0;
          display: flex;
          justify-content: space-between;
          &.palyDisabled > div {
            cursor: initial;
            & > img {
              opacity: 0.4;
            }
          }

          & > div {
            display: flex;
            align-items: center;
            height: 20px;
            width: 50%;
            cursor: pointer;
            &:first-child {
              flex-direction: row-reverse;
              & > img {
                margin: 0 22px 0 0;
              }
            }
            & > img {
              margin-left: 20px;
              width: 12px;
              height: 8px;
            }
          }
        }
      }
    }
    .timeTools {
      flex-shrink: 0;
      min-width: 138px;
      .timeType {
        width: 100%;
        height: 40px;
        background: rgba(229, 229, 299, 0.42);
        border-radius: 40px;
        padding: 6px;
        .timeTypeBox {
          width: 100%;
          height: 100%;
          background: #e3e3e3;
          border-radius: 14px;
          display: flex;
          .timeTypeName {
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 600;
            font-size: 14px;
            color: #7c7c7c;
            border-radius: 14px;
            cursor: pointer;
            &.timeTypeActive {
              color: #fff;
              background: linear-gradient(90deg, #999999 0%, #7c7c7c 100%);
            }
          }
        }
      }
      .playState,
      .resetting {
        margin-top: 12px;
        width: 100%;
        display: flex;
        justify-content: center;
        & > img {
          cursor: pointer;
          width: 78px;
          height: 59px;
        }
      }
    }
  }
  .timeBomCon {
    width: 432px;
    height: calc(100% - 190px);
    display: flex;
    justify-content: center;
    position: relative;
    .timeDownBom {
      width: 100%;
      height: 56px;
      display: flex;
      justify-content: space-between;
      padding: 18px 30px 0;
      & > div {
        width: 85px;
        height: 38px;
        background: url('./img/timeNum.png') no-repeat;
        background-size: 100% 100%;
        font-weight: 600;
        font-size: 18px;
        color: #7c7c7c;
        line-height: 38px;
        text-align: center;
        cursor: pointer;
        z-index: 2;
      }
      &.palyDisabled > div {
        opacity: 0.4;
        cursor: initial;
      }
    }
    .timeUpBom {
      margin-top: 25px;
      width: 332px;
      height: 21px;
    }
    :global(.timerMeter .timeBomCon .bom_drag) {
      position: absolute;
      left: -24px;
      bottom: 0;
      width: 620px;
      height: 40px;
      z-index: 1;
    }
    :global(.timerMeter .timeBomCon .bom_drag > div) {
      display: none;
    }
  }
}
</style>
