{extend name="public/base" /} {block name="body"}
<style>
    .body-content {
        width: 100%;
        height: 100%;
        display: flex;
        padding-top: 35px;
        padding-bottom: 50px;
    }
    
    .body-form {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .wid {
        width: 88px;
    }
    
    .hgt {
        width: 100%;
        height: 20px;
    }
    
    .marlf {
        margin-left: 8px;
        margin-right: 8px;
    }
    .martop{
        margin-top:-21px;
    }
    .marbut{
        margin-bottom:15px;
    }
</style>


<div class="main-box clearfix" id="app">
    <div class="body-content">
        <div class="body-form">
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px">

                <!--<el-form-item label="计划停止设置 消耗>=" :label-width="formLabelWidth">-->
                <!--    <el-input v-model="ruleForm.expend" class="wid"></el-input>-->
                <!--    <span class="marlf">客单价>=</span>-->
                <!--    <el-input v-model="ruleForm.userprice" class="wid"></el-input>-->
                <!--    <span class="marlf">回收率<</span>-->
                <!--    <el-input v-model="ruleForm.rate" class="wid"></el-input>-->
                <!--    <span class="marlf">% 暂停计划</span>-->
                <!--</el-form-item>-->

                <el-form-item label="出价" :label-width="formLabelWidth" v-for="(rule, index) in ruleForm.rules">
                    <el-input v-model="rule.start" class="wid" placeholder="金额"></el-input>
                    <span class="marlf">-</span>
                    <el-input v-model="rule.end" class="wid" placeholder="金额"></el-input>
                    <span class="marlf"></span>
                    <el-button type="primary" @click="addRule(rule)" v-if="ruleForm.rules.length-1===index">新增规则</el-button>
                    <el-button type="primary" @click="addRuleInfo(rule)">详细设置</el-button>
                    <el-button type="danger" @click.prevent="removeRule(rule)">删除规则</el-button>
                </el-form-item>

                <el-form-item :label-width="formLabelWidth">
                    <el-button type="primary" @click="setrules()">保存</el-button>
                    <el-button type="primary" @click="getlogs()">日志</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

    <el-dialog :visible.sync="dialogTableVisible2" width="80%">
        <span slot="title">详细设置</span>
        <div class="martop marbut">
            <el-input v-model="rulelist.preconditions" class="wid" placeholder="金额"></el-input>
            <span class="marlf">前置条件 单条计划当日消耗<=不回传 满足条件后正常比例回传一笔以上 之后不限制 凌晨到6点之间不受限制</span>
        </div>
        <div class="marbut">
            <el-input v-model="rulelist.initial" class="wid" placeholder="比例"></el-input>
            <span class="marlf">初始回传比例</span>
        </div>        
        <div v-for="(rule, index) in rulelist.list" class="marbut">           
            <el-input v-model="rule.oneval" class="wid" placeholder="笔数"></el-input>
            <span class="marlf">充值第X笔 比例改为</span>
            <el-input v-model="rule.twoval" class="wid" placeholder="比例"></el-input>
            <span class="marlf"></span>
            <el-button type="primary" @click="addRulelist()" v-if="rulelist.list.length-1===index">新增</el-button>
            <el-button type="danger" @click.prevent="removeRulelist(rule)">删除</el-button>
        </div>
        <el-button type="primary" @click="setruleslist()">保存</el-button>
    </el-dialog>

    <el-dialog title="日志" :visible.sync="dialogTableVisible" width="80%">
        <el-table height="388" border v-loading="loading" :data="logs.filter(data => !search || data.log.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
            <el-table-column label="时间" prop="addtime" width="110">
            </el-table-column>
            <el-table-column label="详情" prop="log" width="666">
            </el-table-column>
            <el-table-column align="right" width="188">
                <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入计划名称"/>
      </template>
            </el-table-column>
        </el-table>
    </el-dialog>
    


</div>

{/block} {block name="script"}
<script>
    var app = new Vue({
        el: '#app',
        data: {
            ruleForm: {},
            formLabelWidth: '250px',
            dialogTableVisible: false,
            dialogTableVisible2: false,
            logs:[],
            search: '',
            loading: false,
            rulelist:[],
        },
        methods: {
            refreshs() {
                var that = this
                $.ajax({
                    type: "POST",
                    url: "{:url('Postbackconfig/refreshs')}",
                    data: {},
                    dataType: "json",
                    success: function(data) {
                        if (data.status == 1) {
                            that.ruleForm = data.ruleForm
                        }
                    }
                });
            },
            setrules() {
                var that = this
                $.ajax({
                    type: "POST",
                    url: "{:url('Postbackconfig/setrules')}",
                    data: {
                        ruleForm: that.ruleForm
                    },
                    dataType: "json",
                    success: function(data) {
                        if (data.status == 1) {
                            that.$message({
                                message: '保存成功',
                                type: 'success'
                            });
                            that.refreshs()
                        } else {
                            that.$message({
                                message: data.msg,
                                type: 'warning'
                            });
                        }
                    }
                });
            },
            getlogs() {
                this.dialogTableVisible = true
                this.loading = true;
                var that = this
                $.ajax({
                    type: "POST",
                    url: "{:url('Postbackconfig/getlogs')}",
                    data: {},
                    dataType: "json",
                    success: function(data) {
                        if (data.status == 1) {
                            that.logs = data.logs
                            console.log(that.logs)
                        }
                        that.loading = false
                    }
                });
            },
            removeRule(item) {
                //console.log(item)
                if (item.id) {
                    this.$confirm('确定删除?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        var that = this
                        $.ajax({
                            type: "POST",
                            url: "{:url('Postbackconfig/delrules')}",
                            data: {
                                item: item,
                            },
                            dataType: "json",
                            success: function(data) {
                                if (data.status == 1) {
                                    that.$message({
                                        message: '成功',
                                        type: 'success'
                                    });
                                    var index = that.ruleForm.rules.indexOf(item)
                                    if (index !== -1) {
                                        that.ruleForm.rules.splice(index, 1)
                                    }
                                    that.refreshs()
                                } else {
                                    that.$message({
                                        message: data.msg,
                                        type: 'warning'
                                    });
                                }
                            }
                        });
                    }).catch(() => {

                    });
                } else {
                    var index = this.ruleForm.rules.indexOf(item)
                    if (index !== -1) {
                        this.ruleForm.rules.splice(index, 1)
                    }
                }
            },
            addRule(rule) {
                if(rule.id){
                    this.ruleForm.rules.push({
                    start: '',
                    end:''
                    });
                }else{
                    this.$message({
                        message: '请一个个添加',
                        type: 'warning'
                    });
                }
            },
            addRuleInfo(rule){
                if(rule.start&&rule.end){
                    var that = this
                    $.ajax({
                            type: "POST",
                            url: "{:url('Postbackconfig/getrules')}",
                            data: {
                                id:rule.id
                            },
                            dataType: "json",
                            success: function(data) {
                                that.dialogTableVisible2 = true
                                that.rulelist = data.list
                                that.rulelist.rule = rule
                            }
                        });
                }else{
                    this.$message({
                        message: '请先设置出价',
                        type: 'warning'
                    });
                }
            },
            addRulelist(){
                this.rulelist.list.push({
                    oneval: '',
                    twoval: ''
                });
            },
            removeRulelist(item){
                if (item.id) {
                    this.$confirm('确定删除?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        var that = this
                        $.ajax({
                            type: "POST",
                            url: "{:url('Postbackconfig/delruleslist')}",
                            data: {
                                item: item,
                            },
                            dataType: "json",
                            success: function(data) {
                                if (data.status == 1) {
                                    that.$message({
                                        message: '成功',
                                        type: 'success'
                                    });
                                    var index = that.rulelist.list.indexOf(item)
                                    if (index !== -1) {
                                        that.rulelist.list.splice(index, 1)
                                    }
                                    that.refreshs()
                                } else {
                                    that.$message({
                                        message: data.msg,
                                        type: 'warning'
                                    });
                                }
                            }
                        });
                    }).catch(() => {

                    });
                } else {
                    var index = this.rulelist.list.indexOf(item)
                    if (index !== -1) {
                        this.rulelist.list.splice(index, 1)
                    }
                }
            },
            setruleslist(){
                //console.log(this.rulelist)
                var that = this
                $.ajax({
                    type: "POST",
                    url: "{:url('Postbackconfig/setruleslist')}",
                    data: {
                        rulelist: that.rulelist,
                    },
                    dataType: "json",
                    success: function(data) {
                        if (data.status == 1) {
                            that.$message({
                                message: '成功',
                                type: 'success'
                            });
                            that.refreshs()
                        } else {
                            that.$message({
                                message: data.msg,
                                type: 'warning'
                            });
                        }
                    }
                });
            }
        },
        created: function() {
            this.refreshs()
                //console.log(this.form)
        }
    })
</script>
{/block}