<template>
  <section class="sv-rating-wrapper" :class="{'rating-text-bottom': textPosition === 'bottom'}">
    <div class="sv-rating-stars">
      <template v-for="num in count">
        <sv-icon v-if="num <= selectedCount" icon="star-fill" color="danger" class="rating-star" @click="handleSelect(num)"></sv-icon>
        <sv-icon v-else icon="star" class="rating-star" @click="handleSelect(num)"></sv-icon>
      </template>
    </div>
    <div class="sv-rating-text" v-if="selectedCount > 0">
      {{texts[selectedCount - 1]}}
    </div>
  </section>
</template>

<script>
  export default {
    name: 'svRating',
    data () {
      return {
        selectedCount: 0
      }
    },
    props: {
      count: {
        type: Number,
        default: 5
      },
      texts: {
        type: Array,
        default () {
          return ['非常差', '差', '一般', '好', '非常好']
        }
      },
      value: Number,
      textPosition: {
        type: String,
        default: 'right'
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      selectedCount (val) {
        this.$emit('input', val)
      },
      value (val) {
        this.selectedCount = val
      }
    },
    methods: {
      handleSelect (selectedCount) {
        if (this.disabled) return
        this.selectedCount = selectedCount
        this.$emit('change', selectedCount)
      }
    },
    mounted () {
      if (this.value) {
        this.selectedCount = this.value
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../styles/base";
  .sv-rating-wrapper{
    display: flex;
    align-items: center;
    &.rating-text-bottom{
      display: block;
      .sv-rating-stars{
        display: block;
        margin-bottom: pxToRem(20px);
      }
      .sv-rating-text{
        display: block;
      }
    }
    .sv-rating-stars{
      flex: 1;
      .rating-star{
        margin-right: pxToRem(20px);
        transition:color .5s;
        &:last-child{
          margin-right: 0;
        }
      }
    }
    .sv-rating-text{
      flex-shrink: 0;
      margin-left: pxToRem(20px);
      font-size: pxToRem(28px);
      color: $color-danger;
    }
  }
</style>
