<template>
  <view class="profile-page">
    <!-- 用户信息区域 -->
    <view class="user-info-card">
      <view class="user-info">
        <view class="avatar-section">
          <view class="avatar-wrapper">
            <image class="avatar" :src="userInfo.avatarUrl || '/static/imgs/index/nav.png'"
              mode="aspectFill"></image>
            <view class="edit-icon" @click="handleEditClick">
              <u-icon name="edit-pen" color="#fff" size="24"></u-icon>
            </view>
          </view>
        </view>
        <view class="name-section" @click="handleEditClick">
          <view class="name">{{userInfo.nickName || '未登录用户'}}</view>
		  <view class="phone">{{userInfo.phone || ''}}</view>
        </view>
        <view class="description-card">
          <text class="title">个人简介</text>
          <text class="content">{{userInfo.bio || '这家伙很懒，什么都没有写~'}}</text>
        </view>
      </view>
    </view>

    <!-- 功能按钮区域 -->
    <view class="function-card">
      <view class="button-item" v-for="(item, index) in choseList" :key="index" @click="goPage(item.pageUrl)">
        <view class="button-content">
          <image class="icon" :src='item.url' mode="aspectFit"></image>
          <text class="label">{{item.name}}</text>
        </view>
        <u-icon name="arrow-right" color="#c8c9cc" size="28"></u-icon>
      </view>
    </view>

    <!-- 修改用户信息弹窗 -->
    <u-modal :show="showEditModal" 
             :title="isLogin ? '修改用户信息' : '微信授权登录'" 
             :show-confirm-button="isLogin"
             :show-cancel-button="isLogin" 
             @confirm="handleSubmit" 
             @cancel="handleCancel" 
             confirm-color="#2979ff"
             cancel-color="#606266">
      <view class="modal-content">
        <!-- 未登录时显示授权按钮 -->
        <view v-if="!isLogin" class="auth-section">
          <button v-if="!showPhoneButton" 
                  class="auth-button" 
                  open-type="getUserInfo"
                  @getuserinfo="onGetUserInfo">
            微信一键登录
          </button>
          <button v-if="showPhoneButton" 
                  type="default" 
                  open-type="getPhoneNumber" 
                  @getphonenumber="getPhoneNumber"
                  class="auth-button phone-button">
            授权获取手机号
          </button>
        </view>

        <!-- 已登录时显示编辑表单 -->
        <view v-else>
          <view class="form-item">
            <text class="form-label">头像：</text>
            <u-upload 
                     :file-list="avatarList" 
                     :max-count="1" 
                     @afterRead="handleAvatarUpload"
                     @delete="handleAvatarDelete" 
                     width="160" 
                     height="160" 
                     preview-full-image>
            </u-upload>
          </view>

          <view class="form-item">
            <text class="form-label">姓名：</text>
            <u-input v-model="formData.name" placeholder="请输入姓名" border="bottom"></u-input>
          </view>

          <view class="form-item">
            <text class="form-label">简介：</text>
            <u-input 
                    v-model="formData.bio" 
                    type="textarea" 
                    placeholder="请输入简介" 
                    :maxlength="200"
                    height="320">
            </u-input>
          </view>
        </view>
      </view>
    </u-modal>

    <Footer></Footer>
  </view>
</template>

<script>
import Footer from '@/components/footer_common.vue';
import { get, post } from '@/utils/request';
import { IMAGE_BASE_URL, BASE_URL } from '@/utils/config';

export default {
  components: {
    Footer
  },
  data() {
    return {
      isLogin: false,
      showEditModal: false,
      showPhoneButton: false,
      avatarList: [],
      formData: {
        name: "",
        bio: "",
      },
      userInfo: {
        nickName: "",
        avatarUrl: "",
        bio: "",
        phone: ""
      },
      choseList: [
        {
          key: 1,
          url: "/static/imgs/service/service_list.png",
          name: '全部工单',
          pageUrl: 'myTickets'
        },
        {
          key: 2,
          url: "/static/imgs/service/service_help.png",
          name: '我的求助',
          pageUrl: 'mySeekHelp'
        },
        {
          key: 3,
          url: "/static/imgs/service/service_service.png",
          name: '周边服务',
          pageUrl: 'neighbor'
        },
        {
          key: 4,
          url: "/static/imgs/service/service_friend.png",
          name: '共享空间预约',
          pageUrl: 'meetingList'
        },
        {
          key: 5,
          url: "/static/imgs/service/service_notice.png",
          name: '设置',
          pageUrl: 'serviceNoticeList'
        },
        {
          key: 6,
          url: "/static/imgs/service/service_phone.png",
          name: '联系社区',
        },
      ],
    }
  },
  onShow() {
    this.initData();
  },
  methods: {
    // 初始化数据
    async initData() {
      const token = uni.getStorageSync('token');
      if (token) {
        try {
          const res = await get('/api/v1/app_auth/mine');
          if (res && res.success) {
            uni.setStorageSync('userInfo', res.data);
            this.updateUserInfo(res.data);
            this.isLogin = true;
          } else {
            this.clearUserData();
          }
        } catch (err) {
          console.error('获取用户信息失败:', err);
          this.clearUserData();
        }
      } else {
        this.clearUserData();
      }
    },
    
    // 更新用户信息
    updateUserInfo(data) {
      this.userInfo = {
        nickName: data.name || data.nickName || '未命名用户',
        avatarUrl: data.avatar || data.avatarUrl || '/static/imgs/index/nav.png',
        bio: data.introduce || data.bio || '这家伙很懒，什么都没有写~',
        phone: data.phone || ''
      };
      
      this.formData = {
        name: this.userInfo.nickName,
        bio: this.userInfo.bio
      };
      
      if (this.userInfo.avatarUrl) {
        this.avatarList = [{ url: this.userInfo.avatarUrl }];
      }
    },
    
    // 清除用户数据
    clearUserData() {
      this.isLogin = false;
      this.userInfo = {
        nickName: '未登录用户',
        avatarUrl: '/static/imgs/index/nav.png',
        bio: '这家伙很懒，什么都没有写~'
      };
      this.formData = { name: '', bio: '' };
      this.avatarList = [];
      uni.removeStorageSync('token');
      uni.removeStorageSync('userInfo');
    },

    // 处理编辑点击
    handleEditClick() {
      if (!this.isLogin) {
        this.showEditModal = true;
        return;
      }
      
      // 已登录时填充表单数据
      this.formData = {
        name: this.userInfo.nickName,
        bio: this.userInfo.bio
      };
      
      if (this.userInfo.avatarUrl) {
        this.avatarList = [{ url: this.userInfo.avatarUrl }];
      } else {
        this.avatarList = [];
      }
      
      this.showEditModal = true;
    },

    // 获取用户信息
    onGetUserInfo(e) {
      if (e.detail.userInfo) {
        this.userInfo.nickName = e.detail.userInfo.nickName;
        this.userInfo.avatarUrl = e.detail.userInfo.avatarUrl;
        this.wxLogin();
      } else {
        uni.showToast({
          title: '您拒绝了授权',
          icon: 'none'
        });
        this.showEditModal = false;
      }
    },
    
    // 微信登录获取code
    wxLogin() {
      uni.showLoading({ title: '登录中...' });
      
      uni.login({
        provider: 'weixin',
        success: (loginRes) => {
          this.sendLoginRequest(loginRes.code);
        },
        fail: (err) => {
          uni.hideLoading();
          uni.showToast({
            title: '微信登录失败',
            icon: 'none'
          });
          console.error('微信登录失败:', err);
        }
      });
    },
    
    // 发送登录请求
    async sendLoginRequest(code) {
      try {
        const res = await post('/api/v1/apps/login/weixins', { code: code });
        
        if (res.success) {
          uni.setStorageSync('token', res.data.access_token);
          
          if (!res.data.phone) {
            this.showPhoneButton = true;
            uni.showToast({
              title: '请授权获取手机号',
              icon: 'none'
            });
          } else {
            await this.loginComplete(res.data);
          }
        } else {
          throw new Error(res.message || '登录失败');
        }
      } catch (err) {
        uni.hideLoading();
        uni.showToast({
          title: '登录失败，请稍后再试',
          icon: 'none'
        });
        console.error('登录接口错误:', err);
      }
    },
    
    // 获取手机号
    async getPhoneNumber(e) {
      if (e.detail.errMsg !== "getPhoneNumber:ok") {
        uni.showToast({
          title: '获取手机号失败',
          icon: 'none'
        });
        return;
      }
      
      uni.showLoading({ title: '获取手机号中...' });
      
      try {
        const res = await post('/api/v1/app_auth/weixin/bind_phone', {
          code: e.detail.code
        });
        
        if (res.success) {
          await this.loginComplete(res.data);
        } else {
          throw new Error(res.message || '绑定手机号失败');
        }
      } catch (err) {
        uni.hideLoading();
        uni.showToast({
          title: '绑定手机号失败',
          icon: 'none'
        });
        console.error('绑定手机号失败:', err);
      }
    },
    
    // 登录完成处理
    async loginComplete(data) {
      try {
        // 获取最新用户信息
        const res = await get('/api/v1/app_auth/mine');
        if (res && res.success) {
          uni.setStorageSync('userInfo', res.data);
          this.updateUserInfo(res.data);
          this.isLogin = true;
          this.showEditModal = false;
          this.showPhoneButton = false;
          uni.showToast({ title: '登录成功' });
        } else {
          throw new Error(res.message || '获取用户信息失败');
        }
      } catch (err) {
        uni.showToast({
          title: '登录失败: ' + err.message,
          icon: 'none'
        });
        console.error('登录完成处理失败:', err);
      }
    },

    // 上传头像
    async handleAvatarUpload(event) {
      if (!this.isLogin) {
        this.showEditModal = true;
        return;
      }
      
      const { file } = event;
      if (!file || !file.url) return;
      
      try {
        uni.showLoading({ title: '上传中...' });
        
        // 检查文件大小
        const fileInfo = await new Promise((resolve, reject) => {
          uni.getFileInfo({
            filePath: file.url,
            success: resolve,
            fail: reject
          });
        });
        
        if (fileInfo.size > 2 * 1024 * 1024) {
          throw new Error('图片大小不能超过2MB');
        }
        
        const avatarUrl = await this.uploadAvatar(file.url);
        this.avatarList = [{ url: avatarUrl }];
        this.userInfo.avatarUrl = avatarUrl;
        
        uni.hideLoading();
      } catch (error) {
        uni.hideLoading();
        uni.showToast({
          title: '头像上传失败: ' + error.message,
          icon: 'none'
        });
      }
    },
    
    // 上传头像到服务器
    uploadAvatar(filePath) {
      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url: `${BASE_URL}/api/v1/upload`,
          filePath: filePath,
          name: 'file',
          header: {
            'Authorization': `Bearer ${uni.getStorageSync('token')}`
          },
          success: (uploadRes) => {
            try {
              const res = JSON.parse(uploadRes.data);
              if (res && res.success) {
                resolve(`${IMAGE_BASE_URL}${res.data}`);
              } else {
                reject(new Error(res.message || '上传失败'));
              }
            } catch (e) {
              reject(new Error('解析响应失败'));
            }
          },
          fail: (err) => {
            reject(new Error('上传失败: ' + JSON.stringify(err)));
          }
        });
      });
    },

    // 删除头像
    handleAvatarDelete() {
      this.avatarList = [];
      this.userInfo.avatarUrl = '';
    },

    // 提交表单
    async handleSubmit() {
      if (!this.isLogin) return;
      
      const { name, bio } = this.formData;
      const avatarUrl = this.avatarList.length > 0 ? this.avatarList[0].url : "";
      
      if (!name) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        });
        return;
      }
      
      uni.showLoading({ title: '提交中...' });
      
      try {
        // 1. 提交修改请求
        await post('/api/v1/app_auth/bind', {
          avatar: avatarUrl,
          introduce: bio,
          name: name
        });
        
        // 2. 获取最新用户信息
        const res = await get('/api/v1/app_auth/mine');
        if (res && res.success) {
          // 3. 更新本地存储和页面数据
          uni.setStorageSync('userInfo', res.data);
          this.updateUserInfo(res.data);
          
          uni.hideLoading();
          uni.showToast({ title: '修改成功' });
          this.showEditModal = false;
        } else {
          throw new Error(res.message || '获取用户信息失败');
        }
      } catch (err) {
        uni.hideLoading();
        uni.showToast({
          title: '修改失败: ' + (err.message || '未知错误'),
          icon: 'none'
        });
        console.error('修改失败:', err);
      }
    },

    // 取消修改
    handleCancel() {
      this.showEditModal = false;
    },

    // 跳转页面
    goPage(page) {
      if (!this.checkLogin()) {
        this.showEditModal = true;
        return;
      }

      if (page) {
        uni.navigateTo({
          url: `/pages/${page}/index`
        });
      }
    },
    
    // 检查登录状态
    checkLogin() {
      const token = uni.getStorageSync('token');
      if (!token) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        });
        return false;
      }
      return true;
    }
  }
}
</script>

<style lang="scss" scoped>
.profile-page {
  background-color: #f5f7fa;
  padding: 20rpx;
  min-height: 100vh;
  box-sizing: border-box;
  padding-bottom: 120rpx;
}

.user-info-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);

  .user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.avatar-section {
  margin-bottom: 20rpx;

  .avatar-wrapper {
    position: relative;
    width: 140rpx;
    height: 140rpx;

    .avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 4rpx solid #fff;
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
    }

    .edit-icon {
      position: absolute;
      right: 0;
      bottom: 0;
      background: #2979ff;
      width: 48rpx;
      height: 48rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    }
  }
}

.name-section {
  // display: flex;
  width: 100%;
  align-items: center;
  text-align: center;
  margin-bottom: 30rpx;

  .name {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    // margin-right: 12rpx;
  }
  .phone{
	color: #999;  
	font-size: 24rpx;
  }
	  
}

.description-card {
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 24rpx;
  width: 100%;
  text-align: center;

  .title {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 12rpx;
    display: block;
  }

  .content {
    font-size: 26rpx;
    color: #999;
    line-height: 1.5;
  }
}

.function-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 0 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);

  .button-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28rpx 0;
    border-bottom: 1rpx solid #f2f3f5;

    &:active {
      background-color: #f8f8f8;
    }

    &:last-child {
      border-bottom: none;
    }

    .button-content {
      display: flex;
      align-items: center;
      flex: 1;
    }

    .icon {
      width: 48rpx;
      height: 48rpx;
      margin-right: 24rpx;
    }

    .label {
      font-size: 30rpx;
      color: #333;
      flex: 1;
    }
  }
}

.modal-content {
  padding: 0 30rpx;
  width: 90%;
  margin: 0 auto;

  .form-item {
    margin-bottom: 40rpx;

    .form-label {
      display: block;
      font-size: 28rpx;
      color: #606266;
      margin-bottom: 16rpx;
    }
  }

  .auth-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40rpx 0;

    .auth-button {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      background: #07C160;
      color: #fff;
      font-size: 26rpx;
      border-radius: 40rpx;
      margin-bottom: 20rpx;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;

      &::after {
        border: none;
      }
              
      &.phone-button {
        background: #2979ff;
        margin-top: 20rpx;
      }
              
      &:active {
        opacity: 0.8;
      }
    } 
  }
}
</style>