<template>
    <div style="position: relative;">
        <div class="user" @click="loginDialogVisible = true">
            <iframe src="//cocorobo.cn/login" frameborder="0" scrolling="no" style="display: none;"></iframe>
            <div v-if="isLogin" class="user_login_style">
                <img :src="userPng" alt="">
                <span class="user_name">{{ userName }}</span>
            </div>
            <div v-else class="user_login_style">
                <img :src="userPng" alt="">
                <span class="login_button">登录</span>
            </div>

        </div>
        <el-dialog class="loginModel" v-model="loginDialogVisible" title="" width="350px" :show-close="false">
            <template #header="{ close }">
                <div class="my-header">
                    <i class="material-icons right" style="color: #000;margin-top: 10px;" @click="close">close</i>
                </div>
            </template>
            <div v-if="!isLogin" class="loginIframe">
                <iframe src="//cocorobo.cn/login" frameborder="0" scrolling="no"></iframe>
            </div>
            <div class="cloud" v-else>
                <h4>{{ userName }}</h4>
                <p><span class="user_span_color">您的邮箱：</span>{{ userEmail }}</p>
                <p><span class="user_span_color">您所属的学校：</span>{{ userSchool }}</p>
                <div>
                    <p>
                        <span class="user_span_color">云端项目：</span>
                        <el-tooltip class="box-item" effect="dark" content="点击刷新云端事件" placement="bottom">
                            <i class="material-icons cloud-icon right" @click="refreshCloud()">autorenew</i>
                        </el-tooltip>
                    </p>
                    <el-select v-model="apiMode" @change="getApiKey">
                        <el-option v-for="item in cloudList" :key="item.id" :value="item.value">
                            {{ item.value }}
                        </el-option>
                    </el-select>
                    <p>
                        <span class="user_span_color">APT key：</span>
                        <el-tooltip class="box-item" effect="dark" content="复制api-key到粘贴板上" placement="bottom">
                            <i class="material-icons cloud-icon right" @click="refreshCloud()">content_copy</i>
                        </el-tooltip>
                    </p>
                    <el-input v-model="apiKeyModel"></el-input>
                </div>
                <div class="clearfix" style="margin-top: 20px;">
                    <el-button class="background_blue left" style="color: #fff;" @click="goCloud()">前往云端服务</el-button>
                    <el-button class="background_blue right" style="color: #fff;" @click="loginOut()">登出</el-button>
                </div>
            </div>
            <!-- <template #footer>
            <span class="dialog-footer">
                <el-button @click="centerDialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="centerDialogVisible = false">
                    Confirm
                </el-button>
            </span>
        </template> -->
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import userPng from '../../assets/img/user.png'
import { ElMessage } from 'element-plus';
import axios from 'axios'
import userInfo from '../../stores/modules/userInfo'

const user = userInfo()
const isLogin = ref(false)
const loginDialogVisible = ref(false)
const userName = ref("")
const userEmail = ref("")
const userSchool = ref("")
const cloudList = ref([])
const apiKey = ref("")
const apiMode = ref("")
const apiKeyModel = ref("")
const apiUrl = ref("")
const cnOrHk = ref(false)

onMounted(() => {
    console.log("user")
    cnOrHk.value = window.location.host.indexOf("cocorobo.hk") > -1
    window.addEventListener('message', function (e) {
        // console.log(e)
        if (e.data.id == 'loginVerify') {
            if (e.data.status === 'logged') {
                isLogin.value = true
                userName.value = e.data.data.alias
                userEmail.value = e.data.data.username
                userSchool.value = e.data.data.defaultSchool
                apiKey.value = e.data.data.apiKey
                user.setUserInfo(e.data.data)
                refreshCloud()
            }
        }
    })
})

const refreshCloud = () => {
    const event = cnOrHk.value ? `https://api.cocorobo.hk/iot/data/apikey/${apiKey.value}/event/` : `https://api.cocorobo.cn/iot/data/apikey/${apiKey.value}/event/`
    axios.get(event).then(res => {
        // console.log(res)
        if (res.data.length > 0) {
            let list = []
            res.data.map(x => {
                let obj = {
                    id: x.eventAPIKey,
                    value: x.name,
                    url: x.url
                }
                list.push(obj)
                return x
            })
            apiMode.value = list[0].value
            apiKeyModel.value = list[0].id
            apiUrl.value = list[0].url
            cloudList.value = list
        }
    })
}

const getApiKey = (e) => {
    let obj = cloudList.value.filter(x => x.value == e)[0]
    apiKeyModel.value = obj.id
    apiUrl.value = obj.url
}

const goCloud = () => {
    const cloudUrl = cnOrHk.value ? "//cocorobo.hk/cloud" : "//cocorobo.cn/cloud"
    window.open(cloudUrl)
}
const loginOut = () => {
    // 登出
    const cloudUrl = cnOrHk.value ? "//api.cocorobo.hk/api/logout" : "//api.cocorobo.cn/api/logout"
    axios.defaults.withCredentials = true
    axios.get(cloudUrl).then(res => {
        if (res.data == "logout") {
            isLogin.value = false
            ElMessage({
                message: '登出成功',
                type: 'warning',
            })
            user.setUserInfo({})
        }
    })
}
</script>

<style lang="scss">
.user {
    cursor: pointer;
    position: relative;

    .user_login_style {
        margin-top: 5px;

        .user_name {
            position: relative;
            top: 3px;
            margin-left: 10px;
        }

        img {
            // position: absolute;
            height: 27px;
            // top: 0;
            // left: -40px;
            vertical-align: middle;
        }

        .login_button {
            padding: 8px 25px;
            margin-top: 10px;
            margin-left: 15px;
            position: relative;
            top: 3px;
            border: 2px solid #fff;
            border-radius: 20px;
        }
    }



}

.loginModel {
    position: fixed !important;
    top: -70px;
    right: 5px;

    .loginIframe {
        height: 400px;
        margin: 24px;
        overflow: hidden;

        iframe {
            margin-top: -370px;
            width: 100%;
            height: 800px;
        }
    }

    .cloud {
        padding: 24px 24px 15px 24px;
        cursor: default;

        h4 {
            font-size: 20px;
            font-weight: bold;
            // padding-bottom: 10px
        }

        p {
            padding-top: 5px;
        }

        .user_span_color {
            color: rgba(0, 0, 0, 0.87);
        }

        div {

            p {

                // padding: 10px 0;
                .cloud-icon {
                    cursor: pointer;
                    font-size: 1rem;
                    color: #2c4fcd;
                }
            }
        }
    }
}
</style>