<script setup>
import { useRoute } from "vue-router";


const route = useRoute();

// 当前日期
const today = new Date();

const feature = ref(route.params.feature);
const featureData = ref({});


onBeforeMount(() => {
    getProduct();
})


async function getProduct() {
    const { data, error } = await useApiFetch(`/product/app_en/${feature.value}`)
        .get()
        .json();
    if (data.value && !error.value) {
        if (data.value.code === 200) {
            feature.value = data.value.data.product_en;
            featureData.value = data.value.data;
        }
    }
}

let timer = null;

</script>

<template>
    <div class="inquire-bg min-h-screen p-6">
        <div class="mb-6 text-center text-3xl font-bold text-blue-700">
            {{ featureData.product_name }} 代理推广示例
        </div>
        <div class="card">
            <div class="mb-4 text-xl text-gray-800 font-bold">
                {{ featureData.product_name }}
            </div>
            <div class="mb-4 text-gray-600 leading-relaxed" v-html="featureData.description">

            </div>

            <template v-if="featureData.features && featureData.features.length > 1">
                <div class="mb-4 text-lg text-gray-800 font-semibold">
                    报告包含内容
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div v-for="(feature, index) in featureData.features" :key="feature.id"
                        class="rounded-lg py-2 text-center text-sm text-gray-700 font-medium" :class="[
                            (Math.floor(index / 2) + (index % 2)) % 2 === 0
                                ? 'bg-gradient-to-r from-blue-200 via-blue-200 to-blue-100'
                                : 'bg-gradient-to-r from-sky-200 via-sky-200 to-sky-100',
                        ]">
                        {{ feature.name }}
                    </div>
                </div>
            </template>
        </div>
        <div class=" mt-4">
            <div class="mb-4 text-xl text-center text-blue-700 font-semibold">
                成为代理伙伴的优势
            </div>
            <div class="grid grid-cols-2 gap-4">
                <!-- 0基础 -->
                <div class="p-4 bg-white rounded-lg shadow-sm">
                    <div class="flex items-center mb-2">
                        <div class="w-10 h-10 flex items-center justify-center bg-orange-100 rounded-lg">
                            <span class="text-orange-500 text-xl">📚</span>
                        </div>
                        <div class="ml-3 font-medium">0基础</div>
                    </div>
                    <div class="text-sm text-gray-600">
                        无需专业技术背景<br>
                        小白也可轻松上手
                    </div>
                </div>

                <!-- 类型丰富 -->
                <div class="p-4 bg-white rounded-lg shadow-sm">
                    <div class="flex items-center mb-2">
                        <div class="w-10 h-10 flex items-center justify-center bg-blue-100 rounded-lg">
                            <span class="text-blue-500 text-xl">📊</span>
                        </div>
                        <div class="ml-3 font-medium">类型丰富</div>
                    </div>
                    <div class="text-sm text-gray-600">
                        提供多种<br>
                        报告类型查询
                    </div>
                </div>

                <!-- 灵活自由 -->
                <div class="p-4 bg-white rounded-lg shadow-sm">
                    <div class="flex items-center mb-2">
                        <div class="w-10 h-10 flex items-center justify-center bg-green-100 rounded-lg">
                            <span class="text-green-500 text-xl">🚩</span>
                        </div>
                        <div class="ml-3 font-medium">灵活自由</div>
                    </div>
                    <div class="text-sm text-gray-600">
                        价格你说了算，<br>
                        随时随地可推广
                    </div>
                </div>

                <!-- 市场广阔 -->
                <div class="p-4 bg-white rounded-lg shadow-sm">
                    <div class="flex items-center mb-2">
                        <div class="w-10 h-10 flex items-center justify-center bg-red-100 rounded-lg">
                            <span class="text-red-500 text-xl">📈</span>
                        </div>
                        <div class="ml-3 font-medium">市场广阔</div>
                    </div>
                    <div class="text-sm text-gray-600">
                        市场前景好<br>
                        机会众生，创收空间大
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.form-label {
    @apply w-20 text-sm font-medium text-gray-700 flex-shrink-0;
}

.form-input::placeholder {
    color: var(--van-text-color-3);
}

.form-input {
    @apply w-full border-b border-gray-200 px-2 py-2 focus:outline-none;
}

.inquire-bg {
    background: url("@/assets/images/bg_2.png") no-repeat;
    background-position: center;
    background-size: cover;
}
</style>
