<template>
  <div>
    <v-toolbar flat>
      <v-toolbar-title>파일
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-text-field
        v-model="search"
        append-icon="mdi-magnify"
        label="파일 검색"
        single-line
        hide-details
      ></v-text-field>
    </v-toolbar>
    <v-list two-line subheader>
      <v-subheader inset>Folders</v-subheader>
      <v-btn @click="moveParent">...</v-btn>
      <v-list-item
        v-for="item in this.$store.getters.folderL"
        :key="item.title"
        :search="search"
        @click.right="show(item.folder_name,$event)"
        @click.left="moveF(item.folder_name)"
      >
        <v-list-item-avatar >
          <v-icon>mdi-folder</v-icon>
        </v-list-item-avatar>
        <v-list-item-content >
          <v-list-item-title v-text="item.folder_name"></v-list-item-title>
        </v-list-item-content>



        <v-menu
      v-model="showMenu"
      :position-x="x"
      :position-y="y"
      absolute
      offset-y
    >
      <v-list dense>
        <v-list-item @click.prevent="dialog2 = !dialog2">
          <v-list-item-title>이동</v-list-item-title>
        </v-list-item>
        <v-list-item @click.prevent="deleteF">
          <v-list-item-title>삭제</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
      </v-list-item>
<v-dialog
      v-model="dialog2"
      width="500px"
      >
      <v-card>
        <v-card-title class="grey darken-2">
          Move Folder
        </v-card-title>
        <v-container>
          <v-list-item-group
          v-for="item2 in folders"
          :key="item2.folder_id"
          >
            <template v-if="!(item2.folder_name === curfName)">
              <v-hover @click.left="transferF(item2.folder_name)">
              <v-list-item-avatar>
                <v-icon>mdi-folder</v-icon>
              </v-list-item-avatar>
              <v-list-item-content>
                <v-list-item-title v-text="item2.folder_name"></v-list-item-title>
              </v-list-item-content>
              </v-hover>
            </template>
            <!-- <template v-else></template> -->
          </v-list-item-group>
        </v-container>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            text
            color="primary"
            @click="cancelMove"
          >Cancel</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
      <v-divider inset></v-divider>
      <v-subheader inset>Files</v-subheader>
      <v-list-item
        v-for="item in this.$store.getters.fileL"
        :key="item.title"
      >
        <v-list-item-avatar>
          <v-icon> mdi-file</v-icon>
        </v-list-item-avatar>
        <v-list-item-content>
          <v-list-item-title v-text="item"></v-list-item-title>
        </v-list-item-content>
        <v-list-item-action>
          <v-btn icon>
            <v-icon color="grey lighten-1">mdi-information</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon color="grey lighten-1">mdi-delted</v-icon>
          </v-btn>
        </v-list-item-action>
      </v-list-item>
    </v-list>
    <v-file-input
     v-model="files"
     color="deep-purple accent-4"
     counter
     label="업로드"
     multiple
     placeholder="파일을 화면으로 드래그앤 드롭 하거나, 이곳을 클릭하세요."
     prepend-icon="mdi-paperclip"
     outlined
     :show-size="1000"
     >
     <template v-slot:selection="{ index, text }">
       <v-chip
         v-if="index < 2"
         color="deep-purple accent-4"
         dark
         label
         small
       >
         {{ text }}
       </v-chip>
       <span
         v-else-if="index === 2"
         class="overline grey--text text--darken-3 mx-2"
       >
         +{{ files.length - 2 }} File(s)
       </span>
     </template>

   </v-file-input>
   <v-btn color="blue" @click = "upload_file">upload</v-btn>
      <v-btn
        bottom
        color="blue"
        dark
        fab
        fixed
        right
        @click="dialog = !dialog"
      >
        <v-icon>mdi-plus</v-icon>
    </v-btn>
    <v-dialog
      v-model="dialog"
      width="500px"
    >
      <v-card>
        <v-card-title class="grey darken-2">
          Create Folder
        </v-card-title>
        <v-container>
          <div>
            <v-icon>mdi-folder</v-icon>
            <v-text-field placeholder="name" id="foldername" type="text" v-model="foldername" ></v-text-field>
          </div>
        </v-container>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            text
            color="primary"
            @click="dialog = false"
          >Cancel</v-btn>
          <v-btn
            text
            @click="makeF"
          >Create</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>
<script>
import { folder, makeFolder, deleteFolder, moveFolder, file, uploadFile, deleteFile, downloadFile } from '../api/index';
import Axios from 'axios';
  export default {
    data() {
      return {
        foldername:'',
        curfName:'',
        folders: [],
        files: [],
        search:'',
        id: '',
        dialog:false,
        search: '',
        howMenu: false,
        showMenu: false,
        x: 0,
        y: 0,
        dialog2:false
      }
    },
    async created(){
        try {
          const curData = {
            id : this.$store.state.id,
            cur: '/'
          }
          const response = await folder(curData);
          const file_response = await file(curData);
          console.log(response.data);
          this.$store.commit('setFolder', response.data.folders);
          this.$store.commit('setCur', response.data.cur);
          this.$store.commit('setParent', response.data.parentPath);
          this.folders = this.$store.getters.folderL;
          this.$store.commit('setFile', file_response.data.files);
          this.files = this.$store.getters.fileL;
        } catch (error) {
          console.log("에러");
          console.log(error.response.data);
        }
      },
       methods: {
         initFolderName(){
           this.foldername = '';
         },
         cancelMove(){
            this.curfName = '';
            this.dialog2 = false;
         },
         async makeF(){
           try {
             const folderData = {
               user_id : this.$store.state.id,
               cur : this.$store.state.cur,
               folder_name : this.foldername
             };
             const response = await makeFolder(folderData);
            console.log(response.data)
            console.log("폴더 생성 완료");
            this.$store.commit('setFolder', response.data.folders);
            this.folders = respons.data.folders;
           } catch (error) {
             console.log("에러");
             console.log(error.response.data);
           } finally{
             this.initFolderName();
             this.dialog = false;
           }
         },
         async moveF(move_folder_name){
           try {
          const curData = {
            id : this.$store.state.id,
            cur: this.$store.state.cur + move_folder_name + '/'
            }
          const response = await folder(curData);
          console.log(response.data);
          this.$store.commit('setFolder', response.data.folders);
          this.$store.commit('setCur', response.data.cur);
          this.$store.commit('setParent', response.data.parentPath);
          this.folders = this.$store.getters.folderL;
          } catch (error) {
          console.log("에러");
          console.log(error.response.data);
          }
        },
        async moveParent(){
          try {
            const cData = {
              id : this.$store.state.id,
              cur : this.$store.state.parent
            };
            const response= await folder(cData);
            console.log(response.data);
            this.$store.commit('setFolder', response.data.folders);
            this.$store.commit('setCur', response.data.cur);
            this.$store.commit('setParent', response.data.parentPath);
            this.folders = this.$store.getters.folderL;
          } catch (error) {
            console.log("에러");
            console.log(error.response.data);
          }
        },
        async deleteF(){
          try {
            const cData = {
              id: this.$store.state.id,
              cur : this.$store.state.cur,
              folder_name: this.curfName
            }
            const response = await deleteFolder(cData);
            console.log(response);
            this.$store.commit('setFolder', response.data.folders);
            this.folders = this.$store.getters.folderL;
          } catch (error) {
            console.log("에러");
            console.log(error.response.data);
          } finally{
             this.curfName = '';
           }
        },
        async transferF(folderName){
          try {
            const cData = {
              id: this.$store.state.id,
              cur : this.$store.state.cur,
              folder_name: this.curfName,
              isfolder: true,
              newPath: this.$store.state.cur + folderName   + '/'
            }
            const response = await moveFolder(cData);
            console.log(response);
            this.$store.commit('setFolder', response.data.folders);
            this.folders = this.$store.getters.folderL;
          } catch (error) {
            console.log("에러");
            console.log(error.response.data);
          } finally{
             this.initFolderName();
             this.curfName = '';
             this.dialog2 = false;
           }
        },
        async upload_file(){
          try{
            const fileData={
              file: this.files,
              user_id: this.$store.state.id,
              cur: this.$store.state.cur
            }
            const response = await uploadFile(fileData);
            const filelist = await file(fileData.user_id);
            console.log(response.message);
            this.$store.commit('setFile', filelist.data.files);
            this.files = this.$store.getters.fileL;
          }catch(error){
            console.log("에러");
            console.log(error.reponse.err)
          }
        },
        show (folderN, e) {
          e.preventDefault()
          this.curfName = folderN;
          this.showMenu = false
          this.x = e.clientX
          this.y = e.clientY
          this.$nextTick(() => {
          this.showMenu = true
        })
      }
    }
  }
</script>