<template>
    <v-container class="home d-flex align-center justify-center" >
        <v-row>
            <Setting 
                v-if="stepper === 0" 
                :message="message" 
            />
            <Aoi 
                v-else-if="stepper === 1" 
            />
            <Teaching 
                v-else-if="stepper === 2" 
                :project="project"
                :infos="infos"
            />
            <Project 
                v-else-if="stepper === 3" 
                :project="project"
                :infos="infos"
            />

        </v-row>
    </v-container>
</template>

<script>
// import wpoService from '../service/wpo'
import projectService from '../service/project'
// import teachingService from '@/service/teaching'

import projectGql from '@/gql/project'
import learningGql from '@/gql/learning'


import { EventBus } from '@/event-bus'

import Setting from './step/Setting.vue'
import Aoi from './step/Aoi.vue'
import Teaching from './step/Teaching.vue'
import Project from './step/Project.vue'

export default {
    data () {
      return {
            stepper: 0,
            message:'Setting ...',
            projectUid: 0 ,
            project:{},
            infos:[],
        }
    },

    components:{
        Setting,
        Aoi,
        Teaching,
        Project
    },

    created(){
        this.getProject()
        EventBus.$on('setTeaching',( number , aoiUid  ) => { this.setTeaching(number , aoiUid) })
        EventBus.$on('setProject', ( number , project ) => { this.setProject(number , project) })
        EventBus.$on('setInit', () => {   this.getProject() ,this.stepper === 1 })
    },

    mounted(){
        // 
    },

    methods: {
        async getProject(){
            let response = await projectService.get()

            if(Object.keys(response).length === 0){
                this.stepper = 1
            }else if(response.result){
                this.stepper = 3
                this.project = response
            }else if(!response.result){
                this.project = response
                this.infos = response.infos
                this.stepper = 2
            }
        },

        async setTeaching(step , aoiUid){
            this.stepper = 0
            this.message ="Setting..."
            let project = await projectGql.get(aoiUid)
            console.log('project :', project )

            let learning = await learningGql.getLearning(project.uid)

            if(Object.keys(project).length !== 0 && Object.keys(learning).length !== 0){
                let localData = await projectService.save(project ,learning )
                if(Object.keys(localData).length !== 0 ){
                    this.project = localData.data
                    this.infos = localData.data.infos
                    this.stepper = step
                }
            }
        },

        async setProject(step , project){
            this.stepper = step
            this.project = project
        }
    },

    beforeDestroy(){
        EventBus.$off('setTeaching');
        EventBus.$off('setProject');
        EventBus.$off('setInit');
    },
}
</script>

<style lang="scss">
.home{
    height: 100vh;
}
</style>