<template>
  <div class="working-area">
    <img
      v-show="innerState === 0"
      class="helper-board"
      src="@/assets/images/helper-board.png"
      alt=""
      draggable="false"
    >
    <video
      v-show="innerState === 0 && workState === 'working'"
      ref="videoRef1"
      class="helper-board"
      src="@/assets/videos/step-4-1.mp4"
      playsinline
      webkit-playsinline="true"
      muted
      @ended="workState = 'init', innerState = 1"
    />
    <img
      v-show="innerState == 1 || innerState === 2"
      class="helper-board"
      src="@/assets/images/helper-board-middle.png"
      alt=""
      draggable="false"
    >
    <video
      v-show="(innerState === 1 && workState === 'working') || (innerState === 2)"
      ref="videoRef2"
      class="helper-board"
      src="@/assets/videos/step-4-2.mp4"
      playsinline
      webkit-playsinline="true"
      muted
      @ended="innerState = 2, videoRef3.play()"
    />
    <!-- <img
      v-show="innerState == 2"
      class="helper-board"
      src="@/assets/images/helper-board-done.png"
      alt=""
      draggable="false"
    > -->
    <img
      class="rubber-board-init"
      src="@/assets/images/step-4-init.png"
      alt=""
      draggable="false"
    >
    <video
      ref="videoRef3"
      class="rubber-board"
      src="@/assets/videos/step-4-3.mp4"
      playsinline
      webkit-playsinline="true"
      muted
      @ended="workState = 'done'"
    />
    <Transition name="tool-fade-in-out">
      <img
        v-show="workState === 'working' && innerState !== 0"
        class="tool"
        :style="{
          animationPlayState: (workState === 'working' && innerState !== 0) ? 'running' : 'paused',
        }"
        :src="toolList[3].url"
        alt=""
        draggable="false"
      >
    </Transition>
  </div>
</template>

<script setup>
import { ref, computed, watch } from "vue"
import { toolList, selectedToolNum, workState } from "@/store/index.js"

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()

const props = defineProps(['requiredToolList'])

const requiredToolList = computed(() => {
  return props.requiredToolList
})

watch(selectedToolNum, (vNew) => {
  if (vNew === 1) {
    setTimeout(() => {
      workState.value = 'working'
    }, 1000)
  } else if (vNew === 2) {
    setTimeout(() => {
      workState.value = 'working'
    }, 1000)
  }
})

const videoRef1 = ref(null)
const videoRef2 = ref(null)
const videoRef3 = ref(null)

const innerState = ref(0) //0：初始，1：颜料已挤出，2：滚筒已粘上颜料

watch(workState, (vNew) => {
  if (vNew === 'working' && innerState.value === 0) {
    videoRef1.value.play()
  } else if (vNew === 'working' && innerState.value === 1) {
    videoRef2.value.play()
  }
})

</script>

<style lang="less" scoped>
.working-area{
  position: absolute;
  left: 50%;
  top: calc(314 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  transform: translate(-50%, -50%);
  width: calc(328 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
  >img.helper-board{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    // height: 100%;
    box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.25);
  }
  >video.helper-board{
    position: absolute;
    left: 0;
    top: 0;
    width: 98%;
    // height: 100%;
  }
  >img.rubber-board-init{
    position: absolute;
    left: 0;
    top: calc(168 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
    width: 100%;
    box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.25);
  }
  >video.rubber-board{
    position: absolute;
    left: 0;
    top: calc(169 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
    width: 97.5%;
  }
  >img.tool{
    position: absolute;
    transform: translate(-10%, -50%) rotate(45deg);
    width: calc(85 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    animation-name: tool-move;
    animation-delay: 0.2s;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    left: 15%;
    top: 15%;
  }
}
@keyframes tool-move {
  5% {
    left: 85%;
    top: 15%;
  }
  10% {
    left: 15%;
    top: 15%;
  }
  15% {
    left: 85%;
    top: 15%;
  }
  20% {
    left: 15%;
    top: 15%;
  }
  25% {
    left: 85%;
    top: 15%;
  }
  55% {
    left: 0;
    top: 70%;
  }
  75% {
    left: 90%;
    top: 70%;
  }
  80% {
    left: 0;
    top: 70%;
  }
  100% {
    left: 90%;
    top: 70%;
  }
}
</style>