<template>
	<!-- 规划完成 -->
	<div class="planningFirstSuccess pageContent">
		<a-space class="search">
			规划名称:<a-input v-model:value="SearchFormDel.planName" />
			<div class="btnBox">
				<a-button type="primary" @click="Search"> 查询 </a-button>
				<a-button @click="onReset"> 重置 </a-button>
			</div>
		</a-space>
		<div class="list">
			<a-table :dataSource="tableData" :pagination="pagination" :columns="tableColumns">
				<template #bodyCell="{ column, record, index }">
					<template v-if="column.key === 'INDEX'">{{ index + 1 }}</template>
					<template v-if="column.key === 'status'">
						<a-tag v-if="record['status'] == 2" color="green">已发布</a-tag>
						<a-tag v-else color="red">未发布</a-tag>
					</template>
					<template v-else-if="column.key === 'CZ'">
						<a-button class="view" @click="onViewRow(record)">查看</a-button>
						<a-button v-if="record.status == 1" type="primary" @click="onDialogOk(record)">发布</a-button>
					</template>
				</template>
			</a-table>
		</div>
		<a-modal v-model:visible="AddEditDialog.open" :title="AddEditDialog.title" width="800px">
			<!-- <a-descriptions :column="2">
		<a-descriptions-item v-for="item in AddEditDialog.formOptions"
			:label="item.label" :key="item.label" :span="item.span"
		>{{AddEditDialog.form[item.prop]}}</a-descriptions-item>
	</a-descriptions> -->
			<!-- <DIYDescriptions :data="AddEditDialog.form" :options="AddEditDialog.formOptions">
				<template #>
					<DIYUPLoad :urls="AddEditDialog.form[]" disabled></DIYUPLoad>
				</template>
			</DIYDescriptions> -->
			<div>
				<div>
					规划名称: <span>{{ AddEditDialog.form.planName }}</span>
				</div>
				<br />
				<div>
					规划正文: <span>{{ AddEditDialog.form.planContent }}</span>
				</div>
				<br />
				<div>附件：</div>
				<DIYUPLoad
					:disabled="true"
					listType="picture-card"
					:change="changeUploadVal"
					multiple
					v-model:urls="AddEditDialog.form.attachment"
				/>
			</div>
			<template #footer>
				<a-button @click="AddEditDialog.open = false">取消</a-button>
			</template>
		</a-modal>
	</div>
</template>
<script setup name="planningFirstSuccess">
	import global from '@/api/basic.info/global.js'
	import { listPagination } from '@/hook/listlistPagination.js'
	import { useRouter } from 'vue-router'
	import API from '@/api/policy.info/planningFirstSuccess'
	import { message } from 'ant-design-vue'
	import { onMountedWatch } from '@/hook/onMounted.js'
	import { useRoute } from 'vue-router'
	const route = useRoute()
	// 文件预览方式
	const changeUploadVal = (val) => {
		return global.uploadFile(val).then((reg) => {
			return reg
		})
	}
	const attachment = ref()
	const router = useRouter()
	// const SearchForm = reactive({
	// 	planName: ''
	// })
	const tableColumns = [
		{ title: '序号', width: 100, align: 'center', key: 'INDEX' },
		{ title: '规划名称', dataIndex: 'planName' },
		{ title: '发布时间', dataIndex: 'publishTime' },
		{ title: '状态', key: 'status' },
		{ title: '操作', width: 400, key: 'CZ' }
	]
	const DialogForm = ref(null)
	const AddEditDialog = reactive({
		open: false,
		title: '',
		formOptions: [
			{ label: '规划名称', name: 'planName', mode: 'input', span: 1 },
			{ label: '正文', name: 'planContent', mode: 'textarea', span: 2 },
			{ label: '附件', name: '_附件', mode: 'fileurls', span: 2 }
		],
		form: {}
	})

	const { tableData, onSearch, onReset, handlePageChange, pagination, Search, SearchFormDel } = listPagination(
		{ planName: '' },
		API.get,
		{},
		{},
		'543'
	)

	onMountedWatch(route, '/basic.info/planningFirstSuccess', onSearch, pagination)

	function changeUpload(fd) {
		return global.uploadFile(fd).then((reg) => {
			return reg
		})
	}
	function onViewRow(row) {
		getDetail(row.draftAuditId).then((reg) => {
			AddEditDialog.form = reg
			AddEditDialog.mode = 'view'
			AddEditDialog.title = '查看规划完成'
			AddEditDialog.open = true
			if (reg.attachment) {
				AddEditDialog.form.attachment = (reg.attachment || '').split(',').filter((v) => v)

				AddEditDialog.form.mlpDraftAuditExpert.forEach((v) => {
					v.attachment = (v.attachment || '').split(',').filter((v) => v)
				})
			}
		})
	}

	function getDetail(id) {
		return API.detail({ id }).then((reg) => {
			return reg
		})
	}

	function onDialogOk(row) {
		// let row = AddEditDialog.form
		API.pub({ id: row.draftAuditId, status: 2 }).then((reg) => {
			message.success('操作完成！')
			// AddEditDialog.open = false
			pagination.current = 1
			pagination.pageSize = 5
			onSearch()
		})
	}
</script>
<style lang="less" scoped>
	.view {
		background-color: rgba(112, 125, 233);
		color: #fff;
	}
	.edit {
		background-color: rgba(210, 176, 61);
		color: #fff;
	}
	.remove {
		background-color: rgba(255, 70, 70);
		color: #fff;
	}
	.add {
		background-color: rgba(83, 184, 36);
		color: #fff;
	}
	.pageContent {
		background: #fff;
		padding: 10px 20px;
		.search {
			padding: 10px 0;
			.btnBox {
				display: flex;
				> * {
					margin-right: 10px;
				}
			}
		}
	}
</style>
