<template lang="html">
  <v-flex>
    <h1>연락처</h1>
    <v-simple-table>
      <template v-slot:default>
        <thead>
          <tr>
            <th class="text-left">Name</th>
            <th class="text-left">Phone</th>
            <th class="text-left">Email</th>
            <th class="text-left">Date</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in contact_list" :key="item.name">
            <td>{{ item.name }}</td>
            <td>{{ item.phone}}</td>
            <td>{{ item.email }}</td>
            <td>{{ item.added_date}}</td>
          </tr>
        </tbody>
      </template>
    </v-simple-table>
    <v-divider></v-divider>
    <div v-cloak @drop.prevnet="addContact" @dragover.prevent>
      <input
        id="file-selector"
        ref="uploadedfile"
        type="file"
        v-on:change="handleFileUpload()"
      />
  </div>
    <br />
    <v-btn color="blue" @click="upload_contact">upload</v-btn>
    <v-btn color="blud" @click = "download_contact">download</v-btn>
  </v-flex>
</template>

<script>
  import { uploadContact, downloadContact, printContact } from '../api/index';
  import Axios from 'axios';
  export default {
    data() {
      return {
        contact_list : [],
        contact_file : null
      }
    },
    async created(){
        try {
          const curData = {
            id : this.$store.state.id,
          }
          console.log(curData);
          const list_reponse = await printContact(curData);
          this.$store.commit('setContactList', list_reponse);
          this.contact_list = this.$store.getters.contact;
        } catch (error) {
          console.log("에러");
          console.log(error);
        }
    },
    methods:{
      handleFileUpload() {
        this.contact_file = this.$refs.uploadedfile.files[0];
        console.log(this.contact_file);
      },
      addContact(event){
        let droppedFiles = event.dataTransfer.files;
        if(!droppedFiles) return;
        console.log(droppedFiles);
      },
      async upload_contact(){
        try {
          const formData = new FormData();
          formData.append('file', this.contact_file);
          formData.append('id', this.$store.state.id);
          const currentData = {
            id: this.$store.state.id
          };
          const fileData = {
            id: this.$store.state.id,
            file: this.contact_file
          }
          console.log(fileData);
          const response = await uploadContact(formData);
          const contact_response = await printContact(currentData);
          console.log(contact_response);
          this.$store.commit('setContactList', contact_response);
          console.log(this.$store.getters.contact);
          this.contact_list = contact_response;
        } catch (error) {
          console.log('에러');
          console.log(error);
        }
      },
      async download_contact(){
        try{
          const curData= {
            id: this.$store.state.id
          };
          console.log(curData);
          const response = await downloadContact(curData);
          console.log(response);
        }catch(error){
          console.log('에러');
          console.log(error);
        }
      }

    }
  }
</script>

<style lang="css" scoped>
</style>