<style lang="less">
.temperture-control-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ebeef5;
  box-sizing: border-box;
  padding-top: 288rpx;
  z-index:2;
}

.temperture-control-panel.hide {
  display: none;
}

.temperture-control-panel.show {
  display: block;
}

.slot-panel.hide {
  display: none;
}

.slot-panel.show {
  display: block;
}

.temperture-control-panel .title {
  font-size: 32rpx;
  line-height: 44rpx;
  text-align: center;
  color: rgba(9, 9, 61, 0.45);
}

.temperture-control-panel.down .slider {
  margin-top: 116rpx;
}

.temperture-control-panel.up .slider {
  margin-bottom: 116rpx;
}

.slider .rect-slider {
  width: 184rpx;
  height: 174rpx;
  display: block;
  margin: 0 auto;
}
.temperture-control-panel.down .rect-slider {
  background: rgba(77, 148, 255, 0.12);
}

.temperture-control-panel.up .rect-slider {
  background: rgba(255, 136, 77, 0.14);
}

.temperture-control-panel.down .rect-slider.bright {
  background-color: #4d94ff;
}

.temperture-control-panel.up .rect-slider.bright {
  background-color: #ff884d;
}

.slider .split {
  width: 184rpx;
  height: 2rpx;
  background-color: white;
  margin: 0 auto;
}
.temperture-control-panel.up .slider {
  transform: rotate(180deg);
}

.slider .arrow-slider {
  height: 232rpx;
  width: 296rpx;
  background-size: 100%;
  background-repeat: no-repeat;
  margin: 0 auto;
  display: block;
}

.icon-wrapper {
  width: 68rpx;
  height: 68rpx;
  padding: 10rpx;
  box-sizing: border-box;
}

.icon-wrapper .icon {
  width: 100%;
  height: 100%;
}
.icon-wrapper.weight {
  padding: 0;
}

.temperture-control-panel .icon-wrapper {
  display: block;

  margin: 44rpx auto 0 auto;
}
</style>

<template>
  <view
    v-on:touchstart="touchStart"
    v-on:touchmove.stop="touchMove"
    v-on:touchend="touchEnd"
    data-source="temerturerSlider"
  >
    <view
      class="{{(('temperture-control-panel') + ' ' +((show === true)?'show': 'hide') + ' ' +(type))}}"
    >
      <view class="title" wx:if="{{type=='down'}}">
        <block wx:if="{{moveTimes==0}}">下滑降温</block>
        <block wx:if="{{moveTimes==1}}">松开降点温</block>
        <block wx:if="{{moveTimes==2}}">松开快速降温</block>
      </view>
      <view class="slider">
        <view class="rect-slider" :class="{ 'bright': moveTimes>=1 }"></view>
        <view class="split"></view>
        <image
          class="{{(('arrow-slider') + ' ' +((moveTimes>1)?'bright': ''))}}"
          mode="scaleToFill"
          src="{{arrowSliderUrl}}"
        />
        <view class="icon-wrapper" :class="{ 'weight': moveTimes==2 }">
          <image src="{{iconUrl}}" class="icon" />
        </view>
      </view>
      <view class="title" wx:if="{{type=='up'}}">
        <block wx:if="{{moveTimes==0}}">上滑升温</block>
        <block wx:if="{{moveTimes==1}}">松开升点温</block>
        <block wx:if="{{moveTimes==2}}">松开快速升温</block>
      </view>
    </view>

    <view class="{{(('slot-panel') + ' ' +((show === true)?'hide': 'show') + ' ' +(type))}}">
      <slot></slot>
    </view>
  </view>
</template>

<script>
import wepy from '@wepy/core';
import config from '@/config';

let h5StaticPath = config.h5StaticPath + '/page-intelligent-control/';
let startY = 0;
wepy.component({
  data: {
    moveTimes: 0
  },
  props: {
    show: Boolean,
    type: {
      type: String,
      default: 'down'
    }
  },
  computed: {
    iconUrl: function() {
      let url = h5StaticPath;
      if (this.type === 'down') {
        switch (this.moveTimes) {
          case 0:
            url += 'snow_light.svg';
            break;
          case 1:
            url += 'snow.svg';
            break;
          case 2:
            url += 'snow_big.svg';
            break;
        }
      } else if (this.type == 'up') {
        switch (this.moveTimes) {
          case 0:
            url += 'sun_light.svg';
            break;
          case 1:
            url += 'sun.svg';
            break;
          case 2:
            url += 'sun_big.svg';
            break;
        }
      }
      return url;
    },
    arrowSliderUrl: function() {
      let url = h5StaticPath;
      if (this.type === 'down') {
        switch (this.moveTimes) {
          case 0:
            url += 'icon_down_arrow_light.png';
            break;
          case 1:
            url += 'icon_down_arrow_light.png';
            break;
          case 2:
            url += 'icon_down_arrow.png';
            break;
        }
      } else if (this.type == 'up') {
        switch (this.moveTimes) {
          case 0:
            url += 'icon_up_arrow_light.png';
            break;
          case 1:
            url += 'icon_up_arrow_light.png';
            break;
          case 2:
            url += 'icon_up_arrow.png';
            break;
        }
      }
      return url;
    }
  },
  methods: {
    juchangeCanmove(e) {
      return this.show;
    },
    touchStart(e) {
      startY = Number(e.touches[0].pageY);
    },
    touchMove(e) {
      let touch = e.touches[0], //获取第一个触点
        y = Number(touch.pageY); //页面触点Y坐标
      if (!this.juchangeCanmove(e)) {
        return;
      }

      let touchLength = parseInt(y - startY);
      this.calsliderNumber(touchLength, y);
    },
    calsliderNumber(touchLength, touchPageY) {
      if (Math.abs(touchLength) > 30) {
        //距离够了才算有效操作
        let moveTimes = this.moveTimes;
        if (this.type == 'down') {
          if (touchLength > 0) {
            //向下加一
            if (moveTimes >= 2) {
              return;
            }
            ++moveTimes;
          } else if (touchLength < 0) {
            //向上减1
            if (moveTimes <= 0) {
              return;
            }
            --moveTimes;
          }
        } else if (this.type == 'up') {
          //向上滑动
          if (touchLength < 0) {
            //向上加一
            if (moveTimes >= 2) {
              return;
            }
            ++moveTimes;
          } else if (touchLength > 0) {
            //向下减1
            if (moveTimes <= 0) {
              return;
            }
            --moveTimes;
          }
        }
        this.recordInfo(moveTimes, touchPageY);
      }
    },
    recordInfo(moveTimes, touchPageY) {
      this.moveTimes = moveTimes;
      if (wx.canIUse('vibrateShort')) {
        wx.vibrateShort();
      }
      startY = Number(touchPageY);
    },
    touchCancel(e) {
      if (!this.juchangeCanmove(e)) {
        return;
      }
      this.reset();
    },
    touchEnd(e) {
      if (!this.juchangeCanmove(e)) {
        return;
      }
      setTimeout(() => {
        //松手后0.1s再隐藏
        this.reset();
      }, 100);
    },
    reset() {
      this.$emit('component-temperture-control-end', {
        type: this.type,
        level: this.moveTimes
      });
      startY = 0;
      this.moveTimes = 0;
    }
  }
});
</script>


