<template>
    <v-container max-width="1400">
        <v-tabs v-model="panel">
            <v-tab value="scenario">
                <v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? l.createScenario : l.editScenario }}
            </v-tab>
            <v-tab value="scenes">
                <v-icon icon="mdi-panorama-outline"></v-icon> {{ l.editScenes }}
            </v-tab>
        </v-tabs>
        <v-tabs-window v-model="panel">
            <v-tabs-window-item value="scenario">
                <v-form class="pa-4" v-model="valid">
                    <v-text-field :label="l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
                    <v-textarea :label="l.description" v-model="object.description"></v-textarea>
                </v-form>
            </v-tabs-window-item>
            <v-tabs-window-item value="scenes">
                <SceneDesigner v-model="object" ref="sceneDesigner" ></SceneDesigner>
            </v-tabs-window-item>
        </v-tabs-window>
        <v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="primary">{{ l.save }}</v-btn>
    </v-container>
</template>

<script>

export default {
    data() {
        return {
            object: {},
            valid: false,
            rules: {
                required: v => v ? true : this.l.fieldRequired,
                requiredFile: v => (v?.length || this.id != 'add') ? true : this.l.fieldRequired
            },
            loading: false,
            panel: []
        }
    },
    async mounted(){
        if (this.id && this.id != 'add') {
            this.object = (await this.$api.scenario.load(this.id)).data;
        }
    },
    computed: {
        id() {
            return this.$route.params?.id;
        }
    },
    watch:{
        async panel(n){
            if ((n||[]).includes('scenes')){
                await this.$nextTick();
                this.$refs.sceneDesigner.resize();
            }
        }
    },
    methods:{
        async save(params) {
            this.loading = true;
            try {
                let result = await this.$api.scenario.save(this.object);
                Object.assign(this.object, result.data.object);
                if (this.id == 'add') {
                    this.$router.replace({ params: { id: this.object.id } });
                }
            } catch (err) {
                console.error(err);
            }
            this.loading = false
        },
    }
}
</script>

<route>
    {
        meta: {
            layout: "console"
        }
    }
</route>