<template>
  <div>
    <h1>DatePicker 日期选择组件</h1>
    <p class="fbg-text">用于选择或输入日期</p>
    <h3 class="fbg-title">基础用法</h3>
    <demo :code="baseStr">
      <el-date-picker type="date" v-model="dateValue" @change="handleChange"/>
    </demo>
    <h3 class="fbg-title">日期时间组件</h3>
    <demo :code="datetimeStr">
      <el-date-picker type="datetime" @change="handleChange" v-model="datetimeValue" />
    </demo>
    <h3 class="fbg-title">日期范围组件</h3>
    <demo :code="daterangeStr">
      <el-date-picker type="daterange" format="yyyy年MM月dd日" v-model="daterangeValue" />
    </demo>
    <h3 class="fbg-title">日期时间范围组件</h3>
    <demo :code="datetimerangeStr">
      <el-date-picker type="datetimerange" v-model="datetimerangeValue" />
    </demo>
    <h3 class="fbg-title">禁用日期</h3>
    <demo :code="disabledDateStr">
      <el-date-picker type="date" :picker-options="pickerOptions" v-model="disabledDate" />
      <el-date-picker type="daterange" :picker-options="pickerRangeOptions" v-model="disabledDateRange" style="margin-top: 10px;"/>
    </demo>
    <h3 class="fbg-title">格式化</h3>
    <demo :code="formatDateStr">
      <el-date-picker type="date" format="yyyy年MM月dd日" value-format="yyyy年MM月dd日"  v-model="formatDate" />
    </demo>
    <h3 class="fbg-title">嵌套select 组件</h3>
    <demo :code="selectionDateStr">
      <el-date-picker type="date" v-model="formatDate">
        <el-select :value="1" style="width: 90px;" slot="selection">
          <el-option :value="1" label="测试"/> 
        </el-select>
      </el-date-picker>
    </demo>
    <h3 class="fbg-title">DatePicker 属性</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>readonly</td>
          <td>完全只读</td>
          <td>Boolean</td>
          <td>true|false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>disabled</td>
          <td>禁用</td>
          <td>Boolean</td>
          <td>true|false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>placeholder</td>
          <td>非范围选择时的占位内容。</td>
          <td>string</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>type</td>
          <td>显示类型</td>
          <td>string</td>
          <td>date|daterange</td>
          <td>date</td>
        </tr>
        <tr>
          <td>format</td>
          <td>显示文本值的日期格式</td>
          <td>string</td>
          <td>--</td>
          <td>yyyy-MM-dd hh:mm:ss</td>
        </tr>
        <tr>
          <td>value-format</td>
          <td>返回值的日期格式</td>
          <td>string</td>
          <td>--</td>
          <td>yyyy-MM-dd hh:mm:ss</td>
        </tr>
        <tr>
          <td>picker-options</td>
          <td>日期组件展示内容配置</td>
          <td>Object</td>
          <td>--</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">pickerOptions 配置</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>disabledDate</td>
          <td>设置禁用状态（具体用法请参考“禁用日期”部分）</td>
          <td>Function</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>disabledChooseDateRange</td>
          <td>设置范围选择时的禁用状态（具体用法请参考“禁用日期”部分）</td>
          <td>Function</td>
          <td>--</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">插槽</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>selecttion</td>
          <td>嵌入下拉选择框</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">事件</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>回调参数</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>change</td>
          <td>数据改变时触发的事件</td>
          <td>组件绑定值。格式与绑定值一致，可受 value-format 控制</td>
        </tr>
        <tr>
          <td>confirm</td>
          <td>用户点击确认选定时触发</td>
          <td>组件绑定值。格式与绑定值一致，可受 value-format 控制</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import hljs from '../util/highlight';
export default {
  data() {
    return {
      dateValue: '',
      datetimeValue: '',
      formatDate: '',
      disabledDate: '',
      disabledDateRange: [],
      daterangeValue: [],
      datetimerangeValue: [],
      pickerOptions: {
        disabledDate(date) {
          return date.getTime() > new Date().getTime()
        }
      },
      pickerRangeOptions: {
        disabledDate(date) {
          return date.getTime() > new Date().getTime()
        },
        disabledChooseDateRange(date, chooseDate) {
          const sevenDay = 1000*60*60*24*7;
          const chooseDateStamp = chooseDate.getTime();
          return date.getTime() <= ( chooseDateStamp - sevenDay) || date.getTime() >= (chooseDateStamp+ sevenDay)
        }
      },
      baseStr: `
      <template>
        <div>
          <el-date-picker type="date"  v-model="dateValue" />
        </div>
      </template>
      <script>
      export default {
        data() {
          return {
            dateValue: ''
          }
        },
      }
      <\/script>
      `,
      disabledDateStr: `
      <template>
        <div>
          <el-date-picker type="date" :picker-options="pickerOptions" v-model="disabledDate" />
          <el-date-picker type="daterange" :picker-options="pickerRangeOptions" v-model="disabledDateRange" />
        </div>
      </template>
      <script>
      export default {
        data() {
          return {
            disabledDate: '',
            disabledDateRange: [],
            pickerOptions: {
              disabledDate(date) {
                return date.getTime() > new Date().getTime();
              }
            },
            pickerRangeOptions: {
                disabledDate(date) {
                  return date.getTime() > new Date().getTime();
                },
                disabledChooseDateRange(date, chooseDate) {
                  const sevenDay = 1000*60*60*24*7;
                  const chooseDateStamp = chooseDate.getTime();
                  return date.getTime() <= ( chooseDateStamp - sevenDay) || date.getTime() >= (chooseDateStamp+ sevenDay);
                }
              }
          }
        },
      }
      <\/script>
      `,
      formatDateStr: `
      <template>
        <div>
          <el-date-picker type="date" format="yyyy年MM月dd日" value-format="yyyy年MM月dd日"  v-model="dateValue" />
        </div>
      </template>
      <script>
      export default {
        data() {
          return {
            dateValue: ''
          }
        },
      }
      <\/script>
      `,
      datetimeStr: `
      <template>
        <div>
            <el-date-picker type="datetime" v-model="datetimeValue" />
        </div>
      </template>
      <script>
      export default {
        data() {
          return {
            datetimeValue: '',
          }
        },
      }
      <\/script>
      `,
      daterangeStr: `
      <template>
        <div>
            <el-date-picker type="daterange" v-model="daterangeValue" />
        </div>
      </template>
      <script>
      export default {
        data() {
          return {
            daterangeValue: [],
          }
        },
      }
      <\/script>
      `,
      datetimerangeStr: `
      <template>
        <div>
            <el-date-picker type="datetimerange" v-model="datetimerangeValue" />
        </div>
      </template>
      <script>
      export default {
        data() {
          return {
            datetimerangeValue: [],
          }
        },
      }
      <\/script>
      `,
      selectionDateStr: `
      <template>
        <el-date-picker type="date" value-format="YY-MM-dd"  v-model="dateValue">
          <el-select :value="1" style="width: 90px;" slot="selection">
            <el-option :value="1" label="测试"/> 
          </el-select>
        </el-date-picker>
      </template>
      <script>
      export default {
        data() {
          return {
            dateValue: '',
          }
        },
      }
      <\/script>
      `
    }
  },
  methods: {
    handleChange(v){
      console.log(v)
    }
  },
  mounted() {
    hljs.highlightCode();
  },
}
</script>
<style lang="scss" scoped>

</style>