<template>
  <div @click.stop="leftclick()" @dblclick="doubleclick()" @contextmenu.stop.prevent="rightclick($event)"
  :class="{ 'file-item-selected' : item.is_selected }"
  >
    <div class="file-item-icon" >
        <img v-if="item.type === 'file'" src="@/assets/file_icon.png" alt="">
        <img v-if="item.type === 'folder'" src="@/assets/folder_icon.png" alt="">
    </div>
    <div class="file-item-title" @click.stop="titleclick">
        <input v-if="item.editable"  @click.stop="" @dblclick.stop="" type="text" :value="filename"
    @input="$emit('update:filename', $event.target.value)"/>
        <div v-else >
            {{ item.name }}
        </div>
    </div>
  </div>
</template>


<script>
import { useStore } from 'vuex';

export default {
  name: 'FileFiled',
  props:{
      item:{
          type:Object,
          required:true,
      },
      filename:{
        type:String,
        required:true,
      }
  },
  setup(props,context){
    let store = useStore();

    const leftclick = () => {
      context.emit('fileleftclick',props.item);
    }
    
    const rightclick = (event) => {
      context.emit('filerightclick',{
        item:props.item,
        menuposition:{
          top: event.clientY + 'px',  
          left: event.clientX + 'px',
        },
      });
    }

    const doubleclick = () => {
      if(props.item.type === 'file'){
        context.emit('openFile');
      }
      else {
        store.commit('forwardPath',props.item.name + '/');
        context.emit('ls');
      }
    }

    const titleclick = () => {
        if (props.item.is_selected) {
            context.emit("changeTitleState",props.item);
        }
        else {
            context.emit("leftclick");
        }
      }

    const changeTitleState = () => {
      context.emit('changeTitleState',props.item);
    }

    const changeTitle = (newname) => {
      context.emit('changeTitle',{
        item:props.item,
        newname,
      });
    }

    return {
        leftclick,
        rightclick,
        doubleclick,
        changeTitle,
        changeTitleState,
        titleclick,
    }
  }
}
</script>

<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-icon > img {
    width: 6vw;
    height: 6vw;
}

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

.file-item-title{
    width: 6vw;
    height: 4vw;
    text-align: center;
    overflow: hidden;
    font-size: 1.2vw;
    word-break: break-all;
}

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

input {
    width: 6vw;
    height: 1.8vw;
    overflow: hidden;
    font-size: 1.2vw;
}
</style>
