<template>
  <view class="container">
    <!-- 顶部标题栏 -->
    <view class="header">
      <text class="title">{{ $t('more.setting.title') }}</text>
    </view>
    
    <!-- 用户信息区域 -->
    <view class="user-info" @click="navigateTo('/pages/user/profile')">
      <view class="avatar">
        <image :src="userInfo.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
      </view>
      <view class="info">
        <text class="name">{{ userInfo.nickname || $t('more.nologin') }}</text>
        <text class="phone">{{userInfo.phone ? hidePhone(userInfo.phone) : $t('more.clicklogin') }}</text>
      </view>
      <view class="arrow">
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
    </view>
    
    <!-- 功能菜单列表 -->
    <view class="menu-list">
      <!-- 银行卡   路径已修改 -->
      <view class="menu-item" @click="navigateTo('/pages/more/bank')">
        <view class="item-left">
          <uni-icons type="wallet" size="20" color="#4a7dff"></uni-icons>
          <text class="text">{{ $t('more.bankcard') }}</text>
        </view>
        <view class="item-right">
          <text class="tips" v-if="userInfo.bankCardCount > 0">{{userInfo.bankCardCount}}</text>
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>
      
      <!-- 实名认证 -->
      <view class="menu-item" @click="navigateTo('/pages/more/realauth')">
        <view class="item-left">
          <uni-icons type="person" size="20" color="#4a7dff"></uni-icons>
          <text class="text">{{ $t('more.authentication') }}</text>
        </view>
        <view class="item-right">
          <text class="tips" :style="{color: userInfo.authStatus === 1 ? '#4a7dff' : '#ff5a5f'}">
            {{ $t(`auth.status_${userInfo.authStatus}`) || $t('auth.not_authenticated')  }} 
          </text>
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>
      
      <!-- 修改密码 -->
      <view class="menu-item" @click="navigateTo('/pages/more/changepwd')">
        <view class="item-left">
          <uni-icons type="locked" size="20" color="#4a7dff"></uni-icons>
          <text class="text">{{ $t('more.changePassword') }}</text>
        </view>
        <view class="item-right">
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>
      
      <!-- 在线客服 -->
      <view class="menu-item" @click="contactCustomerService">
        <view class="item-left">
          <uni-icons type="chat" size="20" color="#4a7dff"></uni-icons>
          <text class="text">{{ $t('more.customerService') }}</text>
        </view>
        <view class="item-right">
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>
      
      <!-- 语言设置 -->
      <view class="menu-item" @click="showLanguageModal = true">
        <view class="item-left">
          <uni-icons type="compose" size="20" color="#4a7dff"></uni-icons>
          <text class="text">{{ $t('more.languagesettings') }}</text>
        </view>
        <view class="item-right">
          <text class="tips">{{currentLanguageText}}</text>
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>
    </view>
    
    <!-- 退出登录按钮 -->
    <view class="logout-btn" @click="handleLogout" v-if="userInfo.isLogin">
      <text>{{ $t('more.logout')}}</text>
    </view>
    
    <!-- 语言选择弹窗 -->
    <view class="lang-modal" v-if="showLanguageModal">
      <view class="modal-mask" @click="showLanguageModal = false"></view>
      <view class="modal-content">
        <view class="modal-title">{{$t('more.selectlanguage')}}</view>
        <view class="lang-list">
          <view 
            class="lang-item" 
            v-for="(text, key) in languageOptions" 
            :key="key"
            @click="handleLanguageChange(key)"
            :class="{ 'active': userInfo.language === key }"
          >
            <text>{{ text }}</text>
            <uni-icons 
              type="checkmark" 
              size="18" 
              color="#4a7dff" 
              v-if="userInfo.language === key"
            ></uni-icons>
          </view>
        </view>
        <button class="modal-close" @click="showLanguageModal = false">
          {{ $t('more.close') }}
        </button>
      </view>
    </view>
    
  </view>
</template>

<script>
export default {
  data() {
    return {
      showLanguageModal: false,
      userInfo: {
        avatar: '/static/avatar.jpg',
        nickname: '张三',
        phone: '13800138000',
        bankCardCount: 2,
        authStatus: 1,
        language: 'zh',
        isLogin: true
      },
      languageOptions: {
        'zh': 'Chinese',
        'en': 'English',
      }
    }
  },onShow() {
    this.setTabBarI18n();
  },
  computed: {
    currentLanguageText() {
      return this.languageOptions[this.userInfo.language] || $t('more.language')
    }
  },
  methods: {

    setTabBarI18n() {
    const locale = this.$i18n.locale;
    const tabBarTexts = {
      zh: ['首页', '基金', '股票', '资产', '更多'],
      en: ['Home', 'Market', 'Trade', 'Assets', 'More']
    };
    
    uni.setTabBarItem({
      index: 0,
      text: this.$t('tabBar.index')
    });
    uni.setTabBarItem({
      index: 1,
      text: this.$t('tabBar.market')
    });
    uni.setTabBarItem({
      index: 2,
      text: this.$t('tabBar.trade')
    });
    uni.setTabBarItem({
      index: 3,
      text: this.$t('tabBar.assets')
    });
    uni.setTabBarItem({
      index: 4,
      text: this.$t('tabBar.more')
    });
  },
    // 隐藏手机号中间四位
    hidePhone(phone) {
      return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    },
    
    // 路由跳转
    navigateTo(url) {
      uni.navigateTo({
        url: url
      })
    },
    
    // 联系客服
    contactCustomerService() {
      //跳转客服页面
      // uni.navigateTo({
      //   url: '/pages/customerService/index'
      // });
    },
    
    // 退出登录
    handleLogout() {
      uni.showModal({
        title: this.$t('common.tip'),
        content: this.$t('more.confirmLogout'),
        cancelText: this.$t('more.cancelLogout'), // 取消按钮的文字  
		confirmText: this.$t('more.certainLogout'), // 确认按钮的文字
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: this.$t('common.loggingOut')
            })
            
            // 模拟退出登录
            setTimeout(() => {
              uni.hideLoading()
              this.userInfo.isLogin = false
              this.userInfo.nickname = ''
              this.userInfo.phone = ''
              uni.showToast({
                title: this.$t('common.logoutSuccess'),
                icon: 'success'
              })
              
              // 跳转到登录页
              uni.reLaunch({
                url: '/pages/login/login'
              })
            }, 1000)
          }
        }
      })
    },
    
    // 更改语言
    handleLanguageChange(lang) {
      this.userInfo.language = lang
      this.$i18n.locale = lang;
      this.showLanguageModal = false
      
      this.setTabBarI18n();

      uni.showToast({
        title: `${this.$t('more.languageChanged')}${this.languageOptions[lang]}`,
        icon: 'none'
      })
      
      // 实际项目中这里可以调用API保存语言偏好
      // this.saveLanguagePreference(lang);
      
      // 如果需要国际化，可以在这里触发语言更新
       this.$i18n.locale = lang;
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx 30rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
  box-sizing: border-box;
}

.header {
  padding: 30rpx 0;
  text-align: center;
  
  .title {
    font-size: 38rpx;
    font-weight: bold;
    color: #333;
  }
}

.user-info {
  display: flex;
  align-items: center;
  padding: 40rpx 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 30rpx;
    background-color: #f5f5f5;
    
    image {
      width: 100%;
      height: 100%;
    }
  }
  
  .info {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    .name {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .phone {
      font-size: 28rpx;
      color: #999;
    }
  }
  
  .arrow {
    margin-left: 20rpx;
  }
}

.menu-list {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 0 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100rpx;
    border-bottom: 1rpx solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .item-left {
      display: flex;
      align-items: center;
      
      .text {
        font-size: 30rpx;
        color: #333;
        margin-left: 20rpx;
      }
    }
    
    .item-right {
      display: flex;
      align-items: center;
      
      .tips {
        font-size: 26rpx;
        color: #999;
        margin-right: 10rpx;
      }
    }
    
    &:active {
      background-color: #f9f9f9;
    }
  }
}

.logout-btn {
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background-color: #fff;
  border-radius: 16rpx;
  color: #ff5a5f;
  font-size: 32rpx;
  margin-top: 40rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  
  &:active {
    background-color: #f9f9f9;
  }
}

/* 语言选择弹窗样式 */
.lang-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  width: 100%;
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;
  z-index: 1;
  animation: slide-up 0.3s ease;
}

@keyframes slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.modal-title {
  padding: 40rpx 30rpx 30rpx;
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  color: #333;
  border-bottom: 1rpx solid #f5f5f5;
}

.lang-list {
  padding: 0 30rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
  
  text {
    font-size: 30rpx;
    color: #333;
  }
  
  &.active {
    text {
      color: #4a7dff;
      font-weight: bold;
    }
  }
  
  &:active {
    background-color: #f9f9f9;
  }
}

.modal-close {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 32rpx;
  color: #333;
  background-color: transparent;
  border: none;
  border-top: 1rpx solid #f5f5f5;
  margin-top: 20rpx;
  border-radius: 0;
  padding: 0;
  
  &::after {
    border: none;
  }
  
  &:active {
    background-color: #f9f9f9;
  }
}
</style>