<template>
    <div class="user-info">
        <el-descriptions :column="3">
            <el-descriptions-item :label="$t('user.profile.index.894502-1')">{{ userInfo.userName }}</el-descriptions-item>
            <el-descriptions-item :label="$t('user.index.098976-13')">{{ userInfo.phonenumber }}</el-descriptions-item>
            <el-descriptions-item :label="$t('user.profile.index.894502-2')">{{ userInfo.email }}</el-descriptions-item>
            <el-descriptions-item :label="$t('user.profile.index.894502-3')">
                {{ posts ? `${userInfo.dept ? userInfo.dept.deptName : ''} / ${posts}` : `${userInfo.dept ? userInfo.dept.deptName : ''}` }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('user.profile.index.894502-4')">{{ roles }}</el-descriptions-item>
            <el-descriptions-item :label="$t('user.profile.index.894502-5')">{{ userInfo.createTime }}</el-descriptions-item>
            <el-descriptions-item :label="$t('user.profile.index.894502-6')">
                <el-button v-if="wxBind" type="warning" size="mini" @click="handleUnBindWeChat">{{ $t('user.profile.index.894502-7') }}</el-button>
                <el-button v-else type="primary" size="mini" @click="handleBindWeChat">{{ $t('user.profile.index.894502-8') }}</el-button>
            </el-descriptions-item>
        </el-descriptions>
        <!-- 绑定微信 -->
        <el-dialog :title="'绑定微信'" :visible.sync="isBindWeChat" width="500px" append-to-body>
            <div class="bindWeChatDialog">
                <div class="dec">请通过微信扫一扫，进行微信绑定。</div>
                <div class="weChat">
                    <div id="weChatLogin" style="height: 200px"></div>
                </div>
            </div>
            <div slot="footer">
                <el-button type="primary" size="small" @click="isBindWeChat = false">{{ $t('close') }}</el-button>
            </div>
        </el-dialog>
        <!-- 解除微信绑定 -->
        <el-dialog :title="$t('user.profile.index.894502-11')" :visible.sync="isUnBindWeChat" width="600px" append-to-body>
            <div class="unBindWeChatDialog">
                <el-form label-width="150px">
                    <el-form-item :label="$t('user.profile.index.894502-12')" prop="pasaward">
                        <el-input style="width: 80%" v-model="unBindWeChat.password" :type="pwdtype">
                            <template slot="suffix">
                                <span style="margin-right: 8px" class="el-icon-view" @click="pwdTypeChange()"></span>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="isUnBindWeChat = false">{{ $t('close') }}</el-button>
                <el-button size="small" type="primary" @click="confirmUnBindWeChat">{{ $t('confirm') }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getLoginParam, secureBind } from '@/api/system/user';
import { getWxBindMsg } from '@/api/login';
import { getUserProfile } from '@/api/system/user';

export default {
    props: {
        user: {
            type: Object,
            default: {},
        },
        postGroup: {
            type: String,
            default: '',
        },
        roleGroup: {
            type: String,
            default: '',
        },
        wxbind: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            isBindWeChat: false,
            isUnBindWeChat: false,
            pwdtype: 'password',
            wxBind: this.wxbind, //重新定义，避免父组件的wxbind属性不可修改而发生报错
            userInfo: this.user,
            posts: this.postGroup,
            roles: this.roleGroup,
            unBindWeChat: {
                password: '',
                verifyType: 1,
            },
        };
    },
    mounted() {
        this.getUser();
        const { wxBindMsgId } = this.$route.query;
        if (wxBindMsgId) {
            this.getWeChatBindMsg();
        } else {
            console.log('此时没有进行绑定操作！');
        }
        const script = document.createElement('script');
        (script.type = 'text/javascript'), (script.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'), document.body.appendChild(script);
    },
    methods: {
        // 绑定微信
        handleBindWeChat() {
            getLoginParam().then((response) => {
                const s = document.createElement('script');
                s.type = 'text/javascript';
                s.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js';
                const wxElement = document.body.appendChild(s);
                wxElement.onload = function () {
                    new WxLogin({
                        self_redirect: false,
                        id: 'weChatLogin',
                        appid: response.data.appid,
                        scope: response.data.scope,
                        redirect_uri: response.data.redirectUri,
                        state: response.data.state,
                        style: 'black',
                        href: 'data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHsKIGRpc3BsYXk6IG5vbmU7Cn0KLmltcG93ZXJCb3ggLnN0YXR1cy5zdGF0dXNfYnJvd3NlciB7CiBkaXNwbGF5OiBub25lOwp9Ci5pbXBvd2VyQm94IC5xcmNvZGUgewogYm9yZGVyOm5vbmU7CiB3aWR0aDogMjAwcHg7CiBoZWlnaHQ6IDIwMHB4OwogbWFyZ2luOjAgYXV0bzsKfQouaW1wb3dlckJveCAuc3RhdHVzewogZGlzcGxheTogbm9uZQp9',
                    });
                };
            });
            this.isBindWeChat = true;
        },
        // 解除微信绑定
        handleUnBindWeChat() {
            this.isUnBindWeChat = true;
        },
        pwdTypeChange() {
            this.pwdtype == 'password' ? (this.pwdtype = 'text') : (this.pwdtype = 'password');
        },
        // 解除微信绑定
        confirmUnBindWeChat() {
            const params = {
                ...this.unBindWeChat,
            };
            secureBind(params).then((res) => {
                if (res.code === 200) {
                    this.getUser();
                    this.$modal.msgSuccess(res.msg);
                } else {
                    this.$modal.msgError(res.msg);
                }
                this.isUnBindWeChat = false;
            });
        },
        // 获取用户信息
        getUser() {
            getUserProfile().then((res) => {
                if (res.code === 200) {
                    this.userInfo = res.data;
                    this.wxBind = res.wxBind;
                    this.roles = res.roleGroup;
                    this.posts = res.postGroup;
                }
            });
        },
        // 获取微信绑定返回结果信息
        getWeChatBindMsg() {
            const { wxBindMsgId } = this.$route.query;
            getWxBindMsg(wxBindMsgId).then((res) => {
                if (res.code === 200) {
                    this.$modal.msgSuccess(res.msg);
                } else {
                    this.$modal.msgError(res.msg);
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.user-info {
    ::v-deep .el-descriptions-item__cell {
        margin-bottom: 15px;
    }

    ::v-deep .el-button--mini {
        padding: 5px 15px;
    }
}

.bindWeChatDialog {
    .dec {
        font-size: 14px;
    }

    .weChat {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 15px;
    }
}

.unBindWeChatDialog {
}
</style>
