// microflow管理 弹框
<template>
	<a-modal
		v-model:visible="confirmModalVisibleValue"
		:confirm-loading="initDataLoading"
		:closable="false"
		:title="getI18n('system', 'SYSTEM_Microflow_Management_View')"
		:maskClosable="false"
		:width="800"
	>
		<a-form
			:model="formState"
			:label-col="{ span: 6 }"
			:wrapper-col="{ span: 15 }"
			:rules="formRules"
			ref="formRef"
		>
			<!-- 名称 -->
			<a-form-item
				:label="getI18n('system', 'SYSTEM_Microflow_Management_Name')"
				name="name"
			>
				{{ formState.name }}
			</a-form-item>
			<!-- 联系人 -->
			<a-form-item
				:label="
					getI18n('system', 'SYSTEM_Microflow_Management_Username')
				"
				name="contact"
			>
				{{ formState.contact }}
			</a-form-item>
			<!-- 联系电话 -->
			<a-form-item
				:label="
					getI18n('system', 'SYSTEM_Microflow_Management_Contact')
				"
				name="tel"
			>
				{{ formState.tel }}
			</a-form-item>
			<!-- 状态 -->
			<a-form-item
				:label="getI18n('system', 'SYSTEM_Microflow_Management_Status')"
				name="status"
			>
				{{
					getViewText(
						MicroflowManagementConstatnt.detailStatus,
						formState.status || ''
					)
				}}
			</a-form-item>
			<!-- 公钥 -->
			<a-form-item
				:label="
					getI18n('system', 'SYSTEM_Microflow_Management_PublicKey')
				"
				name="publicKey"
			>
				{{ formState.publicKey }}
			</a-form-item>
			<!-- 备注 -->
			<a-form-item
				:label="getI18n('system', 'SYSTEM_Microflow_Management_Remark')"
				name="remark"
			>
				{{ formState.remark }}
			</a-form-item>
		</a-form>
		<template #footer>
			<a-button :loading="initDataLoading" @click="onCloseClick">
				<!-- q取消 -->
				{{ getI18n('common', 'Common_Close') }}
			</a-button>
		</template>
	</a-modal>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, watch } from 'vue'

import { MicroflowManagementDetailModel } from '@/types/microflowManagement' //
import { getMicroflowManagementByIdApi } from '@/api/microflow'
import { GetMicroflowManagementByIdParamsModel } from '@/api/microflow/model'

import { getI18n } from '@/utils/i18n'
import { RequestResult } from '@/utils/request/model'

import { getViewText } from '@/utils/tool/translateValue'
import { MicroflowManagementConstatnt } from '@/utils/constant'

export default defineComponent({
	props: {
		// 操作确认弹出层是否展示
		confirmModalVisible: {
			type: Boolean,
			required: false,
			default: false,
		},
		// 编辑所需要的id
		microflowId: {
			type: String,
			default: '',
		},
	},
	emits: ['confirm-modal-cancel'],
	setup(props, context) {
		// 弹窗是否展示
		let confirmModalVisibleValue = ref(props.confirmModalVisible)
		const initDataLoading = ref<boolean>(false)
		const formRef = ref()
		const formState = reactive<MicroflowManagementDetailModel>({
			id: undefined, // 主键
			name: undefined, // 名称
			contact: undefined, // 联系人
			tel: undefined, // 联系电话
			status: undefined, // 1启用0禁用
			publicKey: undefined, // 流程参数
			remark: undefined, // 备注
		})
		// 校验规则
		const formRules = {}
		// 初始化表单
		const initFormStateData = () => {
			formState.id = undefined // 主键
			formState.name = undefined // 名称
			formState.contact = undefined // 联系人
			formState.tel = undefined // 联系电话
			formState.status = undefined // 1启用0禁用
			formState.publicKey = undefined // 流程参数
			formState.remark = undefined // 备注
		}

		// 修改时单条查询
		const getMicroflowManagementById = async (id: string) => {
			initDataLoading.value = true
			let params: GetMicroflowManagementByIdParamsModel = {
				id: id,
			}
			const res: RequestResult<MicroflowManagementDetailModel> =
				await getMicroflowManagementByIdApi(params).finally(() => {
					initDataLoading.value = false
				})
			formState.id = res.data[0].id
			formState.name = res.data[0].name
			formState.contact = res.data[0].contact
			formState.tel = res.data[0].tel
			formState.status = res.data[0].status
			formState.publicKey = res.data[0].publicKey
			formState.remark = res.data[0].remark
		}

		// 关闭弹框
		const onCloseClick = () => {
			context.emit('confirm-modal-cancel')
			initFormStateData()
		}

		watch(
			() => props.confirmModalVisible,
			async newValue => {
				confirmModalVisibleValue.value = newValue
				newValue &&
					props.microflowId &&
					(await getMicroflowManagementById(props.microflowId))
			},
			{ deep: true, immediate: true }
		)

		return {
			confirmModalVisibleValue,
			initDataLoading,
			formRef,
			formState,
			formRules,
			getI18n,
			onCloseClick,
			initFormStateData,

			MicroflowManagementConstatnt,
			getViewText,
		}
	},
})
</script>