<script lang="ts" setup>
/**
 * 场景列表：点击平台标签预览该平台消息配置
 * 数据由列表页 modalApi.setData 注入：platformName / platformCode / messageType / payload
 */
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { Empty } from 'ant-design-vue';

import MsgPreview from '#/views/system/oa-scene/components/msg-preview.vue';

const platformName = ref('');
const platformCode = ref('');
const messageType = ref('');
const payload = ref<Record<string, any>>({});
const hasConfig = ref(false);

const [Modal, modalApi] = useVbenModal({
  title: '消息预览',
  footer: false,
  draggable: true,
  onOpenChange(isOpen: boolean) {
    if (!isOpen) return;
    const data = modalApi.getData<any>() || {};
    platformName.value = String(data.platformName || data.platform_name || '');
    platformCode.value = String(data.platformCode || data.platform_code || '');
    messageType.value = String(data.messageType || data.message_type || '');
    payload.value =
      data.payload && typeof data.payload === 'object' ? data.payload : {};
    hasConfig.value = !!messageType.value;
    modalApi.setState({
      title: platformName.value
        ? `消息预览 · ${platformName.value}`
        : '消息预览',
    });
  },
});
</script>

<template>
  <Modal class="w-[480px]">
    <div v-if="hasConfig" class="preview-wrap">
      <MsgPreview
        :platform-code="platformCode"
        :message-type="messageType"
        :payload="payload"
      />
    </div>
    <Empty v-else description="该平台暂无消息配置" />
  </Modal>
</template>

<style scoped>
.preview-wrap {
  padding: 8px 4px 12px;
  min-height: 120px;
}
</style>
