<template>
    <v-card :title="id == 'add' ? $l.createScenario : $l.editScenario" class="container my-3">
        <!-- <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-form> -->
        <v-card-actions>
            <v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="primary">
                {{ $l.save }}
            </v-btn>
        </v-card-actions>
    </v-card>
    <SceneDesigner v-model="object"></SceneDesigner>
        
        <div class="sceneDrawer" >
    
    </div>
</template>

<script>
import SceneDesigner from '@/components/SceneDesigner/SceneDesigner.vue';

export default {
    data() {
        return {
            object: {
                scenes: [
                {
                    id: 'test',
                    vd: { x1: 220, y1: 220 },
                    data: {
                        environment: 3, intro: 2,
                        gameObjects: [
                            { vd: { x1: 350, y1:350 }, data:{ id: 7, }},
                            { vd: { x1: 200, y1:400 }, data:{ id: 8, }},
                            { vd: { x1: 70, y1:350 }, data:{ id: 9, }}
                        ]
                    }
                }
            ]
            },
            valid: false,
            rules: {
                required: v => v ? true : this.$l.fieldRequired,
                requiredFile: v => (v?.length || this.id != 'add') ? true : this.$l.fieldRequired
            },
            loading: false,
        }
    },
    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;
        }
    },
    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>