<template>
    <v-card
        width="1280"
        max-width="1280"  
        height="846"
        max-height="846"
        dark
        class="elevation-0 mx-auto"
    >
        <v-card 
            v-if="captureImage === null"
            height="720"
            max-height="720"
            width="100%"
            max-width="100%"  
            class="elevation-0 d-flex justify-center align-center flex-column"
        >

            <v-row
                class="fill-height"
                align-content="center"
                justify="center"
            >
                <v-col
                    class="text-h3 text-center"
                    cols="12"
                >
                    <span><strong class="white--text success">보드</strong>를 삽입해주세요</span>
                </v-col>
                <v-col cols="12">
                <v-progress-linear
                    color="blue-grey"
                    indeterminate
                    rounded
                    height="6"
                ></v-progress-linear>
                </v-col>
            </v-row>                 
        </v-card>
        <v-stage
            v-else
            class="ma-0 pa-0 "
            ref="stage"
            :config="stageSize"
        >
            <v-layer ref="layer" 
                :config="stageSize"
            >
                <v-image 
                    :config="{
                    image: image,
                    width: 1280, 
                    height: 720,
                }"/>    
                    <v-rect
                        v-for="(rec, index) in rect"
                        :key="index"
                        :config="{
                            x: Math.min(rec.startX , rec.lastX ),
                            y: Math.min(rec.startY , rec.lastY),
                            width: Math.abs(rec.width  ),
                            height: Math.abs(rec.height ),
                            fill: rec.stroke+'4D',
                            stroke: rec.stroke,
                            dash:[8,8],    
                            strokeWidth: 3,
                        }"
                    >
                    </v-rect>
            </v-layer>
        </v-stage>  
        <v-card-text>
            <v-progress-linear
                class="mt-10"
                v-if="captureImage !== null"
                color="green darken-2"
                v-model="progressbar"
                height="40"
                dark
                reactive
                @click.prevent.self
            >
                <strong>{{ progressbar }} %</strong>
            </v-progress-linear>
        </v-card-text>    
    </v-card>
</template>

<script>

export default {

    data () {
      return {
        loading: true,
        progressbar: 0,

        image: null,

        rect:[],
        check:[],

        stageSize: {
            width: 1280,
            height: 720,
        },

        drwingColor: '#2196F3', // 선 색
        thickness: 3, //선 굵기
      }
    },

    props: {
        step:Number,
        learnings:Array,
        project:Object,
        counter:Number,
        result:Array,
        captureImage:String 
    },

    watch: {
        counter(current){
             this.progressbar = Math.round((100 * current) / this.project.counter);
        },

        result(current){
            if(current.length !== 0){
                this.rect =[]
                this.rect = [...this.learnings]

                for(let i = 0; i < current.length; i++ ){
                    Number(current[i]) === 0 ? (this.rect[i].fill = '#0D47A1' , this.rect[i].stroke = '#0D47A1' )  : (this.rect[i].fill = '#B71C1C' , this.rect[i].stroke = '#B71C1C' )               
                }
            }
        },

        step(current){
            if(current === 6){
                this.rect =[]
            }
        },

        captureImage(current){
            let image = new Image();
            image.src = 'data:image/jpeg;base64,'+current
            image.onload = () => { this.image = image};
        }    

    }
}
</script>

<style>

</style>