<template>
  <page-container title="Rate 评分">
    <template #content>
      对评价进行展示。
      <br />
      对事物进行快速的评级操作。
    </template>
    <h-card :bordered="false">
      <h-row :gutter="32">
        <h-col :sm="24" :md="12">
          <h5>基本使用</h5>
          <div>
            <h-rate v-model:value="value" />
          </div>
        </h-col>
        <h-col :sm="24" :md="12">
          <h5>半星</h5>
          <h-rate v-model:value="value2" allow-half />
        </h-col>
      </h-row>
      <h-row :gutter="32" style="margin-top: 24px">
        <h-col :sm="24" :md="12">
          <h5>文案展现</h5>
          <h-rate v-model:value="value" :tooltips="desc" />
          <span class="ant-rate-text">{{ desc[value - 1] }}</span>
        </h-col>
        <h-col :sm="24" :md="12">
          <h5>其他字符</h5>
          <h-rate v-model:value="value1" allow-half>
            <template #character><heart-outlined /></template>
          </h-rate>
          <br />
          <h-rate v-model:value="value2" character="A" allow-half style="fontsize: 36px" />
          <br />
          <h-rate v-model:value="value3" character="好" allow-half />
          <br />
        </h-col>
      </h-row>
    </h-card>
  </page-container>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { HeartOutlined } from '@ant-design/icons-vue';

const desc: string[] = ['terrible', 'bad', 'normal', 'good', 'wonderful'];

export default defineComponent({
  name: 'RateExample',
  setup() {
    const value = ref(2);
    const value1 = ref(2);
    const value2 = ref(2.5);
    const value3 = ref(0.5);

    return {
      value,
      value1,
      value2,
      value3,

      desc,
    };
  },
  components: {
    HeartOutlined,
  },
});
</script>

<style lang="less" scoped>
h5 {
  margin-bottom: 0.5rem;
  font-weight: bold;
  font-size: 1.2em;
}
</style>
