<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"
                :learnings="learnings"
            />
            <Project 
                v-else-if="stepper === 3" 
                :project="project"
                :learnings="learnings"
            />

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

<script>
// import wpoService from '../service/wpo'
import projectService from '../service/project'
// import learningService from '../service/learning'

// 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:{},
            learnings:[],
        }
    },

    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 local = await projectService.get()

            console.log('local :',local)

            if(Object.keys(local.learning).length === 0 || Object.keys(local.project).length === 0){
                this.stepper = 1
            }else if(local.project.result){
                this.stepper = 3
                this.project = local.project
                this.learnings = local.learning.learning
                this.$store.dispatch('setProject' ,this.project )
            }else if(!local.project.result){
                this.project = local.project
                this.learnings = local.learning.learning
                this.stepper = 2
                this.$store.dispatch('setProject' ,this.project  )
            }
        },

        async setTeaching(aoiUid){
            this.stepper = 0
            this.message ="프로젝트 세팅..."

            let gqlProject = await projectGql.get(aoiUid)
            this.$store.dispatch('setProject',gqlProject)
            this.message ="학습 세팅..."

            let gqlLearning = await learningGql.get(gqlProject.uid)
            this.message ="프로젝트 저장..."

            let saveData = {
                'project':gqlProject,
                'learning': gqlLearning
            }

            if(Object.keys(gqlProject).length !== 0 && gqlLearning.length !== 0){
                let response = await projectService.save(saveData)

                this.project = response.project
                this.learnings = response.learning

                if(Object.keys(this.project).length !== 0 && this.learnings.length !== 0) this.stepper = 2                
            }
        },

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

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

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