<template>
	<!-- 活动上线 -->
	<div>
		<p class="remind">
            提醒：<span>请认真检查活动时间，关联批次、绑定公众号和奖品信息，一旦活动上线，消费者扫码符合中奖规则即会中奖，为避免奖品错发，请仔细核对后上线！</span>
        </p>
        <div>
            <div class="form-box cl">
                <label class="mylabel">活动名称：</label>
                <div class="mycontent lh-40">
                    <span>{{form.ActivityName}}</span>
                </div>
            </div>
            <div class="form-box cl">
                <label class="mylabel">活动时间：</label>
                <div class="mycontent lh-40">
                    <span>{{form.ActivityTime}}</span>
                </div>
            </div>
            <div class="form-box cl">
                <label class="mylabel">活动对象：</label>
                <div class="mycontent lh-40">
                    <span>{{form.ActivityObject}}</span>
                </div>
            </div>
            <div class="form-box cl">
                <label class="mylabel">绑定公众号：</label>
                <div class="mycontent lh-40">
                    <span>{{form.OfficialAccounts}}</span>
                </div>
            </div>
            <div class="form-box cl">
                <label class="mylabel">活动奖品：</label>
                <div class="mycontent">
                    <el-table
                        :data="form.ActivityPrizes"
                        border
                        style="width: 100%">
                        <el-table-column
                        prop="AwardsName"
                        label="奖项名称">
                        </el-table-column>
                        <el-table-column
                        prop="AwardsNum"
                        label="奖项数量">
                        </el-table-column>
                        <el-table-column
                        prop="PrizeName"
                        label="包含奖品">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="form-box cl">
                <label class="mylabel"></label>
                <div class="mycontent lh-40">
                    <el-checkbox v-model="checked">我已查看并检查完成</el-checkbox> 
                    <!-- <a href="javascript:;" class="blue">查看协议</a> -->
                </div>
            </div>
        </div>
        <div slot="footer" class="dialog-footer text-r">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="online" :disabled="!checked">确 定</el-button>
        </div>
	</div>
</template>

<script>
import apiHelper from "@/assets/js/apiHelper.js";
export default {
    name: "ActiveLine",
	data() {
		return {
            form:{
                ActivityName:"",
                ActivityObject:"",
                ActivityPrizes:[],
                BeginTime:"",
                EndTime:"",
                OfficialAccounts:""
            },
            checked:false,
            activityid:""
		};
	},
	watch: {},
	created () {},
	mounted () {},
	methods: {
        online(){
            let that = this;
            apiHelper.onlineMarketingActivity(this.activityid, function(res) {
                if (res.flag) {
                    that.$message.success('上线成功');
                    that.$emit("hideActiveLineDialog");
                }else{
                    that.$message.error('上线失败');
                }
            });
        },
        cancel(){
            this.$emit('hideActiveLineDialog');
        },
        // 拉取上线前活动信息
        getMarketingActivityInfo(eno,activityid){
            this.activityid = activityid;
            let that = this;
            apiHelper.getMarketingActivityInfo(eno,activityid, function(res) {
                if (res.flag) {
                    that.form = res.data;
                }
            });
        },
	}
};

</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;}
.blue{color: #409EFF;}
.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;
    min-height: 1px;
    font-size: 14px;
}
.remind{
    padding: 10px;
    border: 1px dashed #ccc;
    border-radius: 5px;
}
.remind span{
    color: red;
}
.lh-40{
    line-height: 40px;
}
</style>