<template>
  <div class="container-fluid">
    <div>
        开始时间：<DatePickerTemp @on-change="startTime" :types="date"/>
        结束时间：<DatePickerTemp @on-change="endTime" :types="date"/>
        范围：<DatePickerTemp @on-change="rangeTime" :types="daterange" :quick="quick"/>
    </div>
    <div class="container-fluid">
      <div class="panel panel-primary">
        <div class="panel-heading">日期控件属性：</div>
        <div class="panel-body">
          <table class="table">
            <thead>
            <tr>
              <td>参数名称</td>
              <td>使用说明</td>
              <td>默认值</td>
              <td>待完善功能</td>
              <td>坑或注意点</td>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>types</td>
              <td>日期控件展示类型；date／daterange／datetime／daterangetime</td>
              <td>date</td>
              <td>／</td>
              <td>／</td>
            </tr>
            <tr>
              <td>quick</td>
              <td>快捷选项；true／false</td>
              <td>false</td>
              <td>／</td>
              <td>／</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="panel panel-primary">
        <div class="panel-heading">日期控件方法：</div>
        <div class="panel-body">
          <table class="table">
            <thead>
            <tr>
              <td>名称</td>
              <td>使用说明</td>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>on-change</td>
              <td>
                在 自定义组件 DatePickerTemp 中绑定 on-change 事件<br/>
                用来接收被选中的值。
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <div class="panel-footer">
          <p class="bg-danger">
            注意点：如果页面中存在1～个 自定义 DatePickerTemp 组件，那么只要绑定不通的 on-change 事件就可以了。
          </p>
        </div>
      </div>
      <div class="panel panel-primary">
        <div class="panel-heading">日期控件方法：</div>
        <div class="panel-body">
          <p>1、在 <span class="badge">script</span> 标签中引入组件 <span class="badge">import DatePickerTemp from './DatePickerTemp.vue'</span></p>
          <p>2、在 components 中 导入组件名称 <span class="badge">InputTemp</span> </p>
          <p>3、在 html 中 定义：InputTemp 标签；绑定属性【types、quick】；绑定方法【on-change】;详细请看源代码第四行)
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import DatePickerTemp from './DatePickerTemp.vue'
  export default {
    data () {
      return {
        date: 'date',
        daterange: 'daterange',
        quick: true
      }
    },
    methods: {
      startTime (val) {
        console.log('开始', val)
      },
      endTime (val) {
        console.log('结束', val)
      },
      rangeTime (val) {
        console.log('范围', val)
      }
    },
    components: {
      DatePickerTemp
    }
  }
</script>
