<template>
  <view class="cv-rate-area">
    <view
      class="cv-rate-item"
      v-for="i in parseInt(max)"
      :key="i"
      :style="i <= locaValue ? starSelected : starStyle"
      :data-value="i"
      @tap="click_star"
    >
      <template v-if="isFill == true && i > locaValue">☆</template>
      <template v-else>★</template>
    </view>
  </view>
</template>

<script>
import mpMixin from '../../libs/mixin/mpMixin.js';
import mixin from '../../libs/mixin/mixin.js';
export default {
  mixins: [mpMixin, mixin],
  name: 'cvRate',
  emits: ['input', 'update:modelValue'],
  props: {
    // 当前评分
    value: {
      type: [Number, String],
      default: 0
    },
    modelValue: {
      type: [Number, String],
      default: 0
    },
    isFill: {
      // 星星的类型，是否镂空
      type: [Boolean, String],
      default: false
    },
    color: {
      // 星星的颜色
      type: String,
      default: '#ececec'
    },
    activeColor: {
      // 星星选中状态颜色
      type: String,
      default: '#ffca3e'
    },
    size: {
      // 星星的大小
      type: [Number, String],
      default: 24
    },
    max: {
      // 最大评分
      type: [Number, String],
      default: 5
    },
    margin: {
      // 星星的间距
      type: [Number, String],
      default: 0
    },
    disabled: {
      // 是否可点击
      type: [Boolean, String],
      default: false
    }
  },
  data() {
    return {
      locaValue: 1,
      starStyle: '',
      starSelected: ''
    };
  },
  watch: {
    value(newVal) {
      this.locaValue = newVal;
    },
    modelValue(newVal) {
      this.locaValue = newVal;
    }
  },
  created() {
    this.locaValue = this.doValueGet();
    console.log(this.locaValue);
    this._dealStyle();
  },
  methods: {
    doValueGet() {
      if (this.value === 0) return this.modelValue;
      if (this.modelValue === 0) return this.value;
      return this.value;
    },
    _dealStyle() {
      if (this.color) {
        let starStyle = 'font-size:' + this.size + 'px;';
        starStyle += 'color:' + this.color + ';';
        starStyle += 'margin-right:' + this.margin + 'px;';
        let starSelected = starStyle;
        starSelected += 'color:' + this.activeColor + ';';
        this.starStyle = starStyle;
        this.starSelected = starSelected;
      }
    },
    click_star(e) {
      if (this.disabled) return;
      let value = e.target.dataset.value;
      this.locaValue = value;
      this.$emit('input', value);
      this.$emit('update:modelValue', value);
    }
  }
};
</script>

<style>
.cv-rate-area {
  display: flex;
  line-height: initial;
  min-height: 35px;
}
/* .cv-rate-item {
  position: relative;
  display: block;
  color: #999999;
  width: 0px;
  height: 0px;
  border-right: 10px solid transparent;
  border-bottom: 7px solid #999999;
  border-left: 10px solid transparent;
  transform: rotate(35deg) translate(10px, 10px);
  margin-right: 5px;
  transition: all 0.3s;
}
.cv-rate-item-selected {
  color: red;
  border-bottom-color: red;
}
.cv-rate-item:before {
  border-bottom: 8px solid #999999;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -4.5px;
  left: -6.5px;
  display: block;
  content: "";
  transform: rotate(-35deg);
  transition: all 0.3s;
}
.cv-rate-item-selected:before {
  border-bottom-color: red;
}
.cv-rate-item:after {
  position: absolute;
  display: block;
  color: #999999;
  top: 0.3px;
  left: -10.5px;
  width: 0px;
  height: 0px;
  border-right: 10px solid transparent;
  border-bottom: 7px solid #999999;
  border-left: 10px solid transparent;
  transform: rotate(-70deg);
  content: "";
  transition: all 0.3s;
}
.cv-rate-item-selected:after {
  color: red;
  border-bottom-color: red;
} */
.cv-rate-item {
  color: #999999;
  transition: all 0.3s;
  margin-right: 3px;
}
.cv-rate-item-selected {
  color: red;
}
</style>
