<template>
  <PathBar @ls="ls" />
  <ContentBase @click="leftclick" @contextmenu.prevent="rightclick($event)">
    <div v-for="item in items" :key="item.name" class="file-item">
        <FileFiled v-model:filename="item.newname" @changeTitleState="changeTitleState" @changeTitle="changeTitle" @selectItem='selectItem' @filerightclick="filerightclick" @fileleftclick="fileleftclick"  @openFile='openFile' @ls='ls' :item="item" />
    </div>
    <RightMenu v-if="menuvisible" @openFile="openFile" @turnBack="turnBack" :menutype="menutype" :menuposition="menuposition" />
  </ContentBase>
</template>

<script>
import ContentBase from '../components/ContentBase';
import FileFiled from '../components/FileFiled';
import RightMenu from '../components/RightMenu.vue';
import PathBar from '../components/PathBar.vue';
import { ref } from 'vue';
import { useStore } from 'vuex';
import router from '@/router/index.js';
import axios from 'axios';

export default {
  name: 'HomeView',
  components:{
    ContentBase,
    FileFiled,
    RightMenu,
    PathBar,
  },

  setup(){
    let store = useStore();
    let items = ref([]);
    let menuvisible = ref(false);
    let menutype = ref('filemenu');
    let menuposition = ref({
      top:"",
      left:"",
    });
    let selected_item = null;
    
    const ls = () => {
      menuvisible.value = false;
      axios({
            url:' http://1.94.171.222:8000/operation/command/ls/',
            type:'get',
            params:{
              'path':store.state.user.path.join(""),
            },
        })
        .then(resp => {
              let tmp = [];
              for (let i = 0;i < resp.data.items.length;i++) {
                let item = resp.data.items[i];
                item.is_selected = false;
                item.editable = false;
                item.newname = item.name;
                tmp.push(item);
              }          
              items.value = tmp;
            }
        );
    }

    const selectItem = (item) => {
      let tmp = items.value;
      for (let i = 0;i < tmp.length;i++){
        if (tmp[i].editable){
            //rename
            console.log('rename',tmp[i].newname);
            tmp[i].editable = false;
        }
        if (tmp[i] === item){  
          tmp[i].is_selected = true;
        }
        else {
          tmp[i].is_selected = false;
        }
      }
      items.value = tmp;
      selected_item = item;    
    }

    const openFile = () => {
      menuvisible.value = false;
      menutype.value = "filemenu";
      if (!selected_item){
        return;
      }
      if (selected_item.type === 'folder'){
        store.commit('forwardPath',selected_item.name + '/'
        );
        ls();
      }
      else {
        axios({
          // DFZ
            url:' http://1.94.171.222:8000/operation/open/',
            type:'get',
            params:{
              'path':store.state.user.path.join("") + selected_item.name,
            },
        })
        .then(resp => {
              store.commit('updateFileContent',resp.data.content);
              router.push({name:'ckeditor'});
            }
        );
      }
      
    }
    
    // const addFile = () => {

    // }

    const turnBack = () => {
      console.log('turnBack',store.state.user.path.join(""));
      store.commit('backPath');
      ls();
    }

    const leftclick = () => {
      menuvisible.value = false;
      selectItem(null);
    }

    const rightclick = (event) => {
      menuvisible.value = true;
      menutype.value = "contextmenu";
      menuposition.value = {
        top: event.clientY + 'px',  
        left: event.clientX + 'px',
      };
      selectItem(null);
    }

    const fileleftclick = (item) => {
      menuvisible.value = false;
      selectItem(item);
    }

    const filerightclick = (data) => {
      menutype.value = "filemenu";
      menuposition.value = data.menuposition;
      menuvisible.value = true;
      selectItem(data.item);
    }

    const changeTitleState = (item) => {
      item.editable = true;
    }

    const changeTitle = (data) => {
      data.item.editable = true;
      rename(data.item,data.newname);
    }

    const rename = (item,newname) => {
      axios({
            url:' http://1.94.171.222:8000/operation/open/',
            type:'get',
            params:{
              'path':store.state.user.path.join("") + item.name,
              'newname':newname,
            },
        })
        .then(resp => {
            if (resp.data.result === 'success')
              ls();
            }
        );
    }

    if (store.state.user.is_login){
      ls();
    }
    else {
      router.push({name:'login'});
    }

    return {
      items,
      selected_item,
      ls,
      selectItem,
      fileleftclick,
      filerightclick,
      leftclick,
      rightclick,
      openFile,
      turnBack,
      changeTitle,
      changeTitleState,
      menuvisible,
      menuposition,
      menutype,
    }
  },
}

</script>

<style scoped>
</style>

<style scoped>

.file-item {
    width: 8vw;
    height: 8vw;
    overflow: hidden;
    display: inline-block;
    margin: 0 0.1vw 1vw 0.1vw;
    border: 0.1vh solid white;
}

.file-item-selected {
  border: 0.1vh solid #99d1ff;
  background: #cce8ff;
}
</style>

