<template>
    <div class="page">
        <div class="main">
            <div class="tit">添加助理微信</div>
            <ul class="add-assistant">
                <li @click="copy(kefu._id, '复制群助理微信成功')">
                    <div class="step">第一步：</div>
                    <div class="con">
                        <div>
                            助理微信：<span class="wechat">{{ kefu._id }}</span>
                            <span class="copy">点击复制</span>
                        </div>
                        <my-image
                            class="wechat-img"
                            mode="widthFix"
                            @click="viewImg(kefu.qrCode)"
                            :src="kefu.qrCode"
                        ></my-image>
                    </div>
                </li>
                <li>
                    <div class="step">第二步：</div>
                    <div class="con">
                        <div class="font-blod">将助理拉入群</div>
                    </div>
                </li>
                <li>
                    <div class="step">第三步：</div>
                    <div class="con">
                        <div>在群里@群助理</div>
                    </div>
                </li>
                <li
                    @click="
                        copy(
                            pidCode,
                            '已复制群验证码，请粘贴发送到要开通助理的群内'
                        )
                    "
                >
                    <div class="step">第四步：</div>
                    <div class="con">
                        <div>
                            发送
                            <span class="wechat red">{{ pidCode }}</span> 到群内
                            <span class="copy">点击复制</span>
                        </div>
                    </div>
                </li>
            </ul>
            <button class="btn" @click="saveOk">已完成</button>
        </div>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";

export default {
    name: "",
    components: { MyImage },
    // 数据
    data() {
        return {
            pidCode: "",
            kefu: {},
            share: {
                title: "开通群助理",
                path: "/pages/index/register",
                imageUrl:
                    "https://oss.ixiaokejia.com/images/common/share_register.jpg",
            },

            inviteCode: "",
        };
    },

    onLoad(opts) {
        this.getAvailableWechat();
        this.getGenCode();
    },

    onShow() {},

    // 函数
    methods: {
        getGenCode() {
            this.api
                .get(
                    "/Group/GetGenCode",
                    { platform: this.user.fromPlatform },
                    { pass: true }
                )
                .then((res) => {
                    this.pidCode = res.data;
                });
        },

        getAvailableWechat(pid) {
            let sendData = {};
            if (pid) {
                sendData.pid = pid;
            }
            this.api
                .get("/Group/GetAvailableWechat", sendData, { pass: true })
                .then((res) => {
                    if (res.data.length === 0) {
                        this.fn.showModal({
                            title: "提示",
                            content:
                                "暂时所有群助理都已经排满，请您联系客服或稍后再试。客服微信：jingzhunwlyx",
                            showCancel: false,
                        });
                    } else {
                        this.kefu = res.data[0] ? res.data[0] : {};
                        console.log(this.kefu);
                    }
                });
        },

        viewImg(url) {
            uni.previewImage({
                urls: [url],
            });
        },

        copy(val, str) {
            const self = this;

            uni.setClipboardData({
                data: val,
                success: () => {
                    self.fn.showToast(str || "复制成功");
                },
            });
        },

        saveOk() {
            // this.router.push("/pages/index/register?step=2");
            // return;
            // self.fn.showToast("注册成功");
            let sendData = {
                platform: this.user.fromPlatform,
                code: this.pidCode,
            };
            this.api.get("/Group/CheckCode", sendData).then((res) => {
                if (res.success) {
                    if (res.data.verified) {
                        this.router.push({
                            path: "/pages/assistant/index",
                            isTabBar: true,
                        });
                    } else {
                        this.fn.showModal({
                            title: "失败",
                            content:
                                "助理没有收到您发送在群里的团长号，请确认1、2、3步全部完成后再试",
                            showCancel: false,
                        });
                    }
                } else {
                    this.fn
                        .showModal({
                            title: "未填写团长号",
                            content: "确认返回团长号填写",
                            showCancel: false,
                        })
                        .then((res) => {
                            if (res.confirm) {
                                this.step = 2;
                            }
                        });
                    // this.router.push("/index/register?step=2");
                }
            });
        },
    },

    // 数据计算
    computed: {
        user() {
            return this.$store.state.user.user;
        },
    },

    // 数据监听
    watch: {},
};
</script>


<style lang="scss" scoped>
.page {
    height: 100vh;
    background-color: #fff;
}
.main {
    padding-top: px(120);
    padding-left: px(40);
    padding-right: px(40);
}
.tit {
    font-size: px(50);
    padding-bottom: px(100);
    text-align: center;
    padding-bottom: px(100);
}
.inp-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #c3c1c2;
    padding: px(30) 0;
    margin-bottom: px(30);
}
.inp-box span {
    font-size: px(32);
    color: rgb(0, 188, 38);
    border-radius: px(15);
    border: 1px solid rgb(0, 188, 38);
    width: px(230);
    height: px(80);
    text-align: center;
    line-height: px(80);
    flex-shrink: 0;
    margin-left: px(30);
}
.inp-box input {
    width: 100%;
}
.inp-box .dis {
    color: #999;
    border-color: #999;
    pointer-events: none;
}
.btn {
    margin-top: px(120);
    color: #fff;
    background-color: rgb(0, 188, 38);
    font-size: px(44);
    margin-bottom: px(50);
}
.code-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .code-btn {
        width: px(250);
        flex-shrink: 0;
        font-size: px(40);
        padding: 0 px(10);
        border: none;
        &.dis {
            border-color: #f1f1f1;
            color: #999;
        }
    }
}
.team-num-des {
    padding: px(80) px(30);
    text-align: center;
    line-height: 1.5;
    .tit {
        font-size: px(48);
        padding: px(10) 0;
    }
    .text {
        font-size: px(44);
        padding: px(15) 0;
    }
    video {
        width: 80vw;
        height: calc(80vw / 0.466666);
        display: block;
        margin: 0 auto;
    }
    .img,
    .video {
        padding: px(20) 0;
    }
    /deep/ img {
        width: 80%;
        display: block;
        margin: 0 auto;
    }
}
.add-assistant {
    border-top: 1px solid #f1f1f1;
    li {
        display: flex;
        justify-content: space-between;
        font-size: px(44);
        padding: px(30);
        border-bottom: 1px solid #f1f1f1;
        .step {
            width: px(200);
            flex-shrink: 0;
            font-weight: bold;
        }
        .con {
            width: 100%;
        }
        .wechat-img {
            padding: px(10);
            /deep/ img {
                width: px(600);
            }
        }
    }
}
.copy {
    display: inline-block;
    font-size: px(32);
    line-height: px(44);
    padding: 0 px(10);
    border: 1px solid #4395ff;
    color: #4395ff;
    background-color: #fff;
    margin-left: px(20);
    border-radius: px(5);
    transform: translate(0, -1px);
}
.wechat {
    color: #4395ff;
    &.red {
        color: red;
        font-weight: bold;
    }
}
.go-login {
    text-align: center;
    padding-top: px(60);
    .text {
        display: inline-block;
        color: #4395ff;
    }
}
.font-blod {
    font-weight: bold;
}
.return-page {
    font-size: px(40);
    color: #333;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transform: translate(0, px(-80));
    color: #666;
    .arrow {
        width: px(40);
        height: px(40);
        flex-shrink: 0;
        margin-right: px(20);
        /deep/ img {
            width: px(40);
            height: px(40);
        }
    }
}
</style>