<template>
	<el-dialog :close-on-click-modal="false" :title="$t('merchantUser.keyDialogTitle')" draggable v-model="visible" width="600px" @close="handleClose">
		<el-alert :title="$t('merchantUser.keyDialogTip')" type="warning" :closable="false" style="margin-bottom: 20px" />

		<el-form label-width="120px">
			<el-form-item :label="$t('merchantUser.appIdLabel')">
				<el-input v-model="keyData.appId" readonly />
			</el-form-item>

			<el-form-item :label="$t('merchantUser.md5KeyLabel')">
				<el-input v-model="keyData.md5Key" readonly type="textarea" :rows="3" />
			</el-form-item>
		</el-form>

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleCopyAll" icon="DocumentCopy" type="primary">{{ $t('merchantUser.copyAllBtn') }}</el-button>
				<el-button @click="visible = false">{{ $t('common.closeBtn') }}</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" name="MerchantKeyDialog" setup>
import { useMessage } from '/@/hooks/message';
import { useI18n } from 'vue-i18n';
import { useClipboard } from '@vueuse/core';

const { t } = useI18n();
const { copy } = useClipboard();

const visible = ref(false);
const keyData = reactive({
	appId: '',
	md5Key: '',
});

// 打开弹窗
const openDialog = (data: any) => {
	visible.value = true;
	keyData.appId = data.appId || '';
	keyData.md5Key = data.md5Key || '';
};

// 一键复制所有信息
const handleCopyAll = async () => {
	try {
		const copyText = `AppId: ${keyData.appId}\nMD5密钥: ${keyData.md5Key}`;
		await copy(copyText);
		useMessage().success(t('merchantUser.copySuccess'));
	} catch (err) {
		useMessage().error(t('merchantUser.copyFailed'));
	}
};

// 关闭弹窗
const handleClose = () => {
	keyData.appId = '';
	keyData.md5Key = '';
};

defineExpose({
	openDialog,
});
</script>
