<template>
	<!-- 规划编制的意见反馈 -->
	<div class="planningPreparationView">
		<h3 class="view_title">意见查看</h3>
		<div class="list">
			<a-table :dataSource="tableData" :columns="tableColumns" v-if="tableData[0]">
				<template #bodyCell="{ column, record }">
					<template v-if="column.key === 'attachment'">
						<DIYUPLoad
							v-for="(item, index) in record.attachment"
							:key="index"
							:change="changeUpload"
							:urls="item"
							disabled
						/>
					</template>
				</template>
			</a-table>
			<div class="view_title" v-else>数据尚未提交</div>
		</div>
	</div>
</template>
<script setup name="planningPreparationView">
	import tools from '../../../utils/utils.js'
	import API from '@/api/policy.info/planningPreparation'
	import ORG from '@/api/basic.info/unReporCityApi.js'
	import global from '@/api/basic.info/global.js'
	import { useRoute } from 'vue-router'
	import { message } from 'ant-design-vue'
	import { onMountedWatch } from '@/hook/onMounted.js'
	const tableColumns = [
		{ title: '意见反馈人', align: 'center', width: 150, dataIndex: 'createUser' },
		{ title: '反馈时间', align: 'center', width: 200, dataIndex: 'updateTime' },
		{ title: '意见', dataIndex: 'adviceContent' },
		{ title: '附件', width: 400, key: 'attachment' }
	]
	const route = useRoute()
	const tableData = ref([])
	const CGYJFKviewAsync = async () => {
		const res = await API.BZView({ id: route.query?.id })
		res.attachment = (res.attachment || '').split(',').filter((v) => v)
		tableData.value = [res]
	}

	// watch(
	// 	() => route.query.id,
	// 	(newVal) => {
	// 		setTimeout(() => {
	// 			CGYJFKviewAsync()
	// 		}, 200)
	// 	},
	// 	{ immediate: true, deep: true }
	// )
	onMountedWatch(route, '/basic.info/planningPreparationView', CGYJFKviewAsync)

	function changeUpload(fd) {
		return global.uploadFile(fd).then((reg) => {
			return reg
		})
	}
</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>
