<template>
	<!-- 奖项选择 -->
	<div>
		<wechat-setting></wechat-setting>
        <el-button type="primary" class="mb-10" icon="el-icon-plus" size="medium" @click="addRule()">新增奖项</el-button>
		<!-- <add-awards></add-awards> -->
        <div class="mb-20 cl">
            <div class="thead-box">
                <table class="h-table">
                    <colgroup>
                        <col width="25%">
                        <col width="25%">
                        <col width="25%">
                        <col width="25%">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>奖项名称</th>
                            <th>奖项数量</th>
                            <th>包含奖品</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="tbody-box">
                <table class="b-table" v-show="AwardOptions.length>0">
                    <colgroup>
                        <col width="25%">
                        <col width="25%">
                        <col width="25%">
                        <col width="25%">
                    </colgroup>
                    <tbody>
                        <tr v-for="(item,index) in AwardOptions" :key="index" v-show="item.OperateType!='del'&&item.AwardsType!=1">
                            <td>{{item.AwardsName}}</td>
                            <td>{{item.AwardsNum}}</td>
                            <td>{{item.ContainsPrize}}</td>
                            <td>
                                <el-button @click="edit(index,item)" type="text" size="small">编辑</el-button>
                                <el-button @click="delect(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="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="addRuleDialog" width="768px" :close-on-click-modal="false" top="20px">
            <add-awards 
            ref="addPrize" 
			:actType="activityType" 
            @addPrizeData="addPrizeData" 
            @editPrizeData="editPrizeData" 
            @hideAddRuleDialog="hideAddRuleDialog" 
            ></add-awards>
        </el-dialog>
	</div>
</template>

<script>
import ut from "@/assets/js/utils.js";
import AddAwards from "./AddAwards.vue";
import WechatSetting from "./WechatSetting.vue";
import eventBus from "@/assets/js/eventBus.js";
export default {
	name: "EditAwards",
	props: ["activityType"],
	components:{
		AddAwards,
		WechatSetting
	},
    data() {
		return {
            addRuleDialog:false,
            //AwardsType:1普奖 2：其他
            AwardOptions:[
                {
                    "AwardsId":"00000000000000000000000000000000",
                    "AwardsName":"普奖",
                    "AwardsNum":"0",
                    "PrizeContent":[],
                    "ContainsPrize":"无中奖",
                    "GiveOutType":"",
                    "WarningNum":"",
                    "AwardsType":1,
                    "OperateType":"def",
                    "AwardsRemark":""
                }
            ],
			pageData:[],
            total:0,
            editData:{},
            prizeIndex:-1,
			noData:true,
			actType:3
		};
    },
    watch: {},
    created: function () {
		if(ut.parseUrl().option==2){
            if(ut.ssg('AwardOptions')){
                this.AwardOptions = ut.ssg('AwardOptions');
            }else{
                let activityInfo = ut.ssg("activityInfo");
                this.AwardOptions = activityInfo.AwardOptions;
            }
        }else{
            if(ut.ssg('AwardOptions')){
                this.AwardOptions = ut.ssg('AwardOptions');
            }else{
                ut.sss('AwardOptions',this.AwardOptions);
            }
        }
        console.log(this.AwardOptions);
    },
    mounted: function () {
        this.tableShow();
    },
    methods: {
        // 添加规则数据
        addPrizeData(v){
            this.AwardOptions.push(v);
            ut.sss('AwardOptions',this.AwardOptions);
            this.addRuleDialog = false;
            this.tableShow();
        },
        // 编辑规则数据
        editPrizeData(v){
            this.AwardOptions.splice(this.prizeIndex,1,v);
            ut.sss('AwardOptions',this.AwardOptions);
            this.addRuleDialog = false;
            this.tableShow();
        },
        addRule(){
            if(!ut.ssg('OfficialAccount')&&ut.parseUrl().option==1){
                this.$message.warning('请先设置微信公众号信息');
                return;
            }
            this.addRuleDialog = true;
            this.$nextTick(() => {
                this.$refs.addPrize.editPrize(this.AwardOptions,-1);
            });
        },
		//编辑
		edit(index,row){
            // debugger
            if(row.OperateType == "add"){
                row.OperateType = "add";
            }else{
                row.OperateType = "edit";
            }
            this.prizeIndex = index;
            this.addRuleDialog = true;
            this.$nextTick(() => {
                this.$refs.addPrize.editPrize(this.AwardOptions,index,row);
            });
		},
		// 删除
		delect(row){
            this.$confirm('确定删除吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                row.OperateType = "del";
                ut.sss('AwardOptions',this.AwardOptions);
                this.tableShow();
            }).catch(() => {
                     
            });
        },
        tableShow(){
            let arr = [];
            // 判断当全部是逻辑删除状态则显示没有数据提示
            if(this.AwardOptions.length>1){
                this.AwardOptions.forEach(v => {
                    if(v.OperateType != 'del' && v.AwardsType =='2'){
                        arr.push(1);
                    }
                });
            }
            this.noData = arr.length>0?false:true;
        },
        hideAddRuleDialog(){
            this.addRuleDialog = false;
        }
	}
};

</script>
<style scoped>
.text-r{text-align: right;}
.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>