<template>
    <div class="filtrate-widget-date">
        <header class="filtrate-header" v-if="model == 'bottomFilter' && title">
            <div class="header-left text-ellipsis-one">
                {{ title }}
            </div>
            <div class="header-right" v-if="dayDiff > 0">
                {{ dayDiff }}天           
            </div>
        </header>
        <div class="header_sub">
            <slot name="widgetDateBottomFilterExtendTop"></slot>
        </div>
        <main>
            <van-cell
                v-for="(item, idx) in queryData"
                :key="idx"
                @click="handleSelect(item)"
                class="date-cell"
                :class="{'selected': value[item.property]}"
            >
                <template #title>
                    <div class="date-cell-title">
                        <div class="text-ellipsis-one date-cell-title-text">
                            <i class="iconfont icon-ic_event_note"></i>
                            {{ value[item.property] | ifNullShowTitle(item) }}
                        </div>
                        <template v-if="value[item.property]">
                            <div class="close-btn" @click.stop="handleDelDate(item.property)">
                                <i class="iconfont icon-close"></i>
                            </div>
                        </template>
                    </div>
                </template>
            </van-cell>
        </main>
        <van-calendar
            :title="calendarTitle" 
            v-model="show"
            color="#2196f3"
            :min-date="minDate"
            :max-date="maxDate"
            :default-date="defaultDate"
            :show-confirm="false"
            get-container="body"
            @confirm="handleSelectCalendar"
            @open="autoGetSwitch(true)"
            @closed="autoGetSwitch(false)"
        />
    </div>
</template>

<script>
const DEFAULT_MIN = new Date().getFullYear() - 3 + '-01-01 00:00'; // 最小时间，三年前
const DEFAULT_MAX = new Date().setFullYear(new Date().getFullYear() + 3,0,0); // 最大时间，当前日期的六个月后

export default {
    name: 'LjWidgetDate',
    data() {
        return {
            queryData: {},
            show: false,
            selItem: null,
            calendarTitle: '日期选择',
            dayDiff: 0, //时差
            minDate: new Date(),
            maxDate: new Date(),
            defaultDate: new Date()
        };
    },
    props: {
        // 同lj-filtrate:queryFields
        data: {
            type: Object
        },
        // 标题：在底部筛选窗体时，使用
        title: {
            type: String,
            default: ""
        },
        // 模式，tabsFilter:标签筛选栏; bottomFilter:底部筛选窗体
        model: {
            type: String,
            default: ""
        },
        value: {
            type: Object
        },
    },
    filters: {
        ifNullShowTitle(value, item) {
            return value ? value.replace(/\s[\x00-\xff]*/g,'') : item.title
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        /**清空已选时间 */
        handleDelDate(prop) {
            this.$set(this.value, prop, null);
        },
        /**直接调用父级方法 */
        autoGetSwitch(bool) {
            this.$parent.$parent.$parent && this.$parent.$parent.$parent.fnToSmall(bool)
        },
        /**选择日期 */
        handleSelect(item) {
            this.show = true;
            this.selItem = item;
            this.calendarTitle = this.title + "-" + item.title
            this.defaultDate = this.value[item.property] ? new Date(this.value[item.property]) : new Date();
            this.fnSetDefaultDate(item.property);
        },
        /**设置默认最大最小时间 */
        fnSetDefaultDate(prop) {
            if (prop.indexOf("begin") > -1) {
                let endDate = this.getQueryDate("end");
                this.minDate = new Date($lj.parseTime(DEFAULT_MIN));
                this.maxDate = this.value[endDate] ? new Date($lj.parseTime(this.value[endDate])) : new Date($lj.parseTime(DEFAULT_MAX));
            } else if (prop.indexOf("end") > -1) {
                let beginDate = this.getQueryDate("begin");
                this.minDate = this.value[beginDate] ? new Date($lj.parseTime(this.value[beginDate])) : new Date($lj.parseTime(DEFAULT_MIN));
                this.maxDate = new Date($lj.parseTime(DEFAULT_MAX));
            }
        },
        getQueryDate(keyWord) {
            for (let i = 0; i < this.queryData.length; i++) {
                let prop = this.queryData[i].property;
                if (prop.indexOf(keyWord) > -1) {
                    return prop
                }
            }
        },
        /**安装 */
        init() {
            this.queryData = this.data.children;

            console.log('bf date init this.queryData :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.queryData));
            console.log('bf date init this.value :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.value));
            this.queryData.forEach(field => {
                if (typeof this.value[field.property] !== "undefined" && this.value[field.property] !== null) {
                    console.log('bf date init this.field :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(field));
                    this.selItem = {};
                    this.selItem.property = field.property;
                    this.handleSelectCalendar(this.value[field.property]);
                } else {
                    console.log('date init this.field :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(field));
                   let date = field.hasOwnProperty('staticDateInit') ? $lj.dateAdd(new Date(), 0, 0, field.staticDateInit) : undefined
                   if (date) {
                    this.selItem = {};
                    this.selItem.property = field.property;
                    this.handleSelectCalendar(date);
                   }
                }
            });
            this.selItem = null;
            console.log('date init this.queryData :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.queryData));
        },
        /**日历返回设置 */
        handleSelectCalendar(date) {
            this.show = false;
            console.log("this.selItem.property>>>>",this.selItem.property)
            for (let i = 0; i < this.queryData.length; i++) {
                let prop = this.queryData[i].property;
                console.log("prop>>>>",prop)
                if (this.selItem.property == prop) {
                    
                    let formatDate = '{y}-{m}-{d} 00:00:00'
                    if (prop.indexOf('end') > -1) {
                        formatDate = '{y}-{m}-{d} 23:59:59'
                    }
                    this.$set(this.value, prop,  $lj.parseTime(date, formatDate));
                    break;
                }
            }
        },
        /** 显示日差 */
        getDayDiff(value) {
            let beginTime = '';
            let endTime = '';
            for (let key in value) {
                if (key.indexOf("date") > -1 && value[key]) {
                    if (key.indexOf("begin") > -1) {
                        beginTime = value[key];
                    } else if (key.indexOf("end") > -1){
                        endTime = value[key];
                    }
                }
            }
            if (beginTime && endTime) {
                let day = new Date(endTime) - new Date(beginTime);
                this.dayDiff = Math.round(day / (1000 * 60 * 60 * 24))
            } else {
                this.dayDiff = 0
            }
        }
    },
    watch: {
        value: {
            handler(val, oldVal) {
                this.getDayDiff(val);
            },
            deep: true
        }
    },
};
</script>

<style lang="less">
    .filtrate-widget-date {
        padding: 8px 10px;

        .filtrate-header {
            display: flex;
            font-size: 16px;
            font-weight: bold;
            padding: 4px 0;

            .header-left {
                flex-shrink: 0;
            }
            .header-right {
                flex: 1;
                color: @tertiary;
                font-size: 14px;
                padding-left: 4px;
                display: flex;
                align-items: center;
            }
        }
        main {
            // background-color: #F8F8F8;
            // border-radius: 8px;
            // margin: 0 8px;
            display: flex;

            input {
                color: @musePrimary;
            }
            .date-cell {
                flex: 1;
                display: inline-block;
                margin: 1px 3px;
                padding: 6px 12px;
                border-radius: 18px;
                background-color: #f2f2f2;
                text-align: center;
                border: 1px solid #f2f2f2;

                .date-cell-title {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: @summaryLightTextColor;

                    .iconfont {
                        font-size: 14px;
                    }
                    .date-cell-title-text {
                        flex: 1;
                    }
                }
                .close-btn {
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 50%;
                    width: 20px;
                    height: 20px;
                    flex-shrink: 0;
                    background-color: @quarternary;
                    color: #fff;
                }

                &.selected {
                    background-color: #DDEFFF;
                    border: 1px solid @musePrimary;
                    box-shadow: 0px 4px 4px 0px rgba(33, 150, 243, 0.04), 0px 0px 6px 0px rgba(33, 150, 243, 0.12);
                    
                    .date-cell-title  {
                        color: @musePrimary;
                    }
                }
            }
            .date-cell + .date-cell {
                margin-left: 10px;
            }
        }
        .van-cell {
            background-color: unset;
            padding-left: 8px;
            padding-right: 8px;
        }
    }
    .van-calendar__popup.van-popup--bottom {
        height: 75%;
    }
</style>