<template>
  <div class="file-list-item">
    <ul>
      <li v-for="item in fileList" :key="item.url">
        <a :href="item.url" target="_blank">
          <i class="el-icon-paperclip" />
          {{ item.name }}
        </a>
        <div class="action">
          <span @click="$emit('preview', item)">查看</span>
          <span v-if="!disabled" @click="$emit('download', item)">下载</span>
          <span v-if="!disabled" @click="$emit('delete', item)">删除</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'FileListItem',
  props: {
    fileList: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {

    }
  },
}
</script>

<style lang='less' scoped>
.file-list-item {
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      a {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #606266;
        &:hover {
          color: #409EFF;
        }
      }
      .action {
        span {
          font-size: 12px;
          margin-right: 10px;
          color: #409EFF;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
