<template>
  <div
    class="home"
    @mousedown="onMouseDown"
    @mousemove="onMouseMove"
    @mouseup="onMouseUp"
    @mouseleave="onMouseLeave"
    @wheel.passive="onWheel"
    @dragstart.prevent
  >
    <div
      class="paper-wrap"
      :style="{
        left: paperPositionLeft,
      }"
    >
      <img
        v-for="index in 3"
        :key="index"
        class="paper"
        src="@/assets/background.jpg"
        alt=""
        @dragstart.prevent
      >
    </div>
    <div
      ref="landscape-wrap"
      class="landscape-wrap"
      :style="{
        left: landscapePositionLeft,
      }"
    >
      <img
        v-for="index in 3"
        :key="index"
        class="landscape"
        src="@/assets/landscape.png"
        alt=""
        @dragstart.prevent
      >
    </div>
    <img
      class="cloud2"
      :style="{
        left: cloud2PositionLeft,
      }"
      src="@/assets/cloud2.png"
      alt=""
    >
    <img
      class="cloud1"
      :style="{
        left: cloud1PositionLeft,
      }"
      src="@/assets/cloud1.png"
      alt=""
    >
    <img
      class="cloud3"
      :style="{
        left: cloud3PositionLeft,
      }"
      src="@/assets/cloud3.png"
      alt=""
    >
    <div
      class="people-far-wrap"
      :style="{
        right: peopleFarPositionRight,
      }"
    >
      <img
        class="people-far"
        :class="peopleFarColorStatus"
        src="@/assets/people-far-serial-frame-400-600-60.png"
        alt=""
        @dragstart.prevent
      >
      <HotSpot
        v-if="canMoveCamera"
        class="hot-spot"
        @click="onClickPeopleFarHotSpot"
      />
    </div>
    <div
      ref="people-near-wrap"
      class="people-near-wrap"
      :style="{
        left: peopleNearPositionLeft,
      }"
    >
      <img
        class="people-near"
        src="@/assets/people-near.png"
        alt=""
        @dragstart.prevent
      >
      <HotSpot
        v-show="canMoveCamera"
        class="hot-spot"
        @click="onClickPeopleNearHotSpot"
      />
      <TreasureDisplay
        ref="treasure-display"
        class="treasure-display"
        :treasure-frame-total-num="treasureFrameTotalNum"
        :treasure-initial-height-percent="treasureInitialHeightPercent"
        :treasure-frame-width="treasureFrameWidth"
        :treasure-frame-height="treasureFrameHeight"
        @display-started="canMoveCamera = false"
        @display-stopped="canMoveCamera = true"
      />
    </div>
    <img
      class="introduce"
      :style="{
        left: introducePositionLeft,
      }"
      src="@/assets/introduce.png"
      alt=""
      @dragstart.prevent
    >
  </div>
</template>

<script>
import { config, configMixins } from "@/config.js"

export default {
  name: 'HomeView',
  components: {
  },
  mixins: [configMixins],
  data() {
    return {
      // 鼠标拖拽相关
      isMouseDown: false,
      lastMoveEventTimeStamp: 0,
      moveSpeed: 0,

      // 动画帧相关
      lastAnimationTimeStamp: 0,
      animationFrameId: null,

      canMoveCamera: true,

      // 镜头平移相关
      translateLength: 0,
      paperPositionLeft: 0,
      landscapePositionLeft: config.initialLandscapePositionLeft,
      cloud2PositionLeft: config.initialCloud2PositionLeft,
      cloud1PositionLeft: config.initialCloud1PositionLeft,
      cloud3PositionLeft: config.initialCloud3PositionLeft,
      peopleFarPositionRight: config.initialPeopleFarPositionRight,
      peopleNearPositionLeft: config.initialPeopleNearPositionLeft,
      introducePositionLeft: config.initialIntroducePositionLeft,

      // 远处人物变色相关
      peopleFarColorStatus: 'no-color', // 'no-color', 'color'
      isPeopleFarColorChanging: false,
    }
  },
  watch: {
    translateLength: {
      handler(vNew, vOld) {
        this.paperPositionLeft = `${vNew * config.landscapeSpeedRate}px`
        this.landscapePositionLeft = `calc(${config.initialLandscapePositionLeft} + ${vNew * config.landscapeSpeedRate}px)`
        this.cloud2PositionLeft = `calc(${config.initialCloud2PositionLeft} + ${vNew * config.cloud2SpeedRate}px)`
        this.cloud1PositionLeft = `calc(${config.initialCloud1PositionLeft} + ${vNew * config.cloud1SpeedRate}px)`
        this.cloud3PositionLeft = `calc(${config.initialCloud3PositionLeft} + ${vNew * config.cloud3SpeedRate}px)`
        this.peopleFarPositionRight = `calc(${config.initialPeopleFarPositionRight} - ${vNew * config.peopleFarSpeedRate}px)`
        this.peopleNearPositionLeft = `calc(${config.initialPeopleNearPositionLeft} + ${vNew * config.peopleNearSpeedRate}px)`
        this.introducePositionLeft = `calc(3.347% + ${vNew * config.introduceSpeedRate}px)`
      }
    },
  },
  mounted() {
    this.animationFrameId = requestAnimationFrame(this.animationFrameTask)
  },
  unmounted() {
    cancelAnimationFrame(this.animationFrameId)
    clearInterval(this.treasureFrameIntervalId)
  },
  methods: {
    onMouseDown(e) {
      this.isMouseDown = true
      this.moveSpeed = 0
      this.lastMoveEventTimeStamp = 0
      this.lastAnimationTimeStamp = Date.now()
    },
    onMouseUp(e) {
      this.isMouseDown = false
    },
    onMouseLeave() {
      this.isMouseDown = false
    },
    onMouseMove(e) {
      if (this.isMouseDown) {
        if (this.lastMoveEventTimeStamp) {
          // 更新speed
          const currentMoveSpeed = e.movementX / (e.timeStamp - this.lastMoveEventTimeStamp)
          this.moveSpeed = this.moveSpeed * 0.9 + currentMoveSpeed * 0.1
        }
        this.lastMoveEventTimeStamp = e.timeStamp
      }
    },
    onWheel(e) {
      if (this.canMoveCamera) {
        this.translateLength -= e.deltaY
        if (this.translateLength > 0) {
          this.translateLength = 0
        } else if (this.translateLength < -config.translateLengthRightBorder) {
          this.translateLength = -config.translateLengthRightBorder
          this.moveSpeed = 0
        }
      }
    },
    animationFrameTask() {
      const timeStamp = Date.now()
      const timeElapsed = timeStamp - this.lastAnimationTimeStamp

      // 速度减慢
      if (this.moveSpeed > 0) {
        this.moveSpeed -= 0.003 * timeElapsed
        if (this.moveSpeed < 0) {
          this.moveSpeed = 0
        }
      } else if (this.moveSpeed < 0) {
        this.moveSpeed += 0.003 * timeElapsed
        if (this.moveSpeed > 0) {
          this.moveSpeed = 0
        }
      }

      // 根据速度更新距离
      if (this.canMoveCamera) {
        this.translateLength += this.moveSpeed * timeElapsed
        if (this.translateLength > 0) {
          this.translateLength = 0
        } else if (this.translateLength < -config.translateLengthRightBorder) {
          this.translateLength = -config.translateLengthRightBorder
          this.moveSpeed = 0
        }
      }

      this.lastAnimationTimeStamp = timeStamp
      this.animationFrameId = requestAnimationFrame(this.animationFrameTask)
    },
    onClickPeopleFarHotSpot() {
      if (this.isPeopleFarColorChanging) {
        return
      } else {
        if (this.peopleFarColorStatus === 'no-color') {
          this.peopleFarColorStatus = 'color'
        } else {
          this.peopleFarColorStatus = 'no-color'
        }
        this.isPeopleFarColorChanging = true
        setTimeout(() => {
          this.isPeopleFarColorChanging = false
        }, 2500)
      }
    },
    onClickPeopleNearHotSpot() {
      this.$refs['treasure-display'].startDisplay()
    },
  }
}
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .paper-wrap {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    > .paper {
      height: 100%;
    }
  }
  .landscape-wrap {
    position: absolute;
    height: 30%;
    top: 0;
    display: flex;
    > .landscape {
      height: 100%;
    }
  }
  .cloud2 {
    position: absolute;
    height: 10%;
    top: 55%;
  }
  .cloud1 {
    position: absolute;
    height: 15%;
    top: 77%;
  }
  .cloud3 {
    position: absolute;
    height: 15%;
    top: 84%;
  }
  > .people-far-wrap {
    position: absolute;
    top: 14%;
    height: 750px;
    width: 500px;
    overflow: hidden;
    > .people-far {
      position: absolute;
      height: 100%;
      transition-property: left;
      transition-duration: 2.5s;
      transition-timing-function: steps(59, jump-end);
      &.no-color {
        left: 0;
      }
      &.color {
        left: calc(-100% * 59)
      }
    }
    > .hot-spot {
      position: absolute;
      left: 55%;
      transform: translateX(-50%);
      top: 31%;
    }
  }
  > .people-near-wrap {
    position: absolute;
    bottom: -13%;
    height: 100vh;
    > .people-near {
      height: 100%;
    }
    > .hot-spot {
      position: absolute;
      left: 43.5%;
      top: 29.5%;
      z-index: 3;
    }
    > .treasure-display {
    }
  }
  .introduce {
    position: absolute;
    top: 5%;
    width: 13.727%;
  }
  @media screen and (max-height: 810px) {
    .people-far-wrap {
      height: 600px;
      width: 400px;
    }
  }
  @media screen and (max-height: 720px) {
    .people-far-wrap {
      height: 540px;
      width: 360px;
    }
  }
  @media screen and (max-height: 630px) {
    .people-far-wrap {
      height: 480px;
      width: 320px;
    }
  }
  @media screen and (max-height: 540px) {
    .people-far-wrap {
      height: 420px;
      width: 280px;
    }
  }
}
</style>