<template>
	<!-- 中奖规则 -->
	<div>
        <el-button type="primary" class="mb-10" icon="el-icon-plus" size="medium" @click="addRule()">新增规则</el-button>
		
        <div class="mb-20 cl">
            <div class="thead-box">
                <table class="h-table">
                    <colgroup>
                        <col width="15%">
                        <col width="15%">
                        <col width="15%">
                        <col width="15%">
                        <col width="10%">
                        <col width="15%">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>优先级</th>
                            <th>规则名称</th>
                            <th>包含规则</th>
                            <th>包含奖项</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="tbody-box">
                <table class="b-table" v-show="PrizeRules.length>0">
                    <colgroup>
                        <col width="15%">
                        <col width="15%">
                        <col width="15%">
                        <col width="15%">
                        <col width="10%">
                        <col width="15%">
                    </colgroup>
                    <tbody>
                        <tr v-for="(item,index) in PrizeRules" :key="index" v-show="item.OperateType!='del'">
                            <td>{{item.Priority}}</td>
                            <td>{{item.RuleName}}</td>
                            <td>{{item.ContainRule}}</td>
                            <td>{{item.ContainAwards}}</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="editCurrency(index,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="PrizeRules.length==0 || noData"><span class="el-table__empty-text">暂无数据</span></div>
            </div>
        </div>
        <el-dialog title="新增规则" :visible.sync="addRuleDialog" width="1000px" :close-on-click-modal="false" top="20px">
            <add-winning-rule 
            ref="editWinning" 
            @addRuleData="addRuleData" 
            @editRuleData="editRuleData" 
            @hideAddRuleDialog="hideAddRuleDialog" 
            ></add-winning-rule>
        </el-dialog>
        <el-dialog title="编辑规则" :visible.sync="currencyDialog" width="800px" :close-on-click-modal="false" top="20px">
            <currency-rule 
            ref="currency" 
            @addRuleData="addRuleData" 
            @editRuleData="editRuleData" 
            @hideAddRuleDialog="hideAddRuleDialog" 
            ></currency-rule>
        </el-dialog>
	</div>
</template>

<script>
import ut from "@/assets/js/utils.js";
import AddWinningRule from "./AddWinningRule.vue";
import CurrencyRule from "./CurrencyRule.vue";
import eventBus from "@/assets/js/eventBus.js";
export default {
    name: "EditWinningRules",
		components:{ AddWinningRule,CurrencyRule },
    data() {
		return {
            PrizeRules: [],
            addRuleDialog:false,
            currencyDialog:false,
            seeDialog: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('PrizeRules')){
                this.PrizeRules = ut.ssg('PrizeRules');
            }else{
                let activityInfo = ut.ssg("activityInfo");
                this.PrizeRules = activityInfo.PrizeRules;
            }
        }else{
            if(ut.ssg('PrizeRules')){
                this.PrizeRules = ut.ssg('PrizeRules');
            }else{
                this.PrizeRules = [{
                    "RuleId":"00000000000000000000000000000000",
                    "RuleName":"通用规则",
                    "RuleLevel":1,
                    "Priority":"1",
                    "ContainRule":"活动规则，活动时间",
                    "ContainAwards":"-",
                    "ContainAwardsId":[],
                    "ChildRules":[],
                    "AwardConfig":[],
                    "IsEnable":"1",
                    "OperateType":"def"
                }];
            }
        }
        for(let i = 0;i < this.PrizeRules.length;i++){
            if(this.PrizeRules[i].RuleLevel == 1){
                this.PrizeRules[i].ChildRules = ut.ssg("ChildRules")?ut.ssg("ChildRules"):[];
                break;
            }
        }
        ut.sss('PrizeRules',this.PrizeRules);
    },
    mounted: function () {
        this.sortList();
    },
    methods: {
        // 列表排序
        sortList(){
            this.PrizeRules = _.sortBy(this.PrizeRules, function(o) { return o.Priority; });
        },
        // 添加规则数据
        addRuleData(v){
            this.PrizeRules.push(v);
            ut.sss('PrizeRules',this.PrizeRules);
            this.sortList();
            this.addRuleDialog = false;
        },
        // 编辑规则数据
        editRuleData(v){
            this.PrizeRules.splice(this.ruleIndex,1,v);
            ut.sss('PrizeRules',this.PrizeRules);
            this.sortList();
            this.addRuleDialog = false;
            this.currencyDialog = false;
        },
        addRule(){
            this.addRuleDialog = true;
            this.ruleIndex = -1;
            this.$nextTick(() => {
                this.$refs.editWinning.editWinning(-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.editWinning.editWinning(index,row);
            });
		},
		//通用规则编辑
		editCurrency(index,row){
            this.editData = row;
            this.ruleIndex = index;
            this.currencyDialog = true;
            this.$nextTick(() => {
                this.$refs.currency.editWinning(index,row);
            });
		},
		//查看
		see(row){
            console.log(row);
            this.seeData = row;
            this.seeDialog = !this.seeDialog;
		},
		// 删除
		delect(row){
            this.$confirm('确定删除吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                row.OperateType = "del";
                // this.paging(1);
                // 判断当全部是逻辑删除状态则显示没有数据提示
                this.PrizeRules.forEach(v => {
                    if(v.OperateType != 'del'){
                        this.noData = false;
                        return;
                    }
                    this.noData = true;
                });
                ut.sss('PrizeRules',this.PrizeRules);
            }).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('PrizeRules',this.PrizeRules);
            }).catch(() => {
                     
            });
        },
        hideAddRuleDialog(){
            this.addRuleDialog = false;
            this.currencyDialog = false;
        }
	}
};

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