<template>
  <div class="comp-chose-file">
    <el-upload
      class="upload-btn"
      v-model:file-list="fileList"
      :multiple="multiple"
      :auto-upload="false"
      v-bind="attrs"
      :disabled="disabled"
      @change="changeFun"
    >
      <el-button type="primary" :disabled="disabled">选择文件</el-button>
      <template #file="{ file, index }">
        <div class="file-item">
          <div class="file-icon">
            <el-icon :size="16">
              <Document />
            </el-icon>
          </div>
          <div class="file-name">
            {{ file.name }}
          </div>
          <div class="file-options">
            <el-icon v-if="file.fileId" class="btn preview" :size="16" @click="downloadFun(file)">
              <Download />
            </el-icon>
            <el-icon v-if="file.fileId" class="btn preview" :size="16" @click="previewFun(file)">
              <View />
            </el-icon>
            <el-icon v-if="!disabled" class="btn del" :size="16" @click="removeFun(index)">
              <Delete />
            </el-icon>
          </div>
        </div>
      </template>
    </el-upload>
    <FilePreview v-model="previewVisible" :fileId="fileId" />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { Document, View, Delete, Download } from '@element-plus/icons-vue';
import FilePreview from '@/components/common/filePreview/index.vue';
import { downloadFileById } from '@/utils/file';
import { isArray } from 'lodash-es';

interface Props {
  modelValue: any;
  disabled?: boolean;
  multiple?: boolean;
  attrs?: any;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: [],
  disabled: false,
  multiple: true,
  attrs: {},
});

const emit = defineEmits(['update:modelValue', 'change', 'remove']);
const fileList = ref<any>([]);
const fileId = ref<any>(0);
const previewVisible = ref(false);

watch(
  () => props.modelValue,
  (val: any) => {
    fileList.value = isArray(val) ? val : [];
  },
  { deep: true, immediate: true }
);

watch(
  () => fileList.value,
  (val: any) => {
    emit('update:modelValue', val);
  },
  { deep: true, immediate: true }
);

const previewFun = (data: any) => {
  fileId.value = data.fileId;
  previewVisible.value = true;
};

const downloadFun = (data: any) => {
  downloadFileById(data.fileId);
};

const changeFun = (data: any) => {
  emit('change', data);
};

const removeFun = (index: number) => {
  emit('remove', fileList.value[index]);
  fileList.value.splice(index, 1);
};
</script>

<style lang="scss" scoped>
.comp-chose-file {
  width: 100%;
  .upload-btn {
    width: 100%;
  }
  .file-item {
    display: flex;
    line-height: 18px;
    padding: 0 4px;
    .file-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--el-text-color-secondary);
    }
    .file-name {
      flex: 1;
      font-size: 14px;
      color: var(--el-text-color-secondary);
      padding-right: 5px;
      word-break: break-word;
      padding: 2px 4px;
    }
    .file-options {
      display: flex;
      align-items: center;
      justify-content: center;
      .btn {
        margin-left: 8px;
        cursor: pointer;
        &.preview {
          color: var(--el-color-primary);
        }
        &.del {
          color: var(--el-color-danger);
        }
      }
    }
  }
}
</style>
