<template>
<q-dialog v-model="persistent" maximized full-height position="right" @hide="closeShenheForm">
    
    <q-card style="margin-top:61px;width:375px;padding-bottom: 70px;" class="no-border-radius q-pa-lg">
        <q-scroll-area style="height: 100%; max-width: 375px;" :thumb-style="thumbStyle"
        :bar-style="barStyle">
            <div class="text-weight-bold">
                <span style="font-size:20px;" class="q-mr-md">用户个人资料</span>
                <span class="remark-font">12条未读消息</span>
            </div>
            <div class="q-mt-lg flex">
                <q-avatar size="100px" font-size="36px" rounded style="background:#C9F7F5" text-color="white">
                <img :src="showObj.UserIcon" v-if="showObj.UserIcon">
                <span v-else>{{showObj.AccountName.substring(0,1)}}</span>
                </q-avatar>
                <div class="col q-ml-md">
                    <div class="text-weight-bold" style="font-size:16px;">{{showObj.AccountName}}</div>
                    <div class="text-muted" style="font-size:13px">{{showObj.SchoolName}}·{{showObj.PostName}}</div>
                    <div class="flex items-center text-muted">
                        <inline-svg class="svg-icon svg-icon-primary q-mr-xs" src="icons/svg/Communication/Mail-notification.svg"></inline-svg>
                        <span>{{showObj.Email}}</span>
                    </div>
                    <div class="q-mt-xs">
                        <q-btn color="primary" flat @click="logout">退出登录</q-btn>
                    </div>
                </div>
            </div>
            <q-separator color="grey-2" class="q-my-md"></q-separator>
            <q-list>
                <q-item class="q-my-sm" clickable v-ripple  v-for="(item,index) in showObj.UserCenterList" :key="index" :to="item.MenuUrl">
                    <q-item-section avatar>
                        <q-avatar style="background-color: #F3F6F9;" rounded size="40px" text-color="primary">
                            <i :class="[item.MenuIcon]"></i>
                        </q-avatar>
                    </q-item-section>
                    <q-item-section>
                        <q-item-label class="font-pfb">{{item.MenuName}}</q-item-label>
                    </q-item-section>
                </q-item>
                <!-- 跳转资产 -->
                <q-item class="q-my-sm" clickable v-ripple @click="goUrlZC(1)">
                    <q-item-section avatar>
                        <q-avatar style="background-color: #F3F6F9;" rounded size="40px" text-color="primary">
                            <i class="iconfont icon-zichan"></i>
                        </q-avatar>
                    </q-item-section>
                    <q-item-section>
                        <q-item-label class="font-pfb">资产管理</q-item-label>
                    </q-item-section>
                </q-item>
                 <!-- 跳转资产 -->
                 <q-item class="q-my-sm" clickable v-ripple @click="goUrlZC(2)">
                    <q-item-section avatar>
                        <q-avatar style="background-color: #F3F6F9;" rounded size="40px" text-color="primary">
                            <i class="iconfont icon-qinggoudan"></i>
                        </q-avatar>
                    </q-item-section>
                    <q-item-section>
                        <q-item-label class="font-pfb">请购审核</q-item-label>
                    </q-item-section>
                </q-item>
                 <!-- 跳转资产 -->
                 <q-item class="q-my-sm" clickable v-ripple @click="goUrlZC(3)">
                    <q-item-section avatar>
                        <q-avatar style="background-color: #F3F6F9;" rounded size="40px" text-color="primary">
                            <i class="iconfont icon-ruku"></i>
                        </q-avatar>
                    </q-item-section>
                    <q-item-section>
                        <q-item-label class="font-pfb">入库审核</q-item-label>
                    </q-item-section>
                </q-item>
            </q-list>
            <q-separator color="grey-2" class="q-my-md"></q-separator>
            <div class="text-weight-bold" style="font-size:16px;">常用功能</div>
            <q-list>
                <q-item class="q-my-sm q-pa-xs" clickable v-ripple @click="goUrlgeren" >
                    <q-item-section avatar>
                        <q-avatar style="background-color: #F3F6F9;" rounded size="40px" text-color="secondary">
                            <inline-svg class="svg-icon svg-icon-secondary" src="icons/svg/General/Notification2.svg"></inline-svg>
                        </q-avatar>
                    </q-item-section>
                    <q-item-section>
                        <q-item-label class="font-pfb">个人资料</q-item-label>
                        <q-item-label caption lines="1" class="remark-font">账号信息设置等相关功能</q-item-label>
                    </q-item-section>
                </q-item>
                <q-item class="q-my-sm q-pa-xs" clickable v-ripple @click="undefinedGongneng">
                    <q-item-section avatar>
                        <q-avatar style="background-color: #F3F6F9;" rounded size="40px" text-color="secondary">
                            <inline-svg class="svg-icon svg-icon-warning" src="icons/svg/Shopping/Chart-bar1.svg"></inline-svg>
                        </q-avatar>
                    </q-item-section>
                    <q-item-section>
                        <q-item-label class="font-pfb">奖金提成</q-item-label>
                        <q-item-label caption lines="1" class="remark-font">销售与教师相关的奖金或提成</q-item-label>
                    </q-item-section>
                </q-item>
                <q-item class="q-my-sm q-pa-xs" clickable v-ripple @click="undefinedGongneng">
                    <q-item-section avatar>
                        <q-avatar style="background-color: #F3F6F9;" rounded size="40px" text-color="secondary">
                            <inline-svg class="svg-icon svg-icon-negative" src="icons/svg/Files/Selected-file.svg"></inline-svg>
                        </q-avatar>
                    </q-item-section>
                    <q-item-section>
                        <q-item-label class="font-pfb">考勤</q-item-label>
                        <q-item-label caption lines="1" class="remark-font">出勤，请假等相关功能入口</q-item-label>
                    </q-item-section>
                </q-item>
                <q-item class="q-my-sm q-pa-xs" clickable v-ripple @click="undefinedGongneng">
                    <q-item-section avatar>
                        <q-avatar style="background-color: #F3F6F9;" rounded size="40px" text-color="secondary">
                            <inline-svg class="svg-icon svg-icon-primary" src="icons/svg/Communication/Mail-opened.svg"></inline-svg>
                        </q-avatar>
                    </q-item-section>
                    <q-item-section>
                        <q-item-label class="font-pfb">我的工作</q-item-label>
                        <q-item-label caption lines="1" class="remark-font">OKR、教师备课相关功能入口</q-item-label>
                    </q-item-section>
                </q-item>
            </q-list>
        </q-scroll-area>
    </q-card>
    <!--<div class="dialog-out-close" @click="closeShenheForm" style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
        <q-icon name="iconfont icon-jujue1" size="26px" />
    </div>-->
</q-dialog>
</template>

<script>
import Lockr from "lockr"
import {url_jump_zc} from "../../utils/url"
export default {
    props: {
        showObj: {
            type: Object,
            default: null
        }
    },
    data() {
        return {
            persistent: true,
            text: 'Field content',
            reason: '',
            saveLoading: false,
            saveType: 0,
            thumbStyle: {
                right: '4px',
                borderRadius: '5px',
                backgroundColor: '#027be3',
                width: '5px',
                opacity: 0.75
            },

            barStyle: {
                right: '2px',
                borderRadius: '9px',
                backgroundColor: '#027be3',
                width: '9px',
                opacity: 0.2
            }
        }
    },
    methods: {
        closeShenheForm() {
            this.$emit('close')
        },
        goUrlgeren(){//个人资料
        this.$root.$emit("goworkobj")
        this.$router.push({
            path: '/user/personalData',
        })
            
           
        },
        undefinedGongneng() {
           this.$q.dialog({
                title: '功能提示',
                message: '此功能即将在下一版本中开放'
            }).onOk(() => {
              
            });
        },
        logout() {
        this.$store
          .dispatch('LogOut')
          .then(() => {
            this.$router.push('/login')
          })
          .catch((e) => {
              
          })
      },

       goUrlZC(type) {
        let userinfo = this.getLocalStorage();
        let token=Lockr.get("Token");
        // let  url = "http://www.test.com:8080/#/Autologin?ObjInfo=" + token + "&SecretKey=" + userinfo.UploadConfig.SecretKey;
        // let  url = "http://zcyx.oytour.com/#/Autologin?ObjInfo=" + token + "&SecretKey=" + userinfo.UploadConfig.SecretKey; 
         if(type==1){
            let  url = url_jump_zc +"/#/Autologin?ObjInfo=" + token + "&SecretKey=" + userinfo.UploadConfig.SecretKey; 
            window.open(url)
         }else if(type==2){
            let  url =  url_jump_zc +"/#/Autologin?ObjInfo=" + token + "&SecretKey=" + userinfo.UploadConfig.SecretKey+ "&ComeFrom=2"; 
            window.open(url)
         }else if(type==3){
            let  url =  url_jump_zc +"/#/Autologin?ObjInfo=" + token + "&SecretKey=" + userinfo.UploadConfig.SecretKey+ "&ComeFrom=3"; 
            window.open(url)

         }
      },
    },
}
</script>

<style>

</style>
