<template>
    <div class="p-2" style="width: 100%">
        <el-row :gutter="20">
            <el-col :span="24" :xs="24">
                <el-card class="box-card">
                    <template v-slot:header>
                        <div class="clearfix">
                            <span>个人信息</span>
                        </div>
                    </template>
                    <div style="display: flex">
                        <div class="text-center">
                            <userAvatar />
                        </div>
                        <div style="margin-left: 15px">
                            <h2>{{ state.user.realName }}</h2>
                            <ul class="list-group list-group-striped" style="display: flex">

                                <li class="list-group-item">
                                    <div style="">
                                        <img src="@/assets/images/user/phone.png" />
                                        手机号码：
                                        <div class="pull-right">{{ state.user.mobile || '-' }}</div>
                                    </div>

                                </li>
                                <li class="list-group-item">
                                    <div style="">
                                        <img src="@/assets/images/user/email.png" />
                                        用户邮箱：
                                        <div class="pull-right">{{ state.user.email || '-' }}</div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div style="">
                                        <img src="@/assets/images/user/dept.png" />
                                        所属部门：
                                        <div class="pull-right">{{ state.user.deptName || '-' }}/ {{ state.user.jobName }}</div>
                                    </div>
                                </li>
                            </ul>
                            <ul class="list-group list-group-striped" style="display: flex">
                                <li class="list-group-item">
                                    <div style="">
                                        <img src="@/assets/images/user/sex.png" />
                                        性别：
                                        <div class="pull-right" v-if="state.user.sex">{{ state.user.sex }}
                                        </div>
                                        <div class="pull-right" v-else>其他</div>
                                    </div>

                                </li>
                                <li class="list-group-item">
                                    <div style="">
                                        <img src="@/assets/images/user/birthday.png" />
                                        生日：
                                        <div class="pull-right">{{ state.user.birthday }}</div>
                                    </div>
                                </li>
                            </ul>
                        </div>

                    </div>
                </el-card>
            </el-col>

        </el-row>
        <el-row style="background: #fff;margin-top:20px;padding: 20px; height: 100vh">
            <el-col :span="24" :xs="24">
                    <el-tabs v-model="activeTab">
<!--                        <el-tab-pane label="基本资料" name="userinfo">-->
<!--                            <userInfo :user="userForm" />-->
<!--                        </el-tab-pane>-->
                        <el-tab-pane label="修改密码" name="resetPwd">
                            <resetPwd />
                        </el-tab-pane>

                    </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>

<script setup name="Profile" lang="ts">
import UserAvatar from "./userAvatar.vue";
import UserInfo from "./userInfo.vue";
import ResetPwd from "./resetPwd.vue";
import ThirdParty from "./thirdParty.vue";
import { getAuthList } from "@/api/system/social/auth";
import { getUserProfile } from "@/api/system/user";
import useUserStore from "@/store/modules/user";
const activeTab = ref("resetPwd");

const state = ref<Record<string, any>>({
    user: {},
    roleGroup: '',
    postGroup: '',
    auths: []
});

const userForm = ref({});
const userStore = useUserStore();
console.log(userStore, ">>>>>>>>>>>>>>>>>>>...userinfo")
const getUser = async () => {
    // const res = await getUserProfile();
    state.value.user = userStore.userInfo;
    userForm.value = userStore.userInfo
    // state.value.roleGroup = res.data.roleGroup;
    // state.value.postGroup = res.data.postGroup;
};

const getAuths = async () => {
    // const res = await getAuthList();
    // state.value.auths = res.data;
};

onMounted(() => {
    getUser();
})
</script>
