<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="datetime"
                            placeholder="选择日期时间">
                            </e-date-picker>
                        </div>
                        <div class="block">
                            <span class="demonstration">带快捷选项</span>
                            <e-date-picker
                            v-model="value2"
                            type="datetime"
                            placeholder="选择日期时间"
                            align="right"
                            :picker-options="pickerOptions">
                            </e-date-picker>
                        </div>
                        <div class="block">
                            <span class="demonstration">设置默认时间</span>
                            <e-date-picker
                            v-model="value3"
                            type="datetime"
                            placeholder="选择日期时间"
                            default-time="12:00:00">
                            </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="value4"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                            </e-date-picker>
                        </div>
                        <div class="block">
                            <span class="demonstration">带快捷选项</span>
                            <e-date-picker
                            v-model="value5"
                            type="datetimerange"
                            :picker-options="pickerOptions1"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            align="right">
                            </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">起始日期时刻为 12:00:00</span>
                            <e-date-picker
                            v-model="value6"
                            type="datetimerange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['12:00:00']">
                            </e-date-picker>
                        </div>
                        <div class="block">
                            <span class="demonstration">起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span>
                            <e-date-picker
                            v-model="value7"
                            type="datetimerange"
                            align="right"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['12:00:00', '08:00:00']">
                            </e-date-picker>
                        </div>
                    </div>
                </e-card>
            </e-col>
        </e-row>
    </div>
</template>
<script>

export default {
    components: {},
    data() {
        return {
            pickerOptions: {
            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: '',
            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]);
                }
            }]
            },
            value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
            value5: '',
            value6: '',
            value7: ''
        }
    },
    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>
