<template>
    <div class="selectDatePicker">
        <template>
            <ve-mix-options>
                {{select}}
                <div slot="left">
                    <su-select
                        :data="data"
                        v-model="select"
                        :auto-please="false"
                        :placeholder="properties.selectPlaceholder"
                        style="width:100%"
                        @change="onChange"
                    ></su-select>
                </div>
                <div slot="right">
                    <el-date-picker
                        v-model="value"
                        :unlink-panels="properties.unlinkPanels"
                        :format="formatEl"
                        :type="properties.type"
                        @change="onChange"
                        :range-separator="properties.separator"
                        :start-placeholder="properties.startPlaceholder"
                        :end-placeholder="properties.endPlaceholder"
                        :disabled="properties.disabled"
                        :editable="properties.editable"
                        :picker-options="properties.pickerOptions"
                    />
                </div>
            </ve-mix-options>
        </template>
    </div>
</template>

<script>
import seSelect from "../../../form/su-select";
import veMixOptions from "./veMixOptions";
import DateUtil from "../../../util/pattern/date";
import StringUtil from "../../../../util/pattern/string";
import mixin from "./mixin";

export default {
    name: "selectRangePicker",
    mixins: [mixin],
    components: {seSelect, veMixOptions},
    data() {
        return {
            data: {},
            select: "",
            value: ["", ""],
            formatEl: null,
            properties: {},

        };
    },
    created() {
        let that = this;
        this.initProperties({
            type: "daterange",
            startPlaceholder: '开始日期',
            separator: '~',
            endPlaceholder: '结束日期',
            format: 'YYYY-MM-DD',
            pickerOptions: {
                disabledDate(time) {
                    return that.compareDate(time, that.properties.minDate, that.properties.maxDate);
                }
            },
            editable: false,
            disabled: false,
            unlinkPanels: false,
        });
        this.formatEl = StringUtil.replace(this.properties.format || "YYYY-MM-DD", {
            "Y": "y",
            "M": "M",
            "D": "d",
            "h": "H",
        });
    },
    methods: {
        init(value) {
            let that = this;
            this.$nextTick(function () {
                if (value) {
                    this.value = [
                        value.start || '',
                        value.end || '',
                    ];
                    this.select = value.select;
                } else {
                    this.value = [];
                    this.select = '';
                }
                that.getData().then(function (d) {
                    that.data = d;
                })
            })
        },
        onChange() {
            let model = {
                start: this.value && this.value[0] ? DateUtil.formatData(new Date(this.value[0]), this.properties.format) : null,
                end: this.value && this.value[1] ? DateUtil.formatData(new Date(this.value[1]), this.properties.format) : null,
                select: this.select
            };
            this.$emit("update:model", model);
            this.$emit("change", model)
        },
        //  比较日期时间
        compareDate(time, minDate, maxDate) {
            if (minDate && maxDate) {
                return time.getTime() < DateUtil.getDate(minDate).getTime() || time.getTime() > DateUtil.getDate(maxDate).getTime()
            } else if (minDate) {
                return time.getTime() < DateUtil.getDate(minDate).getTime()
            } else if (maxDate) {
                return time.getTime() > DateUtil.getDate(maxDate).getTime()
            } else {
                return false;
            }
        },
    }
};
</script>
