<template>
    <div v-bind:style="contentStyle">
        <div style="text-align: center;">
            <img :src="pic" style="display: inline-block;max-width:100%;min-height: 48.76vw;">
        </div>
        <div class="setting_userinfo">
            <div class="setting_userinfo_avatar">
                <mu-avatar size="60">{{simplename}}</mu-avatar>
            </div>
            <div class="setting_userinfo_name">
                <div class="setting_userinfo_name_id">{{usercode}}</div>
                <div class="setting_userinfo_name_name">{{username}}</div>
            </div>
            <!-- <div class="setting_userinfo_qrcode">
                <canvas class="qrcode" id="userQrcode"></canvas>
            </div> -->
            <!-- <mu-button style="position: absolute; bottom: 10px; right: 5px;color: #333;" icon
                @click="handleScanToLogin">
                <i class="iconfont icon-iconfontscan"></i></mu-button> -->
        </div>
        
        <mu-list style="position: relative;top: -40px;" >
            <mu-list-item avatar button @click="showQRCode">
                <mu-list-item-action>
                    <mu-avatar color="#b15bff">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-erweima"></use>
                        </svg>
                    </mu-avatar>
                </mu-list-item-action>
                <mu-list-item-title>我的二维码</mu-list-item-title>
                <mu-list-item-action>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-right"></use>
                    </svg>
                </mu-list-item-action>
            </mu-list-item>
            <mu-divider inset></mu-divider>

            <mu-list-item avatar button @click="gotoMima">
                <mu-list-item-action>
                    <mu-avatar color="#ffe153">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-xiugaimima"></use>
                        </svg>
                    </mu-avatar>
                </mu-list-item-action>
                <mu-list-item-title>修改密码</mu-list-item-title>
                <mu-list-item-action>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-right"></use>
                    </svg>
                </mu-list-item-action>
            </mu-list-item>
            <mu-divider inset></mu-divider>

            <mu-list-item avatar button @click="gotoGuanyu">
                <mu-list-item-action>
                    <mu-avatar color="#ff9800">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-guanyu"></use>
                        </svg>
                    </mu-avatar>
                </mu-list-item-action>
                <mu-list-item-title>关于龙嘉L1</mu-list-item-title>
                <mu-list-item-action>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-right"></use>
                    </svg>
                </mu-list-item-action>
            </mu-list-item>
            <mu-divider inset></mu-divider>

            <mu-list-item avatar button @click="gotoAppVersion">
                <mu-list-item-action>
                    <mu-avatar color="#fd8e78">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-ic_loop"></use>
                        </svg>
                    </mu-avatar>
                </mu-list-item-action>
                <mu-list-item-title>版本</mu-list-item-title>
                <mu-list-item-action>
                    <div class="version-box">
                        <div class="version">
                            {{ version }}
                        </div>
                        <div class="right">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-right"></use>
                            </svg>
                        </div>
                    </div>
                </mu-list-item-action>
            </mu-list-item>
            <mu-divider inset></mu-divider>

            <mu-list-item avatar button @click="gotoLogout">
                <mu-list-item-action>
                    <mu-avatar color="#ff6f61">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-logout"></use>
                        </svg>
                    </mu-avatar>
                </mu-list-item-action>
                <mu-list-item-title>切换账号</mu-list-item-title>
                <mu-list-item-action>
                    <mu-button icon color="error" @click.stop="logoutNow">
                        <svg class="icon" aria-hidden="true" style="font-size: 16px;">
                            <use xlink:href="#icon-logout"></use>
                        </svg>
                    </mu-button>
                </mu-list-item-action>
            </mu-list-item>
            <mu-divider inset></mu-divider>
        </mu-list>

        <mu-dialog style="position: fixed; margin: auto;width: 300px; height: 300px;" :open.sync="showCode">
            <div>
                <canvas class="popup-qrcode" id="userQrcode"></canvas>
            </div>
        </mu-dialog>
    
        <mu-dialog title="操作提示" :esc-press-close="false" :overlay-close="false" :open.sync="showLogout">
            <div>
                {{ `是否退出【${currentAccount}】:${usercode}？` }}
                <div style="margin-top:5px;">
                    <mu-checkbox v-model="ifClearPW" label="并清除登录记录"></mu-checkbox>
                </div>
            </div>
            
            <div class="dialog-footer" style="text-align: center;margin-top:30px">
                <mu-button @click="showLogout = false">取 消</mu-button>
                <mu-button color="#ee0a24" @click="handleClickLogout">退 出</mu-button>
            </div>
        </mu-dialog>
        
        <!-- <div class="setting_relogin" onclick="$lj.openWin('login',{isRelogin:true})">退出当前帐号</div> -->
    </div>
</template>

<script>
    import QRCode from 'qrcode';

    export default {
        name: "tab-mine",
        mounted() {
            this.wgtRootDir = api.wgtRootDir;
            this.initStyle();
            this.refresh();
        },
        data() {
            return {
                currentAccount: "",
                username: "",
                usercode: "",
                simplename: "",
                pic: "../../assets/image/setting_top.jpg",
                contentStyle: {
                    //变量名不能改，继承会引用到
                    marginTop: "0px",
                    marginBottom: "0px",
                },
                showCode: false,
                qrcode_lasttime: null,
                qrcode_thistime: null,
                version: "V" + $lj.getVersion(),
                wgtRootDir: "",
                showLogout: false,
				ifClearPW: false,
            }
        },
        methods: {
            /**扫描登录工位机 */
            handleScanToLogin() {
                let self = this;
                $lj.openScanner((scanRet) => {
                    setTimeout(() => {
                        console.log(' scanRet :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(scanRet));
                        let Obj = eval("(" + scanRet.content + ")");
                        $lj.confirm('登录提示', Obj.msg, function () {
                            $lj.postLJRequest("ConfirmLoginQRCode", {
                                token: $lj.getStorage("token"),
                                qrcode: JSON.stringify(Obj)
                            }, function (ret) {
                                self.$toast.success('登录成功');
                            });
                        })
                    }, 200);
                });
            },
            initStyle() {
                // 兼容刘海屏
                let winHeight = 80;
                if (window.api) {
                    winHeight = api.winHeight;
                }
                let footerHeight = 61;
                if (api.systemType === "ios") {
                    footerHeight += api.safeArea.bottom
                }
                this.contentStyle.minHeight = (winHeight - footerHeight) + "px";
                this.contentStyle.marginTop = 0 + "px";
                this.contentStyle.marginBottom = 0 + "px";
            },
            refresh() {
                let user = $lj.getStorage("user");
                if (user) {
                    this.username = user.username;
                    this.usercode = user.usercode;
                    this.simplename = this.username.substring(this.username.length - 1, this.username.length)
                }
                this.currentAccount = $lj.getStorage("lastLoginAccount");
                // this.refreshQRCode();
            },
            refreshQRCode() {
                let el = document.getElementById('userQrcode');
                QRCode.toCanvas(el, 'abc', function (error) {
                    if (error) console.error(error)
                    console.log('success!');
                })
            },
            showQRCode() {
                $lj.openWin('user-qrcode');
            },
            gotoDaili() {
                $lj.toast("功能正在开发", 2000);
            },
            gotoZixun() {
                $lj.toast("功能正在开发", 2000);
            },
            gotoMima() {
                $lj.openWin('password-edit',{account: this.currentAccount, usercode: this.usercode});
            },
            gotoGuanyu() {
                $lj.openWin('about');
            },
            gotoAppVersion() {
                $lj.openWin('app-version');
            },
            gotoLogout() {
                $lj.openWin('login-mng',{isRelogin:true})
            },
            logoutNow() {
				this.showLogout = true;
			},
			handleClickLogout() {
				this.showLogout = false;
				if (this.ifClearPW) {

					let userHistory = $lj.getStorage("userHistory");
					if (typeof userHistory !== "object") {
						userHistory = {};
					}
					let userHistoryAccount = $lj.getStorage("userHistoryAccount");
					if (userHistoryAccount == undefined) {
						userHistoryAccount = [];
					}
	
					console.log('_setUserHistory this.userHistoryAccount :>> ', JSON.stringify(userHistoryAccount));
					let index = -1;
					if (userHistoryAccount.length > 0) {
						for (let i = 0; i < userHistoryAccount.length; i++) {
							if (userHistoryAccount[i].name == this.currentAccount) {
								index = i;
								break;
							}
						}
						if (index > -1) {
							if (userHistoryAccount[index].account.hasOwnProperty(this.usercode)) {
								delete userHistoryAccount[index].account[this.usercode]
								console.log('删除密码后userHistoryAccount~~~~~~~~ :>> ', JSON.stringify(userHistoryAccount));
								$lj.setStorage("userHistoryAccount", userHistoryAccount);
							}
						}
					}
					if (index == -1) {
						if (userHistory.hasOwnProperty(this.usercode)) {
							delete userHistory[this.usercode]
							console.log('删除密码后userHistory~~~~~~~~ :>> ', JSON.stringify(userHistory));
							$lj.setStorage("userHistory", userHistory);
						}
					}

				}

                let accountList = $lj.getStorage('cacheAccount') || [];
				for(let i in accountList) {
					if (accountList[i].checked) {
						if (this.ifClearPW) {
							// 清除登录记录
							accountList.splice(i, 1);
						} else {
							accountList[i].checked = false;
						}
						break;
					}
				}
				$lj.setStorage('cacheAccount', accountList);
				// $lj.setStorage("serverConnectParams", "")
				// $lj.setStorage("lastLoginAccount", "");

				// $lj.postLJRequest("NotifyUsersKicked", {tokens: [$lj.getStorage("token")], fromClient: 1}, (ret) => {
					$lj.setStorage("user", "");
					$lj.setStorage("token", "");
					$lj.setStorage("loginRememberUser", "");
					this.usercode = "";
					$lj.openWin('login', {isRelogin: false, ifOpenMng: true});
				// });
			},
            gotoIphone() {
                $lj.openWin('binding-iphone');
            }
        },
        watch: {
            showCode: function(val, oldVal) {
                if (val) {
                    
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .setting_userinfo {
        display: flex;
        position: relative;
        top: -40px;
        /* left:10px; */
    }

    .setting_userinfo_name {
        padding: 15px 10px;
    }

    .setting_userinfo_name_name {
        font-size: 18px;
        font-weight: bold;
        line-height: 45px;
        color: #666;
    }

    .setting_userinfo_avatar {
        width: 66px;
        height: 66px;
        border-radius: 50%;
        text-align: center;
        line-height: 66px;
        background-color: rgb(255, 255, 255);
        font-size: 30px;
        font-weight: bold;
        color: #fff;
        margin-left: 10px;
        overflow: hidden;
        box-shadow: 0 0px 7px rgba(0, 0, 0, 0.3);
    }

    .setting_userinfo_qrcode {
        width: 66px;
        height: 66px;
        line-height: 66px;
        background-color: rgb(255, 255, 255);
        font-size: 30px;
        font-weight: bold;
        color: #fff;
        margin-left: 10px;
        overflow: hidden;
        box-shadow: 0 0px 7px rgba(0, 0, 0, 0.3);
    }

    .qrcode {
        width: 4rem!important;
        height: 4rem!important;
    }

    .setting_userinfo_name_id {
        color: #fff;
        font-size: 14px;
        line-height: 14px;
    }

    .setting_relogin {
        background-color: #ffffff;
        font-size: 18px;
        font-weight: bold;
        color: #e14123;
        text-align: center;
        margin-top: -50px;
        padding: 40px 0px;
    }

    .popup-qrcode {
        width: 400px;
        width: 400px;
    }

    .version-box {
        display: flex;
        align-items: flex-end;
    }
</style>