<!--
  Description: h5-用户信息弹窗
  Author: 李亚光
  Date: 2024-12-24
 -->
<script lang="ts" setup name="H5userInfo">
import useUserStore from '@/store/modules/user'
import useRouteStore from '@/store/modules/route'
// import useUserStore from '@/store/modules/user'
import { ElMessage, ElMessageBox } from 'element-plus'
const userStore = useUserStore()
const routeStore = useRouteStore()
const userInfo = useUserStore()
const $router = useRouter()
const dialogFormVisible = ref(false) // 对话框是否显示
// 打开弹窗
const initDialog = () => {
  dialogFormVisible.value = true
  console.log(userInfo, 'userInfo')
}
// 关闭
const cancel = () => {
  dialogFormVisible.value = false
}
defineExpose({
  initDialog,
})
// 退出登录
const logout = () => {
  ElMessageBox.confirm(
    '确认退出登录吗?',
    '',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    routeStore.removeRoutes()
    userStore.logout().then(() => {
      $router.push({
        name: 'login',
      })
    })
  })

}
</script>
<template>
  <van-popup v-model:show="dialogFormVisible" closeable round style="width: 90%;padding-top: 1rem;">
    <van-cell-group inset>
      <van-cell title="" />
      <van-cell title="账号" :value="userInfo.username" />
      <van-cell title="真实姓名" :value="userInfo.name" />
      <van-cell title="所在组织机构" :value="userInfo.deptName" />
      <van-cell title="角色" :value="userInfo.roleNames.join()" />
      <div class="van-cell">
        <el-button style="width: 100%;" @click="logout">
          退出登录
        </el-button>
      </div>
    </van-cell-group>
  </van-popup>
  <!-- <el-dialog class="dialog" v-model="dialogFormVisible" top="20vh" title="用户信息" append-to-body width="80%">
    <el-row :gutter="24">
      <el-col :span="24">
        <div class="van-cell-group van-hairline--top-bottom">
          <div class="van-cell">
            <div class="van-cell__title">账号</div>
            <div class="van-cell__value">{{ userInfo.username }}</div>
          </div>
          <div class="van-cell">
            <div class="van-cell__title">真实姓名</div>
            <div class="van-cell__value">{{ userInfo.name }}</div>
          </div>
          <div class="van-cell">
            <div class="van-cell__title">所在组织机构</div>
            <div class="van-cell__value">{{ userInfo.deptName }}</div>
          </div>
          <div class="van-cell">
            <div class="van-cell__title">角色</div>
            <div class="van-cell__value">{{ userInfo.roleNames.join() }}</div>
          </div>
          <div class="van-cell">
            <el-button style="width: 100%;" @click="logout">
              退出登录
            </el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-dialog> -->
</template>

<style lang="scss" scoped>
.dialog {
  ::v-deep .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
  }

  ::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
  }
}
</style>