<template>
    <el-dialog :visible.sync="visible" title="积分规则设置" width="70%" :close-on-click-modal="false">
        <div class="rules-setting-container">
            <div class="add-box">
                <div class="label-box">加分设置</div>
                <el-table :data="addList">
                    <el-table-column label="加分行为" prop="operateName" align="center"></el-table-column>
                    <el-table-column label="分值" prop="operatePoints" align="center">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.operatePoints"
                                @input="handleInput(scope.$index, scope.row, addList)" type="text"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="每周上限次数" prop="limitCount" align="center">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.limitCount" type="text"
                                @input="handleInputLimit(scope.$index, scope.row, addList)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="启用" prop="enableStatus" align="center">
                        <template #default="{ row }">
                            <el-switch v-model="row.enableStatus" :active-value="1" :inactive-value="0"></el-switch>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="decrease-box">
                <div class="label-box">减分设置</div>
                <el-table :data="decreaseList">
                    <el-table-column label="减分行为" prop="operateName" align="center"></el-table-column>
                    <el-table-column label="分值" prop="operatePoints" align="center">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.operatePoints"
                                @input="handleInput(scope.$index, scope.row, decreaseList)" type="text"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="每周上限次数" prop="limitCount" align="center">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.limitCount" type="text"
                                @input="handleInputLimit(scope.$index, scope.row, decreaseList)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="启用" prop="enableStatus" align="center">
                        <template #default="{ row }">
                            <el-switch v-model="row.enableStatus" :active-value="1" :inactive-value="0"></el-switch>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <template #footer>
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
        </template>
    </el-dialog>
</template>

<script>
import { pointsSetting, updatePointsSetting } from '@/api/pointsManage'
export default {
    data() {
        return {
            visible: false,
            addList: [],
            decreaseList: []
        }
    },
    methods: {
        openModal() {
            this.visible = true;
            this.getSettings()
        },
        // 获取配置详情
        getSettings() {
            pointsSetting().then(res => {
                console.log(res)
                this.addList = res.data['ADD'];
                this.decreaseList = res.data['DEC']
            })
        },
        // 修改配置
        handleSubmit() {
            let data = {
                'ADD': this.addList,
                'DEC': this.decreaseList
            }
            updatePointsSetting(data).then(res => {
                if (res.code == 200) {
                    this.$modal.msgSuccess("修改配置成功");
                    this.visible = false;
                } else {
                    this.$modal.msgError(res.msg || "修改配置失败");
                }
            })
        },
        handleInput(index, row, list) {
            let value = row.operatePoints; // 获取当前输入值
            if (!value) {
                row.operatePoints = '';
                return;
            }
            // 1. 过滤所有非数字字符
            let val = value.toString().replace(/\D/g, '');
            // 2. 若首位是0且长度>1，去除首位0（如 "0123" → "123"）
            if (val.length > 1 && val[0] === '0') {
                val = val.slice(1);
            }
            if (val !== row.operatePoints) {
                this.$set(list, index, { ...row, operatePoints: val });
            }
        },
        handleInputLimit(index, row, list) {
            let value = row.limitCount;
            if (!value) {
                row.limitCount = '';
                return;
            }
            let val = value.toString().replace(/\D/g, '');
            if (val.length > 1 && val[0] === '0') {
                val = val.slice(1);
            }
            if (val !== row.limitCount) {
                this.$set(list, index, { ...row, limitCount: val });
            }
        }


    }
}
</script>
<style lang="scss" scoped>
.rules-setting-container {
    display: flex;
    min-height: 400px;

    .add-box {
        flex: 1;
        padding: 0 20px;
        box-sizing: border-box;
        border-right: 1px solid #eee;
    }

    .decrease-box {
        flex: 1;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .label-box {
        height: 68px;
        line-height: 68px;
        color: rgba(16, 16, 16, 1);
        font-size: 20px;
    }
}
</style>
