<template>
    <el-dialog :visible.sync="visible" title="积分规则设置" width="70%">
        <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 #default="{row}">
                            <el-input v-model="row.operatePoints"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="每周上限次数" prop="limitCount" align="center">
                         <template #default="{row}">
                            <el-input v-model="row.limitCount"></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 #default="{row}">
                            <el-input v-model="row.operatePoints"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="每周上限次数" prop="limitCount" align="center">
                         <template #default="{row}">
                            <el-input v-model="row.limitCount"></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">确定</el-button>
        </template>
    </el-dialog>
</template>

<script>
import {pointsSetting} 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']
            })
        }
    }
}
</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>
