<template>
<div class="planningPreparationView">
	<h3 class="view_title">意见查看</h3>
	<div class="list">
		<a-table :dataSource="tableData" :pagination="tablePage" :columns="tableColumns" @change="onChangePage">
		<template #bodyCell="{ column, record }">
			<template v-if="column.key === '_附件'">
				<div class="file_row" v-for="(item,index) in record._附件" :key="index">
					<file-text-outlined style="color:#666;" />
					<span class="file_name">{{item.name}}</span>
					<eye-outlined class="icon" style="color:rgb(24, 144, 255);" />
					<cloud-download-outlined class="icon" @click="onDownloadFile(item)" style="color:rgb(24, 144, 255);" />
				</div>
			</template>
		</template>
		</a-table>
	</div>
</div>
</template>
<script setup name="planningPreparationView">
import tools from "../../../utils/utils.js";
const tableColumns = [
	{title:'处室名称',align:'center',width:150,dataIndex:'_处室名称'},
	{title:'反馈时间',align:'center',width:200,dataIndex:'_反馈时间'},
	{title:'意见',dataIndex:'_意见'},
	{title:'附件',width:400,key:'_附件'},
];
const tablePage = reactive({
	total:0,
	current:1,
	size:20,
});
const tableData = ref([{'_附件':[
	{name:'one.png',url:'www.baidu.com'},
	{name:'one.png',url:'www.baidu.com'},
	{name:'one.png',url:'www.baidu.com'},
]}]);


onMounted(()=>{
	onSearch();
});

function onSearch(){
	ajax().then(reg=>{
		tableData.value = reg.records;
		tablePage.total = reg.total;
	});
}

function onChangePage(ev){
	Object.assign(tablePage,ev);
	onSearch();
}


function onDownloadFile(row){
	tools.downloadFile(row.url,{name:row.name});
}

</script>
<style lang="less" scoped>
.view_title{
	font-size:24px; color:#333; margin:20px;
}
.list{
	.file_row{
		margin:4px; display:flex; justify-content:flex-start; align-items:center;
		.icon{
			margin:0 10px; cursor:pointer;
		}
	}
	.file_name{
		margin:0 10px;
		max-width:300px; text-overflow:ellipsis; overflow:hidden;
		white-space:nowrap;
	}
}

</style>