<template>
	<!-- 附件查看 通用列表 -->

  <el-dialog v-model="dialogVisible" title="附件列表" width="70%" :before-close="closeModal">
    <span>
       	<el-table :data="fileList" style="width: 100%" max-height="500" :stripe="true">
			<el-table-column prop="url" label="附件" width="150" >
				<template v-slot="scope"> 
					<el-image
						style="width: 80px; height: 80px"
						:src="`${baseUrl}${scope.row.url}`"   
     					:preview-src-list="[`${baseUrl}${scope.row.url}`]"
						:preview-teleported="true"
						:hide-on-click-modal="true"
						fit="cover"
					/>
				</template>
			</el-table-column>
			<el-table-column prop="url" label="链接">
				<template v-slot="scope">
					<div> <a download :href="`${baseUrl}${scope.row.url}`">{{ `${baseUrl}${scope.row.url}` }}</a> </div>
				</template>
			</el-table-column>
		</el-table>
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeModal">关 闭</el-button>
        <el-button type="primary" @click="transferFn">确 认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent, reactive, toRefs} from 'vue'
const baseUrl = import.meta.env.VITE_APP_BASE_API;
export default defineComponent({
	props : ['dialogVisible' , 'fileList'],

	setup(props , { emit } ) {  
  		const { proxy } = getCurrentInstance()
 
		  
		const _data = reactive({})

		// 弹出框关闭
		function closeModal() { 
			emit('update:dialogVisible',false);
		} 

		return {
			...toRefs(_data), 
			...toRefs(props), 
			closeModal,
			baseUrl
		}
	}
})
</script>