<template>
    <div class="p-4 ">
        <div class="card">

            <div class="">
                <div class="text-lg font-bold text-orange-500">直推用户查询</div>
                <div class="font-bold text-orange-400 mt-1">
                    自定义价格，赚取差价
                </div>
            </div>

            <div class="mt-6">
                <div class="mt-2 text-gray-600 bg-orange-100 rounded-xl px-4 py-2">
                    在下方 “自定义价格” 处选择报告类型，设置客户查询价（元）即可了解推广收益及我的成本价。
                </div>
            </div>
        </div>
        <div class="card mt-6">
            <div class="">
                <h2 class="text-xl font-semibold mb-2">生成推广码</h2>
                <van-cell-group inset>
                    <van-field v-model="pickerFieldVal" is-link readonly label="报告类型" placeholder="请选择报告类型"
                        @click="showPicker = true" />
                    <van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
                        <van-picker :model-value="selectedReportType" :columns="reportTypes"
                            @cancel="showPicker = false" @confirm="onConfirm" />
                    </van-popup>
                    <van-field v-model="clientPrice" type="number" label="客户查询价" placeholder="请输入价格" />
                    <div class="flex items-center justify-between my-2">
                        <div class="text-sm text-gray-500">推广收益为 {{ promotionRevenue }} 元</div>
                        <div class="text-sm text-gray-500">我的成本为 {{ costPrice }} 元</div>
                    </div>
                </van-cell-group>
            </div>

            <div class="mt-6">
                <van-button type="primary" class="w-full" @click="generatePromotionCode">点击立即推广</van-button>
            </div>
        </div>
    </div>
    <PromoteQRcode v-model:show="showQRcode" />
</template>

<script setup>
import { ref, computed } from 'vue';

const reportTypes = [
    { text: '个人风险报告', value: 'personalRisk' },
    { text: '婚恋风险', value: 'marriageRisk' },
    { text: '家政风险', value: 'domesticService' },
    { text: '租赁风险', value: 'rentalRisk' },
    { text: '人事背调', value: 'hrBackgroundCheck' },
    { text: '老板企业报告', value: 'enterpriseReport' },
    { text: '贷前背调', value: 'preLoanBackgroundCheck' }
];
const showPicker = ref(false);
const pickerFieldVal = ref('')
const selectedReportType = ref([]);
const onConfirm = ({ selectedValues, selectedOptions }) => {
    showPicker.value = false;
    selectedReportType.value = selectedValues;
    pickerFieldVal.value = selectedOptions[0].text;
};

const clientPrice = ref(49.9);
const costPrice = ref(10.31);

const promotionRevenue = computed(() => {
    // 计算推广收益 (客户查询价 - 我的成本)
    return (clientPrice.value - costPrice.value).toFixed(2);
});
const showQRcode = ref(false)

const generatePromotionCode = () => {
    showQRcode.value = true;
};
</script>

<style scoped>
/* 自定义样式可以添加在这里 */
</style>