<template>
  <view class="mine-container">
    <!--顶部个人信息栏-->
    <view class="header-section">
      <view class="header-content">
        <view class="user-section">
          <view class="avatar-wrapper">
            <view class="avatar-gradient">
              <view class="avatar-inner">
                <uni-icons type="person-filled" size="48" color="#ffffff"></uni-icons>
              </view>
            </view>
          </view>
          <view class="user-details">
            <view v-if="!name" @click="handleToLogin" class="login-prompt">
              <text class="login-text">点击登录</text>
              <uni-icons type="right" size="16" color="#ffffff"></uni-icons>
            </view>
            <view v-if="name" class="user-name-section">
              <text class="user-name">{{ name }}</text>
              <view class="user-tag">会员</view>
            </view>
            <view v-if="name" class="user-id">ID: {{ userId }}</view>
          </view>
        </view>
        <view @click="handleToInfo" class="settings-btn">
          <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
        </view>
      </view>
    </view>

    <view class="content-section">
      <view class="quick-actions">
        <view class="action-card" @click="handleJiaoLiuQun">
          <view class="action-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
            <uni-icons type="chatboxes" size="24" color="#ffffff"></uni-icons>
          </view>
          <text class="action-text">交流社区</text>
        </view>
        <view class="action-card" @click="handleService">
          <view class="action-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
            <uni-icons type="contact" size="24" color="#ffffff"></uni-icons>
          </view>
          <text class="action-text">联系客服</text>
        </view>
        <view class="action-card" @click="handleBuilding">
          <view class="action-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
            <uni-icons type="compose" size="24" color="#ffffff"></uni-icons>
          </view>
          <text class="action-text">意见反馈</text>
        </view>
        <view class="action-card" @click="handleUs">
          <view class="action-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
            <uni-icons type="star" size="24" color="#ffffff"></uni-icons>
          </view>
          <text class="action-text">给个好评</text>
        </view>
      </view>

      <view class="menu-section">
        <view class="section-title">
          <view class="title-bar"></view>
          <text class="title-text">账户管理</text>
        </view>
        <view class="menu-card">
          <view class="menu-item" @click="handleToEditInfo">
            <view class="item-left">
              <view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                <uni-icons type="person" size="20" color="#ffffff"></uni-icons>
              </view>
              <text class="menu-text">编辑资料</text>
            </view>
            <uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
          </view>
          <view class="menu-divider"></view>
          <view class="menu-item" @click="handleToSetting">
            <view class="item-left">
              <view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                <uni-icons type="gear" size="20" color="#ffffff"></uni-icons>
              </view>
              <text class="menu-text">应用设置</text>
            </view>
            <uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
          </view>
        </view>
      </view>

      <view class="menu-section">
        <view class="section-title">
          <view class="title-bar"></view>
          <text class="title-text">帮助与支持</text>
        </view>
        <view class="menu-card">
          <view class="menu-item" @click="handleHelp">
            <view class="item-left">
              <view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                <uni-icons type="help" size="20" color="#ffffff"></uni-icons>
              </view>
              <text class="menu-text">常见问题</text>
            </view>
            <uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
          </view>
          <view class="menu-divider"></view>
          <view class="menu-item" @click="handleAbout">
            <view class="item-left">
              <view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                <uni-icons type="info" size="20" color="#ffffff"></uni-icons>
              </view>
              <text class="menu-text">关于我们</text>
            </view>
            <uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
          </view>
        </view>
      </view>

    </view>
  </view>
  <!-- <view>
	  <uni-popup ref="popup" type="dialog">
	    <uni-popup-dialog type="info" cancelText="关闭" confirmText="退出"
	                      title="通知" content="确定注销并退出系统吗" 
	    				  @confirm="dialogConfirm"
	                      @close="dialogClose">
	    </uni-popup-dialog>
	  </uni-popup>
  </view> -->
</template>

<script setup>
import { ref, computed } from "vue";
import config from '@/config.js'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const name = userStore.name;
const userId = computed(() => userStore.userId || '');
const version = config.appInfo.version;

const popup = ref(null);
function handleToInfo() {
  uni.navigateTo({
    url: '/pages_mine/pages/info/index'
  });
};
function handleToEditInfo() {
  uni.navigateTo({
    url: '/pages_mine/pages/info/edit'
  });
};
function handleToSetting() {
  uni.navigateTo({
    url: '/pages_mine/pages/setting/index'
  });
};
function handleToLogin() {
  uni.reLaunch({
    url: '/pages/login'
  });
};
function handleLogout() {
  popup.value.open();
};
function dialogConfirm() {
  //console.log('----------------点击确认------------')

  userStore.logOut().then(() => {
    uni.reLaunch({
      url: '/pages/login'
    });
  })
};
function dialogClose() {
  //console.log('点击关闭')
};
function handleHelp() {
  uni.navigateTo({
    url: '/pages_mine/pages/help/index'
  });
};
function handleAbout() {
  uni.navigateTo({
    url: '/pages_mine/pages/about/index'
  });
};
function handleJiaoLiuQun() {
  uni.showToast({
    title: 'intc126',
    mask: false,
    icon: "none",
    duration: 5000
  });
};
function handleBuilding() {
  uni.showToast({
    title: '谢谢反馈~',
    mask: false,
    icon: "none",
    duration: 1000
  });
}
function handleService() {
  uni.showToast({
    title: '请电联或加客服微信：17753252359',
    mask: false,
    icon: "none",
    duration: 5000
  });
}
function handleUs() {
  uni.showToast({
    title: '谢谢点赞！',
    mask: false,
    icon: "none",
    duration: 1000
  });
}
</script>

<style lang="scss">
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #f5f7fa;
  min-height: 100%;
  height: auto;
}

.mine-container {
  width: 100%;
  background-color: #f5f7fa;

  .header-section {
    padding: 160rpx 32rpx 80rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    
    &::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
      animation: pulse 15s infinite;
    }
    
    .header-content {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .user-section {
        display: flex;
        align-items: center;
        flex: 1;
        
        .avatar-wrapper {
          position: relative;
          margin-right: 24rpx;
          
          .avatar-gradient {
            width: 120rpx;
            height: 120rpx;
            border-radius: 60rpx;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 12rpx 40rpx rgba(102, 126, 234, 0.4);
            position: relative;
            overflow: hidden;
            
            &::before {
              content: '';
              position: absolute;
              top: -50%;
              left: -50%;
              width: 200%;
              height: 200%;
              background: conic-gradient(
                from 0deg,
                transparent 0deg,
                rgba(255, 255, 255, 0.3) 90deg,
                transparent 180deg
              );
              animation: rotate 3s linear infinite;
            }
            
            .avatar-inner {
              width: 112rpx;
              height: 112rpx;
              border-radius: 56rpx;
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;
              z-index: 1;
            }
          }
        }
        
        .user-details {
          flex: 1;
          
          .login-prompt {
            display: flex;
            align-items: center;
            padding: 16rpx 24rpx;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 40rpx;
            backdrop-filter: blur(10rpx);
            
            .login-text {
              color: #ffffff;
              font-size: 28rpx;
              margin-right: 8rpx;
            }
          }
          
          .user-name-section {
            display: flex;
            align-items: center;
            margin-bottom: 12rpx;
            
            .user-name {
              color: #ffffff;
              font-size: 36rpx;
              font-weight: 600;
              margin-right: 12rpx;
            }
            
            .user-tag {
              padding: 4rpx 16rpx;
              background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
              border-radius: 20rpx;
              color: #ffffff;
              font-size: 20rpx;
            }
          }
          
          .user-id {
            color: rgba(255, 255, 255, 0.8);
            font-size: 24rpx;
          }
        }
      }
      
      .settings-btn {
        padding: 16rpx;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        backdrop-filter: blur(10rpx);
      }
    }
  }

  .content-section {
    margin-top: -40rpx;
    padding: 60rpx 32rpx 32rpx;
    position: relative;
    z-index: 2;
    flex: 1;
    overflow: hidden;

    .quick-actions {
      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
      border-radius: 24rpx;
      padding: 32rpx 24rpx;
      box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
      display: flex;
      justify-content: space-around;
      margin-bottom: 32rpx;
      
      .action-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .action-icon {
          width: 96rpx;
          height: 96rpx;
          border-radius: 24rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 16rpx;
          box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.12);
          transition: all 0.3s ease;
          
          &:active {
            transform: scale(0.95);
          }
        }
        
        .action-text {
          color: #2c3e50;
          font-size: 24rpx;
        }
      }
    }
    
    .menu-section {
      margin-bottom: 32rpx;
      
      .section-title {
        color: #7f8c8d;
        font-size: 28rpx;
        padding: 0 0 20rpx 0;
        margin-left: 16rpx;
        font-weight: 600;
        display: flex;
        align-items: center;
        
        .title-bar {
          width: 6rpx;
          height: 28rpx;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border-radius: 3rpx;
          margin-right: 12rpx;
          flex-shrink: 0;
        }
        
        .title-text {
          color: #7f8c8d;
          font-size: 28rpx;
          font-weight: 600;
        }
      }
      
      .menu-card {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
        border-radius: 24rpx;
        overflow: hidden;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
        
        .menu-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 32rpx 24rpx;
          transition: background-color 0.3s ease;
          
          &:active {
            background-color: rgba(0, 0, 0, 0.02);
          }
          
          .item-left {
            display: flex;
            align-items: center;
            
            .menu-icon-wrapper {
              width: 64rpx;
              height: 64rpx;
              border-radius: 16rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 24rpx;
              box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
            }
            
            .menu-text {
              color: #2c3e50;
              font-size: 28rpx;
            }
          }
        }
        
        .menu-divider {
          height: 1rpx;
          background-color: #e8edf3;
          margin: 0 24rpx;
        }
      }
    }
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.1) rotate(180deg);
  }
}

@keyframes shimmer {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
