<template>
  <view class="container">
    <view class="nav-bar">
      <view class="back-btn" @click="navigateBack">
        <image src="/src/static/pic/mark/more-left.png" mode="aspectFit"></image>
      </view>
      <view class="title">{{ $t('changepwd.changepwdtitle') }}</view>
      <view class="right-placeholder"></view>
    </view>

    <!-- 选项卡切换 -->
    <view class="tabs">
      <view 
        class="tab-item" 
        :class="{active: activeTab === 'login'}" 
        @click="switchTab('login')"
      >
        {{ $t('changepwd.changeloginPassword') }}
      </view>
      <view 
        class="tab-item" 
        :class="{active: activeTab === 'transaction'}" 
        @click="switchTab('transaction')"
      >
        {{ $t('changepwd.changetransactionPassword') }}
      </view>
    </view>

    <!-- 登录密码修改 -->
    <view class="form-container" v-if="activeTab === 'login'">
      <view class="form-item">
        <text class="label">{{$t('changepwd.oldLoginPwd')}}</text>
        <input 
          class="input" 
          type="password" 
          v-model="loginForm.oldPassword" 
          :placeholder="$t('changepwd.oldLoginPwdPlaceholder')" 
          placeholder-class="placeholder"
        />
      </view>
      
      <view class="form-item">
        <text class="label">{{$t('changepwd.newLoginPwd')}}</text>
        <input 
          class="input" 
          type="password" 
          v-model="loginForm.newPassword" 
          :placeholder="$t('changepwd.newLoginPwdPlaceholder')" 
          placeholder-class="placeholder"
        />
      </view>
      
      <view class="form-item">
        <text class="label">{{$t('changepwd.confirmLoginPwd')}}</text>
        <input 
          class="input" 
          type="password" 
          v-model="loginForm.confirmPassword" 
          :placeholder="$t('changepwd.confirmLoginPwdPlaceholder')" 
          placeholder-class="placeholder"
        />
      </view>
      
      <button class="submit-btn" @click="handleLoginSubmit">{{ $t('changepwd.confirmupdate') }}</button>
    </view>

    <!-- 交易密码修改 -->
    <view class="form-container" v-if="activeTab === 'transaction'">
      <view class="form-item">
        <text class="label">{{$t('changepwd.oldTransactionPwd')}}</text>
        <input 
          class="input" 
          type="password" 
          v-model="transactionForm.oldPassword" 
          :placeholder="$t('changepwd.oldTransactionPwdPlaceholder')" 
          placeholder-class="placeholder"
        />
      </view>
      
      <view class="form-item">
        <text class="label">{{$t('changepwd.newTransactionPwd')}}</text>
        <input 
          class="input" 
          type="password" 
          v-model="transactionForm.newPassword" 
          :placeholder="$t('changepwd.newTransactionPwdPlaceholder')" 
          placeholder-class="placeholder"
        />
      </view>
      
      <view class="form-item">
        <text class="label">{{$t('changepwd.confirmTransactionPwd')}}</text>
        <input 
          class="input" 
          type="password" 
          v-model="transactionForm.confirmPassword" 
          :placeholder="$t('changepwd.confirmTransactionPwdPlaceholder')" 
          placeholder-class="placeholder"
        />
      </view>
      
      <button class="submit-btn" @click="handleTransactionSubmit">{{ $t('changepwd.confirmupdate') }}</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'login', // 当前激活的选项卡
      loginForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      transactionForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    }
  },
  methods: {
    navigateBack() {
      uni.navigateBack()
    },
    
    // 切换选项卡
    switchTab(tab) {
      this.activeTab = tab
    },
    
    // 验证密码格式
    validatePassword(password, type) {
      if (!password) {
        uni.showToast({
          title: type === 'login' ? this.$t('changepwd.inputloginpwd') : this.$t('changepwd.inputtransactionpwd'),
          icon: 'none'
        })
        return false
      }
      
      if (password.length < 6) {
        uni.showToast({
          title: this.$t('changepwd.pwdlength'),
          icon: 'none'
        })
        return false
      }
      
      // 可以添加更复杂的密码规则验证
      return true
    },
    
    // 处理登录密码提交
    handleLoginSubmit() {
      if (!this.validatePassword(this.loginForm.oldPassword, 'login')) return
      if (!this.validatePassword(this.loginForm.newPassword, 'login')) return
      
      if (this.loginForm.newPassword !== this.loginForm.confirmPassword) {
        uni.showToast({
          title: this.$t('changepwd.loginpasswordNotMatch'),
          icon: 'none'
        })
        return
      }
      
      this.changePassword('login')
    },
    
    // 处理交易密码提交
    handleTransactionSubmit() {
      if (!this.validatePassword(this.transactionForm.oldPassword, 'transaction')) return
      if (!this.validatePassword(this.transactionForm.newPassword, 'transaction')) return
      
      if (this.transactionForm.newPassword !== this.transactionForm.confirmPassword) {
        uni.showToast({
          title: this.$t('changepwd.transactionpwdNotMatch'),
          icon: 'none'
        })
        return
      }
      
      this.changePassword('transaction')
    },
    
    // 修改密码API调用
    async changePassword(type) {
      uni.showLoading({
        title: this.$t('changepwd.changingPassword')
      })
      
      try {
        const formData = type === 'login' ? this.loginForm : this.transactionForm
        const url = type === 'login' ? '/api/user/changeLoginPassword' : '/api/user/changeTransactionPassword'
        
        const res = await uni.request({
          url,
          method: 'POST',
          data: {
            oldPassword: formData.oldPassword,
            newPassword: formData.newPassword
          }
        })
        
        uni.hideLoading()
        
        if (res[1].data.code === 200) {
          uni.showToast({
            title: type === 'login' ? this.$t('changepwd.changeloginpwdSuccess') : this.$t('changepwd.changetransactionpwdSuccess'),
            icon: 'success'
          })
          
          // 清空表单
          if (type === 'login') {
            this.loginForm = {
              oldPassword: '',
              newPassword: '',
              confirmPassword: ''
            }
          } else {
            this.transactionForm = {
              oldPassword: '',
              newPassword: '',
              confirmPassword: ''
            }
          }
          
          // 修改成功后返回上一页
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        } else {
          uni.showToast({
            title: res[1].data.message || this.$t('changepwd.changeFail'),
            icon: 'none'
          })
        }
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: this.$t('changepwd.requestError'),
          icon: 'none'
        })
        console.error(this.$t('changepwd.requestError'), error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.nav-bar {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
  height: 100rpx;
  padding: 0 30rpx;
  padding-top: var(--status-bar-height);
  position: relative;
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
  
  .back-btn {
    width: 40rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    
    image {
      width: 100%;
      height: 100%;
      filter: invert(1);
    }
  }
  
  .title {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    line-height: 88rpx;
    z-index: 1;
    pointer-events: none;
  }
  
  .right-placeholder {
    width: 40rpx;
    margin-left: auto;
  }
}

/* 选项卡样式 */
.tabs {
  display: flex;
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
  
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 24rpx 0;
    font-size: 32rpx;
    color: #666;
    position: relative;
    
    &.active {
      color: #007aff;
      font-weight: bold;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80rpx;
        height: 6rpx;
        background-color: #007aff;
        border-radius: 3rpx;
      }
    }
  }
}

.form-container {
  margin-top: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

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

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

.input {
  height: 80rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.placeholder {
  color: #ccc;
  font-size: 28rpx;
}

.submit-btn {
  margin-top: 60rpx;
  background-color: #007aff;
  color: #fff;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  font-size: 32rpx;
}
</style>