<template>
    <div class="p-4 max-w-3xl mx-auto min-h-screen">
        <!-- 标题部分 -->
        <div class="card mb-4 p-4 bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg shadow-lg text-white">
            <h1 class="text-2xl font-extrabold mb-2">专业报告定价配置</h1>
            <p class=" opacity-90">请选择报告类型并设置定价策略，助您实现精准定价</p>
        </div>

        <!-- 报告选择器 -->
        <!-- <div class="mb-4 overflow-x-auto">
            <div class="flex space-x-4">
                <label v-for="report in reportOptions" :key="report.id" class="cursor-pointer flex-shrink-0">
                    <input type="radio" :value="report.id" v-model="selectedReportId" class="hidden" />
                    <div :class="[
                        'px-3 py-1 rounded border text-center',
                        selectedReportId === report.id ? 'bg-blue-500 text-white border-blue-500' : 'bg-white text-gray-700'
                    ]">
                        {{ report.text }}
                        <span v-if="!isReportConfigured(report.id)" class="ml-1 text-xs text-yellow-500">(未配置)</span>
                    </div>
                </label>
            </div>
        </div> -->



        <div class="mb-4">
            <van-field readonly clickable name="reportType" v-model="selectedReportText" label="报告类型"
                placeholder="点击选择报告" @click="showPicker = true" class="card">
                <template #label>
                    <span class="text-blue-600 font-medium">📝 选择报告</span>
                </template>
                <template #right-icon>
                    <van-icon name="arrow-down" class="text-gray-400" />
                </template>
            </van-field>
            <van-popup v-model:show="showPicker" position="bottom">
                <van-picker :columns="reportOptions" :default-index="0" @confirm="onConfirm"
                    @cancel="showPicker = false" />
            </van-popup>
        </div>

        <div v-if="selectedReportText" class="space-y-6">
            <!-- 配置卡片 -->
            <div class="card">
                <!-- 当前报告标题 -->
                <div class="flex items-center mb-6">
                    <van-icon name="description" class="text-blue-500 text-xl mr-2" />
                    <h2 class="text-xl font-semibold text-gray-800">
                        {{ selectedReportText }}配置
                    </h2>
                </div>

                <!-- 显示当前产品的基础成本信息 -->
                <div v-if="currentProductConf && currentProductConf.cost_price"
                    class="px-4 py-2 mb-4 bg-gray-50 border border-gray-200 rounded-lg shadow-sm">
                    <div class="text-lg font-semibold text-gray-700">产品基础信息</div>
                    <div class="mt-1 text-sm text-gray-600">
                        <div>基础成本价：<span class="font-medium">{{ currentProductConf.cost_price }}</span> 元</div>
                        <!-- <div>区间起始价：<span class="font-medium">{{ currentProductConf.price_range_min }}</span> 元</div> -->
                        <div>最高设定金额上限：<span class="font-medium">{{ currentProductConf.price_range_max }}</span> 元</div>
                        <div>最高设定比例上限：<span class="font-medium">{{ priceRatioMax }}</span> %</div>
                    </div>
                </div>


                <!-- 分隔线 -->
                <van-divider :style="{ borderColor: '#e5e7eb', padding: '0 16px' }" class="my-6">
                    <van-icon name="exchange" class="text-gray-400 mx-2" />
                    <span class="text-gray-400 text-sm">成本策略配置</span>
                </van-divider>

                <!-- 加价金额 -->
                <van-field v-model.number="currentConfig.price_increase_amount" label="加价金额" type="number"
                    placeholder="0" @blur="validateDecimal('price_increase_amount')" class="custom-field"
                    :class="{ 'van-field--error': increaseError }">
                    <template #label>
                        <span class="text-gray-600 font-medium">🚀 加价金额</span>
                    </template>
                    <template #extra>
                        <span class="text-blue-500 font-medium ml-2">元</span>
                    </template>
                </van-field>
                <div class="text-xs text-gray-400 mt-1">
                    提示：最大加价金额为{{ priceIncreaseAmountMax }}元<br>
                    说明：加价金额是在基础成本价上增加的额外费用，决定下级报告的最低定价，您将获得所有输入的金额利润。
                </div>

                <!-- 分隔线 -->
                <van-divider :style="{ borderColor: '#e5e7eb', padding: '0 16px' }" class="my-6">
                    <van-icon name="exchange" class="text-gray-400 mx-2" />
                    <span class="text-gray-400 text-sm">定价策略配置</span>
                </van-divider>

                <!-- 定价区间最低 -->
                <van-field v-model.number="currentConfig.price_range_from" label="定价区间最低" type="number" placeholder="0"
                    @blur="() => { validateDecimal('price_range_from'); validateRange(); }" class="custom-field"
                    :class="{ 'van-field--error': rangeError }">
                    <template #label>
                        <span class="text-gray-600 font-medium">💰 最低金额</span>
                    </template>
                    <template #extra>
                        <span class="text-blue-500 font-medium ml-2">元</span>
                    </template>
                </van-field>
                <div class="text-xs text-gray-400 mt-1">
                    提示：最低金额不能低于（基础最低 {{ currentProductConf?.price_range_min || 0 }}元 + 加价金额）<br>
                    说明：设定的最低金额为定价区间的起始值，若下级设定的报告金额在区间内，则区间内部分将按比例获得收益。
                </div>

                <!-- 定价区间最高 -->
                <van-field v-model.number="currentConfig.price_range_to" label="定价区间最高" type="number" placeholder="0"
                    @blur="() => { validateDecimal('price_range_to'); validateRange(); }" class="custom-field"
                    :class="{ 'van-field--error': rangeError }">
                    <template #label>
                        <span class="text-gray-600 font-medium">💰 最高金额</span>
                    </template>
                    <template #extra>
                        <span class="text-blue-500 font-medium ml-2">元</span>
                    </template>
                </van-field>
                <div class="text-xs text-gray-400 mt-1">
                    提示：最高金额不能超过上限（{{ currentProductConf?.price_range_max || 0 }}元）和大于最低金额（{{ priceIncreaseMax
                    }}元）<br>
                    说明：设定的最高金额为定价区间的结束值，若下级设定的报告金额在区间内，则区间内部分将按比例获得收益。
                </div>

                <!-- 收取比例 -->
                <van-field v-model.number="currentConfig.price_ratio" label="收取比例" type="digit" placeholder="0"
                    @blur="() => { validateRatio(); }" class="custom-field" :class="{ 'van-field--error': ratioError }">
                    <template #label>
                        <span class="text-gray-600 font-medium">📈 收取比例</span>
                    </template>
                    <template #extra>
                        <span class="text-blue-500 font-medium ml-2">%</span>
                    </template>
                </van-field>
                <div class="text-xs text-gray-400 mt-1">
                    提示：最大收取比例为{{ priceRatioMax }}%<br>
                    说明：收取比例表示对定价区间内（即报告金额超过最低金额，小于最高金额的部分）的金额，按此比例进行利润分成。
                </div>
            </div>

            <!-- 保存按钮 -->
            <van-button type="primary" block
                class="shadow-lg bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white rounded-xl h-12"
                @click="handleSubmit">
                <van-icon name="success" class="mr-2" />
                保存当前报告配置
            </van-button>
        </div>
        <!-- 未选择提示 -->
        <div v-else class="text-center py-12">
            <van-icon name="warning" class="text-gray-400 text-4xl mb-4" />
            <p class="text-gray-500">请先选择需要配置的报告类型</p>
        </div>
    </div>
</template>


<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { showToast } from 'vant';

// 报告类型选项
const reportOptions = [
    { text: '人事背调', value: 'backgroundcheck', id: 1 },
    { text: '家政风险', value: 'homeservice', id: 3 },
    { text: '婚恋风险', value: 'marriage', id: 4 },
    { text: '贷前背调', value: 'preloanbackgroundcheck', id: 5 },
    { text: '租赁风险', value: 'rentalrisk', id: 6 },
    { text: '个人风险', value: 'riskassessment', id: 7 },
    { text: '老板企业报告', value: 'companyinfo', id: 2 },

];

// 状态管理
const showPicker = ref(false);
const selectedReport = ref(reportOptions[0]);
const selectedReportText = ref(reportOptions[0].text);
const selectedReportId = ref(reportOptions[0].id);
const originalConfigData = reactive([]);

const configData = reactive([]);
const productConfigData = reactive([]);
const priceIncreaseMax = ref(null);
const priceIncreaseAmountMax = ref(null);
const priceRatioMax = ref(null);
const rangeError = ref(false);
const ratioError = ref(false);
const increaseError = ref(false);

// 监听selectedReportId变化，更新当前报告
watch(selectedReportId, (newVal) => {
    const report = reportOptions.find(r => r.id === newVal);
    selectedReport.value = report;
    selectedReportText.value = report.text;
});

const isReportConfigured = (reportId) => {
    return originalConfigData.some(item => item.product_id === reportId);
};

// 辅助函数：判断报告配置是否已经修改
const isReportModified = (reportId) => {
    // 查找对应的配置数据
    const conf = configData.find(item => item.id === reportId);
    // 如果没有配置数据，说明还未修改
    if (!conf) return false;
    // 如果所有关键字段仍为 null，则认为未修改
    return conf.price_range_from !== null || conf.price_range_to !== null || conf.price_ratio !== null || conf.price_increase_amount !== null;
};
// 当前配置计算属性
const currentConfig = computed(() => {
    let existing = configData.find(item => item.id === selectedReport.value.id);
    if (!existing) {
        existing = {
            id: selectedReport.value.id,
            price_range_from: null,
            price_range_to: null,
            price_ratio: null,
            price_increase_amount: null,
        };
        configData.push(existing);
    }
    return existing;
});
// 当前产品配置计算属性，用于显示基础成本、区间等信息
const currentProductConf = computed(() => {
    return productConfigData.find(item => item.product_id === selectedReport.value.id) || {};
});// 辅助函数：获取当前产品配置
const getCurrentProductConfig = () => {
    return productConfigData.find(item => item.product_id === selectedReport.value.id);
};

// 金额输入格式验证：确保最多两位小数
const validateDecimal = (field) => {
    const value = currentConfig.value[field];
    if (value === null || value === undefined) return;

    const numValue = Number(value);
    if (isNaN(numValue)) {
        currentConfig.value[field] = null;
        return;
    }
    const fixedValue = parseFloat(numValue.toFixed(2));
    currentConfig.value[field] = fixedValue;

    if (field === 'price_increase_amount') {
        if (fixedValue > priceIncreaseAmountMax.value) {
            currentConfig.value[field] = priceIncreaseAmountMax.value;
            showToast(`加价金额最大为${priceIncreaseAmountMax.value}元`);
            increaseError.value = true;
            setTimeout(() => {
                increaseError.value = false;
            }, 2000);
        } else {
            increaseError.value = false;
        }
        // 当加价金额改变后，重新验证价格区间
        validateRange();
    }
};

// 价格区间验证（在 @blur 中调用）
const validateRange = () => {
    if (currentConfig.value.price_range_from === null || currentConfig.value.price_range_to === null) {
        rangeError.value = false;
        return;
    }

    if (isNaN(currentConfig.value.price_range_from) || isNaN(currentConfig.value.price_range_to)) return;
    const productConf = getCurrentProductConfig();
    const additional = currentConfig.value.price_increase_amount || 0;
    const minAllowed = productConf.cost_price + additional  // 使用成本价作为最小值
    const maxAllowed = productConf.price_range_max; // 使用产品配置中的最大价格作为最大值
    console.log("currentConfig.value.price_range_from", typeof currentConfig.value.price_range_from)
    if (currentConfig.value.price_range_from < minAllowed) {
        currentConfig.value.price_range_from = minAllowed;
        showToast(`最低金额不能低于成本价 ${minAllowed}元`);
        rangeError.value = true;
        closeRangeError()

        currentConfig.value.price_range_to = currentConfig.value.price_range_from + priceIncreaseMax.value
        return
    }

    if (currentConfig.value.price_range_to < currentConfig.value.price_range_from) {
        showToast('最高金额不能低于最低金额');
        if (currentConfig.value.price_range_from + priceIncreaseMax.value > maxAllowed) {
            currentConfig.value.price_range_to = maxAllowed
        } else {
            currentConfig.value.price_range_to = currentConfig.value.price_range_from + priceIncreaseMax.value
        }
        rangeError.value = true;
        closeRangeError()
        return;
    }
    const diff = currentConfig.value.price_range_to - currentConfig.value.price_range_from;
    if (diff > priceIncreaseMax.value) {
        showToast(`价格区间最大差值为${priceIncreaseMax.value}元`);
        currentConfig.value.price_range_to = currentConfig.value.price_range_from + priceIncreaseMax.value
        closeRangeError()
        return;
    }

    if (currentConfig.value.price_range_to > maxAllowed) {
        currentConfig.value.price_range_to = maxAllowed;
        showToast(`最高金额不能超过 ${maxAllowed}元`);
        closeRangeError()
    }

    if (!rangeError.value) {
        rangeError.value = false;
    }
};

// 收取比例验证（修改为保留两位小数，不再四舍五入取整）
const validateRatio = () => {
    let value = currentConfig.value.price_ratio;
    if (value === null || value === undefined) return;

    const numValue = Number(value);
    if (isNaN(numValue)) {
        currentConfig.value.price_ratio = null;
        ratioError.value = true;
        return;
    }

    if (numValue > priceRatioMax.value) {
        currentConfig.value.price_ratio = priceRatioMax.value;
        showToast(`收取比例最大为${priceRatioMax.value}%`);
        ratioError.value = true;
        setTimeout(() => {
            ratioError.value = false;
        }, 1000);
    } else if (numValue < 0) {
        currentConfig.value.price_ratio = 0;
        ratioError.value = true;
    } else {
        currentConfig.value.price_ratio = parseFloat(numValue.toFixed(2));
        ratioError.value = false;
    }
};

// 获取配置
const getConfig = async () => {
    try {
        const { data, error } = await useApiFetch("/agent/membership/user_config")
            .get()
            .json();

        if (data.value?.code === 200) {
            // 转换API数据格式（原有配置）
            configData.splice(
                0,
                configData.length,
                ...data.value.data.agent_membership_user_config.map(item => ({
                    id: item.product_id,
                    price_range_from: item.price_range_from,
                    price_range_to: item.price_range_to,
                    price_ratio: item.price_ratio * 100, // 转换为百分比
                    price_increase_amount: item.price_increase_amount,
                }))
            );

            // 保存产品配置数据
            productConfigData.splice(
                0,
                productConfigData.length,
                ...data.value.data.product_config
            );

            // 设置动态限制值
            priceIncreaseMax.value = data.value.data.price_increase_max;
            priceIncreaseAmountMax.value = data.value.data.price_increase_amount;
            priceRatioMax.value = data.value.data.price_ratio * 100;
        }
    } catch (error) {
        showToast('配置加载失败');
    }
};

// 提交处理
const handleSubmit = async () => {
    try {
        console.log("configData", configData)
        // 前端数据转换
        const submitData = configData.map(item => ({
            product_id: item.id,
            price_range_from: item.price_range_from || 0,
            price_range_to: item.price_range_to || 0,
            price_ratio: (item.price_ratio || 0) / 100, // 转换为小数
            price_increase_amount: item.price_increase_amount || 0,
        }));
        console.log("submitData", submitData)
        // 最终验证
        const isValid = configData.every(item => {
            const from = item.price_range_from;
            const to = item.price_range_to;

            if (from !== null && to !== null && to < from) {
                showToast(`${selectedReportText.value}的价格区间无效`);
                return false;
            }

            return true;
        });

        if (!isValid) return;

        // const { data } = await useApiFetch("/agent/membership/user_config")
        //     .post({ configs: submitData })
        //     .json();

        // if (data.value?.code === 200) {
        //     showToast({ message: '配置保存成功', position: 'top' });
        //     await getConfig();
        // }
    } catch (error) {
        showToast('保存失败，请稍后重试');
    }
};

// 选择器确认
const onConfirm = ({ selectedOptions }) => {
    console.log("selectedOption", selectedOptions)
    selectedReport.value = selectedOptions[0];
    selectedReportText.value = selectedOptions[0].text;
    showPicker.value = false;
    // 重置错误状态
    rangeError.value = false;
    ratioError.value = false;
    increaseError.value = false;
};
const closeRangeError = () => {
    setTimeout(() => {
        rangeError.value = false;
    }, 2000)
}
onMounted(() => {
    getConfig();
});
</script>

<style>
.custom-field {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.custom-field .van-field__body {
    @apply bg-gray-50 rounded-lg px-3 py-2;
    transition: all 0.3s ease;
}

.custom-field:focus-within .van-field__body {
    @apply ring-2 ring-blue-200;
}

.van-picker__toolbar {
    @apply bg-gray-50 rounded-t-lg;
}

.van-picker__confirm {
    @apply text-blue-500 font-medium;
}

.van-divider {
    @apply before:bg-gray-100 after:bg-gray-100;
}

/* 错误状态样式 */
.van-field--error .van-field__control {
    color: #ee0a24;
}

.van-field--error .van-field__label {
    color: inherit;
}

.van-field--error .van-field__body {
    @apply ring-2 ring-red-200 bg-red-50;
}
</style>
