<template>
    <div class="select-picker-box">
        <div class="left">
            <el-select
                v-model="label"
                reserve-keyword
                @change="changeSelect"
                :placeholder="placeholder"
                ref="select"
            >
                <el-option
                    v-for="(value, label) in selfOptions"
                    :key="label"
                    :label="label"
                    :value="label"
                ></el-option>
            </el-select>
        </div>
        <div class="right">
            <range-picker ref="rangePicker" :property="property" @change="changePicker" />
        </div>
    </div>
</template>
<script>

import rangePicker from "../../data/su-filtrate-01/items/rangePicker";
import ListUtil from "../../../util/pattern/list";
    export default {
        name: "SelectPicker",
        components:{rangePicker},
        data() {
            return {
                selfOptions: [],
                label: '',
                property:{
                    minDate: '',
                    maxDate: '',
                    unlinkPanels: true
                },
            }
        },
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            // 绑定的值
            value: {
                type: [Object, String],
                default: ()=>{},
            },
            // 配置项
            options:{
                type: Array,
                default: ()=>{
                    return []
                },
            },
            // 切换待选时间范围后，是否自动填充时间
            autoSet:{
                type: Boolean,
                default: false,
            },
            placeholder: {
                type: String,
                default: ''
            }
        },
        mounted() {
            //  初始化select 选项
            this.selfOptions = ListUtil.toMap(this.options, 'label', 'model');
            this.$nextTick(()=>{
                // 判断是否存在默认范围，若存在则设置默认范围，及调用 切换select方法
                // 若不存在，则默认第一项范围，不设置默认时间
                let list = this.options.filter(item=>{ return item.selected});
                if (ListUtil.hasLength(list)) {
                    this.label = list[0].label;
                } else {
                    this.label = this.options[0].label;
                }
                this.changeSelect(this.label)
            })
        },
        methods: {
            init() {
                this.$nextTick(()=>{
                    // 判断是否存在默认范围，若存在则设置默认范围，及调用 切换select方法
                    // 若不存在，则默认第一项范围，不设置默认时间
                    let list = this.options.filter(item=>{ return item.selected});
                    if (ListUtil.hasLength(list)) {
                        this.label = list[0].label;
                    } else {
                        this.label = this.options[0].label;
                    }
                    this.changeSelect(this.label)
                })
            },
            // 切换select 自动设置可选时间段范围
            changeSelect(label) {
                let that = this
                that.property.minDate = that.selfOptions[label].start;
                that.property.maxDate = that.selfOptions[label].end;
                // 判断是否自动填充时间
                let sendData
                if (that.autoSet) {
                    sendData = that.selfOptions[label]
                    if (that.selfOptions[label].default) {
                        sendData = that.selfOptions[label].default;
                    }
                } else {
                    sendData = {start: "", end: ""};
                }
                that.getRef("rangePicker").then(function (rangePicker) {
                    rangePicker.init(sendData);
                    that.$emit("change", sendData);
                });

            },
            // 手动修改时间
            changePicker(value) {
                let date = {
                    start: value.start || '',
                    end: value.end || '',
                }
                this.$nextTick(() => {
                    // 设置时间
                    this.$emit("change", date);
                });

            }
        }

    }
</script>

<style scoped  lang="less">
    .select-picker-box {
        display: flex;
        .left {
            width: 100px;
            padding-right: 5px;
            .el-select {
                width: 100px;
            }
        }
        .right {
            /deep/ .el-date-editor--daterange.el-input__inner {
                width: 226px;
            }
        }
    }
</style>
