<template>
  <div class="component-wrapper">
    <hgroup class="component-hgroup">
      <h1 class="component-title">Radio </h1>
      <h2 class="component-subtitle">单选按钮</h2>
      <h3 class="component-notice">在一组中选定一个值，每个选项为互斥的</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">配合radioGroup组件，通过v-model绑定radio的值。value指定选中后的结果值；label或者无名slot指定显示的文字。</h2>
        <template slot="preview">
          <sv-radio-group  v-model="radioValue1">
            <sv-radio :value="1">选项一</sv-radio>
            <sv-radio :value="2" label="选项二"></sv-radio>
          </sv-radio-group>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-radio-group  v-model="radioValue1">'></sv-code-item>
            <sv-code-item code='<sv-radio :value="1">选项一</sv-radio>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-radio :value="2" label="选项二"></sv-radio>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-radio-group>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">列表样式</h2>
        <h2 slot="subtitle">通过type属性指定样式，可选值有list，展示为列表样式</h2>
        <template slot="preview">
          <sv-radio-group  v-model="radioValue2" type="list">
            <sv-radio :value="1">选项一</sv-radio>
            <sv-radio :value="2" label="选项二"></sv-radio>
            <sv-radio :value="3" label="选项三"></sv-radio>
          </sv-radio-group>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-radio-group v-model="radioValue2" type="list">'></sv-code-item>
            <sv-code-item code='<sv-radio :value="1">选项一</sv-radio>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-radio :value="2" label="选项二"></sv-radio>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-radio :value="3" label="选项三"></sv-radio>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-radio-group>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">设置禁用选项</h2>
        <h2 slot="subtitle">disabled=true 将radio禁用</h2>
        <template slot="preview">
          <sv-radio-group  v-model="radioValue3" type="list">
            <sv-radio :value="1" disabled>选项一</sv-radio>
            <sv-radio :value="2" label="选项二"></sv-radio>
            <sv-radio :value="3" label="选项三"></sv-radio>
          </sv-radio-group>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-radio-group v-model="radioValue3" type="list">'></sv-code-item>
            <sv-code-item code='<sv-radio :value="1" disabled>选项一</sv-radio>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-radio :value="2" label="选项二"></sv-radio>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-radio :value="3" label="选项三"></sv-radio>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-radio-group>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">右对齐</h2>
        <h2 slot="subtitle">align指定right，将右对齐。可选值有left，right。默认为left</h2>
        <template slot="preview">
          <sv-radio-group  v-model="radioValue4" type="list" align="right">
            <sv-radio :value="1">项目经验</sv-radio>
            <sv-radio :value="2" label="爱好"></sv-radio>
            <sv-radio :value="3" label="工作经验"></sv-radio>
            <sv-radio :value="4" label="特长"></sv-radio>
          </sv-radio-group>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-radio-group v-model="radioValue4" type="list">'></sv-code-item>
            <sv-code-item code='<sv-radio :value="1">项目经验</sv-radio>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-radio :value="2" label="爱好"></sv-radio>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-radio :value="3" label="工作经验"></sv-radio>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-radio :value="4" label="特长"></sv-radio>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-radio-group>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">change事件</h2>
        <h2 slot="subtitle">当v-model绑定的值发生改变时触发，回调参数为value的值</h2>
        <template slot="preview">
          <sv-radio-group  v-model="radioValue5" type="list" @change="handleChange">
            <sv-radio :value="1">选项一</sv-radio>
            <sv-radio :value="2" label="选项二"></sv-radio>
          </sv-radio-group>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-radio-group v-model="radioValue5" type="list" @change="handleChange">'></sv-code-item>
            <sv-code-item code='<sv-radio :value="1">选项一</sv-radio>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-radio :value="2" label="选项二"></sv-radio>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-radio-group>'></sv-code-item>
          </sv-code>
<sv-code language="javascript">
export default {
  data () {
    return {
      radioValue5: 1
    }
  },
  methods: {
    handleChange (value) {
      this.$toast({
        position: 'bottom',
        message: `您选择的值为 ${value}`,
        duration: 500
      })
    }
  }
}
</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">
        <div class="component-item-content-header">
          <h1 class="component-item-content-title">RadioGroup</h1>
          <h1 class="component-item-content-subtitle">省略</h1>
        </div>
        <div class="component-item-content-main api">
          <sv-tabs stripe position="top">
            <sv-tab :value="0" title="Props">
              <sv-table :data="apiData.radioGroup.props">
                <sv-table-column prop="name" title="名称" width="100"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="260"></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="默认值"></sv-table-column>
              </sv-table>
            </sv-tab>
            <sv-tab :value="1" title="Slots">
              <sv-table :data="apiData.radioGroup.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.radioGroup.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="300"></sv-table-column>
              </sv-table>
            </sv-tab>
          </sv-tabs>
        </div>
      </div>
      <div class="component-item-content">
        <div class="component-item-content-header">
          <h1 class="component-item-content-title">Radio</h1>
          <h1 class="component-item-content-subtitle">和RadioGroup组件配合使用</h1>
        </div>
        <div class="component-item-content-main api">
          <sv-tabs stripe position="top">
            <sv-tab :value="0" title="Props">
              <sv-table :data="apiData.radio.props">
                <sv-table-column prop="name" title="名称" width="100"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="120"></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="默认值"></sv-table-column>
              </sv-table>
            </sv-tab>
            <sv-tab :value="1" title="Slots">
              <sv-table :data="apiData.radio.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.radio.events">
                <sv-table-column prop="name" title="事件名称"></sv-table-column>
                <sv-table-column prop="description" title="描述"></sv-table-column>
                <sv-table-column prop="param" title="参数"></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
    },
    data () {
      return {
        radioValue1: 1,
        radioValue2: 1,
        radioValue3: 2,
        radioValue4: 1,
        radioValue5: 1,
        apiData: {
          radioGroup: {
            props: [
              {
                name: 'value',
                description: '通过v-model双向绑定',
                type: 'number，string，boolean',
                optional: '',
                default: ''
              },
              {
                name: 'type',
                description: '展示的样式',
                type: 'string',
                optional: 'list',
                default: ''
              },
              {
                name: 'align',
                description: '对齐方式，仅在type为list时有效',
                type: 'string',
                optional: 'left，right',
                default: 'left'
              }
            ],
            slots: [
//            {
//              name: 'default',
//              description: '显示的倒计时字符串'
//            }
            ],
            events: [
              {
                name: 'change',
                description: '选中某一项时触发',
                param: '参数为选中的value'
              }
            ]
          },
          radio: {
            props: [
              {
                name: 'label',
                description: 'radio的显示文字',
                type: 'string',
                optional: '-',
                default: '-'
              },
              {
                name: 'value',
                description: 'radio的value',
                type: 'number，string，boolean',
                optional: '-',
                default: '-'
              },
              {
                name: 'disabled',
                description: '是否禁用',
                type: 'boolean',
                optional: 'true，false',
                default: 'false'
              }
            ],
            slots: [
            {
              name: 'default',
              description: 'radio的显示文字，同label属性'
            }
            ],
            events: [
              {
//                name: 'change',
//                description: '选中星级触发',
//                param: '参数为选中的星级个数'
              }
            ]
          }
        }
      }
    },
    methods: {
      handleChange (value) {
       this.$toast({
         position: 'bottom',
         message: `您选择的值为 ${value}`,
         duration: 500
       })
      }
    }
  }
</script>

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