<!--
 * @Descripttion: 分销管理
 * @version: 1.0
 * @Author: zzx
 * @Date: 2024-11-09 16:08:16
 * @LastEditors: zzx tigerzouzx@foxmail.com
 * @LastEditTime: 2024-11-20 16:32:51
-->
<template>
    <div>
        <el-card class="form-container" shadow="hover">
            <el-form :model="admin" ref="admin" label-width="150px" :rules="rules" size="small">
                <div class="blSet">
                    <h4>返佣比例设置</h4>
                    <span @click="forbiddenDialogVisible = true">查看说明</span>
                </div>
                <el-form-item label="一级返佣比例%：" prop="firstLevel">
                    <el-input v-model="admin.firstLevel" placeholder="请输入一级返佣比例" type="number"
                        style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="二级返佣比例%：" prop="secondLevel">
                    <el-input v-model="admin.secondLevel" clearable placeholder="请输入二级返佣比例" type="number"
                        style="width: 250px"></el-input>
                </el-form-item>
                <div>
                    <h4>分销员人数限制</h4>
                </div>
                <el-form-item label="" style="margin-left: -120px;" prop="maxUserCount">
                    一级分销员最多可添加 <el-input v-model="admin.maxUserCount" placeholder="请输入整数" type="number"
                        style="width: 100px"></el-input> 个二级分销员
                </el-form-item>
            </el-form>
            <el-divider content-position="left"></el-divider>
            <div style="display: flex;align-items: center;justify-content: center;">
                <el-button type="primary" @click="submitForm" :loading="setLoading" size="medium">保存</el-button>
            </div>
        </el-card>
        <el-dialog title="查看说明" :visible.sync="forbiddenDialogVisible" width="50%">
            <div class="title">关于返佣比例的说明:</div>
            <div class="text1">1.一级返佣比例，是指一级分销员所获得的返佣比例;二级分佣比例，是指二级分销员所获得的返佣比例。</div>
            <div class="text1">2.计算公式:</div>
            <div class="text2">举例：某电站的计费策略如下图，一级返佣比例为10%，二级返佣比例为90%，某用户在9点开始充电，11点结束，消耗2度电。</div>
            <div class="text2">（1）只有一级分销员，由一级分销员直接发展的用户。一级分销员的返佣总金额 = 订单中服务费金额/元 × 一级返佣比例。</div>
            <div class="text2">（2）有两级分销员：</div>
            <div class="text3">二级分销员的返佣总金额 = 订单中的服务费金额/元 × 一级返佣比例 × 二级返佣比例。</div>
            <div class="text3">一级分销员的返佣总金额 = 订单中的服务费金额/元 × 一级返佣比例 ×（1 - 二级返佣比例/度）。</div>
            <div class="text2">举例:一级分销员的返佣总金额 = 0.56 × 0.1 ×（1 - 0.9） = 0.0056元。</div>
            <div class="text3">二级分销员的返佣总金额 = 0.56 × 0.1 × 0.9 = 0.0504 元。</div>
            <div style="margin-top: 20px;">
                <el-table ref="adminTable" :data="list" border>
                    <el-table-column label="充电订单编号" align="center" prop="times"></el-table-column>
                    <el-table-column label="订单金额/元" align="center" prop="electricity"></el-table-column>
                    <el-table-column label="服务费金额/元" align="center" prop="service"></el-table-column>
                    <el-table-column label="订单完成时间" align="center" prop="total"></el-table-column>
                </el-table>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { systemconfig, distributionSet } from "@/api/distribution";
const defaultAdmin = {
    firstLevel: null,
    secondLevel: null,
    maxUserCount: null
};
export default {
    name: "distributionSet",
    data() {
        return {
            admin: Object.assign({}, defaultAdmin),
            forbiddenDialogVisible: false,
            setLoading: false,
            list: [{
                times: 'TLD241024224843367449',
                electricity: '2.73',
                service: '0.56',
                total: '2024-10-24 16:00:00',
            }],
            rules: {
                firstLevel: [{ required: true, message: '请输入一级返佣比例', trigger: 'blur' },
                { pattern: /^\d+(\.\d{0,2})?$/, message: '最多保留两位小数', trigger: 'blur' },
                {validator:this.handleInput, trigger: 'blur'}],
                secondLevel: [{ required: true, message: '请输入二级返佣比例', trigger: 'blur' },
                { pattern: /^\d+(\.\d{0,2})?$/, message: '最多保留两位小数', trigger: 'blur' },
                {validator:this.handleInput, trigger: 'blur'}],
                maxUserCount: [{ required: true, message: '请输入人数限制', trigger: 'blur' }],
            },
        }
    },
    created() {
        this.get_systemconfig()
    },
    computed: {
    },
    methods: {
        handleInput(rule, value, callback) {
            if (value<=0||value>100) {
                callback(new Error('比例必须在0-100之间'));
            }else{
                callback();
            }
        },
        submitForm() {
            this.$refs.admin.validate(valid => {
                if (valid) {
                    this.$confirm("是否确认提交?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }).then(() => {
                        let updateData = {
                            id: this.admin.id,
                            firstLevel: this.admin.firstLevel,
                            secondLevel: this.admin.secondLevel,
                            maxUserCount: this.admin.maxUserCount,
                        };
                        this.setLoading = true
                        distributionSet({ ...updateData }).then((response) => {
                            this.setLoading = false
                            if (response.code == 200) {
                                this.$message({
                                    message: "提交成功！",
                                    type: "success",
                                });
                                this.get_systemconfig()
                            }
                        });
                    });
                }
            })
        },

        // 获取系统配置
        get_systemconfig() {
            systemconfig().then((response) => {
                if (response.code == 200) {
                    this.admin = response.data;
                }
            })
        }
    },
}
</script>
<style lang="scss" scoped>
.blSet {
    display: flex;
    align-items: center;

    &>span {
        margin-left: 300px;
        color: #409EFF;
        font-size: 14px;
        cursor: pointer;
    }
}

.text1 {
    margin-top: 10px;
    margin-left: 20px;
}

.text2 {
    margin-top: 8px;
    margin-left: 30px;
}

.text3 {
    margin-top: 8px;
    margin-left: 62px;
}
</style>
