<template>
    <div class="invite_distributor_box" v-show="showDistribute">
        <div class="shade-box">
        </div>
        <div class="invite_distributor-content">
            <div class="invite-title">
                {{distributeBoxType == '1' ? '推广店铺流程' : `邀请${recruitName}流程`}}
            </div>
            <div class="invite-flow">
                <div class="invite-flow-item">
                    <img class="flow-icon" v-if="distributeBoxType == '1'" src="~imgPath/distribute/distribute_shop.png"/>
                    <img class="flow-icon"  v-if="distributeBoxType == '2'" src="~imgPath/distribute/invite_friends.png"/>
                    <div class="flow-title">
                        {{distributeBoxType == '1' ? '推广店铺': '邀请好友'}}<br/>
                        {{distributeBoxType == '1' ? '给好友': `成为${recruitName}`}}
                    </div>
                </div>
                <div class="flow-line"></div>
                <div class="invite-flow-item">
                    <img class="flow-icon" src="~imgPath/distribute/buy_goods.png"/>
                    <div class="flow-title">
                        {{distributeBoxType == '1' ? '好友购买': '好友客户'}}<br/>
                        {{distributeBoxType == '1' ? '推广产品': '购买推广产品'}}
                    </div>
                </div>
                <div class="flow-line"></div>
                <div class="invite-flow-item">
                    <img class="flow-icon" src="~imgPath/distribute/get_money.png"/>
                    <div class="flow-title">
                        邀请者<br/>
                        获得奖励
                    </div>
                </div>
            </div>
            <div class="go-distribute-btn" @click="goDistribute">
                {{distributeBoxType == '1' ? '去推广': '去邀请'}}
            </div>
            <i class="iconfont icon-icon_close close-distribute" @click="closeDistribute"></i>
        </div>
    </div>
</template>

<script>
import jsTools from '@xiaoe/js-tools';
export default {
    props: {
        showDistribute: {
            default: false
        },
        distributeBoxType: {
            default: '1'
        }
    },
    created() {
       this.getRecruitName()
    },
    data() {
        return {
            recruitName: ''
        };
    },
    methods: {
        getRecruitName() {
            let params = {
                url: '/drp/get_recruit_name'
            };
            jsTools
                .request(params)
                .then(({ code, data }) => {
                    if (code === 0) {
                        this.recruitName = data.recruit_name;
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        closeDistribute() {
            this.$emit('closeDistribute');
        },
        goDistribute() {
            if (this.distributeBoxType == '1') {
                eJump('distributor_shop_card?show_retrun_btn=1');
            } else if (this.distributeBoxType == '2') {
                eJump('sub_distributor_invite');
            }
        }
    }
};
</script>

<style scoped lang="scss">
    .invite_distributor_box{
        .shade-box{
            position: fixed;
            z-index: 10;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background:#000000;
            opacity:0.5;
        }
        .invite_distributor-content{
            position: fixed;
            z-index: 10;
            top: 50%;
            left: 50%;
            margin-left: -2.95rem;
            margin-top: -2.82rem;
            width: 5.9rem;
            height: 5.64rem;
            background-color: #fff;
            border-radius:0.24rem;
            .invite-title{
                text-align: center;
                font-weight:500;
                color: #353535;
                font-size:0.32rem;
                line-height:0.44rem;
                padding: 0.4rem 0 0.88rem 0;
            }
            .invite-flow{
                display: flex;
                padding: 0 0.56rem;
                justify-content: space-between;
                .invite-flow-item{
                    width: 0.96rem;
                    .flow-icon{
                        display: block;
                        margin: 0 auto;
                        width:0.88rem;
                        height:0.88rem;
                    }
                    .flow-title{
                        color: #353535;
                        line-height:0.36rem;
                        font-size:0.24rem;
                        text-align: center;
                        padding-top: 0.16rem;
                        position: relative;
                        width: 1.44rem;
                        left: -0.24rem;
                    }
                }
                .flow-line{
                    width:0.72rem;
                    height:0.04rem;
                    background: #FFE7D6;
                    border-radius:0.02rem;
                    margin-top: 0.42rem;
                }
            }
            .go-distribute-btn{
                margin: 0.96rem auto 0 auto;
                width:4.94rem;
                height:0.8rem;
                line-height: 0.8rem;
                text-align: center;
                background: #FF8533;
                border-radius:0.38rem;
                color: #FFFFFF;
                font-size:0.28rem;
                font-weight:500;
            }
            .close-distribute{
                position: absolute;
                right: 0.3rem;
                top: 0.3rem;
                color:#CCCCCC;
                font-size: 0.4rem;
            }
        }
    }
</style>
