<template>
    <div class='invite-btn'>
        <div class='btn' v-if='headTaskData.state!==3' @click='invite' :style="{'background-image':`url(https://wechatapppro-1252524126.file.myqcloud.com/appsczltY5m2327/image/b_u_5b2225aa46488_oGKN7IvA/kp7t6avi0l6w.png)`}">
            {{headText}}
        </div>
        <div class='btn-finish' v-else>
            <div :style="{'background-image':`url(https://wechatapppro-1252524126.file.myqcloud.com/appsczltY5m2327/image/b_u_5b2225aa46488_oGKN7IvA/kpclxr8b06nq.png)`}" @click='invite'>继续邀请</div>
            <div :style="{'background-image':`url(https://wechatapppro-1252524126.file.myqcloud.com/appsczltY5m2327/image/b_u_5b2225aa46488_oGKN7IvA/kp7sekpi0hdw.png)`}" @click='receiveAward'>点击领取奖励</div>
        </div>
         <dia-log v-if="isShowDialog" @close="isShowDialog = false" :imgPath="headTaskData.completeImg"></dia-log>
    </div>
</template>
<script>
import diaLog from './dialog';
export default {
    components:{
        diaLog
    },
    props:{
        headTaskData:{
            default:()=>{
                return {}
            }
        }
    },
    data(){
        return{
            isShowDialog: false
        }
    },
    computed:{
         headText(){
            switch (this.headTaskData.state) {
                case 0:
                    return `立即邀请`;
                case 1:
                    return `活动未开始`;
                case 5:
                    return `活动已结束`;
            }
        },
    },
    methods:{
        invite(){
        if(this.headTaskData.state===0 || this.headTaskData.state===3 ){
            this.$emit('invite')
            }
        },
        receiveAward() {
            if (this.headTaskData.completeType == 0) {
                this.isShowDialog = true;
            } else {
                window.location.href = this.headTaskData.completeUrl;
            }
        }
    }
    
}
</script>
<style scoped lang='scss'>
.invite-btn{
    width:100%;
    display: flex;
    justify-content: center;
    margin-top:0.16rem;
    .btn{
        width:5.62rem;
        height:1.12rem;
        font-size:0.4rem;
        color:#fffacc;
        font-weight: 500;
        text-align: center;
        line-height: 1.12rem;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .btn-finish{
        width:100%;
        height:1.12rem;
        display: flex;
        justify-content: space-between;
        div{
            width:3.28rem;
            height: 1.12rem;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size:0.4rem;
            color:#fffacc;
        }
    }
}
</style>