<template>
    <v-card 
        width="100%"
        height="850px"
        class="elevation-0 "
    >    
        <v-card-title class="blue-grey white--text ">AOI</v-card-title>
            <v-container>
                <v-row>
                    <v-col cols="4">
                        <v-card
                            :class="step === 0 ?'elevation-12':'elevation-0'"
                            :color="step === 0 ? '' : 'grey lighten-2'"
                            class="d-flex justify-center align-center"
                            height="740"
                        >
                            <v-row
                                class="fill-height"
                                align-content="center"
                                justify="center"
                            >
                                <v-col
                                    class="text-center"
                                    cols="12"
                                >
                                
                                    <span v-if="step > 0" class="text-h4">블루투스 연결 <v-icon color="success"  class="pb-4" x-large>mdi-check-bold</v-icon> </span>                                        
                                    <span v-else class="text-h4 "><strong>블루투스</strong>를 연결해주세요</span>
                                </v-col>
                                <v-col v-if="step === 0" cols="8">
                                    <v-progress-linear
                                        color="blue-grey"
                                        indeterminate
                                        rounded
                                        height="8"
                                    ></v-progress-linear>
                                </v-col>
                            </v-row>
                        </v-card>
                    </v-col>
                    <v-col cols="4">
                        <v-card
                            :class="step === 1 ?'elevation-12':'elevation-0'"
                            :color="step === 1 ? '' : 'grey lighten-2'"
                            class="d-flex justify-center align-center "
                            height="740"
                        >
                            <v-row
                                class="fill-height"
                                align-content="center"
                                justify="center"
                            >
                                <v-col
                                    class="text-center"
                                    cols="12"
                                >
                                
                                    <span v-if="step > 1" class="text-h4">AOI 연결 <v-icon color="success" class="pb-4" x-large>mdi-check-bold</v-icon> </span>                                        
                                    <div v-else class="text-h4 "><strong>AOI 장비</strong>와 연결해주세요
                                    <p class="text-h4 "><strong>S/N : {{serial}}</strong></p></div>
                                </v-col>
                                <v-col v-if="step === 1" cols="8">
                                    <v-progress-linear
                                        color="blue-grey"
                                        indeterminate
                                        rounded
                                        height="8"
                                    ></v-progress-linear>
                                </v-col>
                            </v-row>
                        </v-card>
                    </v-col>
                    <v-col cols="4">
                        <v-card
                            :class="step === 2 ?'elevation-12':'elevation-0'"
                            :color="step === 2 ? '' : 'grey lighten-2'"
                            class="d-flex justify-center align-center"
                            height="740"
                        >
                            <v-row
                                class="fill-height"
                                align-content="center"
                                justify="center"
                            >
                                <v-col
                                    class="text-center"
                                    cols="12"
                                >
                                    <span v-if="step > 2" class="text-h4">프로젝트 연동 완료 <v-icon color="success"  class="pb-4" x-large>mdi-check-bold</v-icon> </span>                                        
                                    <span v-else class="text-h4 "><strong>프로젝트</strong>를 생성해주세요</span>
                                </v-col>
                                <v-col v-if="step === 2" cols="8">
                                    <v-progress-linear
                                        color="blue-grey"
                                        indeterminate
                                        rounded
                                        height="8"
                                    ></v-progress-linear>
                                </v-col>
                            </v-row>
                        </v-card>
                    </v-col>
                </v-row>
            </v-container>
    </v-card>
</template>

<script>
import managerService from '@/service/manager'
import { EventBus } from '@/event-bus'

export default {
    data () {
      return {
            message: '준비중...',
            step:1, //테스트로 실행
            // step:0,
        
            id:'',
        }
    },

    computed: {
        serial() {
            return this.$store.state.aoi.serial
        },

        aoi(){
            return this.$store.state.aoi.aoi
        }
    },

    created(){
        // this.network()

        this.getAoi() // 테스트로 실행
    },

    methods: {
        async network(){            
            EventBus.$emit('openBluetooth')

            try{
                const msg  = new Object()
                msg.cmd = "network_check"
                let response = await managerService.request(msg)
                if(JSON.parse(response.data).status){
                    EventBus.$emit('closeBluetooth')
                    setTimeout(() => {
                        this.step = 1 
                    }, 1000);
                }else{
                    this.network()
                }    
            }catch(e){
                // EventBus.$emit('openAlert',`${e.message}`, 'error')
            }
        },

        getAoi(){
            this.$store.dispatch('getAoi',this.serial)

            let delay = 1000; 
            let timer = setInterval(()=> {
                if(this.aoi.serial === this.serial){
                    clearInterval(timer)
                    setTimeout(() => {
                        this.step = 2 
                    }, 2000);
                }else{
                    this.$store.dispatch('getAoi',this.serial)
                }
            },delay)
        },

        getAoiProject(){
            let delay = 1000; 
            let timer = setInterval(()=> {
                if(this.aoi.projectUid !== 0){
                    clearInterval(timer)
                    this.step = 3
                    setTimeout(() => {
                        setTimeout(EventBus.$emit('setTeaching' , this.aoi.uid ), 3000);
                    }, 2000);
                }else{
                    this.$store.dispatch('getAoi',this.serial)
                }
            },delay)
        }
    },

    watch:{
        async step(current) {
            switch(current) {
                case 1:
                    this.getAoi()
                break;

                case 2:
                    this.getAoiProject()
                break;
            }
        }
    }
}
</script>

<style>

</style>