<template>
  <div class="component-wrapper">
    <hgroup class="component-hgroup">
      <h1 class="component-title">Picker（选择器）</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>
      <div class="component-item-content">
        <div class="component-item-content-main">
          <article class="component-item-code">
            <sv-code language="javascript">
              import {Picker} from 'sinoiov-ui'
              Vue.component(Picker)
            </sv-code>
          </article>
        </div>
      </div>
    </section>

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

      <sv-example>
        <h2 slot="title">默认Picker</h2>
        <h2 slot="subtitle">默认显示的形式为</h2>
        <template slot="preview">
          <div v-if="value">您选择的是：{{value}}</div>
          <sv-button @click="openPicker(0)">打开</sv-button>
          <sv-picker @change="handlePickerConfirm" ref="pickerRef0" :slots="slots"></sv-picker>
        </template>
        <template slot="code">
          <sv-code language="html">
            <sv-code-item code='<sv-dist-picker v-model="visible" @confirm="handlePickerConfirm"></sv-dist-picker>'></sv-code-item>
          </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-main api">
          <sv-tabs stripe slidable position="top">
            <sv-tab :value="0" title="Props">
              <sv-table :data="apiData.props">
                <sv-table-column prop="name" title="名称"></sv-table-column>
                <sv-table-column prop="description" title="描述"></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.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="300"></sv-table-column>
              </sv-table>
            </sv-tab>
          </sv-tabs>
        </div>
      </div>
    </section>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        visible: false,
        value: '',
        slots: [
          {
            texts: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22],
            values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,13, 14, 15, 16, 17, 18, 19, 20, 21, 22]
          }
        ],
        apiData: {
          props: [],
          slots: [],
          events: [
            {
              name: 'cancel',
              description: '点击取消按钮时触发',
              param: '-'
            },
            {
              name: 'confirm',
              description: '点击确定按钮时触发',
              param: '一个区域数组，形式为[[省]，[市], [县（区）]]'
            },
            {
              name: 'change',
              description: '区域变化时触发',
              param: '和confirm事件参数相同'
            }
          ]
        }
      }
    },
    methods: {
      openPicker (index) {
        this.$refs[`pickerRef${index}`].open()
      },
      handlePickerConfirm (values) {
        this.value = `${values[0]}/${values[1]}/${values[2]}`
      }
    },
    mounted () {
//      this.openPicker(0)
    }
  }
</script>

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