<template>
  <div class="component-wrapper">
    <hgroup class="component-hgroup">
      <h1 class="component-title">Dialog (弹出框)</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 {Dialog} from 'sinoiov-ui'
              Vue.use(Dialog)
            </sv-code>
          </article>
        </div>
      </div>
    </section>

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

      <div class="component-item-content">
        <fieldset class="component-item-content-hgroup">
          <legend class="component-item-content-title">基本用法</legend>
          <div class="component-item-content-subtitle">直接给$dialog方法传入字符串，第一个参数为显示内容，第二个参数为标题</div>
        </fieldset>
        <div class="component-item-content-main">
          <article class="component-item-preview">
            <sv-button @click="openDialog('欢迎使用sinoiovUI', '提示')">点击弹出Dialog</sv-button>
          </article>
          <article class="component-item-code">
            <sv-code language="javascript">
              this.$dialog('欢迎使用sinoiovUI', '提示')
            </sv-code>
          </article>
        </div>
      </div>

      <div class="component-item-content">
        <fieldset class="component-item-content-hgroup">
          <legend class="component-item-content-title">传入对象</legend>
          <div class="component-item-content-subtitle">在调用$dialog时传入一个对象即可配置更多选项</div>
        </fieldset>
        <div class="component-item-content-main">
          <article class="component-item-preview">
            <sv-button @click="openDialog({type: 'alert', message: 'sinoiovUI很好', title: '提示'})">点击弹出Dialog</sv-button>
          </article>
          <article class="component-item-code">
            <sv-code language="javascript">
              this.$dialog({
                type: 'alert',
                message: 'sinoiovUI很好',
                title: '提示'
              })
            </sv-code>
          </article>
        </div>
      </div>

      <div class="component-item-content">
        <fieldset class="component-item-content-hgroup">
          <legend class="component-item-content-title">alert弹框</legend>
          <div class="component-item-content-subtitle">$dialog还具有alert()、confirm()、prompt()三个方法，它们都返回一个Promise</div>
        </fieldset>
        <div class="component-item-content-main">
          <article class="component-item-preview">
            <sv-button @click="openAlertDialog('很好的框架')">打开alert</sv-button>
          </article>
          <article class="component-item-code">
            <sv-code language="javascript">
              this.$dialog.alert('很好的框架').then(() => {})
            </sv-code>
          </article>
        </div>
      </div>

      <div class="component-item-content">
        <fieldset class="component-item-content-hgroup">
          <legend class="component-item-content-title">confirm弹框</legend>
          <div class="component-item-content-subtitle">点击确定回调then，点击取消回调catch</div>
        </fieldset>
        <div class="component-item-content-main">
          <article class="component-item-preview">
            <sv-button @click="openConfirmDialog">打开confirm</sv-button>
          </article>
          <article class="component-item-code">
            <sv-code language="javascript">
              this.$dialog.confirm('sinoiovUI框架你喜欢吗？', '调查')
              .then(() => {
                alert('点击了确定，感谢')
              }).catch(() => {
                alert('点击了取消，我会更加努力的')
              })
            </sv-code>
          </article>
        </div>
      </div>

      <div class="component-item-content">
        <fieldset class="component-item-content-hgroup">
          <legend class="component-item-content-title">prompt弹框</legend>
          <div class="component-item-content-subtitle">inputType默认为text, 可以设置为textarea以输入更多的内容</div>
        </fieldset>
        <div class="component-item-content-main">
          <article class="component-item-preview">
            <sv-button @click="openPromptDialog">打开prompt</sv-button>
          </article>
          <article class="component-item-code">
            <sv-code language="javascript">
              this.$dialog.prompt({
                inputValidator: value => {
                  if (value.length < 3) {
                    return '最少三个字'
                  } else {
                    return true
                  }
                }
              }).then(value => {
                console.log(value)
              }).catch(() => {})
            </sv-code>
          </article>
        </div>
      </div>
    </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">$dialog</h1>
          <h1 class="component-item-content-subtitle">$dialog(message, title)或者$dialog(options)，但是尽量使用后者，因为前者推荐使用$dialog.confirm()替代。后者常用来显示一个由用户精心定制的dialog。</h1>
        </div>
        <div class="component-item-content-main api">
          <sv-tabs position="top" stripe slidable>
            <sv-tab :value="0" title="Options">
              <sv-table :data="apiData.dialog.props">
                <sv-table-column prop="name" title="名称"></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-tab>
            <sv-tab :value="2" title="Events">
            </sv-tab>
          </sv-tabs>
        </div>
      </div>
      <div class="component-item-content">
        <div class="component-item-content-header">
          <h1 class="component-item-content-title">alert</h1>
          <h1 class="component-item-content-subtitle">alert(message, title, options)或者alert(message,options)</h1>
        </div>
        <div class="component-item-content-main api">
          <sv-tabs position="top" stripe slidable>
            <sv-tab :value="0" title="Options">
              <sv-table :data="apiData.alert.props">
                <sv-table-column prop="name" title="名称"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="100"></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-tab>
            <sv-tab :value="2" title="Events">
            </sv-tab>
          </sv-tabs>
        </div>
      </div>
      <div class="component-item-content">
        <div class="component-item-content-header">
          <h1 class="component-item-content-title">confirm</h1>
          <h1 class="component-item-content-subtitle">confirm(message, title)或者confirm(message, options)</h1>
        </div>
        <div class="component-item-content-main api">
          <sv-tabs position="top" stripe slidable>
            <sv-tab :value="0" title="Options">
              <sv-table :data="apiData.confirm.props">
                <sv-table-column prop="name" title="名称"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="100"></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-tab>
            <sv-tab :value="2" title="Events">
            </sv-tab>
          </sv-tabs>
        </div>
      </div>
      <div class="component-item-content">
        <div class="component-item-content-header">
          <h1 class="component-item-content-title">prompt</h1>
          <h1 class="component-item-content-subtitle">prompt(title, options)或者prompt(options)</h1>
        </div>
        <div class="component-item-content-main api">
          <sv-tabs position="top" stripe slidable>
            <sv-tab :value="0" title="Options">
              <sv-table :data="apiData.prompt.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-tab>
            <sv-tab :value="2" title="Events">
            </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 {
        apiData: {
          dialog: {
            props: [
              {
                name: 'type',
                description: '对话框类型',
                type: 'string',
                optional: 'alert,confirm,prompt',
                default: 'confirm'
              },
              {
                name: '',
                description: '其他属性详见type属性对应的参数列表',
                type: '-',
                optional: '-',
                default: '-'
              }
            ]
          },
          alert: {
            props: [
              {
                name: 'message',
                description: '对话框内容',
                type: 'string',
                optional: '-',
                default: '-'
              },
              {
                name: 'title',
                description: '对话框标题',
                type: 'string',
                optional: '-',
                default: '提示'
              },
              {
                name: 'confirmButtonText',
                description: '对话框按钮文字',
                type: 'string',
                optional: '-',
                default: '确定'
              }
            ]
          },
          confirm: {
            props: [
              {
                name: 'message',
                description: '对话框内容',
                type: 'string',
                optional: '-',
                default: '-'
              },
              {
                name: 'title',
                description: '对话框标题',
                type: 'string',
                optional: '-',
                default: '提示'
              },
              {
                name: 'confirmButtonText',
                description: '对话框确定按钮文字',
                type: 'string',
                optional: '-',
                default: '确定'
              },
              {
                name: 'cancelButtonText',
                description: '对话框取消按钮文字',
                type: 'string',
                optional: '-',
                default: '取消'
              }
            ]
          },
          prompt: {
            props: [
              {
                name: 'message',
                description: '对话框内容',
                type: 'string',
                optional: '-',
                default: '-'
              },
              {
                name: 'title',
                description: '对话框标题',
                type: 'string',
                optional: '-',
                default: '请输入'
              },
              {
                name: 'confirmButtonText',
                description: '对话框确定按钮文字',
                type: 'string',
                optional: '-',
                default: '确定'
              },
              {
                name: 'cancelButtonText',
                description: '对话框取消按钮文字',
                type: 'string',
                optional: '-',
                default: '取消'
              },
              {
                name: 'inputType',
                description: '输入框类型',
                type: 'string',
                optional: 'text,textarea',
                default: 'text'
              },
              {
                name: 'inputPlaceholder',
                description: '输入框占位文字',
                type: 'string',
                optional: '',
                default: '请输入'
              },
              {
                name: 'inputLabel',
                description: '输入框label',
                type: 'string',
                optional: '',
                default: ''
              },
              {
                name: 'inputLabelPosition',
                description: '输入框label位置',
                type: 'string',
                optional: 'top,left,right,center',
                default: 'top'
              },
              {
                name: 'inputValidator',
                description: '输入框内容校验,value为输入框的值。返回值类型为boolean类型时，返回false则将显示inputValidateMessage的文字；如果返回字符串，则将字符串作为inputValidateMessage的值并显示',
                type: 'function(value)',
                optional: '-',
                default: '-'
              },
              {
                name: 'inputValidateMessage',
                description: '输入框内容校验提示文字',
                type: 'string',
                optional: '-',
                default: '-'
              },
            ]
          }
        }
      }
    },
    methods: {
      openDialog (message, title) {
        this.$dialog(message, title)
      },
      openAlertDialog (message, title, options) {
        this.$dialog.alert(message, title, options).then(() => {})
      },
      openConfirmDialog () {
        this.$dialog.confirm('sinoiovUI框架你喜欢吗？', '调查').then(() => {
          alert('点击了确定，感谢')
        }).catch(() => {
          alert('点击了取消，我会更加努力的')
        })
      },
      openPromptDialog () {
        this.$dialog.prompt({
          inputValidator: (value) => {
            console.log(value)
            if (value.length < 3) {
              return '最少三个字'
            } else {
              return true
            }
          }
        }).then((value) => {
          console.log(value)
        }).catch(() => {

        })
      }
    }
  }
</script>

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