<template>
    <div class="tasks" :class="{ isMine: isMine }">
        <van-sticky v-if="!isMine && !inApp">
            <van-notice-bar
                text="RAEX宇宙，立即下载"
                @click="download"
                background="#3ab20010"
                color="#3ab200"
                mode="link"
            >
                <template #left-icon>
                    <img class="app-icon" src="@assets/raex_icon.png" alt="" />
                </template>
            </van-notice-bar>
        </van-sticky>
        <!-- <van-image class="bg" width="100%" :src="registerBg" fit="scale-down" /> -->
        <img class="bg" :src="registerBg" alt="" />
        <div class="box" v-if="!isMine">
            <div class="title">帮好友助力获得白名单权限</div>
            <van-form ref="form">
                <van-field
                    type="tel"
                    name="手机号码"
                    placeholder="请输入手机号码"
                    v-model="form.phone"
                    :maxlength="11"
                    :rules="[
                        { required: true, message: '请输入手机号码' },
                        {
                            pattern: phonePattern,
                            message: '手机号码格式错误'
                        }
                    ]"
                >
                </van-field>

                <van-field
                    type="digit"
                    name="验证码"
                    placeholder="请输入验证码"
                    v-model="form.code"
                    :maxlength="4"
                    :rules="[{ required: true, message: '请输入验证码' }]"
                >
                    <template #button>
                        <van-button
                            round
                            @click="sendPhone"
                            class="sub-code"
                            size="small"
                            color="#0F0F0F"
                            :disabled="isSend"
                        >
                            {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
                        </van-button>
                    </template>
                </van-field>
                <div class="button">
                    <van-button @click="submit" round block native-type="submit" color="#0F0F0F" class="sure">
                        立即助力
                    </van-button>
                </div>
            </van-form>
        </div>

        <div class="rank">
            <div class="title">排行榜</div>
            <div class="table">
                <div class="tr">
                    <div class="th">排名</div>
                    <div class="th">用户信息</div>
                    <div class="th">邀请人数</div>
                </div>

                <div class="tr" v-for="(item, index) in ranks" :key="index">
                    <div class="td">
                        <img v-if="index < 3" :src="ranksImg[index]" alt="" />
                        <div class="td-no" v-else>{{ index + 1 }}</div>
                    </div>
                    <div class="td">{{ item.nickName }}</div>
                    <div class="td">{{ item.count || 0 }}人</div>
                </div>
                <div class="tr empty" v-if="ranks.length === 0">
                    <div class="not">暂无数据</div>
                </div>
            </div>
        </div>

        <div class="float">
            <div class="float-btn" v-if="isMine" @click="showRecords = true">
                <img src="@assets/icon-yaoqingjilv.png" alt="" />
                <span class="text">邀请记录</span>
            </div>
            <div class="float-btn" v-if="rule" @click="showRule = true">
                <img src="@assets/icon-huodongguize.png" alt="" />
                <span class="text">活动规则</span>
            </div>
        </div>

        <img src="@assets/icon-zhuye.png" @click="goHome" alt="" class="home" :class="{ notMine: !isMine }" />

        <van-overlay :show="showRule" @click="showRule = false">
            <div class="rule" @click.stop="">
                <div class="rule-title">活动规则</div>
                <div class="rule-content" v-html="rule"></div>
            </div>
        </van-overlay>

        <van-overlay :lock-scroll="false" :show="showRecords" @click="showRecords = false">
            <div class="record" @click.stop="">
                <img src="@assets/records.png" class="record-bg" alt="" />
                <img class="record-title" src="@assets/png-yaoqingjilv.png" alt="" />
                <div class="record-order">
                    <div class="order-item">
                        <div class="text1">
                            <img src="@assets/icon-leijiyaoqing.png" alt="" />
                            <span>累计邀请</span>
                        </div>
                        <div class="text2">{{ mineRecord.count }}人</div>
                    </div>
                    <div class="order-item">
                        <div class="text1">
                            <img src="@assets/icon-paiming.png" alt="" />
                            <span>当前排名</span>
                        </div>
                        <div class="text2">{{ mineRecord.index ? '第' + mineRecord.index + '名' : '暂未入榜' }}</div>
                    </div>
                    <div class="order-item">
                        <div class="text1">
                            <img src="@assets/icon-julishangyiming.png" alt="" />
                            <span>距离上一名</span>
                        </div>
                        <div class="text2">{{ mineRecord.lastCount ? mineRecord.lastCount + '人' : '暂无数据' }}</div>
                    </div>
                </div>
                <div class="record-content">
                    <div class="record-info empty" v-if="records.length === 0">
                        <div class="status not">暂无数据</div>
                    </div>
                    <div class="record-info" v-for="(item, index) in records" :key="index">
                        <van-image width="24" height="24" radius="30" :src="item.avatar" />
                        <div class="record-info-text">
                            <div class="text1">{{ item.phone }}</div>
                            <div class="text2">{{ item.time }}</div>
                        </div>
                        <div class="status">{{ item.authStatus === 'SUCCESS' ? '已认证' : '未认证' }}</div>
                    </div>
                </div>
            </div>
        </van-overlay>

        <post ref="post" :info="shareProduct" noButton></post>

        <div class="btn" v-if="isMine">
            <van-button color="#FF4F50" @click="share" type="primary" block round>立即邀请</van-button>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import phone from '../../mixins/phone';
import Post from '../../components/Post.vue';
let inApp = /#cordova#/i.test(navigator.userAgent);
export default {
    mixins: [phone],
    components: {
        Post
    },
    data() {
        return {
            form: {
                phone: '',
                code: '',
                invitor: '',
                collectionId: ''
            },
            checked: false,
            registerBg: '',
            checkTimer: null,
            rule: '',
            showRule: false,
            showRecords: false,
            shareProduct: {},
            ranks: [],
            inApp,
            ranksImg: [
                require('@assets/task_icon_no1.png'),
                require('@assets/task_icon_no2.png'),
                require('@assets/task_icon_no3.png')
            ],
            mineRecord: {},
            records: []
        };
    },
    computed: {
        ...mapState(['productId', 'invitor']),
        isMine() {
            return this.isLogin && this.invitor && this.invitor.toString() === this.$store.state.userInfo.id.toString();
        }
    },
    mounted() {
        if (this.$route.query.invitor) {
            this.$store.commit('setInvitor', this.$route.query.invitor);

            if (this.$route.query.id) {
                this.$store.commit('setProductId', this.$route.query.id);
            }
        }
        if (this.productId) {
            this.form.collectionId = this.productId;
            this.$http.get('/collection/get/' + this.productId).then(res => {
                this.registerBg = res.registerBg;
                this.rule = res.rule;
                this.shareProduct = res;
            });

            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.$http
                .post('/user/collectionInvitorList?collectionId=' + this.productId)
                .then(res => {
                    this.ranks = res.slice(0, 10);
                    this.$toast.clear();
                })
                .catch(() => {
                    this.$toast.clear();
                });

            if (this.isLogin) {
                this.$http
                    .post(
                        '/user/findMyInviteRecord?collectionId=' +
                            this.productId +
                            '&userId=' +
                            this.$store.state.userInfo.id
                    )
                    .then(res => {
                        this.mineRecord = res;
                        this.records = res.invitedUserDTOS;
                    });
            }
        }
        if (this.invitor) {
            this.form.invitor = this.invitor;
        }
    },
    beforeUnmount() {
        this.clearTimer();
    },
    methods: {
        download() {
            window.location.href = 'https://www.raex.vip/static/download_raex.html';
        },
        share() {
            this.$refs.post.init();
        },
        sendPhone(e) {
            this.$refs.form.validate('手机号码').then(() => {
                if (!this.checkWebDriver(e)) {
                    return;
                }
                this.sendMsg(this.form.phone);
            });
        },
        submit(e) {
            this.$refs.form.validate().then(() => {
                this.$toast.loading({
                    message: '加载中...',
                    forbidClick: true
                });
                if (!this.checkWebDriver(e)) {
                    return;
                }
                this.$http
                    .post('/auth/mqPhoneRegister', this.form)
                    .then(phone => {
                        this.$toast.loading({
                            message: '加载中...',
                            forbidClick: true,
                            duration: 0
                        });
                        this.checkTimer = setInterval(() => {
                            this.checkResult(phone);
                        }, 1500);
                    })
                    .catch(e => {
                        if (e) {
                            this.$toast(e.error);
                        }
                    });
            });
        },
        checkResult(phone) {
            console.log('checkResult', phone);
            this.$http
                .get('/auth/registerResult', { phone })
                .then(res => {
                    if (res.status === 'success') {
                        localStorage.setItem('nineToken', res.token);
                        this.$store.dispatch('getUserInfo').then(() => {
                            this.clearTimer();
                            this.$toast.clear();
                            this.$toast.success('助力成功');
                            setTimeout(() => {
                                this.$router.replace('/' + this.$route.params.companyId + '/home');
                            }, 1000);
                        });
                    } else if (res.status === 'fail') {
                        this.clearTimer();
                        this.$toast.clear();
                        this.$toast((res || {}).data || '助力失败');
                    }
                })
                .catch(e => {
                    console.log(e);
                });
        },
        clearTimer() {
            if (this.checkTimer) {
                clearInterval(this.checkTimer);
                this.checkTimer = null;
            }
        },
        goHome() {
            this.$router.push('/' + this.$route.params.companyId + '/home');
        }
    }
};
</script>

<style lang="less" scoped>
.tasks {
    background-color: #181818;
    position: relative;
}
.bg {
    display: block;
    min-height: 100vh;
    min-height: var(--app-height);
    width: 100%;
    height: auto;
}
.box {
    width: calc(100vw - 40px);
    background: #ffffff;
    border-radius: 30px;
    position: absolute;
    top: 71.5vw;
    left: 20px;
    padding-bottom: 14px;
}

.rank {
    width: calc(100vw - 40px);
    background: #ffffff;
    border-radius: 30px;
    padding: 0 16px 16px;
    top: 216.5vw;
    position: absolute;
    box-sizing: border-box;
    left: 20px;
    min-height: 500px;
    .table {
        .tr {
            .flex();

            .th {
                font-size: 12px;
                color: @text3;
                line-height: 17px;
                &:first-child {
                    width: 20%;
                }
                &:nth-child(2) {
                    width: 60%;
                }

                &:last-child {
                    width: 20%;
                    text-align: center;
                }
            }

            .td {
                font-size: 14px;
                color: #000000;
                line-height: 24px;
                .td-no {
                    width: 38px;
                    text-align: center;
                    font-size: 16px;
                    font-family: AlibabaPuHuiTi-Bold, AlibabaPuHuiTi;
                    font-weight: bold;
                    color: @text3;
                    line-height: 38px;
                }
                &:first-child {
                    width: 20%;
                    img {
                        width: 38px;
                        height: 38px;
                        display: block;
                    }
                }
                &:nth-child(2) {
                    width: 60%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                &:last-child {
                    width: 20%;
                    text-align: center;
                    font-weight: bold;
                }
            }
        }

        .tr + .tr {
            margin-top: 10px;
        }

        .empty {
            .not {
                text-align: center;
                font-size: 12px;
                color: @text3;
                flex-grow: 1;
                padding: 20px;
            }
        }
    }
}

.title {
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    line-height: 22px;
    text-align: center;
    padding: 16px 0 12px;
}

/deep/.van-form {
    padding: 0 20px;

    .van-field__control {
        background: @bg3;
        border-radius: 22px;
        height: 38px;
        padding: 0 10px 0 20px;
    }
    .van-cell {
        padding: 0;
        &::after {
            content: none;
        }
    }
    .van-cell + .van-cell {
        margin-top: 10px;
    }

    .button {
        margin-top: 16px;
    }

    .sub-code {
        min-width: 98px;
    }
}

.float-btn {
    .flex();
    border-radius: 100px 0px 0px 100px;
    position: fixed;
    right: 0;
    padding: 0 16px;
    height: 38px;

    img {
        width: 18px;
        height: 18px;
    }
    span {
        font-size: 14px;
        font-weight: bold;
        color: #ffffff;
        line-height: 24px;
        margin-left: 4px;
    }

    &:first-child {
        bottom: 315px;
        background: linear-gradient(360deg, #ff4e37 0%, #ff7373 100%);
    }
    &:last-child {
        bottom: 255px;
        background: linear-gradient(180deg, #ffab27 0%, #ff7f1f 100%);
    }
}

.isMine {
    height: calc(71.5vw + 653px);
    overflow: hidden;

    .bottom(56px);
    .rank {
        top: 71.5vw;
    }
}

.rule {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    width: 300px;
    border-radius: 8px;
    padding: 0 16px 16px;
    .rule-title {
        font-size: 14px;
        font-weight: bold;
        color: #000000;
        line-height: 24px;
        text-align: center;
        padding: 12px 0 16px;
    }

    /deep/.rule-content {
        ol {
            list-style-type: none;
            counter-reset: sectioncounter;
        }
        ol li:before {
            content: counter(sectioncounter) '、';
            counter-increment: sectioncounter;
        }
    }
}

.record {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffecea;
    width: 300px;
    border-radius: 8px;
    overflow: hidden;
    padding: 16px 12px 16px;
    .record-bg {
        width: 100%;
        height: 206px;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }

    .record-title {
        width: 120px;
        height: 30px;
        display: block;
        margin: auto;
    }

    .record-order {
        height: 70px;
        background: #ffffff;
        border-radius: 8px;
        margin-top: 16px;
        .flex();
        .order-item {
            .flex-col();
            align-items: center;
            width: 33%;
            .text1 {
                .flex();
                img {
                    width: 18px;
                    height: 18px;
                    display: block;
                }

                span {
                    font-size: 12px;
                    color: #000000;
                    line-height: 17px;
                }
            }

            .text2 {
                font-size: 14px;
                font-weight: bold;
                color: #ff4f50;
                line-height: 24px;
                margin-top: 6px;
            }
        }
    }
}
.record-content {
    background: #ffffff;
    border-radius: 8px;
    margin-top: 12px;
    padding: 0 10px;
    max-height: 372px;
    overflow: auto;
    min-height: 100px;
    .record-info {
        .flex();
        height: 50px;

        .record-info-text {
            flex-grow: 1;
            margin-left: 6px;
            .text1 {
                font-size: 12px;
                color: #000000;
                line-height: 17px;
            }
            .text2 {
                font-size: 10px;
                color: @text3;
                line-height: 10px;
                margin-top: 2px;
            }
        }

        .status {
            font-size: 12px;
            color: #000000;
            line-height: 17px;

            &.not {
                color: @text3;
            }
        }

        &.empty {
            .status {
                text-align: center;
                flex-grow: 1;
            }
        }
    }
}

.btn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 9px 40px;
    background-color: #fff;
    .bottom(9px);
    z-index: 20;
}

.home {
    position: fixed;
    top: 16px;
    top: calc(var(--safe-top) + 16px);
    left: 16px;
    width: 32px;
    height: 32px;

    &.notMine {
        top: calc(var(--safe-top) + 56px);
    }
}

.app-icon {
    width: 30px;
    height: 30px;
}

/deep/.van-notice-bar__content {
    padding-left: 16px;
}
</style>
