// 附件列表
<template>
	<a-spin :spinning="initPageLoading">
		<div
			v-for="i in fileListData"
			:key="i.id || i.attachId"
			style="width: 100%; overflow: hidden"
		>
			<div :class="style['content']">
				<div :class="style['content-left']">
					<link-outlined :class="style['content-left-icon']" />
					<!-- 附件名 -->
					<a
						:class="style['content-left-link']"
						:title="i.originalName || i.name"
						>{{ i.originalName || i.name }}</a
					>
				</div>
				<div :class="style['content-right']">
					<!-- 下载 -->
					<eye-outlined
						v-if="isShowDownload"
						:class="style['spacing-left']"
						@click="$emit('on-download-click', i.link)"
					/>
					<!-- 删除 -->
					<delete-outlined
						v-if="isShowDelete"
						:class="style['spacing-left']"
						@click="$emit('on-delete-click', i.id || i.attachId)"
					/>
				</div>
			</div>
		</div>
	</a-spin>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, watch } from 'vue'
import {
	LinkOutlined,
	EyeOutlined,
	DeleteOutlined,
} from '@ant-design/icons-vue'
import style from './index.module.less'
import { CommonConstant } from '@/utils/constant'
import { FileModel } from '@/types/file'

export default defineComponent({
	components: {
		LinkOutlined,
		EyeOutlined,
		DeleteOutlined,
	},
	props: {
		// 数据列表
		fileList: {
			type: Array as PropType<FileModel[]>,
			required: false,
			default: () => [],
		},
		// 是否展示删除按钮（附件查看不可删除）
		isShowDelete: {
			type: Boolean,
			required: false,
			default: true,
		},
		// 是否展示可下载按钮
		isShowDownload: {
			type: Boolean,
			required: false,
			default: true,
		},
	},
	emits: ['on-delete-click', 'on-download-click'],
	setup(props) {
		let fileListData = ref<FileModel[]>(props.fileList)
		const initPageLoading = ref<boolean>(false)
		watch(
			() => props.fileList,
			newValue => {
				newValue && (fileListData.value = newValue)
			},
			{ deep: true, immediate: true }
		)

		return {
			style,
			fileListData,
			initPageLoading,
			CommonConstant,
		}
	},
})
</script>