<template>
  <div class="component-wrapper">
    <hgroup class="component-hgroup">
      <h1 class="component-title">List（列表）</h1>
      <h2 class="component-subtitle">列表组件非常常见，和Item组件配合使用</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 {List, Item} from 'sinoiov-ui'
  Vue.component(List.name, List)
  Vue.component(Item.name, Item)
</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">基本用法</h2>
        <template slot="preview">
          <sv-list>
            <sv-item @click="handleClick">item1</sv-item>
            <sv-item>item2</sv-item>
            <sv-item>item3</sv-item>
          </sv-list>
        </template>
        <template slot="code">
          <sv-code language="html">
            <sv-code-item :level="1" code='<sv-list>'></sv-code-item>
            <sv-code-item :level="2" code='<sv-item>item1</sv-item>'></sv-code-item>
            <sv-code-item :level="2" code='<sv-item>item2</sv-item>'></sv-code-item>
            <sv-code-item :level="2" code='<sv-item>item3</sv-item>'></sv-code-item>
            <sv-code-item :level="1" code='</sv-list>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">可点击样式</h2>
        <h2 slot="subtitle">设置is-link属性为true, 列表右侧会有个向右的箭头，点击后会有交互效果。is-link为boolean值，默认为false</h2>
        <template slot="preview">
          <sv-list>
            <sv-item :is-link="true">item1</sv-item>
            <sv-item :is-link="true" to="icon">
              item2
              <span slot="value">查看Icon组件</span>
            </sv-item>
            <sv-item>item3</sv-item>
          </sv-list>
        </template>
        <template slot="code">
          <sv-code language="html">
            <sv-code-item :level="1" code='<sv-list>'></sv-code-item>
            <sv-code-item :level="2" code='<sv-item :is-link="true">item1</sv-item>'></sv-code-item>
            <sv-code-item :level="2" code='<sv-item :is-link="true" to="list/item">item2</sv-item>'></sv-code-item>
            <sv-code-item :level="2" code='<sv-item>item3</sv-item>>'></sv-code-item>
            <sv-code-item :level="1" code='</sv-list>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">二级列表</h2>
        <h2 slot="subtitle">设置is-accordion属性为true, 通过名为accordion的slot指定子列表</h2>
        <template slot="preview">
          <sv-list>
            <sv-item :is-accordion="true">
              北京市
              <sv-list slot="accordion">
                <sv-item>海淀区</sv-item>
                <sv-item>昌平区</sv-item>
                <sv-item>东城区</sv-item>
              </sv-list>
            </sv-item>
          </sv-list>
        </template>
        <template slot="code">
          <sv-code language="html">
            <sv-code-item code='<sv-list>'></sv-code-item>
            <sv-code-item :level="2" code='<sv-item :is-accordion="true">'></sv-code-item>
            <sv-code-item :level="3" code='北京市'></sv-code-item>
            <sv-code-item :level="3" code='<sv-list slot="accordion">'></sv-code-item>
            <sv-code-item :level="4" code='<sv-item>海淀区</sv-item>'></sv-code-item>
            <sv-code-item :level="4" code='<sv-item>昌平区</sv-item>'></sv-code-item>
            <sv-code-item :level="4" code='<sv-item>东城区</sv-item>'></sv-code-item>
            <sv-code-item :level="3" code='</sv-list>'></sv-code-item>
            <sv-code-item :level="2" code='</sv-item>'></sv-code-item>
            <sv-code-item code='</sv-list>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">智能化布局</h2>
        <h2 slot="subtitle">title,subtitle,content,value,note等多个属性来快速完成布局，同时也可以通过同名的slot自定义。value和note一般不要同时使用。</h2>
        <template slot="preview">
          <sv-list>
            <sv-item title="title" value="value" :is-link="true"></sv-item>
            <sv-item note="12-20 08:20">
              value和note的区别在于：value始终垂直居中，而note始终显示在右上（下）角，当内容超过1行时，两者差异会明显
            </sv-item>
            <sv-item title="幸福" subtitle="能和心爱的人淋一场雨也是一种幸福地方的沙发斯蒂芬但是防守打法但是范德萨发的是方式"></sv-item>
          </sv-list>
        </template>
        <template slot="code">
          <sv-code language="html">
            <sv-code-item code='<sv-list>'></sv-code-item>
            <sv-code-item :level="2" code='<sv-item title="title" value="value" :is-link="true"></sv-item>'></sv-code-item>
            <sv-code-item :level="2" code='<sv-item note="12-20 08:20">value和note的区别在于：value始终垂直居中，而note始终显示在右上（下）角，当内容超过1行时，两者差异会明显</sv-item>'></sv-code-item>
            <sv-code-item :level="2" code='<sv-item title="幸福" subtitle="能和心爱的人淋一场雨也是一种幸福地方的沙发斯蒂芬但是防守打法但是范德萨发的是方式"></sv-item>'></sv-code-item>
            <sv-code-item code='</sv-list>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">图文列表</h2>
        <h2 slot="subtitle">可以在列表中展示头像，缩略图或者其他任何图片，就像微信聊天一样。Item组件上有icon-type和icon-position两个常用来控制图片样式的属性（还有其他一些属性，详见最下方api）。icon-type主要控制图片的类型，实际为控制图片的大小，有avatar,thumbnail,icon三种取值，默认为空字符，分别表示头像、缩略图和字体图标；icon-position控制图片位置，有left和right两种取值，默认为left。</h2>
        <template slot="preview">
          <sv-list>
           <sv-item icon-type="avatar" subtitle="iconType为avatar，iconPosition为left" title="头像居于左侧">
             <img src="../images/list/shuijiao.jpg" slot="icon">
           </sv-item>
            <sv-item icon-type="avatar" icon-position="right" subtitle="iconType为avatar，iconPosition为left" title="头像居于右侧">
              <img src="../images/list/shuijiao.jpg" slot="icon">
            </sv-item>
            <sv-item icon-type="thumbnail" subtitle="iconType为avatar，iconPosition为left" title="缩略图居于左侧">
              <img src="../images/list/shuijiao.jpg" slot="icon">
            </sv-item>
            <sv-item icon-type="thumbnail" icon-position="right" subtitle="iconType为avatar，iconPosition为left" title="缩略图居于右侧">
              <img src="../images/list/shuijiao.jpg" slot="icon">
            </sv-item>
            <sv-item icon-type="avatar" subtitle="爸爸妈妈，我们需要你们的陪伴，希望忙碌赚钱的你们能抽出时间陪陪我们" title="孩子真逗" note="下午4:30">
              <img src="../images/list/yanjing.jpg" slot="icon">
            </sv-item>
          </sv-list>
        </template>
        <template slot="code">
          <sv-code language="html">
            <sv-code-item code='<sv-list>'></sv-code-item>
            <sv-code-item :level="2" code='<sv-item icon-type="avatar" subtitle="iconType为avatar，iconPosition为left" title="头像居于左侧">'></sv-code-item>
            <sv-code-item :lebel="3" code='<img src="../images/list/shuijiao.jpg" slot="icon">'></sv-code-item>
            <sv-code-item :level="2" code='</sv-item>'></sv-code-item>

            <sv-code-item :level="2" code='<sv-item icon-type="avatar" icon-position="right" subtitle="iconType为avatar，iconPosition为left" title="头像居于右侧">'></sv-code-item>
            <sv-code-item :lebel="3" code='<img src="../images/list/shuijiao.jpg" slot="icon">'></sv-code-item>
            <sv-code-item :level="2" code='</sv-item>'></sv-code-item>

            <sv-code-item :level="2" code='<sv-item icon-type="thumbnail" subtitle="iconType为avatar，iconPosition为left" title="缩略图居于左侧">'></sv-code-item>
            <sv-code-item :lebel="3" code='<img src="../images/list/shuijiao.jpg" slot="icon">'></sv-code-item>
            <sv-code-item :level="2" code='</sv-item>'></sv-code-item>

            <sv-code-item :level="2" code='<sv-item icon-type="thumbnail" icon-position="right" subtitle="iconType为avatar，iconPosition为left" title="缩略图居于右侧">'></sv-code-item>
            <sv-code-item :lebel="3" code='<img src="../images/list/shuijiao.jpg" slot="icon">'></sv-code-item>
            <sv-code-item :level="2" code='</sv-item>'></sv-code-item>

            <sv-code-item :level="2" code='<sv-item icon-type="avatar" subtitle="爸爸妈妈，我们需要你们的陪伴，希望忙碌赚钱的你们能抽出时间陪陪我们" title="孩子真逗" note="下午4:30">'></sv-code-item>
            <sv-code-item :lebel="3" code='<img src="../images/list/shuijiao.jpg" slot="icon">'></sv-code-item>
            <sv-code-item :level="2" code='</sv-item>'></sv-code-item>
            <sv-code-item code='</sv-list>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">自定义icon样式</h2>
        <h2 slot="subtitle">如果icon-type不能满足您的需求，此时可通过icon-style属性自定义icon的样式。值为对象或者可以解析为对象的字符串，对象的属性为css的属性。</h2>
        <template slot="preview">
          <sv-list>
            <sv-item icon-style="{width: '100px', height: '100px', borderRadius: '20px', border: '1px solid red'}" subtitle="通过icon-style属性设置" title="自定义icon样式">
              <img src="../images/list/shuijiao.jpg" slot="icon">
            </sv-item>
          </sv-list>
        </template>
        <template slot="code">
          <sv-code language="html">
            <sv-code-item code='<sv-list>'></sv-code-item>
            <sv-code-item :level="2" code='<sv-item icon-style="{width: "100px", height: "100px", borderRadius: "20px", border: "1px solid red"}" subtitle="通过icon-style属性设置" title="自定义icon样式">'></sv-code-item>
            <sv-code-item :level="3" code='<img src="../images/list/shuijiao.jpg" slot="icon">'></sv-code-item>
            <sv-code-item :level="2" code="</sv-item>"></sv-code-item>
            <sv-code-item code='</sv-list>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">列表分隔符</h2>
        <h2 slot="subtitle">is-divider为true，即可显示一个分隔符</h2>
        <template slot="preview">
          <sv-list>
            <sv-item is-divider>城市</sv-item>
            <sv-item>北京</sv-item>
            <sv-item>上海</sv-item>
            <sv-item is-divider>爱好</sv-item>
            <sv-item>台球</sv-item>
            <sv-item>编程</sv-item>
          </sv-list>
        </template>
        <template slot="code">
          <sv-code language="html">
            <sv-code-item code='<sv-list>'></sv-code-item>
            <sv-code-item :level="2" code='<sv-item is-divider>城市</sv-item>'></sv-code-item>
            <sv-code-item :level="2" code='<sv-item>北京</sv-item>'></sv-code-item>
            <sv-code-item :level="2" code='<sv-item>上海</sv-item>'></sv-code-item>
            <sv-code-item :level="2" code='<sv-item is-divider>爱好</sv-item>'></sv-code-item>
            <sv-code-item :level="2" code='<sv-item>台球</sv-item>'></sv-code-item>
            <sv-code-item :level="2" code='<sv-item>编程</sv-item>'></sv-code-item>
            <sv-code-item code='</sv-list>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">滑动触发列表项菜单</h2>
        <h2 slot="subtitle">添加slidable属性，或设置值为true，则可以使列表滑动。同时需要向options属性传入一个对象数组。对象有以下三个属性：text,style,handler。
        text表示按钮的文字，style表示按钮的CSS样式对象，handler表示点击按钮后的回调函数，函数有一个参数，参数为当前按钮所在的Item组件的对象。例子中调用了Item组件的remove()方法，可以方便的实现删除功能。</h2>
        <template slot="preview">
          <sv-list>
            <sv-item slidable :options="options1">上海</sv-item>
            <sv-item slidable :options="options2">北京</sv-item>
          </sv-list>
        </template>
        <template slot="code">
          <sv-code language="html">
            <sv-code-item code='<sv-list>'></sv-code-item>
            <sv-code-item :level="2" code='<sv-item slidable :options="options1">上海</sv-item>'></sv-code-item>
            <sv-code-item :level="2" code='<sv-item slidable :options="options2">北京</sv-item>'></sv-code-item>
            <sv-code-item code='</sv-list>'></sv-code-item>
          </sv-code>
<sv-code language="javascript">
  export default {
    data () {
      let _this = this
      return {
        options1: [
          {
            text: '删除',
            handler (item) {
              _this.$dialog.confirm('确定删除吗？').then(() => {
                item.remove()
              }).catch(() => {})
            }
          }
        ],
        options2: [
          {
            text: '删除',
            handler (item) {
              _this.$dialog.confirm('确定删除吗？').then(() => {
              item.remove()
              }).catch(() => {})
            }
          }
        ]
      }
    }
  }
</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">list</h1>
          <h1 class="component-item-content-subtitle">暂无API</h1>
        </div>
        <div class="component-item-content-main api">
          <sv-tabs stripe position="top">
            <sv-tab :value="0" title="Props">
              <sv-table :data="apiData.list.props">
                <sv-table-column prop="name" title="名称" width="100"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="300"></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.list.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.list.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">item</h1>
          <h1 class="component-item-content-subtitle">和List组件配合使用</h1>
        </div>
        <div class="component-item-content-main api">
          <sv-tabs stripe position="top">
            <sv-tab :value="0" title="Props">
              <sv-table :data="apiData.item.props">
                <sv-table-column prop="name" title="名称" width="100"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="300"></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.item.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="Methods">
              <sv-table :data="apiData.item.methods">
                <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-tab :value="3" title="Events">
            </sv-tab>
          </sv-tabs>
        </div>
      </div>
    </section>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      let _this = this
      return {
        apiData: {
          list: {
            props: [
//              {
//                name: 'value',
//                description: '设置默认值和获取选择的值，通过v-model指定',
//                type: 'string',
//                optional: '',
//                default: ''
//              }
            ],
            slots: [],
            events: []
          },
          item: {
            props: [
              {
                name: 'is-link',
                description: '是否为链接，值为true时，右侧会显示一个右箭头，同时会有点击效果',
                type: 'boolean',
                optional: 'true,false',
                default: 'false'
              },
              {
                name: 'to',
                description: '路由的path，仅在is-link=true时有效',
                type: 'string',
                optional: '',
                default: ''
              },
              {
                name: 'is-accordion',
                description: '是否为二级列表，is-accordion属性为true, 通过名为accordion的slot指定子列表',
                type: 'boolean',
                optional: 'true,false',
                default: 'false'
              },
              {
                name: 'is-divider',
                description: '列表分隔符',
                type: 'boolean',
                optional: 'true,false',
                default: 'false'
              },
              {
                name: 'title',
                description: '标题',
                type: 'string',
                optional: '',
                default: ''
              },
              {
                name: 'subtitle',
                description: '子标题',
                type: 'string',
                optional: '',
                default: ''
              },
              {
                name: 'value',
                description: '值，显示在右侧',
                type: 'string',
                optional: '',
                default: ''
              },
              {
                name: 'note',
                description: '标记，显示在右上方或右下方',
                type: 'string',
                optional: '',
                default: ''
              },
              {
                name: 'content',
                description: '列表的内容，不建议使用，请用匿名slot或者名为content的slot代替',
                type: 'string',
                optional: '',
                default: ''
              },
              {
                name: 'icon',
                description: '图标的地址，当icon-type为icon时，icon的值为icon的class',
                type: 'string',
                optional: '',
                default: ''
              },
              {
                name: 'icon-type',
                description: '图标的类型，有avatar,thumbnail,icon三种取值，默认为空字符。前两者的区别在于样式上不同，并且icon属性的值为图片的url地址；前两者和最后一个的却别在于最后一个使用字体图标，icon值为字体图标的class',
                type: 'string',
                optional: 'avatar,thumbnail,icon',
                default: '-'
              },
              {
                name: 'icon-position',
                description: '图标的位置',
                type: 'string',
                optional: 'left,right',
                default: 'left'
              },
              {
                name: 'icon-style',
                description: '自定义图标样式',
                type: 'string,object',
                optional: '',
                default: ''
              },
              {
                name: 'slidable',
                description: '列表是否可以滑动',
                type: 'boolean',
                optional: 'true,false',
                default: 'false'
              },
              {
                name: 'options',
                description: `列表项菜单。仅当slidable属性值为true时有效。
                值为一个对象数组。对象有以下三个属性：text,style,handler。
                text表示按钮的文字；style表示按钮的CSS样式对象；handler表示点击按钮后的回调函数，函数有一个参数，参数为当前按钮所在的Item组件的对象。
                Item组件有一个remove()方法，该方法在用户想通过列表项菜单删除当前Item时可用到。`,
                type: 'array',
                optional: '',
                default: '[]'
              }
            ],
            slots: [
              {
                name: 'title',
                description: '标题'
              },
              {
                name: 'subtitle',
                description: '子标题'
              },
              {
                name: 'value',
                description: '值，显示在右侧'
              },
              {
                name: 'note',
                description: '标记，显示在右上方或右下方'
              },
              {
                name: 'content',
                description: '列表的内容，默认的slot'
              },
              {
                name: 'icon',
                description: '图标'
              },
              {
                name: 'accordion',
                description: '二级列表，仅在is-accordion为true时有效'
              },
            ],
            methods: [
              {
                name: 'remove',
                description: '删除item',
                param: '-'
              }
            ],
            events: [
//              {
//                name: 'click',
//                description: '点击Item时触发',
//                param: 'event'
//              }
            ]
          }
        },
        options1: [
          {
            text: '删除',
            handler (item) {
              _this.$dialog.confirm('确定删除吗？').then(() => {
                item.remove()
              }).catch(() => {})
            }
          }
        ],
        options2: [
          {
            text: '删除',
            handler (item) {
              _this.$dialog.confirm('确定删除吗？').then(() => {
                item.remove()
              }).catch(() => {})
            }
          }
        ]
      }
    },
    methods: {
      handleClick () {
        alert(333)
      }
    },
    created () {
    }
  }
</script>

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