<template>
	<div>
		<a-modal
			v-model:visible="visible"
			width="80%"
			:closable="false"
			:maskClosable="false"
			:title="titleText"
			:footer="null"
		>
			<a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
				<a-row>
					<a-col :span="16"
						><a-form-item label="标题" name="title">
							<a-select
								:disabled="true"
								class="title-box"
								v-model:value="formState.title"
								:size="size"
								@change="onChangeVal"
								placeholder="请选择"
							>
								<a-select-option v-for="item in titleTypeList" :key="item.id" :value="item.id">
									{{ item.title }}
								</a-select-option>
							</a-select>
						</a-form-item></a-col
					>
					<a-col :span="8">
						<a-form-item label="申报部门" name="sysOrgId">
							<a-select
								:disabled="true"
								class="select-box"
								v-model:value="formState.sysOrgId"
								:size="size"
								placeholder="请选择"
							>
								<a-select-option v-for="item in unitTypeList" :key="item.id" :value="item.id">
									{{ item.name }}
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="8"
						><a-form-item label="申报人" name="reporter">
							<a-input autocomplete="off" :disabled="true" v-model:value="formState.reporter" /> </a-form-item
					></a-col>
					<a-col :span="8"
						><a-form-item label="联系方式" name="contactInfo">
							<a-input autocomplete="off" :disabled="true" v-model:value="formState.contactInfo" /> </a-form-item
					></a-col>
					<a-col :span="8"
						><a-form-item label="申报编号" name="reportNumber">
							<a-input autocomplete="off" :disabled="true" v-model:value="formState.reportNumber" /> </a-form-item
					></a-col>
				</a-row>
				<a-row>
					<a-col :span="8">
						<a-form-item label="申报时间" name="reportDate">
							<a-date-picker :disabled="true" v-model:value="formState['reportDate']" value-format="YYYY-MM-DD" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="24">
						<a-form-item label="申报正文" name="reportContent">
							<a-textarea
								:disabled="true"
								class="text-box"
								v-model:value="formState.reportContent"
								:rows="8"
								placeholder="请输入"
							/>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="12">
						<a-form-item label="附件" name="attachment">
							<DIYUPLoad :disabled="true" listType="picture-card" v-model:urls="formState.attachment"
						/></a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="24">
						<a-form-item label="审核意见" name="auditAdvice">
							<a-textarea
								:disabled="showLock"
								class="text-box"
								v-model:value="formState.auditAdvice"
								:rows="8"
								placeholder="请输入"
							/>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="12">
						<a-form-item label="附件" name="attachmentVal">
							<DIYUPLoad
								:disabled="showLock"
								listType="picture-card"
								:change="changeUploadVal"
								multiple
								v-model:urls="formState.attachmentVal"
						/></a-form-item>
					</a-col>
				</a-row>
			</a-form>
			<div class="btn-box">
				<a-button v-if="dataObj.isType !== '3'" style="margin-right: 16px" type="primary" @click="handleOk"
					>通过</a-button
				>
				<a-button v-if="dataObj.isType !== '3'" style="margin-right: 16px" class="btn-type" @click="rejectData"
					>驳回</a-button
				>
				<a-button @click="handleCancel">关闭</a-button>
			</div>
		</a-modal>
	</div>
</template>
<script setup>
	import { message } from 'ant-design-vue'
	import { isSocialCreditOrIdCode } from '@/utils/validator'
	import alPolicyFileReportApi from '@/api/policy.info/alPolicyFileReportApi'
	import auditRequestApi from '@/api/policy.info/auditRequestApi'
	import { globalStore } from '@/store'
	import moment from 'moment'
	import global from '@/api/basic.info/global'
	const props = defineProps({
		dataObj: {
			type: Object,
			default: () => {}
		}
	})
	const store = globalStore()
	const formState = ref({
		title: '',
		sysOrgId: '',
		reporter: '',
		contactInfo: '',
		reportNumber: '',
		reportDate: new Date(),
		reportContent: '',
		auditAdvice: '',
		attachment: '',
		attachmentVal: ''
	})
	const rules = ref({
		title: [{ required: true, message: '请选择标题', trigger: 'change' }],
		auditAdvice: [{ required: true, message: '请输入审核意见', trigger: 'blur' }],
		attachmentVal: [{ required: true, message: '请上传附件', trigger: 'blur' }]
	})
	const unitTypeList = ref([])
	const titleTypeList = ref([])
	const isTypeData = ref('')
	const showLock = ref(false)
	const visible = ref(false)
	const titleText = ref('')
	const formRef = ref(null)
	const emit = defineEmits(['isVisible'])

	const userInfo = computed(() => {
		return store.userInfo
	})
	// 获取标题数据
	const getTitleData = () => {
		alPolicyFileReportApi.getTitleList().then((res) => {
			titleTypeList.value = []
			titleTypeList.value = res
		})
	}
	// 获取申报部门
	const getReportData = () => {
		alPolicyFileReportApi.getReport().then((res) => {
			unitTypeList.value = res
		})
	}
	// 关闭按钮
	const handleCancel = () => {
		closeData()
	}
	// 驳回事件
	const rejectData = () => {
		formRef.value
			.validate()
			.then(() => {
				const fromObj = {
					type: 1,
					step: 1,
					requestId: obj.value.reportId,
					auditStatus: 2,
					auditAdvice: formState.value.auditAdvice,
					auditUserId: userInfo.value.id,
					auditTime: moment(new Date()).format('yyyy-MM-DD HH:mm:ss'),
					attachment: formState.value.attachmentVal.join(',')
				}
				auditRequestApi.rejectForm(fromObj).then((res) => {
					closeData()
					// getTitleData()
					// formState.value.auditAdvice = ''
					// formState.value.attachmentVal = ''
					// detailData(obj.value)
					message.info('驳回成功')
				})
			})
			.catch((error) => {
				message.warning('驳回前，请填写完善')
				console.log('error', error)
			})
	}
	// 审核按钮
	const handleOk = () => {
		formRef.value
			.validate()
			.then(() => {
				const fromObj = {
					type: 1,
					step: 1,
					requestId: obj.value.reportId,
					auditStatus: 1,
					auditAdvice: formState.value.auditAdvice,
					auditUserId: userInfo.value.id,
					auditTime: moment(new Date()).format('yyyy-MM-DD HH:mm:ss'),
					attachment: formState.value.attachmentVal.join(',')
				}
				auditRequestApi.adoptForm(fromObj).then((res) => {
					closeData()
					// getTitleData()
					// formState.value.auditAdvice = ''
					// formState.value.attachmentVal = ''
					// detailData(obj.value)
					message.info('保存成功')
				})
			})
			.catch((error) => {
				message.warning('请填写完善')
				console.log('error', error)
			})
	}
	// 标题更改用于切换数据
	const onChangeVal = (val) => {
		// formState.val.title = val
		// formState.value.auditAdvice = ''
		// formState.value.attachmentVal = ''
		// detailData(obj.value)
	}
	// 用于查看调用
	const detailData = (val) => {
		auditRequestApi.detailForm(val).then((res) => {
			formState.value = { ...res.alPolicyFileReport }
			// 判断是不是审核按钮进去的 不是的话不存在审核数据
			// formState.value.auditAdvice = res.auditRequest.auditAdvice 给审核意见赋值
			if (res.auditRequest) {
				formState.value.auditAdvice = res.auditRequest.auditAdvice
				formState.value.attachmentVal = []
				formState.value.attachmentVal = res.auditRequest.attachment.split(',') || ''
			} else {
				formState.value.attachment = []
				formState.value.attachment = res.alPolicyFileReport.attachment.split(',') || ''
			}
		})
	}
	const changeUploadVal = (val) => {
		return global.uploadFile(val).then((reg) => {
			return reg
		})
	}
	const closeData = () => {
		visible.value = false
		emit('isVisible', false)
		formRef.value.resetFields() //resetFields()函数是组件库提供的
		formState.value = {}
	}
	const obj = ref({})
	// 监听点击事件更新数据
	watch(
		() => props.dataObj,
		async (newValue, oldvalue) => {
			await nextTick()
			titleText.value = newValue.titleText
			visible.value = newValue.visible
			showLock.value = newValue.showLock
			isTypeData.value = newValue.isType
			// isType字段用于查看接口
			if (newValue.isType == '2' || newValue.isType == '3') {
				obj.value = {
					reportId: newValue.id,
					requestId: newValue.requestId,
					type: '1'
				}
				detailData(obj.value), getReportData(), getTitleData()
			} else {
				// 用于新增时清空表格数据
				formState.value = {}
			}
		},
		{ deep: true, immediate: true }
	)
	// onMounted(() => {
	// 	getReportData(), getTitleData()
	// })
</script>
<style lang="less" scoped>
	.ant-input {
		width: 80%;
	}
	/* 针对 a-form-item 的 label 应用样式 */
	::v-deep .ant-form-item-label {
		width: 130px;
		text-align: right;
	}
	::v-deep .ant-form-item-control-input {
		width: 100%;
	}
	.title-box {
		width: 91.7%;
	}
	.ant-picker {
		width: 80%;
	}
	.select-box {
		width: 80%;
	}
	.from-input {
		width: 101.4%;
	}
	::v-deep.ant-modal-footer {
		display: none !important;
	}
	.text-box {
		width: 94.6%;
	}
	.btn-box {
		text-align: center;
	}
	.btn-type {
		background-color: #ec5325e5;
		color: #fff;
	}
	/* 为所有滚动条设置样式 */
	::-webkit-scrollbar {
		width: 8px; /* 设置滚动条的宽度 */
		border-radius: 10px;
	}
	/* 修改滚动条滑块的样式 */
	.a-modal::-webkit-scrollbar-thumb {
		background-color: #c1c1c1;
	}

	/* 滚动条轨道 */
	::-webkit-scrollbar-track {
		background: #f5f5f5; /* 设置轨道的背景颜色 */
	}

	/* 滚动条的滑块 */
	::-webkit-scrollbar-thumb {
		background: #c1c1c1; /* 设置滑块的背景颜色 */
		border-radius: 10px !important;
	}
</style>
