<template>
  <div class="bxs-rate-demo-wrapper">
    <ul>
      <li>
        <p>默认(零配置)</p>
        <bxs-rate />
      </li>
      <li>
        <p>默认(竖版完整)</p>
        <bxs-rate
          :value="2"
          :text-list="['非常差1', '差2', '一般3', '好4', '非常好5']"
          :tag="1"
          :tag-list="['服务好1', '速度快2', '效率高3']"
          />
      </li>
      <li>
        <p>change事件 & 默认标签</p>
        <bxs-rate 
          :tag-list="true"
          @change="getReturnValue"
          />
      </li>
      <li>
        <p>指定评分 + 自定义文案 + 字体大小</p>
        <bxs-rate 
          v-model="value" 
          size="1.19rem"
          :tag-list="true"
          :text-list="textList"
          />
      </li>
      <li>
        <p>自定义颜色 & 只读(不可点击)</p>
        <bxs-rate 
          v-model="value" 
          color="#0dd" 
          void-color="#cefbfd"
          readonly
          />
      </li>
      <li>
        <p>文案居右 & 显示标题 </p>
        <bxs-rate 
          position="right" 
          rate-label="整体评价:"
          />
      </li>
      <li @click="onlyReadMessage">
        <p>文案居右(只读) & icon大小 & 不展示评分</p>
        <bxs-rate 
          v-model="value" 
          position="right" 
          :readonly="true" 
          star-size="12px"
          star-width="90px"
          :show-rate-num="false"
          />
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: 3.3,
      textList: [
        '自定义文案一',
        '自定义文案二',
        '自定义文案三',
        '自定义文案四',
        '自定义文案五',
      ],
    }
  },
  methods: {
    getReturnValue(value, tag) {
      this.$toast(`当前选中值：评分=${value}; 标签=${tag}}`)
    },
    onlyReadMessage() {
      this.$toast(`只读状态，不阻止事件冒泡`)
    },
  },
}
</script>
<style scoped>
.bxs-rate-demo-wrapper {
  & > ul {
    & > li {
      position: relative;
      padding: 10px 10px;
      margin-bottom: 15px;
      background: #fff;
      & > p {
        font-size: 15px;
        color: #666;
        margin-bottom: 10px;
        text-align: center;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>
