<template>
    <div>
        <v-select :label="l.switchToScene" v-model="modelValue.switchScene" density="compact" 
            :items="scenes"></v-select>
        <v-select :label="l.switchType" v-model="modelValue.switchType" density="compact"
            :items="switchTypes"></v-select>
        <!-- <div class="text-caption text-center">{{ modelValue.title }}</div> -->
    </div>
</template>

<script>

import { computed } from 'vue';
import OffsetLine from '../../SceneDesigner/OffsetLine.vue';

export default {
    components:{ OffsetLine },
    data(){
        return {
            active: false,
            switchTypes: ['award', 'sphere', 'sensor']
        }
    },
    mounted(){
        this.active = true;
        this.switchTypes = this.switchTypes.map(t=>({title: this.l.switchTypes[t], value: t}))
    },

    props:{
        modelValue: Object
    },
    computed:{
        scenes(){
            let sc = this.modelValue.__root.scenes.map(s=>({title: s.data.title, value: s.data.id}))
            sc.push({title: `-- ${this.l.end} --`, value: '__end__'});
            return sc;
        },
    },
    methods:{

    },

    __transform(data){
        data.go_env = computed(()=>{
            if (data.switchType == 'sphere' && data.switchScene){
                return data.__root.scenes.find(s=>s.data.id == data.switchScene).data.environment;
            }
        })
    },
    __noPoints: true
}

</script>