<template>
  <v-container class="drag-container" v-drag-and-drop:options="options">
    <v-row >
        <v-col v-show="group.type === 'project'" v-for="group in groups" :key="group.id" cols="3">
            <v-card
                class="rounded-xl mt-3 project-list"
                outlined
            >
                <v-toolbar
                    color=""
                    elevation="0"
                >
                    <v-toolbar-title class="font-weight-black">
                        PROJECT LIST
                    </v-toolbar-title>
                    <v-spacer></v-spacer>   
                    <v-btn fab icon @click="projectAdd()">
                        <v-icon>mdi-plus</v-icon>
                    </v-btn>
                </v-toolbar>

                <vue-draggable-group
                    v-model="group.items"
                    :groups="groups"
                    :data-id="group.id"
                    @change="onGroupsChange"
                >
                    <v-card-text class="drag-inner-list "  :data-id="group.id">
                            <v-card
                                class="drag-item mb-3"
                                v-for="item in group.items" :key="item.id"
                                :data-id="item.id"
                                outlined
                                
                            >
                                <v-card-title v-if="item.state === 'none'" > 
                                    {{item.name}}
                                    <v-spacer></v-spacer>
                                    <v-btn small v-if="item.teaching" outlined color="red"  class="rounded-xl">teaching</v-btn>
                                </v-card-title>
                                <v-card-title v-if="item.state === 'waiting'" class="red lighten-3" > 
                                    {{item.name}}
                                    <v-spacer></v-spacer>
                                    <v-btn small v-if="item.teaching" outlined color="red"  class="rounded-xl">teaching</v-btn>
                                </v-card-title>
                                <v-card-title v-if="item.state === 'success'" class="green white--text" > 
                                    {{item.name}}
                                    <v-spacer></v-spacer>
                                    <v-btn small v-if="item.teaching" outlined color="red"  class="rounded-xl">teaching</v-btn>
                                </v-card-title>

                            </v-card>
                    </v-card-text>
                </vue-draggable-group>
            </v-card>
      </v-col>
      <v-col cols="9">
        <v-container fluid>
            <v-row>
                <v-col v-show="group.type === 'aoi'" v-for="group in groups" :key="group.id" cols="3">
                    <v-card  
                     height="200" outlined  class="rounded-xl"> 
                        <v-card-title class="font-weight-black">{{group.name}}</v-card-title>
                        <v-card-subtitle>{{group.date}}</v-card-subtitle>
                        <vue-draggable-group
                            v-model="group.items"
                            :groups="groups"
                            :data-id="group.id"
                            @change="onGroupsChange"
                                                  
                        >
                            <v-card-text :class="group.items.length !== 0 ? '': 'drag-inner-list'"  class=" aoi-inner"  :data-id="group.id">
                                <v-card
                                    class="drag-item mb-3"
                                    v-for="item in group.items" :key="item.id" :data-id="item.id"
                                    outlined
                                >
                                    <v-card-title v-if="item.state === 'none'" > 
                                        {{item.name}}
                                        <v-spacer></v-spacer>
                                        <v-btn small v-if="item.teaching" outlined color="red"  class="rounded-xl">teaching</v-btn>
                                    </v-card-title>
                                    <v-card-title v-if="item.state === 'waiting'" class="red lighten-3" > 
                                        {{item.name}}
                                        <v-spacer></v-spacer>
                                        <v-btn small v-if="item.teaching" outlined color="red"  class="rounded-xl">teaching</v-btn>
                                    </v-card-title>
                                    <v-card-title v-if="item.state === 'success'" class="green white--text" > 
                                        {{item.name}}
                                        <v-spacer></v-spacer>
                                        <v-btn small v-if="item.teaching" outlined color="red"  class="rounded-xl">teaching</v-btn>
                                    </v-card-title>
                                </v-card>
                            </v-card-text>
                        </vue-draggable-group>
                    </v-card>
                </v-col>
                <v-col cols="3">
                    <v-card height="200" outlined  class="rounded-xl d-flex justify-center align-center" @click="aoiAdd()"> 
                        <v-btn icon x-large><v-icon x-large>mdi-plus</v-icon></v-btn>
                    </v-card>
                </v-col>
            </v-row>
        </v-container>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>

export default {
    data(){
        return{
            groups: [
                {
                    id: 1,
                    name: "PROJECT LIST",
                    type:'project',
                    items: [
                        { id: 1, name: "프로젝트 1", groupId: 1 ,state:"waiting", teaching:true },
                        { id: 2, name: "프로젝트 2", groupId: 1 ,state:"success", teaching:false },
                        { id: 3, name: "프로젝트 3", groupId: 1 ,state:"none" ,   teaching:false },
                        { id: 5, name: "프로젝트 5", groupId: 1 ,state:"success", teaching:true },
                        { id: 6, name: "프로젝트 6", groupId: 1 ,state:"none" ,   teaching:false },
                        { id: 8, name: "프로젝트 8", groupId: 1 , state:"success",  teaching:true  },
                        { id: 9, name: "프로젝트 9", groupId: 1  ,state:"none" ,    teaching:false  },
                        { id: 10, name: "프로젝트 10", groupId: 1 ,state:"none" , teaching:true  },
                        { id: 7, name: "프로젝트 7", groupId: 1 , state:"waiting",  teaching:false  },
                        { id: 4, name: "프로젝트 4", groupId: 1 ,state:"waiting", teaching:false },
                    ]
                },
                {
                    id: 2,
                    name: "AOI 1",
                    type:'aoi',
                    date:'2021-05-31',
                    items: [
                       

                    ]
                },
                {
                    id: 3,
                    name: "AOI 2",
                    type:'aoi',
                    date:'2021-05-31',
                    items: [
                        

                    ]
                }
            ],


            options: {
                dropzoneSelector: ".drag-inner-list",
                draggableSelector: ".drag-item"
            }

        }
    },


    methods:{

        onGroupsChange(evt) {
            console.log(evt );
        },

        projectAdd(){
            let newProject = new Object()
            newProject.id = this.groups[0].items.length + 1
            newProject.name = "프로젝트 " + newProject.id 
            newProject.state = "none"
            newProject.teaching = false
            this.groups[0].items.push(newProject)

        },

        aoiAdd(){
            console.log("this.groups :",this.groups)
    
            let newId =Object.keys(this.groups).length 


            let newAoi = new Object()
            newAoi.id = newId + 1
            newAoi.name = "AOI " + newId
            newAoi.type ='aoi',
            newAoi.items = [],
            newAoi.date = this.getToday()
            this.groups.push(newAoi)
        },

        getToday(){
            var date = new Date();
            var year = date.getFullYear();
            var month = ("0" + (1 + date.getMonth())).slice(-2);
            var day = ("0" + date.getDate()).slice(-2);

            return year +"-"+ month +"-"+ day;
        },

    },

}
</script>

<style lang="scss">
$ease-out: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);

.drag-container {
  max-width: 1000px;
}

.aoi-inner{
    height: 100%;
}

.drag-item {
  transition: $ease-out;
/* items grabbed state */
    &[aria-grabbed="true"] {
        .v-card__title{
            // background: black !important;
            opacity: 0.2;
        }
    }


}

.aoi-drag-inner{
    height: 200px;
}

@keyframes nodeInserted {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 0.8;
  }
}

.item-dropzone-area {
  height: 64px;
  margin-bottom: 10px;
  background: #E0E0E0;
  opacity: 0.8;
  animation-duration: 0.5s;
  animation-name: nodeInserted;
//   margin-left: 0.6rem;
//   margin-right: 0.6rem;
}

</style>

