<template>
    <div class="select-picker-box">
        <div class="left">
            <el-radio-group v-model="label" @change="changeRadio">
                <el-radio-button v-for="(value, label) in selfOptions" :key="label" :label="label" ></el-radio-button>
            </el-radio-group>
        </div>
        <div class="right">
            <range-picker-single ref="rangePickerSingle" @change="changePicker"></range-picker-single>
        </div>
    </div>
</template>
<script>
import RangePickerSingle from "../../data/su-filtrate-01/items/rangePickerSingle"
import ListUtil from "../../../util/pattern/list";
    export default {
        name: "SelectPicker",
        data() {
            return {
                selfOptions: [],
                label: '',
            }
        },
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            // 绑定的值
            value: {
                type: [Object, String],
                default: ()=>{},
            },
            // 配置项
            options:{
                type: Array,
                default: ()=>{
                    return []
                },
            },
        },
        components:{RangePickerSingle},
        created() {
            //  初始化select 选项
            this.selfOptions = ListUtil.toMap(this.options, 'label', 'model');
            this.$nextTick(()=>{
                // 判断是否包含默认值，若存在默认值，则设置默认时间及设置select为 自定义
                if (this.value && Object.keys(this.value).length > 0) {
                    let timeFun = setTimeout(() => {
                        this.$refs['rangePickerSingle'].init(this.value);
                        clearTimeout(timeFun)
                    }, 100);
                    this.label = "自定义";
                } else {
                    let date = {start: '', end: ''};
                    this.$emit("change", date);
                }
            })
        },
        methods: {
            init(value) {
                this.$nextTick(()=>{
                    // 判断是否包含默认值，若存在默认值，则设置默认时间及设置select为 自定义
                    if (value && Object.keys(value).length > 0) {
                        this.$refs['rangePickerSingle'].init(value);
                        this.label = "自定义";
                    } else {
                        let date = {start: '', end: ''};
                        this.$emit("change", date);
                    }
                })
            },
            // 切换select 自动设置指定时间段
            changeRadio(label) {
                this.$refs['rangePickerSingle'].init(this.selfOptions[label]);
                this.$emit("change", this.selfOptions[label]);
            },
            // 手动修改时间，设置select为自定义
            changePicker(value) {
                let date = {
                    start: value.start || '',
                    end: value.end || '',
                }
                this.label = "自定义";
                this.$emit("change", date);
            },

        }

    }
</script>

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