<template>
  <div>
    <div class="weather-box" id="weather-box">
      <div class="weather">
        <div class="weather-l">
          <div id="weather-01" class="weather-item" @click="weatherClick1"></div>
          <div id="weather-02" class="weather-item" @click="weatherClick2"></div>
          <div id="weather-03" class="weather-item" @click="weatherClick3"></div>
          <div id="weather-04" class="weather-item" @click="weatherClick4"></div>
        </div>
        <div class="weather-r">
          <div class="weather-r-l"></div>
          <div class="weather-r-c">
            <div class="weather-r-c-b">
              <div class="weather-r-c-f" ref="slideref" :style="{left: slideLeft +'px'}" id="weather-slide"
                   @mousedown="slideMouseOver"></div>
            </div>

          </div>
          <div class="weather-r-r"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'weather',
  components: {},
  data() {
    return {
      canMove: false,
      old_left: null,
      old_position_left: null,
      slideLeft: 0,
    }
  },
  created() {
    window.getUe4Time= this.getUe4Time
  },
  mounted() {

  },
  methods: {
    // 天气组件交互
    //晴天
    weatherClick1() {
      ue4("setWeather", {"TypeCode": '001'})
    },
    // 多云
    weatherClick2() {
      ue4("setWeather", {"TypeCode": '002'})
    },
    //雨天
    weatherClick3() {
      ue4("setWeather", {"TypeCode": '003'})
    },
    //雪天
    weatherClick4() {
      ue4("setWeather", {"TypeCode": '004'})
    },
    slideMouseOver(event) {
      //获取鼠标按下的时候左侧偏移量和上侧偏移量
      this.old_left = event.pageX;//左侧偏移量
      //获取鼠标的位置
      this.old_position_left = this.slideLeft;
      this.canMove = true
      this.slideMouseMove()
    },
    slideMouseMove() {
      let _this = this
      document.onmousemove = function (event) {
        if (!_this.canMove) {
          return false
        }
        let new_left = event.pageX;//新的鼠标左侧偏移量
        //计算发生改变的偏移量是多少
        let chang_x = new_left - _this.old_left;
        //计算出现在的位置是多少
        let new_position_left = _this.old_position_left + chang_x;
        if (new_position_left > 220 - _this.$refs.slideref.offsetWidth) {
          new_position_left = 220 - _this.$refs.slideref.offsetWidth;
        }
        if (new_position_left < 0) {//左边的偏移量小于0的时候设置 左边的位置为0
          new_position_left = 0;
        }
        _this.slideLeft = new_position_left
        // console.log(_this.slideLeft)
        let res = parseInt(new_position_left / (220 - _this.$refs.slideref.offsetWidth) * 2400)
        res = (Array(4).join('0') + res).slice(-4)
        ue4("setTime", {"TimeCode": res});
      }
      document.onmouseup = function () {
        this.canMove = false
        document.onmousemove = null;
      }
    },
    //获取当前ue4的时间 类型：0-2400
    getUe4Time(e) {
      let _time = e.time
      if (_time > 2400) {
        _time = 2400
      }
      if (_time < 0) {
        _time = 0
      }
      this.slideLeft = parseInt(_time / 2400 * 220)
    }
  }
}
</script>

<style scoped>
.weather-box {
  position: fixed;
  left: 50%;
  z-index: 9;
  bottom: 0px;
  width: 600px;
  height: 100px;
  cursor: pointer;
  padding-top: 50px;
  transform: translate(-50%, -10%);
}

.weather-open {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100px;
  height: 100px;
  cursor: pointer;
}

.trans-r {
  transform: rotate(180deg);
}

.trans-l {
  transform: rotate(0deg);
}


/*.weather-box:hover .weather {*/
/*    display: flex;*/
/*}*/

.weather {
  width: 600px;
  display: flex;
  align-items: center;
  opacity: 0.8;
  margin: 0 auto;
}

.weather .weather-l {
  display: flex;
  align-items: center;
  margin-right: 14px;
}

.weather-item:hover {
  transform: scale(1.2);
}

.weather .weather-l > div {
  width: 40px;
  height: 40px;
  margin-right: 14px;
  background-size: contain;
}

.weather .weather-l > div:nth-child(1) {
  background-image: url("../../assets/images/img19.png");
}

.weather .weather-l > div:nth-child(2) {
  background-image: url("../../assets/images/img14.png");
}

.weather .weather-l > div:nth-child(3) {
  background-image: url("../../assets/images/img25.png");
}

.weather .weather-l > div:nth-child(4) {
  background-image: url("../../assets/images/img26.png");
}

.weather .weather-r {
  position: relative;
  background-image: url("../../assets/images/img24.png");
  width: 300px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-size: contain;
}

.weather .weather-r .weather-r-l {
  width: 24px;
  height: 24px;
  background-image: url("../../assets/images/img17.png");
  margin-left: 10px;
  background-size: contain;
}

.weather .weather-r .weather-r-r {
  width: 24px;
  height: 24px;
  background-image: url("../../assets/images/img18.png");
  margin-right: 12px;
  background-size: contain;
}

.weather-r-c-b {
  position: absolute;
  left: 40px;
  top: 14px;
  width: 220px;
  height: 12px;
  background-image: url("../../assets/images/img23.png");
  background-size: contain;
  border-radius: 20px;
}

.weather-r-c-f {
  position: absolute;
  left: 0px;
  top: -1px;
  width: 12px;
  height: 16px;
  background-image: url("../../assets/images/img22.png");
  cursor: pointer;
  background-size: contain;
}

</style>
