// microflow管理 弹框
<template>
	<a-modal
		v-model:visible="confirmModalVisibleValue"
		:confirm-loading="initDataLoading"
		:closable="false"
		:title="
			getI18n(
				'system',
				`${
					microflowId
						? 'SYSTEM_Microflow_Management_Edit'
						: 'SYSTEM_Microflow_Management_Add'
				}`
			)
		"
		:maskClosable="false"
		:width="800"
	>
		<a-form
			:model="formState"
			:label-col="{ span: 6 }"
			:wrapper-col="{ span: 15 }"
			:rules="formRules"
			ref="formRef"
		>
			<!-- 服务组件标识 -->
			<a-form-item
				v-if="microflowId"
				:label="getI18n('system', 'SYSTEM_Microflow_Management_Key')"
				name="id"
			>
				{{ microflowId }}
			</a-form-item>
			<!-- 服务组件名称 -->
			<a-form-item
				:label="getI18n('system', 'SYSTEM_Microflow_Management_Name')"
				name="name"
				ref="name"
			>
				<a-input
					autoComplete="off"
					v-model:value="formState.name"
					:maxLength="50"
					:placeholder="
						getI18n('common', 'Common_Please_Enter', [
							getI18n(
								'system',
								'SYSTEM_Microflow_Management_Name'
							),
						])
					"
				/>
			</a-form-item>
			<!-- 状态 -->
			<a-form-item
				:label="getI18n('system', 'SYSTEM_Microflow_Management_Status')"
				ref="status"
				name="status"
			>
				<a-radio-group v-model:value="formState.status">
					<a-radio
						:style="radioStyle"
						v-for="i in MicroflowManagementConstatnt.detailStatus"
						:key="i.value"
						:value="i.value"
					>
						{{ i.label }}
					</a-radio>
				</a-radio-group>
			</a-form-item>

			<!-- 联系人 -->
			<a-form-item
				:label="
					getI18n('system', 'SYSTEM_Microflow_Management_Username')
				"
				name="contact"
				ref="contact"
			>
				<a-input
					autoComplete="off"
					v-model:value="formState.contact"
					:maxLength="20"
					:placeholder="
						getI18n('common', 'Common_Please_Enter', [
							getI18n(
								'system',
								'SYSTEM_Microflow_Management_Username'
							),
						])
					"
				/>
			</a-form-item>
			<!-- 联系电话 -->
			<a-form-item
				:label="
					getI18n('system', 'SYSTEM_Microflow_Management_Contact')
				"
				name="tel"
				ref="tel"
			>
				<a-input
					autoComplete="off"
					v-model:value="formState.tel"
					:maxLength="20"
					:placeholder="
						getI18n('common', 'Common_Please_Enter', [
							getI18n(
								'system',
								'SYSTEM_Microflow_Management_Contact'
							),
						])
					"
				/>
			</a-form-item>
			<!-- 公钥 -->
			<a-form-item
				v-if="microflowId"
				:label="
					getI18n('system', 'SYSTEM_Microflow_Management_PublicKey')
				"
				name="publicKey"
				ref="publicKey"
			>
				{{ formState.publicKey }}
			</a-form-item>
			<!-- 备注 -->
			<a-form-item
				:label="getI18n('system', 'SYSTEM_Microflow_Management_Remark')"
				name="remark"
				ref="remark"
			>
				<a-textarea
					v-model:value="formState.remark"
					:maxLength="200"
					:placeholder="
						getI18n('common', 'Common_Please_Enter', [
							getI18n(
								'system',
								'SYSTEM_Microflow_Management_Remark'
							),
						])
					"
					:rows="3"
				/>
			</a-form-item>
		</a-form>
		<template #footer>
			<!-- 取消 -->
			<a-button @click="onResetButtonClick" :loading="submitLoading">
				<close-outlined />
				{{ getI18n('common', 'Common_Close') }}
			</a-button>
			<!-- 保存 -->
			<a-button
				type="primary"
				:loading="submitLoading"
				@click="onSubmitButtonClick"
			>
				<save-outlined />
				{{ getI18n('common', 'Common_Save') }}
			</a-button>
		</template>
	</a-modal>
</template>
<script lang="ts">
import { message } from 'ant-design-vue'
import { defineComponent, reactive, ref, watch } from 'vue'
import { CloseOutlined, SaveOutlined } from '@ant-design/icons-vue'

import { MicroflowManagementDetailModel } from '@/types/microflowManagement' //
import {
	getMicroflowManagementByIdApi,
	saveMicroflowManagementApi,
	updateMicroflowManagementApi,
} from '@/api/microflow'
import {
	GetMicroflowManagementByIdParamsModel,
	UpdateMicroflowManagementParamsModel,
} 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'
import { RuleObject } from 'ant-design-vue/es/form/interface'

export default defineComponent({
	components: {
		CloseOutlined,
		SaveOutlined,
	},
	props: {
		// 操作确认弹出层是否展示
		confirmModalVisible: {
			type: Boolean,
			required: false,
			default: false,
		},
		// 编辑所需要的id
		microflowId: {
			type: String,
			default: '',
		},
	},
	emits: ['confirm-modal-cancel', 'confirm-modal-refresh'],
	setup(props, context) {
		//
		const submitLoading = ref<boolean>(false)
		// 弹窗是否展示
		let confirmModalVisibleValue = ref(props.confirmModalVisible)
		const initDataLoading = ref<boolean>(false)
		const formRef = ref()
		const formState = reactive<MicroflowManagementDetailModel>({
			id: undefined, // 主键
			contact: undefined, // 联系人
			tel: undefined, // 联系电话
			status: undefined, // 1启用0禁用
			remark: undefined, // 备注
			name: undefined, // microflow名称
			publicKey: undefined, // 公钥
		})

		// 联系电话
		let validatePhone = async (_rule: RuleObject, value: string) => {
			if (!value) {
				return Promise.resolve()
			}
			let pattern = new RegExp(/^1[3456789]\d{9}$/)
			if (!pattern.test(value)) {
				return Promise.reject(
					getI18n('common', 'Common_Please_Sure_Content', [
						getI18n(
							'system',
							'SYSTEM_Microflow_Management_Contact'
						),
					])
				)
			}
		}

		// 校验规则
		const formRules = {
			// microflow名称
			name: [
				{
					required: true,
					message: getI18n('common', 'Common_Please_Enter', [
						getI18n('system', 'SYSTEM_Microflow_Management_Name'),
					]),
					trigger: 'change',
				},
			],
			// 状态
			status: [
				{
					required: true,
					message: getI18n('common', 'Common_Please_Select', [
						getI18n('system', 'SYSTEM_Microflow_Management_Status'),
					]),
					trigger: 'change',
				},
			],
			// 联系人
			contact: [
				{
					required: false,
					message: getI18n('common', 'Common_Please_Enter', [
						getI18n(
							'system',
							'SYSTEM_Microflow_Management_Username'
						),
					]),
					trigger: 'change',
				},
			],
			// 联系电话
			tel: [
				{
					required: false,
					validator: validatePhone,
					trigger: 'change',
				},
			],
			// 备注
			remark: [
				{
					required: false,
					message: getI18n('common', 'Common_Please_Enter', [
						getI18n('system', 'SYSTEM_Microflow_Management_Remark'),
					]),
					trigger: 'change',
				},
			],
		}
		// 初始化表单
		const initFormStateData = () => {
			formState.id = undefined // 主键
			formState.contact = undefined // 联系人
			formState.tel = undefined // 联系电话
			formState.status = undefined // 1启用0禁用
			formState.remark = undefined // 备注

			formState.name = undefined // microflow名称
			formState.publicKey = undefined // 公钥
			confirmModalVisibleValue.value = false
			formRef.value && formRef.value.resetFields()
		}

		// 修改时单条查询
		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.publicKey = res.data[0].publicKey
			formState.contact = res.data[0].contact
			formState.tel = res.data[0].tel
			formState.status = res.data[0].status?.toString()
			formState.remark = res.data[0].remark
		}

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

		// 保存
		const onSubmitButtonClick = async () => {
			formRef.value.validate().then(async () => {
				let params: UpdateMicroflowManagementParamsModel = {
					contact: formState.contact,
					tel: formState.tel,
					status: formState.status,
					remark: formState.remark,
					name: formState.name,
				}
				if (props.microflowId) {
					submitLoading.value = true
					params.id = props.microflowId
					await updateMicroflowManagementApi(params).finally(() => {
						submitLoading.value = false
					})
				} else {
					submitLoading.value = true
					await saveMicroflowManagementApi(params).finally(() => {
						submitLoading.value = false
					})
				}

				message.success(getI18n('common', 'Common_Success'))
				initFormStateData()
				context.emit('confirm-modal-refresh')
			})
		}

		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,
			initFormStateData,

			MicroflowManagementConstatnt,
			getViewText,

			submitLoading,
			onSubmitButtonClick,
			onResetButtonClick,
			radioStyle: {
				display: 'inline-block',
				height: '30px',
				lineHeight: '30px',
			},
		}
	},
})
</script>