<template>
  <div class="component-wrapper">
    <hgroup class="component-hgroup">
      <h1 class="component-title">Rating (打分器)</h1>
      <h2 class="component-subtitle">打分器常用于评价功能</h2>
      <h3 class="component-notice">其他UI框架中很少有这个</h3>
    </hgroup>

    <section class="component-item">
      <hgroup class="component-item-hgroup">
        <h1 class="component-item-title">代码示例</h1>
      </hgroup>

      <sv-example>
        <h2 slot="title">指定默认星级，获取选中星级</h2>
        <h2 slot="subtitle">通过v-model进行双向绑定，值为数值类型。</h2>
        <template slot="preview">
          <sv-rating v-model="ratingLevel"></sv-rating>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-rating v-model="ratingLevel"></sv-rating>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">星级的数量</h2>
        <h2 slot="subtitle">count属性改变星级的数量，默认为5个。</h2>
        <template slot="preview">
          <sv-rating :count="3"></sv-rating>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-rating :count="3"></sv-rating>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">自定义每个星级对应的文字</h2>
        <h2 slot="subtitle">texts数组用来自定义文字，默认为：['非常差', '差', '一般', '好', '非常好']。</h2>
        <template slot="preview">
          <sv-rating :texts="['一塌糊涂', '不好', '一般般', '不错', '很棒']"></sv-rating>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-rating :texts="texts"></sv-rating>'></sv-code-item>
          </sv-code>
<sv-code language="javascript">
export default {
  data () {
    return {
      texts: ['一塌糊涂', '不好', '一般般', '不错', '很棒']
    }
  }
}
</sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">更改星级文字的位置</h2>
        <h2 slot="subtitle">text-position默认为right，显示在星级的右侧。可选的值有：bottom,right</h2>
        <template slot="preview">
          <sv-rating text-position="bottom"></sv-rating>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-rating text-position="bottom"></sv-rating>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">绑定选中星级后的回调事件change</h2>
        <h2 slot="subtitle">change(selectedCount)，回调参数为选中的星级个数</h2>
        <template slot="preview">
          <sv-rating @change="handleChange"></sv-rating>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-rating @change="handleChange"></sv-rating>'></sv-code-item>
          </sv-code>
<sv-code language="javascript">
export default {
  methods: {
    handleChange (selectedCount) {
      this.$toast({
        position: 'bottom',
        message: `你选择的星级为${selectedCount}`,
        duration: 600
      })
    }
  }
}
</sv-code>
        </template>
      </sv-example>

    </section>

    <section class="component-item api">
      <hgroup class="component-item-hgroup">
        <h1 class="component-item-title">API</h1>
      </hgroup>

      <div class="component-item-content no-header">
        <div class="component-item-content-main api">
          <sv-tabs stripe position="top">
            <sv-tab :value="0" title="Props">
              <sv-table :data="apiData.props">
                <sv-table-column prop="name" title="名称" width="100"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="200"></sv-table-column>
                <sv-table-column prop="type" title="类型"></sv-table-column>
                <sv-table-column prop="optional" title="可选值"></sv-table-column>
                <sv-table-column prop="default" title="默认值" width="200"></sv-table-column>
              </sv-table>
            </sv-tab>
            <sv-tab :value="1" title="Slots">
              <sv-table :data="apiData.slots">
                <sv-table-column prop="name" title="名称"></sv-table-column>
                <sv-table-column prop="description" title="描述"></sv-table-column>
              </sv-table>
            </sv-tab>
            <sv-tab :value="2" title="Events">
              <sv-table :data="apiData.events">
                <sv-table-column prop="name" title="事件名称" width="100"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="200"></sv-table-column>
                <sv-table-column prop="param" title="回调参数" width="100"></sv-table-column>
              </sv-table>
            </sv-tab>
          </sv-tabs>
        </div>
      </div>
    </section>
  </div>
</template>

<script type="text/ecmascript-6">
  import Code from '../components/Code.vue'
  import CodeItem from '../components/CodeItem.vue'
  export default {
    components: {
      svCode: Code,
      svCodeItem: CodeItem
    },
    watch: {
      ratingLevel (val) {
        this.$toast({
          position: 'bottom',
          message: `你选择的星级为${val}`,
          duration: 600
        })
      }
    },
    data () {
      return {
        ratingLevel: 3,
        apiData: {
          props: [
            {
              name: 'value',
              description: '通过v-model双向绑定，指定默认星级，获取选中星级',
              type: 'number',
              optional: '-',
              default: '0'
            },
            {
              name: 'count',
              description: '星级的数量，默认为5',
              type: 'number',
              optional: '-',
              default: '5'
            },
            {
              name: 'texts',
              description: '自定义文字，默认为：["非常差", "差", "一般", "好", "非常好"]。',
              type: 'array',
              optional: '-',
              default: '["非常差", "差", "一般", "好", "非常好"]'
            },
            {
              name: 'text-position',
              description: '星级文字的位置，默认为right，显示在星级的右侧',
              type: 'string',
              optional: 'bottom,right',
              default: 'right'
            }
          ],
          slots: [
//            {
//              name: 'default',
//              description: '显示的倒计时字符串'
//            }
          ],
          events: [
            {
              name: 'change',
              description: '选中星级触发',
              param: '参数为选中的星级个数'
            }
          ]
        }
      }
    },
    methods: {
      handleChange (selectedCount) {
        this.$toast({
          position: 'bottom',
          message: `你选择的星级为${selectedCount}`,
          duration: 600
        })
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../src/styles/base";
  @import "../styles/components";
</style>
