<template>
    <div class="ht-base-date-picker-button-demo">
        <ht-base-row>
            <ht-base-col span="24">
                <ht-base-date-picker type="date" confirm placeholder="请选择" style="width: 300px"></ht-base-date-picker>
            </ht-base-col>
        </ht-base-row>
        <br>
        <ht-base-row>
            <ht-base-col span="24">
                <ht-base-date-picker type="date" :options="options1" placeholder="请选择"
                                     style="width: 300px"></ht-base-date-picker>
            </ht-base-col>
        </ht-base-row>
        <br>
        <ht-base-row>
            <ht-base-col span="24">
                <ht-base-date-picker
                        :open="open"
                        :value="value3"
                        confirm
                        type="date"
                        @on-change="handleChange"
                        @on-clear="handleClear"
                        @on-ok="handleOk">
                    <div class="demo-selectdata" @click="handleClick">
                        <ht-base-icon type='LiRa_calendar' />
                        <template v-if="value3 === ''">选择日期</template>
                        <template v-else>{{ value3 }}</template>
                    </div>
                </ht-base-date-picker>
            </ht-base-col>
        </ht-base-row>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseDatePickerButtonDemo',
        data() {
            return {
                options1: {
                    shortcuts: [
                        {
                            text: '今天',
                            value() {
                                return new Date();
                            },
                            onClick: (picker) => {
                                this.$HtBaseMessage.info('选择今天');
                            }
                        },
                        {
                            text: '昨天',
                            value() {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24);
                                return date;
                            },
                            onClick: (picker) => {
                                this.$HtBaseMessage.info('选择昨天');
                            }
                        },
                        {
                            text: '明天',
                            value() {
                                const date = new Date();
                                date.setTime(date.getTime() + 3600 * 1000 * 24);
                                return date;
                            },
                            onClick: (picker) => {
                                this.$HtBaseMessage.info('选择明天');
                            }
                        },
                        {
                            text: '上一周',
                            value() {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                return date;
                            },
                            onClick: (picker) => {
                                this.$HtBaseMessage.info('选择上一周');
                            }
                        },
                        {
                            text: '下一周',
                            value() {
                                const date = new Date();
                                date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
                                return date;
                            },
                            onClick: (picker) => {
                                this.$HtBaseMessage.info('选择下一周');
                            }
                        }
                    ]
                },
                open: false,
                value3: '',
            }
        },
        methods: {
            handleClick() {
                this.open = !this.open;
            },
            handleChange(date) {
                this.value3 = date;
            },
            handleClear() {
                this.open = false;
            },
            handleOk() {
                this.open = false;
            }
        }
    }
</script>
<style>
    .ht-base-date-picker-button-demo {

    .demo-selectdata {
        color: #228ef8 !important;
    }

    }
</style>

