<template>
  <clinic-page-layout title="我的" :show-tabbar="true" :tab-index="1">
    <view class="mine-container">

      <!-- 个人信息面板（通栏） -->
      <view class="profile-panel">
        <!-- 超椭圆高质感头像 -->
        <view class="avatar-squircle">
          <text>{{ avatarText }}</text>
        </view>

        <view class="user-info">
          <text class="user-name">{{ displayName }}</text>
          <!-- 角色标签：替代普通文本，提升专业感 -->
          <view class="role-badge">
            <text class="role-text">诊所管理员</text>
          </view>
        </view>
      </view>

<!--      &lt;!&ndash; 信息与设置面板（通栏） &ndash;&gt;-->
<!--      <view class="setting-panel">-->
<!--        <view class="setting-item">-->
<!--          <text class="item-label">所属诊所</text>-->
<!--          <text class="item-value">{{ storeName }}</text>-->
<!--        </view>-->
<!--      </view>-->

      <!-- 操作面板（通栏） -->
      <view class="setting-panel">
        <wx-bind-entry ref="wxBindEntry" />
        <account-switch-entry />
        <view
            class="setting-item action-item"
            hover-class="item-hover"
            :hover-stay-time="100"
            @click="logout"
        >
          <text class="danger-text">退出登录</text>
          <!-- 保留原有的 u-icon -->
          <u-icon name="arrow-right" color="#C9CDD4" size="28" />
        </view>
      </view>

    </view>
  </clinic-page-layout>
</template>

<script>
import ClinicPageLayout from '@/subPackages/sub_clinic_admin/components/clinic-page-layout.vue'
import AccountSwitchEntry from '@/components/account-switch/account-switch-entry.vue'
import WxBindEntry from '@/components/wx-bind-entry/wx-bind-entry.vue'
import { clearLoginStorage } from '@/utils/loginSession.js'

export default {
  components: { ClinicPageLayout, AccountSwitchEntry, WxBindEntry },
  data() {
    return {
      displayName: '',
      storeName: '',
    }
  },
  computed: {
    avatarText() {
      const n = this.displayName || '管'
      return n.slice(0, 1)
    },
  },
  onShow() {
    const user = uni.getStorageSync('clinic_admin_user') || {}
    this.displayName = user.nick_name || user.name || user.account || '管理员'
    this.storeName = user.store_name || (user.store && user.store.name) || '-'
    if (this.$refs.wxBindEntry) this.$refs.wxBindEntry.refresh()
  },
  methods: {
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定退出登录？',
        confirmColor: '#f53f3f', // 将确认按钮改为警示红，提升用户体验
        success: (res) => {
          if (!res.confirm) return
          clearLoginStorage()
          uni.reLaunch({ url: '/pages/login/index' })
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
/* 保持与工作台完全一致的色彩变量 */
$theme-primary: #6acdbb;
$theme-dark: #4db6a8;
$color-page-bg: #F5F7F8;
$color-text-title: #222B2A;
$color-text-body: #4E5969;
$color-text-muted: #86909C;
$color-border: #F2F3F5;
$color-danger: #F53F3F; /* 现代系统标准红 */

.mine-container {
  padding: 0 0 60rpx;
  background-color: $color-page-bg;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 个人信息面板：通栏纯白 */
.profile-panel {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 60rpx 40rpx 50rpx; /* 顶部增加呼吸感 */
  margin-bottom: 24rpx;
}

/* 超椭圆头像：抛弃死板的纯圆，注入品牌色和微弱发光质感 */
.avatar-squircle {
  width: 128rpx;
  height: 128rpx;
  border-radius: 40rpx; /* 超椭圆倒角 */
  background: linear-gradient(135deg, $theme-primary 0%, $theme-dark 100%);
  box-shadow: 0 8rpx 24rpx rgba(106, 205, 187, 0.25);
  color: #ffffff;
  font-size: 52rpx;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-info {
  margin-left: 32rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.user-name {
  font-size: 40rpx;
  font-weight: 700;
  color: $color-text-title;
  margin-bottom: 12rpx;
  letter-spacing: 1rpx;
}

/* 角色标签：用线框+背景色取代纯文本，更具系统身份感 */
.role-badge {
  align-self: flex-start;
  background-color: rgba(106, 205, 187, 0.1);
  border: 1rpx solid rgba(106, 205, 187, 0.2);
  padding: 4rpx 16rpx;
  border-radius: 8rpx;
}

.role-text {
  font-size: 22rpx;
  color: $theme-dark;
  font-weight: 600;
}

/* 设置项面板（通栏组） */
.setting-panel {
  background-color: #ffffff;
  margin-bottom: 24rpx;
  padding: 0 40rpx;
}

/* 单个设置项 */
.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 36rpx 0;
  border-bottom: 1rpx solid $color-border;
  transition: background-color 0.2s;
}

/* 移除组内最后一个元素的底边框 */
.setting-panel .setting-item:last-child {
  border-bottom: none;
}

.item-label {
  font-size: 30rpx;
  color: $color-text-title;
  font-weight: 500;
}

.item-value {
  font-size: 30rpx;
  color: $color-text-muted;
  font-weight: 400;
}

/* 交互列表项 */
.action-item {
  /* 扩大点击热区补偿 padding */
  margin: 0 -40rpx;
  padding: 36rpx 40rpx;
}

.item-hover {
  background-color: #F7F8FA;
}

/* 退出登录专用红色 */
.danger-text {
  font-size: 30rpx;
  color: $color-danger;
  font-weight: 500;
}
</style>