<template>
  <div class="component-wrapper">
    <hgroup class="component-hgroup">
      <h1 class="component-title">Carousel (轮播图)</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 {Carousel, CarouselItem} from 'sinoiov-ui'
Vue.component(Carousel.name, Carousel)
Vue.component(CarouselItem.name, CarouselItem)

/* 注意：CarouselItem组件不是必须的，当需要自定义轮播内容时才需要。
  如果仅仅是图片的轮播，则只需要使用Carousel组件，
  通过data属性指定图片数组，具体见下面示例 */
</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">基本用法</h2>
        <h2 slot="subtitle">向data属性传入一个图片数组，data为必传属性，不指定或者传入一个空数组时，组件不会被渲染</h2>
        <template slot="preview">
          <sv-carousel :data="images"></sv-carousel>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-carousel :data="images"></sv-carousel>'></sv-code-item>
          </sv-code>
<sv-code language="javascript">
  import image1 from '../images/image1.jpg'
  import image2 from '../images/image2.jpg'
  import image3 from '../images/image3.jpg'
  import image4 from '../images/image4.jpg'

  export default {
    data () {
      return {
        images: [image1, image2, image3, image4]
      }
    }
  }
</sv-code>
        </template>
      </sv-example>


      <sv-example>
        <h2 slot="title">隐藏索引指示器</h2>
        <h2 slot="subtitle">设置show-indicator为false，隐藏索引指示器，默认为true</h2>
        <template slot="preview">
          <sv-carousel :data="images" :show-indicator="false"></sv-carousel>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-carousel :data="images" show-indicator></sv-carousel>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">自动播放</h2>
        <h2 slot="subtitle">设置autoplay为true，间隔2秒切换到下一张，默认为false。同时也可以通过指定duration属性控制切换的时间间隔，值为毫秒数，默认3000</h2>
        <template slot="preview">
          <sv-carousel :data="images" show-indicator autoplay></sv-carousel>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-carousel :data="images" show-indicator autoplay></sv-carousel>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">禁止循环轮播</h2>
        <h2 slot="subtitle">默认可以循环轮播，即循环到最后一张时下一张切换到第一张。将loop属性设置为false，可以禁止循环轮播。注意：autoplay为true时，loop值默认为true，仅且只能为true，不要将loop值设置为false，设置了也是没有效果的。</h2>
        <template slot="preview">
          <sv-carousel :data="images" show-indicator :loop="false"></sv-carousel>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-carousel :data="images" show-indicator :loop="false"></sv-carousel>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">默认显示</h2>
        <h2 slot="subtitle">默认显示data数组中的第一张图片，可以通过active属性指定初始显示哪张图片。注意：传入的值为图片数组的下标索引，传的值不合法时会抛出异常</h2>
        <template slot="preview">
          <sv-carousel :data="images" show-indicator :active="1"></sv-carousel>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-carousel :data="images" show-indicator :active="1"></sv-carousel>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">事件</h2>
        <h2 slot="subtitle">click事件，点击图片时触发，回调参数为当前点击的图片的索引。change事件，图片切换后触发，回调参数为当前显示的图片的索引</h2>
        <template slot="preview">
          <sv-carousel :data="images" show-indicator @click="handleClick" @change="handleChange"></sv-carousel>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-carousel :data="images" show-indicator @click="handleClick" @change="handleChange"></sv-carousel>'></sv-code-item>
          </sv-code>
<sv-code language="javascript">
import image1 from '../images/image1.jpg'
import image2 from '../images/image2.jpg'
import image3 from '../images/image3.jpg'
import image4 from '../images/image4.jpg'

export default {
  data () {
    return {
      images: [image1, image2, image3, image4]
    }
  },
  methods: {
    handleClick (index) {
      this.$toast({
        position: 'bottom',
        message: `您点击了第${index + 1}张图片`
      })
    },
    handleChange (currentIndex) {
      this.$toast({
      position: 'bottom',
      message: `当前为第${currentIndex + 1}张图片`,
      duration: 1000
      })
    }
  }
}
</sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">指定容器的宽高</h2>
        <h2 slot="subtitle">默认宽度为父容器的100%，高度为200px。可以通过width属性和height属性重新指定。可以传入数值和字符串，默认单位为px。</h2>
        <template slot="preview">
          <sv-carousel :data="images" show-indicator height="300"></sv-carousel>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-carousel :data="images" show-indicator :active="1"></sv-carousel>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">结合CarouselItem组件使用</h2>
        <h2 slot="subtitle">适合自定义轮播内容</h2>
        <template slot="preview">
          <sv-carousel autoplay>
            <sv-carousel-item>轮播1</sv-carousel-item>
            <sv-carousel-item>轮播2</sv-carousel-item>
            <sv-carousel-item>轮播3</sv-carousel-item>
          </sv-carousel>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-carousel autoplay>'></sv-code-item>
            <sv-code-item :level="2" code='<sv-carousel-item>轮播1</sv-carousel-item>'></sv-code-item>
            <sv-code-item :level="2" code='<sv-carousel-item>轮播2</sv-carousel-item>'></sv-code-item>
            <sv-code-item :level="2" code='<sv-carousel-item>轮播3</sv-carousel-item>'></sv-code-item>
            <sv-code-item code='</sv-carousel>'></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-header">
          <h1 class="component-item-content-title">Carousel</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.carousel.props">
                <sv-table-column prop="name" title="名称" width="130"></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="默认值"></sv-table-column>
              </sv-table>
            </sv-tab>
            <sv-tab :value="1" title="Slots">
              <sv-table :data="apiData.carousel.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.carousel.events">
                <sv-table-column prop="name" title="事件名称" width="80"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="200"></sv-table-column>
                <sv-table-column prop="param" title="回调参数"></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">CarouselItem</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.carouselItem.props">
                <sv-table-column prop="name" title="名称" width="130"></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="默认值"></sv-table-column>
              </sv-table>
            </sv-tab>
            <sv-tab :value="1" title="Slots">
              <sv-table :data="apiData.carouselItem.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.carouselItem.events">
                <sv-table-column prop="name" title="事件名称" width="80"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="200"></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 image1 from '../images/previewer/image1.jpg'
  import image2 from '../images/previewer/image2.jpg'
  import image3 from '../images/previewer/image3.jpg'
  import image4 from '../images/previewer/image4.jpg'
  import Code from '../components/Code.vue'
  import CodeItem from '../components/CodeItem.vue'
  export default {
    components: {
      svCode: Code,
      svCodeItem: CodeItem
    },
    data () {
      return {
        visible: false,
        images: [image1, image2, image3, image4],
        images1: [image1],
        apiData: {
          carousel: {
            props: [
              {
                name: 'data',
                description: '图片数组，不使用CarouselItem子组件时，该属性为必传参数',
                type: 'array',
                optional: '-',
                default: '[]'
              },
              {
                name: 'show-indicator',
                description: '是否显示指示器',
                type: 'boolean',
                optional: 'true,false',
                default: 'true'
              },
              {
                name: 'autoplay',
                description: '是否自动播放',
                type: 'boolean',
                optional: 'true,false',
                default: 'false'
              },
              {
                name: 'loop',
                description: '是否无限循环',
                type: 'boolean',
                optional: 'true,false',
                default: 'true'
              },
              {
                name: 'active',
                description: '指定默认显示的图片索引',
                type: 'number',
                optional: '0-data数组的长度-1范围内的整数',
                default: '0'
              },
              {
                name: 'width',
                description: '容器的宽度',
                type: 'string,number',
                optional: '-',
                default: '100%'
              },
              {
                name: 'height',
                description: '容器的高度',
                type: 'string,number',
                optional: '-',
                default: '200px'
              }
            ],
            slots: [
//              {
//                name: 'time',
//                description: '时间'
//              }
            ],
            events: [
              {
                name: 'click',
                description: '点击图片时的回调，回调参数为当前被点击图片的索引',
                param: 'index'
              },
              {
                name: 'change',
                description: '图片切换后的回调，回调参数为当前显示的图片的索引',
                param: 'index'
              }
            ]
          },
          carouselItem: {
            props: [
//              {
//                name: 'icon',
//                description: '方格中显示的Icon，取值为Icon组件的值',
//                type: 'string',
//                optional: '-',
//                default: '-'
//              }
            ],
            slots: [
              {
                name: '-',
                description: '需要显示的内容'
              }
            ],
            events: []
          },
        }
      }
    },
    methods: {
      handleClick (index) {
        this.$toast({
          position: 'bottom',
          message: `您点击了第${index + 1}张图片`
        })
      },
      handleChange (currentIndex) {
        this.$toast({
          position: 'bottom',
          message: `当前为第${currentIndex + 1}张图片`,
          duration: 1000
        })
      }
    }
  }
</script>

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