<template>
<q-dialog v-model="persistent" maximized full-height position="right" @hide="closeShenheForm">
    <q-card style="margin-top:61px;width:375px" class="no-border-radius q-pa-lg">
        <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 color="positive" 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>alex9012@vip.qq.com</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-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="undefinedGongneng">
                <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-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>
export default {
    props: {
        showObj: {
            type: Object,
            default: null
        }
    },
    data() {
        return {
            persistent: true,
            text: 'Field content',
            reason: '',
            saveLoading: false,
            saveType: 0
        }
    },
    methods: {
        closeShenheForm() {
            this.$emit('close')
        },
        undefinedGongneng() {
           this.$q.dialog({
                title: '功能提示',
                message: '此功能即将在下一版本中开放'
            }).onOk(() => {
                // console.log('OK')
            });
        },
        logout() {
        this.$store
          .dispatch('LogOut')
          .then(() => {
            this.$router.push('/login')
          })
          .catch((e) => {
              console.log(e)
          })
      },
    },
}
</script>

<style>

</style>
