<template>
  <div class="draw-view">
    <h1>{{ currentStepInfo.name }}</h1>
    <progress-comp
      class="progress"
      :cur-idx="curStepIdx"
    />
    <StepView1
      v-if="curStepIdx === 0"
      :required-tool-list="currentStepInfo.toolIdxList"
    />
    <StepView2
      v-if="curStepIdx === 1"
      :required-tool-list="currentStepInfo.toolIdxList"
    />
    <StepView3
      v-if="curStepIdx === 2"
      :required-tool-list="currentStepInfo.toolIdxList"
    />
    <StepView4
      v-if="curStepIdx === 3"
      :required-tool-list="currentStepInfo.toolIdxList"
    />
    <StepView5
      v-if="curStepIdx === 4"
      :required-tool-list="currentStepInfo.toolIdxList"
    />
    <StepView6
      v-if="curStepIdx === 5"
    />

    <tool-list
      v-show="workState === 'init' && curStepIdx !== 5"
      class="tool-list"
      :current-step-info="currentStepInfo"
    />
    <button
      v-show="workState === 'done' && curStepIdx !== 5"
      class="next"
      @click="onClickNext"
    >
      下一步
    </button>
    <div
      v-show="curStepIdx === 5"
      class="btn-group"
    >
      <button @click="onClickReplay">
        重新体验
      </button>
      <button>分享</button>
    </div>
  </div>
</template>

<script setup>
import { toolList, selectedToolNum, workState } from "@/store/index.js"
// import { onClickOutside } from '@vueuse/core'
import { computed, inject, ref, nextTick } from 'vue'
import ProgressComp from "@/components/ProgressComp.vue"
import ToolList from "@/components/ToolList.vue"
import StepView1 from "@/views/StepView1.vue"
import StepView2 from "@/views/StepView2.vue"
import StepView3 from "@/views/StepView3.vue"
import StepView4 from "@/views/StepView4.vue"
import StepView5 from "@/views/StepView5.vue"
import StepView6 from "@/views/StepView6.vue"

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()

inject('$uaInfo')
inject('$env')

const curStepIdx = ref(0)

const currentStepInfo = computed(() => {
  return config.stepList[curStepIdx.value]
})

function onClickNext() {
  workState.value = 'init'
  curStepIdx.value++
  toolList.value.forEach((item) => {
    item.selected = false
  })
}

function onClickReplay() {
  workState.value = 'init'
  curStepIdx.value = 0
  toolList.value.forEach((item) => {
    item.selected = false
  })
}
</script>

<style lang="less" scoped>
.draw-view{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(/src/assets/images/bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  >h1{
    position: absolute;
    top: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
    left: 50%;
    transform: translateX(-50%);
    font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    font-family: Source Han Serif CN-Bold, Source Han Serif CN;
    font-weight: bold;
    color: #FFFFFF;
    line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  }
  >.progress{
    position: absolute;
    left: 50%;
    top: calc(64 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    width: calc(328 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
    transform: translateX(-50%);
  }
  >.tool-list{
    position: absolute;
    width: 100%;
    bottom: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  }
  >button.next{
    position: absolute;
    left: 50%;
    bottom: calc(87 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    transform: translateX(-50%);
    width: calc(187 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
    font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    font-family: Source Han Serif CN-Bold, Source Han Serif CN;
    font-weight: bold;
    color: #484238;
    line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    text-shadow: 0px -1px 1px #FFF2AC;
    height: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
    background-image: url(@/assets/images/btn-short-bright.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
  >.btn-group{
    position: absolute;
    bottom: calc(52 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    >button{
      flex: 0 0 auto;
      font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      font-family: Source Han Serif CN-Bold, Source Han Serif CN;
      font-weight: bold;
      color: #484238;
      line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
    }
    >button:first-of-type{
      background-image: url(@/assets/images/btn-long-dark.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      width: calc(186 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    }
    >button:last-of-type{
      background-image: url(@/assets/images/btn-short-bright.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      width: calc(144 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
    }
  }
}
</style>