<template>
    <div class="file-item-title" @click.stop="titleclick">
        <input v-if="item.editable"  @click.stop="" @dblclick.stop="" type="text" v-model="filename"/>
        <div v-else >
            {{ filename }}
        </div>
    </div>
</template>


<script>
import { computed, ref } from 'vue';

export default {
  name: 'FileTitle',
  props:{
      item:{
          type:Object,
          required:true,
      }
  },
  setup(props,context){
      let filename = ref(props.item.name);
      let d = computed(() => {
          if (!props.item.editable) {
              context.emit("changetitle",filename.value);
          }
          return false;
      });
      const titleclick = () => {
          if (props.item.is_selected) {
              context.emit("changetitlestate");
          }
          else {
              context.emit("leftclick");
          }
      }

      return {
          titleclick,
          filename,
          d,
      }
  }
}
</script>

<style scoped>

.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>
