<template>
  <div class="demo-container">
    <h2>XRate 评分组件示例</h2>

    <div class="demo-section">
      <h3>基础用法</h3>
      <x-rate v-model="basicRate" />
      <div>当前值: {{ basicRate }}</div>
      <a-button @click="resetBasicRate">重置</a-button>
    </div>

    <div class="demo-section">
      <h3>允许半星</h3>
      <x-rate v-model="halfRate" :allow-half="true" />
      <div>当前值: {{ halfRate }}</div>
    </div>

    <div class="demo-section">
      <h3>自定义最大分值</h3>
      <x-rate v-model="customRate" :max-count="10" />
      <div>当前值: {{ customRate }}</div>
    </div>

    <div class="demo-section">
      <h3>查询模式</h3>
      <x-rate v-model="queryRate" mode="查询" />
      <div>当前值: {{ queryRate }}</div>
    </div>

    <div class="demo-section">
      <h3>查询模式（多选）</h3>
      <x-rate v-model="queryMultiRate" mode="查询" query-type="IN" />
      <div>当前值: {{ queryMultiRate }}</div>
    </div>

    <div class="demo-section">
      <h3>禁用状态</h3>
      <x-rate v-model="disabledRate" :disabled="true" />
      <div>当前值: {{ disabledRate }}</div>
    </div>

    <div class="demo-section">
      <h3>空值处理</h3>
      <x-rate v-model="emptyRate" />
      <div>当前值: {{ emptyRate }}</div>
      <a-button @click="clearRate">清除</a-button>
    </div>
  </div>
</template>

<script>
import XRate from './index.vue'

export default {
  name: 'XRateDemo',
  components: {
    XRate
  },
  data () {
    return {
      basicRate: 3,
      halfRate: 3.5,
      customRate: 7,
      queryRate: 4,
      queryMultiRate: [3, 4],
      disabledRate: 2,
      emptyRate: undefined
    }
  },
  methods: {
    resetBasicRate () {
      this.basicRate = 3
    },
    clearRate () {
      this.emptyRate = undefined
    }
  }
}
</script>

<style lang="less" scoped>
.demo-container {
  padding: 20px;

  .demo-section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 4px;

    h3 {
      margin-top: 0;
      margin-bottom: 16px;
      color: #333;
    }

    .ant-btn {
      margin-top: 8px;
    }
  }
}
</style>
