<template>
    <div class="dv-section-parameter-select">
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: 'DvSectionParameterSelect',
        provide () {
            return {
                selectParameterSelect: this
            };
        },
        props: {
            value: null,
            autoRun: {
                type: Boolean,
                default: true
            }
        },
        data () {
            return {
                currentValue: this.value,
                items: []
            };
        },
        watch: {
          value (value) {
              this.currentValue = value;
          }
        },
        methods: {
            select (value) {
                this.timer && clearTimeout(this.timer);
                this.$emit('input', value);
                this.startTimer();
            },
            addItem (value) {
                this.items.push(value);
            },
            startTimer () {
                this.timer = setTimeout(() => {
                    const index = this.items.findIndex(_ => _ === this.value);
                    let nextIndex = index + 1;
                    if (nextIndex > this.items.length - 1) {
                        nextIndex = 0;
                    }
                    this.$emit('input', this.items[nextIndex]);
                    this.startTimer();
                }, 30 * 1000);
            }
        },
        mounted() {
            this.autoRun && this.startTimer();
        },
        beforeDestroy() {
            this.timer && clearTimeout(this.timer);
        }
    };
</script>
