<template>
  <div class="file-entry">
    <span class="name">
      {{ fileEntryInfo.name }}
    </span>
    <span class="size">{{ fileEntryInfo.size }}</span>
    <span class="upload-time">{{ fileEntryInfo.uploadTime }}</span>
    <span class="operation">
      <el-icon @click="downloadIconClick" class="operation-download">
        <Download/>
      </el-icon>
    </span>
  </div>
</template>

<script setup>
// eslint-disable-next-line no-unused-vars
import { defineEmits, defineProps } from "vue";
import { Download } from "@element-plus/icons-vue";

// eslint-disable-next-line no-unused-vars
const props = defineProps({
  fileEntryInfo: {
    type: Object,
    default: function () {
      return {
        id: 0,
        name: "",
        size: "",
        uploadTime: "",//TODO 可能要改字段名
        url: ""
      };
    }
  }
});

//响应open和download点击按钮相关
const emit = defineEmits(["downloadFileIconClick"]);
//向父组件传当前被点击的url
const downloadIconClick = function () {
  emit("downloadFileIconClick", props.fileEntryInfo.url);
};


</script>

<style lang="scss" scoped>


.file-entry {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  height: 50px;
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
  padding: 0 16px;
  color: #5F6368;
  align-items: center;
  border: none;
  border-bottom: 1px solid #F0F0F0;
}

.file-entry:hover {
  background-color: #FDF6EC;
}

.name {
  width: 278px;
  text-align: left;
  overflow: hidden;
  /*文本不会换行*/
  white-space: nowrap;
  /*当文本溢出包含元素时，以省略号表示超出的文本*/
  text-overflow: ellipsis;
}

.upload-time {
  width: 230px;
}

.size {
  width: 232px;
}

.operation {
  width: 32px;
  text-align: right;

}

.operation-download {
  height: 18px;
  width: 18px;
  cursor: pointer;
}

</style>
