<template>
    <div class="content">
        <e-row :gutter="24">
            <!-- 选择日 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>选择日</span>
                    </div>
                    <div>
                        <div class="block">
                            <span class="demonstration">默认</span>
                            <e-date-picker
                            v-model="value1"
                            type="date"
                            placeholder="选择日期">
                            </e-date-picker>
                        </div>
                        <div class="block">
                            <span class="demonstration">带快捷选项</span>
                            <e-date-picker
                            v-model="value2"
                            align="right"
                            type="date"
                            placeholder="选择日期"
                            :picker-options="pickerOptions">
                            </e-date-picker>
                        </div>
                    </div>
                </e-card>
            </e-col>
            <!-- 其他日期单位 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>其他日期单位</span>
                    </div>
                    <div>
                            <div class="block">
                                <span class="demonstration">周</span>
                                <e-date-picker
                                v-model="value3"
                                type="week"
                                format="yyyy 第 WW 周"
                                placeholder="选择周">
                                </e-date-picker>
                            </div>
                            <div class="block">
                                <span class="demonstration">月</span>
                                <e-date-picker
                                v-model="value4"
                                type="month"
                                placeholder="选择月">
                                </e-date-picker>
                            </div>
                            <div class="block">
                                <span class="demonstration">年</span>
                                <e-date-picker
                                v-model="value5"
                                type="year"
                                placeholder="选择年">
                                </e-date-picker>
                            </div>
                            <div class="block">
                                <span class="demonstration">多个日期</span>
                                <e-date-picker
                                type="dates"
                                v-model="value6"
                                placeholder="选择一个或多个日期">
                                </e-date-picker>
                            </div>
                            <div class="block">
                                <span class="demonstration">多个月</span>
                                <e-date-picker
                                type="months"
                                v-model="value7"
                                placeholder="选择一个或多个月">
                                </e-date-picker>
                            </div>
                            <div class="block">
                                <span class="demonstration">多个年</span>
                                <e-date-picker
                                type="years"
                                v-model="value8"
                                placeholder="选择一个或多个年">
                                </e-date-picker>
                            </div>
                    </div>
                </e-card>
            </e-col>
            <!-- 选择日期范围 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>选择日期范围</span>
                    </div>
                    <div>
                        <div class="block">
                            <span class="demonstration">默认</span>
                            <e-date-picker
                            v-model="value9"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                            </e-date-picker>
                        </div>
                        <div class="block">
                            <span class="demonstration">带快捷选项</span>
                            <e-date-picker
                            v-model="value10"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions1">
                            </e-date-picker>
                        </div>
                    </div>
                </e-card>
            </e-col>
            <!-- 选择月份范围 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>选择月份范围</span>
                    </div>
                    <div>
                        <div class="block">
                            <span class="demonstration">默认</span>
                            <e-date-picker
                            v-model="value11"
                            type="monthrange"
                            range-separator="至"
                            start-placeholder="开始月份"
                            end-placeholder="结束月份">
                            </e-date-picker>
                        </div>
                        <div class="block">
                            <span class="demonstration">带快捷选项</span>
                            <e-date-picker
                            v-model="value12"
                            type="monthrange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始月份"
                            end-placeholder="结束月份"
                            :picker-options="pickerOptions3">
                            </e-date-picker>
                        </div>
                    </div>
                </e-card>
            </e-col>
        </e-row>
    </div>
</template>
<script>

export default {
    components: {},
    data() {
        return {
            pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
        value3: '',
        value4: '',
        value5: '',
        value6: '',
        value7: '',
        value8: '',
        pickerOptions1: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value9: '',
        value10: '',
        pickerOptions3: {
          shortcuts: [{
            text: '本月',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()]);
            }
          }, {
            text: '今年至今',
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value11: '',
        value12: ''
        }
    },
    mounted() {
    },
    methods: {
    }
}
</script>
  
<style>
.marginLeft {
    margin-left: 10px
}
.content {
    height: 100%;
    padding: 30px;
    background:#fff;
}

.block {
    display: inline-block;
    margin-left: 10px;
}

.box-card .el-col{
    margin-bottom:10px;
}
  </style>
