<template>
	<!-- 专家评审 -->
	<div class="planningFirstAudit 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>
				<a-button class="pub" @click="onAddRow"> 新增 </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-else-if="column.key === 'CZ'">
						<a-button class="view" @click="onViewRow(record)">查看</a-button>
						<a-button v-if="record.status == 0" class="edit" @click="onEditRow(record)">编辑</a-button>
						<a-button class="remove" @click="onDeleteRow(record)">删除</a-button>
					</template>
				</template>
			</a-table>
		</div>
		<a-modal
			class="diy_dialog"
			v-model:visible="AddEditDialog.open"
			:title="AddEditDialog.title"
			@ok="onDialogOk"
			wrap-class-name="full-modal"
			width="100%"
			hidden="100%"
		>
			<!-- 回显示 -->
			<!-- <DIYDescriptions
				v-if="AddEditDialog.mode === 'view'"
				:column="2"
				:data="AddEditDialog.form"
				:options="AddEditDialog.formOptions"
			>
			</DIYDescriptions> -->
			<div v-if="AddEditDialog.mode === 'view'">
				<div>
					评审规划: <span>{{ AddEditDialog.form.planName }}</span>
				</div>
				<br />
				<div>
					评审日期: <span>{{ AddEditDialog.form.auditDate }}</span>
				</div>
				<br />
				<div>
					规划正文 <span>{{ AddEditDialog.form.planContent }}</span>
				</div>
				<br />
				<div>专家评审</div>
				<br />
			</div>
			<a-table
				v-if="AddEditDialog.mode === 'view'"
				style="width: 100%"
				:dataSource="AddEditDialog.form['mlpDraftAuditExpert']"
				:columns="AddEditDialog.tableColumns"
			>
				<template #bodyCell="{ column, record, index }">
					<template v-if="column.key === 'INDEX'">{{ index + 1 }}</template>
					<template v-else-if="column.key === 'ZJMC'">
						<DIYInput
							style="width: 100%"
							mode="input"
							v-model:value="record['expertName']"
							:values="ExpertNameList"
							disabled
						></DIYInput>
					</template>
					<template v-else-if="column.key === 'ZJYJ'">
						<DIYInput
							mode="textarea"
							disabled
							v-model:value="record['adviceContent']"
							:autoSize="{ minRows: 3 }"
						></DIYInput>
					</template>
					<template v-else-if="column.key === 'FJ'">
						<DIYInput
							mode="fileurls"
							disabled
							v-model:urls="record['attachment']"
							multiple
							:change="changeUpload"
						></DIYInput>
					</template>
					<template v-else-if="column.key === 'reduce_add'">
						<a-button-group>
							<a-button>+</a-button>
							<a-button>-</a-button>
						</a-button-group>
					</template>
				</template>
			</a-table>

			<!--  -->
			<DIYForm
				ref="DialogForm"
				v-else-if="['add', 'edit'].includes(AddEditDialog.mode)"
				:model="AddEditDialog.form"
				:options="AddEditDialog.formOptions"
				:column="2"
			></DIYForm>
			<a-table
				height="300px"
				v-if="['add', 'edit'].includes(AddEditDialog.mode)"
				style="width: 100%"
				:dataSource="AddEditDialog.form['mlpDraftAuditExpert']"
				:columns="AddEditDialog.tableColumns"
			>
				<template #bodyCell="{ column, record, index }">
					<template v-if="column.key === 'INDEX'">{{ index + 1 }}</template>
					<template v-else-if="column.key === 'ZJMC'">
						<DIYInput
							style="width: 100%"
							mode="input"
							v-model:value="record['expertName']"
							:values="ExpertNameList"
						></DIYInput>
					</template>
					<template v-else-if="column.key === 'ZJYJ'">
						<DIYInput mode="textarea" v-model:value="record['adviceContent']" :autoSize="{ minRows: 3 }"></DIYInput>
					</template>
					<template v-else-if="column.key === 'FJ'">
						<DIYInput mode="fileurls" v-model:urls="record['attachment']" multiple :change="changeUpload"></DIYInput>
					</template>
					<template v-else-if="column.key === 'reduce_add'">
						<a-button-group>
							<a-button @click="addDialogExpert(AddEditDialog.form['mlpDraftAuditExpert'], index)">+</a-button>
							<a-button @click="delDialogExpert(AddEditDialog.form['mlpDraftAuditExpert'], index)">-</a-button>
						</a-button-group>
					</template>
				</template>
			</a-table>
			<template #footer v-if="AddEditDialog.mode === 'view'"></template>
			<template #footer v-else>
				<a-button @click="AddEditDialog.open = false">取消</a-button>
				<a-button class="opinion" @click="onDialogOk(0)">保存</a-button>
				<a-button type="primary" @click="onDialogOk(1)">提交</a-button>
			</template>
		</a-modal>
	</div>
</template>
<script setup name="planningFirstAudit">
	import { listPagination } from '@/hook/listlistPagination.js'
	import global from '@/api/basic.info/global.js'
	import { useRouter } from 'vue-router'
	import API from '@/api/policy.info/planningFirstAudit'
	import PFO from '@/api/policy.info/planningFirstOpinion'
	import PF from '@/api/policy.info/planningFirst'
	import PE from '@/api/policy.info/planningExpert'
	import { Modal } from 'ant-design-vue'
	import { message } from 'ant-design-vue'
	import utils from '@/utils/utils'
	import { onMountedWatch } from '@/hook/onMounted.js'
	import { useRoute } from 'vue-router'
	const route = useRoute()
	const router = useRouter()
	const tableColumns = [
		{ title: '序号', width: 100, align: 'center', key: 'INDEX' },
		{ title: '规划名称', dataIndex: 'planName' },
		{ title: '评审时间', dataIndex: 'createTime' },
		{ title: '操作', width: 400, key: 'CZ' }
	]

	const PlanNameList = ref([])
	const ExpertNameList = ref([])
	const DialogForm = ref(null)
	const AddEditDialog = reactive({
		open: false,
		title: '',
		mode: 'add',
		formRules: {
			planName: [{ required: true, trigger: 'change', message: '请输入规划名称！' }],
			_修改时间: [{ required: true, trigger: 'change', message: '请选择修改时间！' }],
			_规划正文: [{ required: true, trigger: 'change', message: '请输入规划正文！' }]
		},
		tableColumns: [
			{ title: '#', width: 50, align: 'center', key: 'INDEX' },
			{ title: '专家名称', width: 200, align: 'center', key: 'ZJMC' },
			{ title: '专家意见', key: 'ZJYJ' },
			{ title: '附件', width: 350, align: 'center', key: 'FJ' },
			{ title: '-', width: 50, key: 'reduce_add' }
		],
		formOptions: [
			{
				label: '评审规划',
				name: 'planName',
				mode: 'select',
				values: PlanNameList,
				onSelect(ev, row) {
					getPlanDetail(row.value).then((res) => {
						AddEditDialog.form.planContent = res.planContent
						AddEditDialog.form.planNameDel = res.planName
						AddEditDialog.form.draftModifyId = res.id
					})
				},
				span: 2
			},
			{ label: '评审日期', name: 'auditDate', mode: 'text', span: 2 },
			{ label: '规划正文', name: 'planContent', mode: 'text', span: 2 },
			{ label: '专家评审', name: 'mlpDraftAuditExpert', slot: 'ZJPS', span: 2 }
			// { label: '专家名称', name: '_专家名称', mode: 'select', dmode: 'multiple', values: ExpertNameList, span: 2 },
			// { label: '专家意见', name: '_专家意见', mode: 'textarea', autoSize: { minRows: 3 }, span: 2 },
			// { label: '附件', name: 'attachment', mode: 'fileurls', multiple: true, change: changeUpload, span: 2 }
		],
		form: {}
	})

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

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

	function getPlanDetail(id) {
		return PF.getPlanningFinishDetail({ id }).then((reg) => {
			return reg
		})
	}

	// 下拉掉接口
	const getPlanningFinishDEl = async (id) => {
		return PF.getPlanningFinish({ id }).then((reg) => {
			return reg
		})
	}

	// function onChangePage(ev) {
	// 	console.log(ev)
	// 	Object.assign(tablePage, ev)
	// 	onSearch()
	// }
	function changeUpload(fd) {
		return global.uploadFile(fd).then((reg) => {
			return reg
		})
	}
	function getDetail(id) {
		if (!id) {
			message.info('请填写记录ID！')
			return
		}
		return API.detail({ id }).then((reg) => {
			return reg
		})
	}

	function addDialogExpert(arr, index) {
		arr.splice(index + 1, 0, {})
	}
	function delDialogExpert(arr, index) {
		arr.splice(index, 1)
		if (arr.length === 0) {
			arr.push({})
		}
	}

	//查看view
	function onViewRow(row) {
		getDetail(row?.id).then((row) => {
			AddEditDialog.form = JSON.parse(JSON.stringify(row))
			// AddEditDialog.form.attachment = (row.attachment || '').split(',').filter((v) => v)

			AddEditDialog.form.attachment = (row.attachment || '').split(',').filter((v) => v)
			AddEditDialog.form.mlpDraftAuditExpert.forEach((v) => {
				v.attachment = (v.attachment || '').split(',').filter((v) => v)
			})
			AddEditDialog.mode = 'view'
			AddEditDialog.title = '查看专家评审'
			AddEditDialog.open = true
		})
	}
	// 添加
	function onAddRow() {
		AddEditDialog.form = {}
		AddEditDialog.mode = 'add'
		// AddEditDialog.state = '1'
		AddEditDialog.title = '专家评审'
		AddEditDialog.open = true

		getPlanningFinishDEl().then((reg) => {
			reg.auditDate = utils.getDate('Y-M-D H:I:S')
			reg.mlpDraftAuditExpert = [{}]
			Object.assign(AddEditDialog.form, reg)
			PlanNameList.value = reg.map((v) => {
				return { label: v.planName, value: v.id }
			})
		})
	}

	// 编辑
	const ids = ref('')
	function onEditRow(prow) {
		getDetail(prow?.id).then((row) => {
			row.draftModifyId = prow.draftModifyId
			AddEditDialog.form = JSON.parse(JSON.stringify(row))
			AddEditDialog.form.attachment = (row.attachment || '').split(',').filter((v) => v)
			AddEditDialog.form.mlpDraftAuditExpert.forEach((v) => {
				v.attachment = (v.attachment || '').split(',').filter((v) => v)
			})
			AddEditDialog.mode = 'edit'
			AddEditDialog.title = '编辑规划'
			AddEditDialog.open = true
			ids.value = prow.id

			getPlanningFinishDEl().then((reg) => {
				// reg.auditDate = utils.getDate('Y-M-D H:I:S')
				// reg.mlpDraftAuditExpert = [{}]
				Object.assign(AddEditDialog.form, reg)
				console.log('22', AddEditDialog.form)
				PlanNameList.value = reg.map((v) => {
					return { label: v.planName, value: v.id }
				})
			})
		})
	}
	// 删除
	function onDeleteRow(row) {
		Modal.confirm({
			title: '确认对话框',
			content: '是否确认删除？',
			onOk() {
				return API.delete([{ id: row.id }]).then((reg) => {
					onSearch()
				})
			},
			onCancel() {
				Modal.destroyAll()
			}
		})
	}
	function onDialogOk(state) {
		console.log(state)
		const URLs = {
			add: API.add,
			edit: API.edit
		}
		DialogForm.value
			.validate()
			.then((reg) => {
				let fd = JSON.parse(JSON.stringify(AddEditDialog.form))
				console.log('fd.attachment', fd)
				// fd.attachment = (fd.attachment || []).join(',')
				fd.auditDate = utils.getDate('Y-M-D H:I:S', fd.auditDate)
				fd.status = state
				let delId = fd.id
				// console.log('fd.atta', AddEditDialog.form.planName)
				if (AddEditDialog.mode == 'add') {
					delete fd.id
					fd.mlpDraftAuditExpert.forEach((v) => {
						if (v.attachment) {
							v.attachment = v.attachment.join()
						}
					})
					return URLs[AddEditDialog.mode]({
						draftModifyId: AddEditDialog.form.planName,
						status: state,
						auditDate: fd.auditDate,
						planName: AddEditDialog.form.planNameDel,
						mlpDraftAuditExpert: fd.mlpDraftAuditExpert,
						planContent: AddEditDialog.form.planContent
					})
				} else {
					fd.mlpDraftAuditExpert.forEach((v) => {
						if (v.attachment) {
							v.attachment = v.attachment.join()
						}
					})
					if (AddEditDialog.form.planNameDel) {
						AddEditDialog.form.planName = AddEditDialog.form.planNameDel
					}
					return URLs[AddEditDialog.mode]({
						id: ids.value,
						status: state,
						auditDate: fd.auditDate,
						mlpDraftAuditExpert: fd.mlpDraftAuditExpert,
						planContent: AddEditDialog.form.planContent,
						draftModifyId: AddEditDialog.form.draftModifyId,
						planName: AddEditDialog.form.planName
					})
				}
			})
			.then((reg) => {
				AddEditDialog.open = false
				pagination.current = 1
				pagination.pageSize = 5
				onSearch()
			})
	}
</script>
<style lang="less">
	.diy_dialog {
		.ant-modal-content {
			overflow: hidden auto;
		}
	}
</style>
<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;
				}
			}
		}
	}

	.ant-modal-root .full-modal {
		background: #fff !important;
		height: 100%;
		.ant-modal {
			max-width: 100%;
			top: 0;
			padding-bottom: 0;
			margin: 0;
		}
		.ant-modal-content {
			display: flex;
			flex-direction: column;
			height: calc(100vh);
		}
		.ant-modal-body {
			flex: 1;
		}
	}
</style>
