<!-- 红包码规则配置 -->
<template>
    <div class="red-bag-rule">
        <ele-card title="红包码营销规则" :body-style="{ padding: '20px' }">
            <el-form
                ref="formRef"
                :model="formData"
                :rules="formRules"
                label-width="240px"
                style="max-width: 800px"
            >
                <el-form-item label="每个用户每天最多可扫码次数" prop="scanNum">
                    <div style="display: flex; align-items: center; gap: 10px">
                        <el-input-number
                            v-model="formData.scanNum"
                            :min="1"
                            :max="999"
                            placeholder="请输入次数"
                        />
                        <span>次</span>
                    </div>
                </el-form-item>

                <el-form-item label="每个红包码可分享次数" prop="shareNum">
                    <div style="display: flex; align-items: center; gap: 10px">
                        <el-input-number
                            v-model="formData.shareNum"
                            :min="1"
                            :max="999"
                            placeholder="请输入次数"
                        />
                        <span>次</span>
                    </div>
                </el-form-item>

                <el-form-item
                    label="每个红包码最多可获得分享红包数"
                    prop="shareGetNum"
                >
                    <div style="display: flex; align-items: center; gap: 10px">
                        <el-input-number
                            v-model="formData.shareGetNum"
                            :min="1"
                            :max="999"
                            placeholder="请输入个数"
                        />
                        <span>个</span>
                    </div>
                </el-form-item>

                <el-form-item label="红包类型" prop="redType">
                    <el-checkbox-group v-model="formData.redType">
                        <el-checkbox :value="0">无门槛红包</el-checkbox>
                        <el-checkbox :value="1">现金红包</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="现金红包占比" prop="cashRate">
                    <div style="display: flex; align-items: center; gap: 10px">
                        <el-input-number
                            v-model="formData.cashRate"
                            :min="0"
                            :max="100"
                            :precision="2"
                            placeholder="请输入百分比"
                        />
                        <span>%</span>
                    </div>
                </el-form-item>

                <el-form-item label="无门槛红包范围" prop="redMinPrice">
                    <div style="display: flex; align-items: center; gap: 10px">
                        <el-input-number
                            v-model="formData.redMinPrice"
                            :min="0"
                            :precision="2"
                            :step="0.1"
                            placeholder="最小值"
                            style="width: 120px"
                        />
                        <span>-</span>
                        <el-input-number
                            v-model="formData.redMaxPrice"
                            :min="0"
                            :precision="2"
                            :step="0.1"
                            placeholder="最大值"
                            style="width: 120px"
                        />
                    </div>
                </el-form-item>

                <el-form-item label="无门槛红包金额占比" prop="redRandomRate">
                    <div style="display: flex; align-items: center; gap: 10px">
                        <el-input-number
                            v-model="formData.redRandomRate"
                            :min="0"
                            :max="100"
                            :precision="2"
                            placeholder="请输入百分比"
                        />
                        <span>%</span>
                    </div>
                </el-form-item>

                <el-form-item label="现金红包范围" prop="cashRandomRateMin">
                    <div style="display: flex; align-items: center; gap: 10px">
                        <el-input-number
                            v-model="formData.cashRandomRateMin"
                            :min="0"
                            :precision="2"
                            :step="0.01"
                            placeholder="最小值"
                            style="width: 120px"
                        />
                        <span>-</span>
                        <el-input-number
                            v-model="formData.cashRandomRateMax"
                            :min="0"
                            :precision="2"
                            :step="0.01"
                            placeholder="最大值"
                            style="width: 120px"
                        />
                    </div>
                </el-form-item>

                <el-form-item label="A 分享获得红包范围" prop="shareGetCashMin">
                    <div style="display: flex; align-items: center; gap: 10px">
                        <el-input-number
                            v-model="formData.shareGetCashMin"
                            :min="0"
                            :precision="2"
                            :step="0.01"
                            placeholder="最小值"
                            style="width: 120px"
                        />
                        <span>-</span>
                        <el-input-number
                            v-model="formData.shareGetCashMax"
                            :min="0"
                            :precision="2"
                            :step="0.01"
                            placeholder="最大值"
                            style="width: 120px"
                        />
                    </div>
                </el-form-item>

                <el-form-item label="B 获得无门槛红包范围" prop="sharedCillMin">
                    <div style="display: flex; align-items: center; gap: 10px">
                        <el-input-number
                            v-model="formData.sharedCillMin"
                            :min="0"
                            :precision="2"
                            :step="0.01"
                            placeholder="最小值"
                            style="width: 120px"
                        />
                        <span>-</span>
                        <el-input-number
                            v-model="formData.sharedCillMax"
                            :min="0"
                            :precision="2"
                            :step="0.01"
                            placeholder="最大值"
                            style="width: 120px"
                        />
                    </div>
                </el-form-item>

                <el-form-item label="红包有效期" prop="redExpireDay">
                    <div style="display: flex; align-items: center; gap: 10px">
                        <el-input-number
                            v-model="formData.redExpireDay"
                            :min="1"
                            :max="3650"
                            placeholder="请输入天数"
                        />
                        <span>天</span>
                    </div>
                </el-form-item>

                <el-form-item label="用户 B 领取限制" prop="sharedGetLimit">
                    <el-radio-group v-model="formData.sharedGetLimit">
                        <el-radio :label="0">新用户</el-radio>
                        <el-radio :label="1">不限制</el-radio>
                        <el-radio :label="2">老用户激活</el-radio>
                        <el-radio :label="3">老用户激活+新用户</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="红包使用场景" prop="redCillScene">
                    <el-radio-group v-model="formData.redCillScene">
                        <el-radio :label="0">卖书</el-radio>
                        <el-radio :label="1">买书</el-radio>
                        <el-radio :label="2">买书卖书</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="分享链接有效期" prop="shareLinkExpire">
                    <div style="display: flex; align-items: center; gap: 10px">
                        <el-input-number
                            v-model="formData.shareLinkExpire"
                            :min="1"
                            :max="720"
                            placeholder="请输入小时数"
                        />
                        <span>小时</span>
                    </div>
                </el-form-item>

                <el-form-item label="预留手机号" prop="mobile">
                    <el-input
                        v-model="formData.mobile"
                        placeholder="请输入预留手机号"
                        style="width: 300px"
                    />
                </el-form-item>

                <el-form-item>
                    <el-button
                        type="primary"
                        @click="handleSubmit"
                        :loading="submitLoading"
                    >
                        保存
                    </el-button>
                </el-form-item>
            </el-form>
        </ele-card>
    </div>
</template>

<script setup>
    import { ref, reactive, onMounted } from 'vue';
    import { ElMessage } from 'element-plus';
    import request from '@/utils/request';

    defineOptions({ name: 'RedBagRule' });

    const formRef = ref(null);
    const submitLoading = ref(false);
    const formData = ref({
        id: null,
        scanNum: null,
        shareNum: null,
        shareGetNum: null,
        redType: [],
        cashRate: null,
        redMinPrice: null,
        redMaxPrice: null,
        redRandomRate: null,
        cashRandomRateMin: null,
        cashRandomRateMax: null,
        shareGetCashMin: null,
        shareGetCashMax: null,
        sharedCillMin: null,
        sharedCillMax: null,
        redExpireDay: null,
        sharedGetLimit: null,
        redCillScene: [],
        shareLinkExpire: null,
        mobile: ''
    });

    const formRules = {
        scanNum: [
            { required: true, message: '请输入扫码次数', trigger: 'blur' }
        ],
        shareNum: [
            { required: true, message: '请输入分享次数', trigger: 'blur' }
        ],
        redType: [
            {
                type: 'array',
                required: true,
                min: 1,
                message: '请选择红包类型',
                trigger: 'change'
            }
        ]
    };

    const toRedTypeList = (redType) => {
        if (redType === 2) return [0, 1];
        if (redType === 0 || redType === 1) return [redType];
        return [];
    };

    const toRedTypeValue = (redTypeList = []) => {
        const hasZero = redTypeList.includes(0);
        const hasOne = redTypeList.includes(1);
        if (hasZero && hasOne) return 2;
        if (hasOne) return 1;
        if (hasZero) return 0;
        return null;
    };

    // 加载配置
    const loadConfig = async () => {
        try {
            const res = await request.get(
                '/activity/red/bag/config/activity/redBag/config/msg'
            );
            if (res.data.code === 200) {
                const data = res.data.data;
                if (data) {
                    formData.value = {
                        id: data.id || null,
                        scanNum: data.scanNum || null,
                        shareNum: data.shareNum || null,
                        shareGetNum: data.shareGetNum || null,
                        redType: toRedTypeList(data.redType),
                        cashRate: data.cashRate || null,
                        redMinPrice: data.redMinPrice || null,
                        redMaxPrice: data.redMaxPrice || null,
                        redRandomRate: data.redRandomRate || null,
                        cashRandomRateMin: data.cashRandomRateMin || null,
                        cashRandomRateMax: data.cashRandomRateMax || null,
                        shareGetCashMin: data.shareGetCashMin || null,
                        shareGetCashMax: data.shareGetCashMax || null,
                        sharedCillMin: data.sharedCillMin || null,
                        sharedCillMax: data.sharedCillMax || null,
                        redExpireDay: data.redExpireDay || null,
                        sharedGetLimit:
                            data.sharedGetLimit !== undefined
                                ? data.sharedGetLimit
                                : null,
                        redCillScene:
                            data.redCillScene !== undefined
                                ? data.redCillScene
                                : null,
                        shareLinkExpire: data.shareLinkExpire || null,
                        mobile: data.mobile || ''
                    };
                }
            }
        } catch (error) {
            ElMessage.error('加载配置失败');
        }
    };

    // 保存配置
    const handleSubmit = () => {
        formRef.value.validate(async (valid) => {
            if (!valid) return;

            submitLoading.value = true;
            try {
                const submitData = {
                    ...formData.value,
                    redType: toRedTypeValue(formData.value.redType)
                };

                const res = await request.post(
                    '/activity/red/bag/config/activity/redBag/config/update',
                    submitData
                );
                if (res.data.code === 200) {
                    ElMessage.success('保存成功');
                    loadConfig();
                } else {
                    ElMessage.error(res.data.msg || '保存失败');
                }
            } catch (error) {
                ElMessage.error('保存失败');
            } finally {
                submitLoading.value = false;
            }
        });
    };

    onMounted(() => {
        loadConfig();
    });
</script>

<style lang="scss" scoped>
    .red-bag-rule {
        padding: 0;
    }
</style>
