<script setup>
import { ref } from "vue";
import { showToast, showDialog } from "vant";

const props = defineProps({
    orderId: {
        type: String,
        default: "",
    },
    orderNo: {
        type: String,
        default: "",
    },
    isExample: {
        type: Boolean,
        default: false,
    },
    disabled: {
        type: Boolean,
        default: false,
    },
});

const isLoading = ref(false);

const copyToClipboard = async (text) => {
    await navigator.clipboard.writeText(text);
    showToast({
        type: "success",
        message: "链接已复制到剪贴板",
        position: "bottom",
    });
};

const handleShare = async () => {
    if (isLoading.value || props.disabled) return;

    // 如果是示例模式，直接分享当前URL
    if (props.isExample) {
        try {
            const currentUrl = window.location.href;
            await copyToClipboard(currentUrl);
            showToast({
                type: "success",
                message: "示例链接已复制到剪贴板",
                position: "bottom",
            });
        } catch (err) {
            showToast({
                type: "fail",
                message: "复制链接失败",
                position: "bottom",
            });
        }
        return;
    }

    // 优先使用 orderId，如果没有则使用 orderNo
    const orderIdentifier = props.orderId || props.orderNo;
    if (!orderIdentifier) {
        showToast({
            type: "fail",
            message: "缺少订单标识",
            position: "bottom",
        });
        return;
    }

    // 在示例模式下，只复制当前 URL，不需要网络请求
    // 如果需要真正的分享功能，可以在这里添加网络请求逻辑
    showToast({
        type: "success",
        message: "示例模式下仅复制当前链接",
        position: "bottom",
    });
};
</script>

<template>
    <div class="bg-primary border border-primary rounded-[40px] px-3 py-1 flex items-center justify-center cursor-pointer hover:bg-primary-600 transition-colors duration-200"
        :class="{ 'opacity-50 cursor-not-allowed': isLoading || disabled }" @click="handleShare">
        <img src="@/assets/images/report/fx.png" alt="分享" class="w-4 h-4 mr-1" />
        <span class="text-white text-sm font-medium">
            {{ isLoading ? "生成中..." : (isExample ? "分享示例" : "分享报告") }}
        </span>
    </div>
</template>

<style lang="scss" scoped>
/* 样式已通过 Tailwind CSS 类实现 */
</style>
