
<template>
    <as-cell
        :label="label"
        is-arrow
        :value="value"
        :is-vertical="isVertical"
        :required="required"
        :is-arrow="!computedShowClear && isArrow"
        class="as-datetime-range-picker"
    >
        <span class="as-datetime-range-value" :class="[computedValue[0] && 'active']" @click="handleSelectDate(computedValue[0], 0)">{{ computedValue[0] || startPlaceholder }}</span>
        <span class="as-datetime-range-bar">-</span>
        <span class="as-datetime-range-value" :class="[computedValue[1] && 'active']" @click="handleSelectDate(computedValue[1], 1)">{{ computedValue[1] || endPlaceholder }}</span>
        <template #suffix>
            <van-icon
                @click.stop="handleClear"
                v-show="computedShowClear"
                class="as-datetime-range-clear"
                name="clear"
            />
        </template>
        <as-datetime-popup ref="refDatetimePopup"/>
    </as-cell>
</template>

<script>
    import { Icon } from 'vant'
    import AsDatetimePopup from '../as-datetime-popup'
    import AsCell from '../as-cell'
    import { isNotEmpty } from '../../../plugins/utils/validator'

    export default {
        name: 'AsDatetimeRangePicker',
        props: {
            label: { default: '' },
            value: { default: '' },
            startPlaceholder: { default: '开始时间' },
            endPlaceholder: { default: '结束时间' },
            valueFormat: { default: 'yyyy-MM-dd' },
            type: { default: 'date' },
            maxDate: { default: undefined },
            minDate: { default: undefined },
            clearable: { type: Boolean, default: false },
            disabled: { type: Boolean, default: false },
            isArrow: { type: Boolean, default: true },
            isVertical: { type: Boolean, default: false },
            required: { type: Boolean, default: false },
        },
        computed: {
            computedValue () {
                return this.value || []
            },
            computedShowClear() {
                return isNotEmpty(this.value) && !this.disabled && this.clearable
            },
        },
        methods: {
            handleSelectDate (value, index) {
                const { maxDate, minDate, type, valueFormat } = this
                this.$refs.refDatetimePopup.show({ value, maxDate, minDate, type, valueFormat }).then(res => {
                    const v = this.value || []
                    v[index] = res
                    this.$emit('input', [...v])
                }).toast()
            },
            handleClear () {
                this.$emit('input', '')
                this.$emit('change', '')
            },
        },
        components: {
            AsDatetimePopup,
            AsCell,
            VanIcon: Icon,
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/define";
    .as-datetime-range{
        &-picker{
            /deep/{
                .as-cell-value{
                    span{
                        padding: j(2) j(10);
                    }
                }
            }
        }
        &-value{
            @extend %df;
            @extend %aic;
            @extend %jcc;
            @extend %cp;
            @extend %ao8;
            min-width: j(80);
            background-color: #f2f2f2;
            &.active{
                @extend %c3;
            }
        }
        &-bar{
            @extend %c3;
        }
        &-clear{
            @extend %df;
            @extend %aic;
            @extend %cp;
            @extend %jcc;
            @extend %pr;
            z-index: 1;
            color: #ccc;
            width: j(16);
            height: j(30);
            padding-left: j(8);
            font-size: j(16);
        }
    }
</style>

