<template>
    <div class='progress'>
        <div class='progress-left'>
            <div class='number-show' ref='numberShow'>
                <span>{{text}}</span>
                <img :src="imgPath" alt="">
            </div>
            <div class='progress-show'>
                <div class='progress-finish' ref='progress'></div>
            </div>
            <div class='progress-circle' ref='circle'>
                <div class='little-circle'>

                </div>
            </div>
        </div>
        <div class='progress-right'>
            <img src="~imgPath/fissionTask/box.png" alt="">
            <div class='num'>{{headTaskData.invite_num}}/{{headTaskData.all_num}}</div>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        headTaskData:{
            default:()=>{
                return {}
            }
        }
    },
    data(){
        return{ 
            proportion:0,
            num:0,
            imgPath:''
        }
    },
    computed:{
        text(){
            if((this.headTaskData.invite_num-this.headTaskData.all_num>=0)){
                return '已完成任务'
            }
            else{
               return  `还差${this.num}人`
            }
        },
    },
    mounted(){
        this.proportion=(this.headTaskData.invite_num/this.headTaskData.all_num)>1?1:(this.headTaskData.invite_num/this.headTaskData.all_num)
        this.num=this.headTaskData.all_num-this.headTaskData.invite_num
        this.$refs.circle.style.left=this.proportion*5.6-0.16+'rem'
        this.$refs.progress.style.width=this.proportion*5.6+'rem';
        // 标签分三种情况
        if(this.proportion<0.3){
            this.$refs.numberShow.style.left=this.proportion*5.6-0.18+'rem';
            this.imgPath=require('~imgPath/fissionTask/bac-left.png')
        }
        if(this.proportion>=0.3 && this.proportion<=0.8){
            this.$refs.numberShow.style.left=this.proportion*5.6-0.64+'rem';
            this.imgPath=require('~imgPath/fissionTask/bac-middle.png')
        }
        if(this.proportion>0.8){
            this.$refs.numberShow.style.left=this.proportion*5.6-1.28+0.18+'rem';
            this.imgPath=require('~imgPath/fissionTask/bac-right.png')
        }
    }
}
</script>
<style scoped lang='scss'>
.progress{
    position: relative;
    margin-top:0.16rem;
    .progress-left{
        width:5.8rem;
        .number-show{
            width:1.28rem;
            height:0.56rem;
            font-size: 0.24rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFACC;
            position: relative;
            display: flex;
            justify-content: center;
            margin-bottom:0.1rem;
            span{
                z-index:1;
                position: relative;
                top:0.06rem;
            }
            img{
                position: absolute;
                top:0;
                left:0;
                width: 1.28rem;
                height:0.56rem;
                z-index:0;
            }
        }
        .progress-show{
            height: 0.12rem;
            width:5.6rem;
            box-sizing: border-box;
            background: #FFF3E0;
            border-radius: 0.06rem;
            overflow: hidden;
            .progress-finish{
                height:100%;
                background: #FE4032;
            }
        }
        .progress-circle{
            width:0.32rem;
            height:0.32rem;
            border-radius: 100%;
            background: white;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            left:0;
            bottom:-0.1rem;
            .little-circle{
                width:0.24rem;
                height:0.24rem;
                border-radius: 100%;
                background: #FE4032;
            }
        }
    }
    .progress-right{
        position: absolute;
        right: -0.1rem;
        bottom:-0.1rem;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        img{
            width: 0.64rem;
            height:0.5rem;
            position: relative;
            top:0.13rem;
        }
        .num{
            text-align: center;
            line-height: 0.4rem;;
            width: 0.92rem;
            height: 0.4rem;
            background: #FF8A22;
            border-radius: 0.08rem;
            box-sizing: border-box;
            font-size: 0.24rem;
            z-index:2;
            font-weight: 500;
            color: #FFFACC;
        }
    }
}
</style>