<template>
	<!-- 初稿意见征集 -->
	<div class="planningFirstOpinion 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 != 2" class="edit" @click="onEditRow(record)">编辑</a-button>
						<a-button v-if="record.status != 2" class="remove" @click="onDeleteRow(record)">删除</a-button>
						<a-button v-if="record.status == 2" class="opinion" @click="onOpinionRow(record)">查看意见</a-button>
					</template>
				</template>
			</a-table>
		</div>
		<a-modal v-model:visible="AddEditDialog.open" :title="AddEditDialog.title" width="800px">
			<DIYForm
				v-if="['add', 'edit'].includes(AddEditDialog.mode)"
				ref="DialogForm"
				:column="2"
				:model="AddEditDialog.form"
				:options="AddEditDialog.formOptions"
				:rules="AddEditDialog.formRules"
			></DIYForm>
			<DIYDescriptions
				v-else-if="AddEditDialog.mode === 'view'"
				:column="2"
				:data="AddEditDialog.form"
				:options="AddEditDialog.formOptions"
			>
				<template #sysOrgId="{ row }">
					<a-tag color="blue" v-for="item in AddEditDialog.form[row.name]" :key="item">{{ item }}</a-tag>
				</template>
				<template #attachment="{ row }">
					<DIYUPLoad listType="picture-card" v-model:urls="AddEditDialog.form[row.name]" disabled></DIYUPLoad>
				</template>
			</DIYDescriptions>
			<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(1)">保存</a-button>
				<a-button type="primary" @click="onDialogOk(2)">发布</a-button>
			</template>
		</a-modal>
	</div>
</template>
<script setup name="planningFirstOpinion">
	import global from '@/api/basic.info/global.js'
	import { useRouter } from 'vue-router'
	import API from '@/api/policy.info/planningFirstOpinion'
	import { listPagination } from '@/hook/listlistPagination.js'
	import { Modal } from 'ant-design-vue'
	import ORG from '@/api/basic.info/unReporCityApi.js'
	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: 'startDate' },
		{ title: '结束日期', dataIndex: 'endDate' },
		{ title: '操作', width: 400, key: 'CZ' }
	]

	const ORGList = ref([])
	const PlanNameList = ref([])
	// const tableData = ref([])
	const DialogForm = ref(null)
	const AddEditDialog = reactive({
		open: false,
		title: '',
		mode: 'add',
		formRules: {
			planName: [{ required: true, trigger: 'change', message: '请输入规划名称！' }],
			sysOrgId: [{ required: true, trigger: 'change', message: '请选择收集处室！' }],
			content: [{ required: true, trigger: 'change', message: '请输入规划正文！' }]
		},
		formOptions: [
			{
				label: '规划名称',
				name: 'firstDraftId',
				mode: 'select',
				showSearch: true,
				values: PlanNameList,
				onSelect(ev, row) {
					AddEditDialog.form['planName'] = row.label
					NameXiQiAsync(row.value)
				},
				span: 2
			},
			{ label: '开始时间', name: 'startDate', mode: 'date', span: 1, valueFormat: 'YYYY-MM-DD', format: 'YYYY-MM-DD' },
			{ label: '结束时间', name: 'endDate', mode: 'date', span: 1, valueFormat: 'YYYY-MM-DD', format: 'YYYY-MM-DD' },
			{ label: '收集处室', name: 'sysOrgId', mode: 'select', dmode: 'multiple', span: 2, values: ORGList },
			{ label: '规划正文', name: 'content', mode: 'textarea', span: 2 },
			{
				label: '附件',
				name: 'attachment',
				mode: 'fileurls',
				multiple: true,
				change: changeUpload,
				listType: 'picture-card',
				span: 2
			}
		],
		form: {}
	})
	onMounted(() => {
		getPlanName()
		getORGList()
	})

	const NameXiQiAsync = async (id) => {
		const res = await API.NameXiQi({ id: id })
		if (res.planContent) {
			AddEditDialog.form.content = res.planContent
			AddEditDialog.form.attachment = (res.attachment || '').split(',').filter((v) => v)
		}
		console.log('选择赋值')
	}

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

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

	function getORGList() {
		ORG.unReporCityquery().then((reg) => {
			ORGList.value = reg.map((v) => {
				return { label: v.name, value: v.id }
			})
		})
	}
	function getPlanName(key) {
		API.getPlanName({ mapNow: 1 }).then((reg) => {
			PlanNameList.value = (reg?.mapNow || []).map((v) => {
				return { label: v.planName, value: v.id }
			})
		})
	}

	function changeUpload(fd) {
		return global.uploadFile(fd).then((reg) => {
			return reg
		})
	}
	function onViewRow(row) {
		let ORGFilter = ORGList.value
		AddEditDialog.form = JSON.parse(JSON.stringify(row))
		if (AddEditDialog.form.attachment == '') {
			console.log('AddEditDialog.form.attachment', AddEditDialog.form.attachment)
		} else {
			AddEditDialog.form.attachment = (AddEditDialog.form.attachment || '').split(',').filter((v) => v)
		}
		AddEditDialog.form.sysOrgId = (AddEditDialog.form.sysOrgId || '').split(',').filter((v) => v)
		AddEditDialog.form.sysOrgId = AddEditDialog.form.sysOrgId.map((v) => {
			return ORGFilter.filter((c) => c.value === v)[0]?.label || '-'
		})
		AddEditDialog.mode = 'view'
		AddEditDialog.title = '查看规划'
		AddEditDialog.open = true
	}
	function onAddRow() {
		AddEditDialog.form = {}
		AddEditDialog.mode = 'add'
		AddEditDialog.title = '添加规划'
		AddEditDialog.open = true
	}

	function onEditRow(row) {
		AddEditDialog.form = JSON.parse(JSON.stringify(row))

		if (AddEditDialog.form.attachment == '') {
			console.log('AddEditDialog.form.attachment', AddEditDialog.form.attachment)
		} else {
			AddEditDialog.form.attachment = AddEditDialog.form.attachment.split(',')
		}
		// AddEditDialog.form.attachment = AddEditDialog.form.attachment.split(',')
		AddEditDialog.form.sysOrgId = (AddEditDialog.form.sysOrgId || '').split(',')
		AddEditDialog.mode = 'edit'
		AddEditDialog.title = '编辑规划'
		AddEditDialog.open = true
	}
	function onDeleteRow(row) {
		Modal.confirm({
			content: '是否确认删除？',
			onOk() {
				return API.delete([{ id: row.id }]).then((reg) => {
					onSearch()
				})
			},
			onCancel() {
				Modal.destroyAll()
			}
		})
	}
	function onOpinionRow(row) {
		router.push({ path: '/basic.info/planningFirstOpinionView', query: { id: row.id } })
	}
	function onDialogOk(status) {
		const URLs = {
			add: API.add,
			edit: API.edit
		}

		DialogForm.value
			.validate()
			.then((reg) => {
				let fd = JSON.parse(JSON.stringify(AddEditDialog.form))
				fd.attachment = (fd.attachment || []).join(',')
				fd.sysOrgId = (fd.sysOrgId || []).join(',')
				fd.status = status
				return URLs[AddEditDialog.mode](fd)
			})
			.then((reg) => {
				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>
