<template>
	<!-- 参与规则 -->
	<div>
        <el-button type="primary" class="mb-10" icon="el-icon-plus" size="medium" @click="addRule">新增规则</el-button>
		<!-- <add-participation-rule @addRuleData="addRuleData"></add-participation-rule> -->
		<!-- <el-table :data="pageData" border style="width: 100%;margin-bottom:20px" cellspacing=0>
			<el-table-column prop="Priority" label="优先级"></el-table-column>
			<el-table-column prop="RuleName" label="规则名称"></el-table-column>
			<el-table-column prop="ContainsRule" label="包含规则"></el-table-column>
			<el-table-column label="状态">
				<template slot-scope="scope">
					<span class="success" size="small" v-show="scope.row.IsEnable==1">启用</span>
					<span class="danger" size="small" v-show="scope.row.IsEnable==0">禁用</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button @click="see(scope.row)" type="text" size="small">查看</el-button>
					<el-button @click="edit(scope.$index,scope.row)" type="text" size="small">编辑</el-button>
					<el-button type="text" size="small" v-show="!scope.row.IsEnable==0">禁用</el-button>
					<el-button type="text" size="small" v-show="!scope.row.IsEnable==1">启用</el-button>
					<el-button type="text" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table> -->
        <div class="mb-20 cl">
            <div class="thead-box">
                <table class="h-table">
                    <colgroup>
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>优先级</th>
                            <th>规则名称</th>
                            <th>包含规则</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="tbody-box">
                <table class="b-table" v-show="ParticipationRules.length>0">
                    <colgroup>
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                    </colgroup>
                    <tbody>
                        <tr v-for="(item,index) in ParticipationRules" :key="index" v-show="item.OperateType!='del'">
                            <td>{{item.Priority}}</td>
                            <td>{{item.RuleName}}</td>
                            <td>{{item.ContainsRule}}</td>
                            <td>
                                <span class="success" size="small" v-show="item.IsEnable==1">启用</span>
					            <span class="danger" size="small" v-show="item.IsEnable==0">禁用</span>
                            </td>
                            <td>
                                <el-button @click="see(item)" type="text" size="small" v-if="item.RuleLevel==1">查看</el-button>
                                <el-button @click="edit(index,item)" type="text" size="small" v-show="item.RuleLevel!=1">编辑</el-button>
                                <el-button @click="enable(item)" type="text" size="small" v-show="item.IsEnable==1&&item.RuleLevel!=1">禁用</el-button>
                                <el-button @click="enable(item)" type="text" size="small" v-show="item.IsEnable==0&&item.RuleLevel!=1">启用</el-button>
                                <el-button @click="delect(item)" type="text" size="small" v-show="item.RuleLevel!=1 && item.IsEnable==0">删除</el-button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="el-table__empty-block" style="height: 100%; width: 100%;font-size:12px"  v-show="ParticipationRules.length==0 || noData"><span class="el-table__empty-text">暂无数据</span></div>
            </div>
        </div>
		<!-- <div class="text-r">
			<el-pagination
			background
			layout="prev, pager, next"
			:total="total" 
			@current-change="paging">
			</el-pagination>
		</div> -->
		<!-- 查看规则 -->
		<el-dialog title="查看规则" :visible.sync="dialogVisible" width="700px">
            <div class="cl">
                <el-row>
                    <el-col :span="8">
                        <div class="form-box">
                            <label class="mylabel">规则名称：</label>
                            <div class="mycontent">
                                <el-input v-model="seeData.RuleName" disabled></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="seeData.Priority" disabled></el-input>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <div class="form-box">
                    <label class="mylabel">规则内容：</label>
                    <div class="mycontent">
						<el-table :data="seeData.ChildRules" border 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>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!-- 新增规则 -->
        <el-dialog title="新增规则" :visible.sync="addRuleDialog" width="1000px" :close-on-click-modal="false" top="20px">
            <add-participation-rule 
            ref="addrule"
            @addRuleData="addRuleData" 
            @editRuleData="editRuleData" 
            @hideAddRuleDialog="hideAddRuleDialog" 
            :editData="editData" 
            :ruleIndex="ruleIndex" 
            ></add-participation-rule>
        </el-dialog>
	</div>
</template>

<script>
import AddParticipationRule from "./AddParticipationRule.vue";
import eventBus from "@/assets/js/eventBus.js";
import ut from "@/assets/js/utils.js";
export default {
    name: "EditParticipateRules",
	components:{ AddParticipationRule },
    data() {
		return {
            ParticipationRules:[],//参与规则集合
			addRuleDialog:false,
			dialogVisible:false,
			pageData:[],
            total:100,
            seeData:{},//查看规则数据
            editData:{},//编辑传入子组件的数据
            ruleIndex:-1,//编辑序号.-1是新增
            noData:false,
            page:1
		};
    },
    watch: {},
    created: function () {
        //获取原始的参与规则信息
        // option=2是编辑
        if(ut.parseUrl().option==2){
            if(ut.ssg('ParticipationRules')){
                this.ParticipationRules = ut.ssg('ParticipationRules');
            }else{
                let activityInfo = ut.ssg("activityInfo");
                this.ParticipationRules = activityInfo.ParticipationRules;
            }
        }else{
            if(ut.ssg('ParticipationRules')){
                this.ParticipationRules = ut.ssg('ParticipationRules');
            }else{
                this.ParticipationRules = [{
                    "RuleId":"00000000000000000000000000000000",
                    "RuleName":"通用规则",
                    "ContainsRule":"活动规则，活动时间",
                    "RuleType":"1",
                    "RuleLevel":1,
                    "Priority":"1",
                    "ChildRules":[],
                    "IsEnable":"1",
                    "Remark":"",
                    "OperateType":"def"
                }];
            }
        }
        for(let i = 0;i < this.ParticipationRules.length;i++){
            if(this.ParticipationRules[i].RuleLevel == 1){
                this.ParticipationRules[i].ChildRules = ut.ssg("ChildRules")?ut.ssg("ChildRules"):[];
                break;
            }
        }
        ut.sss('ParticipationRules',this.ParticipationRules);
    },
    mounted: function () {
		this.sortList();
    },
    methods: {
		// 前端分页
		// paging(p,size=10){
		// 	let index = (p - 1) * size;
        //     let num = index + size;
		// 	this.total = this.ParticipationRules.length;
		// 	this.pageData = this.ParticipationRules.slice(index,num);
        // },
        // 列表排序
        sortList(){
            this.ParticipationRules = _.sortBy(this.ParticipationRules, function(o) { return o.Priority; });
        },
        // 添加规则数据
        addRuleData(v){
            this.ParticipationRules.push(v);
            ut.sss('ParticipationRules',this.ParticipationRules);
            this.sortList();
            this.addRuleDialog = false;
        },
        // 编辑规则数据
        editRuleData(v){
            this.ParticipationRules.splice(this.ruleIndex,1,v);
            ut.sss('ParticipationRules',this.ParticipationRules);
            this.sortList();
            this.addRuleDialog = false;
        },
        addRule(){
            this.addRuleDialog = true;
            this.ruleIndex = -1;
            this.$nextTick(() => {
                this.$refs.addrule.AddParticipation(-1);
            });
        },
		//编辑
		edit(index,row){
            if(row.OperateType == "add"){
                row.OperateType = "add";
            }else{
                row.OperateType = "edit";
            }
            this.editData = row;
            this.ruleIndex = index;
            this.addRuleDialog = true;
            this.$nextTick(() => {
                this.$refs.addrule.AddParticipation(index,row);
            });
		},
		//查看
		see(row){
            this.seeData = row;
            this.dialogVisible = !this.dialogVisible;
		},
		// 删除
		delect(row){
            this.$confirm('确定删除吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                row.OperateType = "del";
                // 判断当全部是逻辑删除状态则显示没有数据提示
                this.ParticipationRules.forEach(v => {
                    if(v.OperateType != 'del'){
                        this.noData = false;
                        return;
                    }
                    this.noData = true;
                });
                ut.sss('ParticipationRules',this.ParticipationRules);
            }).catch(() => {
                     
            });
            
        },
        // 启用/禁用
        enable(row){
            let txt = row.IsEnable == 1 ? "确定禁用吗" : "确定启用吗";
            this.$confirm(txt, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if(row.OperateType == "add"){
                    row.OperateType = "add";
                }else{
                    row.OperateType = "edit";
                }
                row.IsEnable = row.IsEnable == 1 ? 0 : 1;
                ut.sss('ParticipationRules',this.ParticipationRules);
            }).catch(() => {
                     
            });
            
        },
        hideAddRuleDialog(){
            this.addRuleDialog = false;
        }
	}
};

</script>
<style scoped>
.danger{color: #F56C6C}
.success{color: #67C23A}
.text-r{text-align: right;}
.mb-10{
	margin-bottom: 10px;
}
.mb-20{
	margin-bottom: 20px;
}
.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;
    font-size: 0px;
}
.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>