<!--星星评分-->
<template>
  <div ref="star" :class="['star', 'star-' + size]" @touchstart="touchStart" @horizontalpan="touchMove">
    <div v-for="i in 5" :key="i" :class="['iconfont', 'iconfont-' + size]" @click="disabled ? '' : setScore(i)">
      <template v-if="allowHalf">
        <image
          v-if="_theme !== 'colmo'"
          :style="{ opacity: _isDiablo ? 0.85 : 1 }"
          :class="['star-img', 'star-img-' + size]"
          :src="i <= score ? imgStarOn : i == score + 0.5 ? imgStarHalf : imgStarOff"
        ></image>
        <image
          v-if="_theme == 'colmo'"
          :class="['star-img', 'star-img-' + size]"
          :src="i <= score ? colmoImgStarOn : i == score + 0.5 ? colmoImgStartHalf : colmoImgStarOff"
        ></image>
        <!-- <image v-else :class="['star-img', 'star-img-' + size]" :src="i <= score ? imgStarOn : imgStarOff"></image> -->
      </template>
      <template v-else>
        <image
          v-if="_theme !== 'colmo'"
          :style="{ opacity: _isDiablo ? 0.85 : 1 }"
          :class="['star-img', 'star-img-' + size]"
          :src="i <= score ? imgStarOn : imgStarOff"
        ></image>
        <image
          v-if="_theme == 'colmo'"
          :class="['star-img', 'star-img-' + size]"
          :src="i <= score ? colmoImgStarOn : colmoImgStarOff"
        ></image>
      </template>
      <div
        :class="['left', 'left-' + size]"
        v-if="allowHalf"
        @click="!disabled && allowHalf ? setScore(i - 0.5) : ''"
      ></div>
      <div
        :class="['right', 'right-' + size]"
        v-if="allowHalf"
        @click="!disabled && allowHalf ? setScore(i) : ''"
      ></div>
    </div>
  </div>
</template>

<script>
const dom = weex.requireModule('dom')
import { bigBlank, bigColmoBlank, bigHalf, bigColmoHalf, bigFill, bigColmoFill } from './icon.base64.js'
import DofIconfont from '../dof-iconfont'
import ColmoMixin from '../../mixins/colmo'
import DiabloMixin from '../../mixins/diablo'
const MIN_DISTANCE = 30
export default {
  name: 'StarRate',
  mixins: [ColmoMixin, DiabloMixin],
  components: {
    DofIconfont
  },
  props: {
    curScore: {
      type: Number,
      default: 0
    },
    disabled: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'big'
    },
    allowHalf: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      score: '',
      imgStarOn: bigFill,
      imgStarHalf: bigHalf,
      imgStarOff: bigBlank,
      colmoImgStarOn: bigColmoFill,
      colmoImgStarOff: bigColmoBlank,
      colmoImgStartHalf: bigColmoHalf,
      starOffsetLeft: 0, // 包裹星星的div的X坐标
      startX: 0,
      startY: 0,
      deltaX: 0,
      offsetY: 0,
      direction: '',
      starWidth: 0,
      lastMoveStamp: 0,
      finalScore: ''
    }
  },
  created() {},
  mounted() {
    this.score = this.curScore
  },
  computed: {
    iconSize() {
      const map = {
        big: 64,
        mid: 56,
        small: 32
      }
      return map[this.size]
    }
  },
  watch: {
    score(newVal, oldVal) {
      //延迟500ms比较最新的分数，如果newVal==this.curScore，表示滑动已结束
      let timeOut = setTimeout(() => {
        if (newVal == this.curScore) {
          // console.log('newVal:'+newVal+" curScore:"+this.curScore)
          this.finalScore = this.curScore
          let data = { score: this.finalScore, type: 'touchEnd' }
          this.$emit('setScore', data)
          clearTimeout(timeOut)
        }
      }, 100)
    }
  },
  methods: {
    setScore(score) {
      this.curScore = score
      this.score = score
      let data = { score: this.score, type: 'click' }
      this.$emit('setScore', data)
    },
    getDirection(x, y) {
      if (x > y && x > MIN_DISTANCE) {
        return 'horizontal'
      }
      if (y > x && y > MIN_DISTANCE) {
        return 'vertical'
      }
      return ''
    },
    resetTouchStatus() {
      this.direction = ''
      this.deltaX = 0
      this.deltaY = 0
      this.offsetX = 0
      this.offsetY = 0
    },
    touchStart(evt) {
      let self = this
      if (self.disabled) return
      self.resetTouchStatus()
      if (evt && evt.changedTouches.length === 1) {
        self.startX = evt.changedTouches[0].pageX
        self.startY = evt.changedTouches[0].pageY
      }
    },
    touchMove(evt) {
      let self = this
      let now = new Date().getTime()
      let timeDiff = now - self.lastMoveStamp
      //设置滑动更新数据间隔时间，避免频繁更新数据，导致安卓上渲染星星src失败
      if (timeDiff < 40 || self.disabled) return
      self.lastMoveStamp = now
      //首次滑动时，获取星星组件width和offsetLeft,并且保存，避免每次滑动时都获取组件width和offsetLeft
      if (!self.starWidth) {
        let el = this.$refs.star
        dom.getComponentRect(el, options => {
          if (options.result && options.size.left) {
            self.starWidth = options.size.width / 5
            self.starOffsetLeft = options.size.left
            self.setTouchScore(evt)
          }
        })
      } else {
        self.setTouchScore(evt)
      }
    },
    setTouchScore(evt) {
      let self = this
      if (evt && evt.changedTouches.length === 1) {
        self.deltaX = evt.changedTouches[0].pageX - self.startX
        self.deltaY = evt.changedTouches[0].pageY - self.startY
        self.offsetX = Math.abs(self.deltaX)
        self.offsetY = Math.abs(self.deltaY)
        self.direction = self.direction || self.getDirection(self.offsetX, self.offsetY)
        if (self.direction == 'horizontal') {
          let distanceX = evt.changedTouches[0].screenX - self.starOffsetLeft + 40
          let starNum = distanceX / self.starWidth
          if (starNum > 5) {
            starNum = 5
          } else if (starNum >= 0.4 && starNum <= 0.5) {
            //<=0.5
            starNum = 0.5
          } else if (starNum < 0.4) {
            // 解决半星滑动操作时，不能清空星星的问题
            starNum = 0
          } else {
            if (starNum >= Math.floor(starNum) && starNum < Math.floor(starNum) + 0.5) {
              starNum = Math.floor(starNum)
            } else {
              starNum = Math.floor(starNum) + 0.5
            }
          }
          self.curScore = starNum
          self.score = starNum
          // console.log("touchmove:"+starNum)
          let data = { score: starNum, type: 'touchMove' }
          self.$emit('setScore', data)
        }
      }
    }
  }
}
</script>
<style scoped>
.star {
  flex-direction: row;
  justify-content: space-between; /* item横向排布方式 */
  /* background-color:lightblue; */
}
.star-big {
  width: 416px; /* 5*32+4*12 = 208 */
}
.star-mid {
  width: 392px; /* 5*28+4*14 = 196 */
}
.star-small {
  width: 176px; /* 5*16+4*2 = 88 */
}
.iconfont {
  position: relative;
  font-size: 36px;
  transition: 0.3s;
  /* margin-left: 20px; */
}
.iconfont-big {
  width: 64px;
  height: 64px;
  /* margin-left: 4px; */
}
.iconfont-mid {
  width: 56px;
  height: 56px;
  /* margin-left: 12px; */
}
.iconfont-small {
  width: 32px;
  height: 32px;
  /* margin-left: 4px; */
}
.star-img {
}
.star-img-big {
  width: 64px;
  height: 64px;
}
.star-img-mid {
  width: 56px;
  height: 56px;
}
.star-img-small {
  width: 32px;
  height: 32px;
}
.left {
  position: absolute;
  left: 0;
  top: 0;
}
.left-big {
  width: 32px;
  height: 64px;
}
.left-mid {
  width: 28px;
  height: 56px;
}
.left-small {
  width: 16px;
  height: 32px;
}
.right {
  position: absolute;
  top: 0;
  /* background-color: green; */
}
.right-big {
  width: 32px;
  height: 64px;
  left: 32px;
}
.right-mid {
  width: 28px;
  height: 56px;
  left: 28px;
}
.right-small {
  width: 16px;
  height: 32px;
  left: 16px;
}
</style>
