<template>
	<!-- 新增规则 -->
	<div class="cl">
		<!-- <el-button type="primary" class="mb-10" icon="el-icon-plus" size="medium" @click="dialogVisible = true">新增规则</el-button>
		<el-dialog title="新增规则" :visible.sync="dialogVisible" width="80%"> -->
            <div class="cl mb-20">
                <el-row>
                    <el-col :span="8">
                        <div class="form-box">
                            <label class="mylabel">规则名称：</label>
                            <div class="mycontent">
                                <el-input v-model="form.RuleName" maxlength=30></el-input>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="form-box">
                            <label class="mylabel">优先级：</label>
                            <div class="mycontent">
                                <el-input v-model="form.Priority"></el-input>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <div class="form-box">
                    <label class="mylabel">规则内容：</label>
                    <div class="mycontent">
                        <el-col :span="11">
                            <div style="width: 100%; height: 285px;">
                                <div class="thead-box">
                                    <table class="h-table">
                                        <colgroup>
                                            <col width="35%">
                                            <col width="35%">
                                            <col width="30%">
                                        </colgroup>
                                        <thead>
                                            <tr>
                                                <th>子规则名称</th>
                                                <th>内容</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                                <div class="tbody-box">
                                    <table class="b-table" v-show="leftTableData.length>0">
                                        <colgroup>
                                            <col width="35%">
                                            <col width="35%">
                                            <col width="30%">
                                        </colgroup>
                                        <tbody>
                                            <tr v-for="(item,index) in leftTableData" :key="index" v-show="item.OperateType!='del'">
                                                <td>{{item.DimensionRuleName}}</td>
                                                <td>{{item.ParamText}}</td>
                                                <!-- <td>{{item.OperateType}}</td> -->
                                                <td>
                                                    <el-button @click="delect(index,item)" type="text" size="small">删除</el-button>
                                                    <el-button @click="edit(index,item)" type="text" size="small">编辑</el-button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <div class="el-table__empty-block" style="height: 100%; width: 100%;font-size:12px"  v-show="leftTableData.length==0"><span class="el-table__empty-text">暂无数据</span></div>
                                </div>
                            </div>
                            <!-- <el-table :data="leftTableData" border height="285" style="width: 100%" size="small">
                                <el-table-column prop="DimensionRuleName" label="子规则名称"></el-table-column>
                                <el-table-column prop="ParamText" label="内容"></el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button @click="del(scope.$index,scope.row)" type="text" size="small">删除</el-button>
                                        <el-button @click="edit(scope.$index,scope.row)" type="text" size="small">编辑</el-button>
                                    </template>
                                </el-table-column>
                            </el-table> -->
                        </el-col>
                        <el-col :span="2" class="text-c lh-285">
                            <i class="el-icon-sort t90" @click="test"></i>
                        </el-col>
                        <el-col :span="11">
                            <el-table :data="rightTableData" border height="285" style="width: 100%" size="small" class="mb-20">
                                <el-table-column prop="DimensionRuleName" label="子规则名称"></el-table-column>
                                <el-table-column prop="Remark" label="说明"></el-table-column>
                                <el-table-column label="操作" width="50px">
                                    <template slot-scope="scope">
                                        <el-button @click="addRule(scope.row)" type="text" size="small">添加</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="text-r">
                                <el-pagination
                                background
                                layout="prev, pager, next" 
                                :page-size="5"
                                :total="total" 
                                :small="false" 
                                @current-change="getParticipationRuleConfig">
                                </el-pagination>
                            </div>
                        </el-col>
                    </div>
                </div>
                <el-dialog
                width="600px"
                title="子规则设置"
                :visible.sync="innerVisible"
                append-to-body>
                    <component 
                    ref="ruleModel"
                    :is="comp" 
                    @showRulesDialog="showRulesDialog" 
                    @addDataRule="addDataRule" 
                    @editDataRule="editDataRule"></component>
                </el-dialog>
            </div>
            <div slot="footer" class="dialog-footer text-r">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="addParticipateRules" :disabled="btnDisabled">确 定</el-button>
            </div>
        <!-- </el-dialog> -->
	</div>
</template>

<script>
import apiHelper from "@/assets/js/apiHelper.js";
import PrBatch from "./ParticipationRules/PrBatch.vue";
import PrCodeSegment from "./ParticipationRules/PrCodeSegment.vue";
import PrGPS from "./ParticipationRules/PrGPS.vue";
import PrParticipationTimesActivity from "./ParticipationRules/PrParticipationTimesActivity.vue";
import PrParticipationTimesDay from "./ParticipationRules/PrParticipationTimesDay.vue";
import PrParticipationTimesMonth from "./ParticipationRules/PrParticipationTimesMonth.vue";
import PrParticipationTimesWeek from "./ParticipationRules/PrParticipationTimesWeek.vue";
import PrSweepCodeTimes from "./ParticipationRules/PrSweepCodeTimes.vue";
import PrXNFChannel from "./ParticipationRules/PrXNFChannel.vue";
import ut from "@/assets/js/utils.js";
export default {
	name: "AddParticipationRule",
    components:{ 
        PrBatch,
        PrCodeSegment,
        PrGPS,
        PrParticipationTimesActivity,
        PrParticipationTimesDay,
        PrParticipationTimesMonth,
        PrParticipationTimesWeek,
        PrSweepCodeTimes,
        PrXNFChannel
    },
	data() {
		return {
            innerVisible:false,
            comp:"CodeSegment",//子规则model页面名字，根据这个名字显示页面
			form: {
				RuleName: '',
				Priority: ''
			},
            leftTableData: [],//左边表格数据
            rightTableData: [],//右边表格数据
            delData:[],//被删除的数据缓存，需要一起传给后台
            total:0,
            rowData:"",
            ruleIndex:-1,//区别添加和编辑，-1：添加
            editIndex:-1,//区别左边子规则表格添加和编辑，-1：添加
            row:{},
            btnDisabled:true
		};
	},
	watch: {
        leftTableData:{
			deep: true,
            handler: function (){
                this.verification();
            }
        },
        form:{
			deep: true,
            handler: function (){
                this.verification();
            }
        },
        "form.Priority":function(n){
            if(!/^([1-9][0-9]*)$/.test(n)){
                this.form.Priority = "";
            }
        }
    },
	created () {
	},
	mounted () {
        this.getParticipationRuleConfig();
	},
	methods: {
        // 编辑，添加规则
        AddParticipation(index,row){
            this.ruleIndex = index;
            this.row = _.cloneDeep(row);
            if(index !=-1){
                this.form.RuleName = this.row.RuleName;
                this.form.Priority = this.row.Priority;
                this.leftTableData = this.row.ChildRules;
            }else{
                this.form = {
                    RuleName: '',
                    Priority: ''
                };
                this.leftTableData = [];//左边表格数据
            }
        },
        // 添加子规则
		addRule(row){
            console.log(row);
            row.OperateType = "add";
            this.comp = row.ViewModel;
            this.innerVisible = !this.innerVisible;
            this.$nextTick(() => {
                this.$refs.ruleModel.editModel(-1,row);
            });
        },
        // 获取参与子规则
        getParticipationRuleConfig(page=1,size=5){
            let that = this;
            apiHelper.getParticipationRuleConfig(page,size, function(res) {
                if (res.flag) {
                    that.rightTableData = res.data.Rows;
                    that.total = res.data.Total;
                } else {
                    that.rightTableData = [];
                    that.total = 0;
                }
            });
        },
        showRulesDialog(){
            this.innerVisible = !this.innerVisible;
        },
        addDataRule(v){
            this.leftTableData.push(v);
            this.innerVisible = !this.innerVisible;
        },
        delect(index,row){
            row.OperateType = "del";
            // this.delData.push(this.leftTableData[index]);
            // this.leftTableData.splice(index,1);
        },
        // 编辑子规则
        edit(index,row){
            if(row.OperateType == "add"){
                row.OperateType = "add";
            }else{
                row.OperateType = "edit";
            }
            console.log(row);
            this.comp = row.ViewModel;
            this.editIndex = index;
            this.innerVisible = !this.innerVisible;
            this.$nextTick(() => {
                this.$refs.ruleModel.editModel(index,row);
            });
        },
        editDataRule(v){
            this.leftTableData.splice(this.editIndex,1,v);
            this.innerVisible = !this.innerVisible;
        },
        test(){
            console.log(this.leftTableData);
        },
        addParticipateRules(){
            if(this.testPriority()){
                this.$message.error('优先级重复，请重新填写');
                return;
            }
            let obj = {};
            let ContainsRule = [];
            this.leftTableData.forEach(v => {
                if(v.OperateType!="del"){
                    ContainsRule.push(v.DimensionRuleName);
                }
            });
            obj.RuleId = this.ruleIndex==-1?"":this.row.RuleId;
            obj.RuleName = this.form.RuleName;
            obj.RuleType = 1;//参与规则是1，中奖规则是2
            obj.RuleLevel = this.ruleIndex==-1?2:this.row.RuleLevel;//通用规则是1，非通用规则是2
            obj.Priority = this.form.Priority;//优先级
            obj.ChildRules = [...this.leftTableData];
            obj.IsEnable = "0";//状态：1:启用，0:禁用
            obj.Remark = "";
            obj.OperateType = this.ruleIndex==-1?"add":"edit";
            obj.ContainsRule = ContainsRule.join();
            // obj.delData = [...this.delData];
            if(this.ruleIndex==-1){
                this.$emit("addRuleData",obj);
            }else{
                this.$emit("editRuleData",obj);
            }
            
        },
        // 优先级判断
        testPriority(){
            let ParticipationRules = [];
            let Priority = [];
            if(ut.ssg('ParticipationRules')){
                ParticipationRules = ut.ssg('ParticipationRules');
            }else{
                let activityInfo = ut.ssg("activityInfo");
                ParticipationRules = activityInfo.ParticipationRules;
            }
            ParticipationRules.forEach(v=>{
                if(v.OperateType != "del"){
                    Priority.push(v.Priority);
                }
            });
            if(this.ruleIndex != -1){
                Priority = _.without(Priority, this.row.Priority);
            }
            if(Priority.includes(this.form.Priority)){
                return true;
            }else{
                return false;
            }
        },
        cancel(){
            this.$emit("hideAddRuleDialog");
        },
        // 子规则数据验证
        verification (){
            let operateTypeArr = [];
            let withoutArr = [];
            if(this.form.RuleName=='' || this.form.Priority==''){
                this.btnDisabled = true;
                return;
            }


            for(let a=0;a<this.leftTableData.length;a++){
                operateTypeArr.push(this.leftTableData[a].OperateType);
            }
            withoutArr = _.without(operateTypeArr, "del");
            if(withoutArr.length==0){
                this.btnDisabled = true;
            }else{
                this.btnDisabled = false;
            }
        }
	}
};

</script>
<style scoped>
.text-r{text-align: right;}
.text-c{text-align: center;}
.pos-r{position: relative;}
.dis-ib{display: inline-block;}
.mb-10{margin-bottom: 10px;}
.mb-20{margin-bottom: 20px;}
.w-200{width: 200px;}
.card-box{
	border: 1px solid #DCDFE6;
	padding: 20px;
	border-radius: 4px;
}
.delete-btn{
	position: absolute;
	top:10px;
	right: 10px;
}
.t90{
    font-size: 24px;
    transform:rotate(90deg);
    -ms-transform:rotate(90deg); 
}
.form-box{margin-bottom: 20px;}
.form-box .mylabel{
    width: 100px;
    text-align: right;
    vertical-align: middle;
    float: left;
    /* font-size: 14px; */
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    box-sizing: border-box;
}
.form-box .mycontent{
    margin-left: 100px;
    position: relative;
}
.lh-285{
    line-height: 285px;
}
.h-table{
    padding: 0px;
    width: 100%;
    border-bottom: 0px;
    text-align: left;
    border-spacing: 0px;
    font-size: 12px;
}
.h-table th{
    height: 38px;
    color: #909399;
    padding: 0 10px;
    border-right: 1px solid #EBEEF5;
}
.h-table th:last-child{
    border-right: none;
}
.b-table{
    width: 100%;
    border-spacing: 0px;
    font-size: 12px;
}
.b-table td{
    height: 42px;
    padding: 0 10px;
    border-bottom: 1px solid #EBEEF5;
    border-right: 1px solid #EBEEF5;
}
.b-table tr td:last-child{
    border-right: none;
}
.tbody-box{
    width: 100%;
    height: 244px;
    overflow-y: auto;
    border: 1px solid #EBEEF5;
}
.thead-box{
    width: 100%;
    border-left: 1px solid #EBEEF5;
    border-top: 1px solid #EBEEF5;
    border-right: 1px solid #EBEEF5;
}
</style>