<template>
  <div class="working-area">
    <img
      v-show="toolList[6].selected"
      class="rubber-board"
      src="@/assets/images/rubber-board-big.png"
      alt=""
      draggable="false"
    >
    <div
      v-show="toolList[5].selected && workState === 'init'"
      class="copying-paper-bottom"
    />
    <img
      v-show="workState === 'init'"
      class="original-paint"
      src="@/assets/images/step-2-init.png"
      alt=""
      draggable="false"
    >
    <div
      v-show="toolList[5].selected && workState === 'init'"
      class="copying-paper-top"
    />
    <video
      v-show="workState === 'working' || workState === 'done'"
      ref="videoRef"
      src="@/assets/videos/step-2.mp4"
      playsinline
      webkit-playsinline="true"
      muted
      @ended="workState = 'done'"
    />
  </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 === requiredToolList.value.length) {
    setTimeout(() => {
      workState.value = 'working'
    }, 500)
  }
})

const videoRef = ref(null)

watch(workState, (vNew) => {
  if (vNew === 'working') {
    videoRef.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.rubber-board{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  >.copying-paper-bottom{
    position: absolute;
    left: 15%;
    top: 15%;
    width: 70%;
    height: 70%;
    background-color: rgba(31, 74, 114, 1);
    object-fit: contain;
  }
  >img.original-paint{
    position: absolute;
    left: 10%;
    top: 10%;
    width: 70%;
    height: 70%;
    object-fit: contain;
  }
  >.copying-paper-top{
    position: absolute;
    left: 5%;
    top: 5%;
    width: 70%;
    height: 70%;
    background-color: rgba(0, 0, 0, 0.25);
    object-fit: contain;
  }
  >video{
    position: absolute;
    left: 0;
    top: 0;
    width: 94%;
    height: 97%;
    object-fit: contain;
  }
}
</style>