<template>
    <el-popover
            class="popover-login"
            placement="bottom"
            width="200"
            v-model="visible2"
            trigger="click">
        <div class="header-li-button">

            <div style="display: flex;flex-direction: column;justify-content: flex-start"><span
                    style="width: 100%;line-height: 40px;margin-right: 1px;">管理端登录地址:</span>
                <el-input v-model="getAframe" placeholder="登录地址" :readonly="true"></el-input>
            </div>
            <p style="text-align: center">
                <el-button type="primary" size="small" @click="btnClick(2)">点击登录</el-button>
                <el-button type="success" size="small"
                           v-clipboard:copy="getAframe"
                           v-clipboard:success="copy"
                           v-clipboard:error="onError"
                           @click="visible2 = false"
                >
                    复制链接
                </el-button>
            </p>
            <div style="display: flex;flex-direction: column;justify-content: flex-start">
                <div style="width: 100%;line-height: 40px;margin-right: 1px;">学员端登录地址:</div>
                <el-input v-model="getClient" placeholder="登录地址" :readonly="true"></el-input>
            </div>
            <p style="text-align: center">
                <el-button type="primary" size="small" @click="btnClick(1)">点击登录</el-button>

                <el-button type="success" size="small"
                           v-clipboard:copy="getClient"
                           v-clipboard:success="copy"
                           v-clipboard:error="onError"
                           @click="visible2 = false"
                >
                    复制链接
                </el-button>

            </p>

            <!--H5-->
            <div style="display: flex;flex-direction: column;justify-content: flex-start">
                <div style="width: 100%;line-height: 40px;margin-right: 1px;">H5登录地址:</div>
                <el-input :readonly="true" placeholder="登录地址" v-model="getH5"></el-input>
            </div>
            <p style="text-align: center">
                <el-button @click="visible2 = false" size="small"
                           type="success"
                           v-clipboard:copy="getH5"
                           v-clipboard:error="onError"
                           v-clipboard:success="copy"
                >
                    复制链接
                </el-button>

            </p>
        </div>

        <el-button v-if="model === 'button'" slot="reference" class="popover-login" style="background: none;color: #FFF"
                   icon="el-icon-user-solid">
            登录地址管理
        </el-button>
        <el-button v-if="model === 'text'" class="popover-login2" slot="reference" type="text"
                   style="background: none;color: #1E1E1E">
            登录地址管理
        </el-button>
    </el-popover>
</template>

<script>
    import { mapGetters } from 'vuex';

    export default {
        name:     'popoverLogin',
        props:    {
            model:   {
                type:    String,
                default: 'button',
            },
            getcode: {
                require: true,
            },
        },
        data() {
            return {
                visible2: false,
            };
        },
        computed: {
            getClient() {
                if (this.getAuth === null) {
                    return;
                }
                return `${document.location.host}${process.env.BASE_URL}c/login`;
            },
            getAframe() {
                if (this.getAuth === null) {
                    return;
                }
                return `${document.location.host}${process.env.BASE_URL}a/login`;
            },
            getH5(){
                if (this.getAuth === null) {
                    return;
                }
                return `${document.location.host}/`+ process.env.VUE_APP_DIST_NAME + `/#/login`;
            },
            ...mapGetters([
                              'getAuth',
                          ]),
        },
        methods:  {
            btnClick(data) {
                if (data === 1) {
                    this.$router.push({
                                          path: `/c/login`,
                                      });
                } else {
                    this.$router.push({
                                          path: `/a/login`,
                                      });
                }

            },
            copy(e) {
                this.$message.success('复制成功');
            },
            onError(e) {
                this.$message.warning('当前浏览器不支持复制功能');
            },
        },
    };
</script>

