<template>
  <div class="coin-exchange-page">
    <!-- 顶部标题 -->
    <div class="page-header">
      <div class="header-content">
        <div class="back-btn" @click="goBack">
          <van-icon name="arrow-left" size="20" />
        </div>
        <div class="header-title">金币兑换</div>
        <div class="record-btn" @click="goToRecord">
          兑换记录
        </div>
      </div>
    </div>

    <!-- 金币余额 -->
    <div class="balance-section">
      <div class="balance-card">
        <div class="balance-label">我的金币余额</div>
        <div class="balance-amount">{{ coinBalance }}</div>
      </div>
    </div>

    <!-- 兑换表单 -->
    <div class="exchange-form">
      <div class="form-card">
        <!-- 用户ID输入 -->
        <div class="form-item">
          <div class="form-label">输入要兑换的用户ID</div>
          <van-field v-model="userId" type="tel" placeholder="请输入6位用户ID" maxlength="6" class="user-id-input"
            @input="onUserIdInput" />
        </div>

        <!-- 用户信息显示 -->
        <div v-if="userInfo" class="user-info-section">
          <div class="user-info-card">
            <div class="user-avatar">
              <img v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar" />
              <div v-else class="avatar-placeholder">
                <van-icon name="user-o" size="24" />
              </div>
            </div>
            <div class="user-details">
              <div class="user-name">{{ userInfo.nickname || '未知用户' }}</div>
              <div class="user-id-display">ID: {{ userInfo.id }}</div>
            </div>
          </div>
        </div>

        <!-- 兑换数量输入 -->
        <div class="form-item">
          <div class="form-label">输入要兑换的金币数量</div>
          <van-field v-model="exchangeAmount" type="number" placeholder="请输入金币数量" class="exchange-input"
            @input="onExchangeAmountInput" />
        </div>

        <!-- 兑换结果显示 -->
        <div v-if="exchangeAmount && exchangeAmount > 0" class="exchange-result">
          <div class="result-item">
            <span class="result-label">兑换后获得钻石：</span>
            <span class="result-value">{{ getDiamondAmount }} 钻石</span>
          </div>
        </div>

        <!-- 确认兑换按钮 -->
        <div class="confirm-btn-container">
          <van-button type="primary" block round :disabled="!canExchange" @click="showConfirmDialog"
            class="confirm-btn">
            确认兑换（-{{ exchangeAmount || 0 }}金币）
          </van-button>
        </div>
      </div>
    </div>

    <!-- 二次确认弹窗 -->
    <van-dialog v-model="confirmDialogVisible" title="是否确认ID兑换?" show-cancel-button confirm-button-text="确认兑换"
      cancel-button-text="取消兑换" @confirm="confirmExchange" @cancel="confirmDialogVisible = false"
      class="confirm-dialog">
      <div class="confirm-content">
        <div class="confirm-user-info">
          <div class="confirm-avatar">
            <img v-if="userInfo && userInfo.avatar" :src="userInfo.avatar" class="avatar" />
            <div v-else class="avatar-placeholder">
              <van-icon name="user-o" size="32" />
            </div>
          </div>
          <div class="confirm-user-details">
            <div class="confirm-user-name">{{ userInfo ? userInfo.nickname : '用户昵称' }}</div>
            <div class="confirm-user-id">ID: {{ userInfo ? userInfo.id : userId }}</div>
          </div>
        </div>

        <div class="confirm-exchange-info">
          <div class="confirm-item">
            <span class="confirm-label">兑换的金币数量：</span>
            <span class="confirm-value">{{ exchangeAmount }}</span>
          </div>
          <div class="confirm-item">
            <span class="confirm-label">兑换后获得：</span>
            <span class="confirm-value highlight">{{ getDiamondAmount }} <van-icon name="diamond-o" size="16" /></span>
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { getUserInfo } from '@/api/user'
import { integralExchangeGoldCoinToOther } from '@/api/coin'

export default {
  name: 'CoinExchangePage',
  data() {
    return {
      coinBalance: 0, // 金币余额，从localStorage获取
      userId: '',
      userInfo: null,
      exchangeAmount: '',
      confirmDialogVisible: false,
      exchangeRate: 10 // 1金币 = 10钻石
    }
  },
  created() {
    // 从localStorage获取金币余额
    const integral = localStorage.getItem('integral')
    this.coinBalance = parseInt(integral) || 0
  },
  computed: {
    // 计算兑换后获得的钻石数量
    getDiamondAmount() {
      const amount = parseInt(this.exchangeAmount) || 0
      return amount * this.exchangeRate
    },

    // 是否可以兑换
    canExchange() {
      const amount = parseInt(this.exchangeAmount) || 0
      return this.userInfo &&
        amount > 0 &&
        amount <= this.coinBalance &&
        this.userId.length === 6
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    },

    // 跳转到兑换记录页面
    goToRecord() {
      this.$router.push('/coin-exchange-record')
    },

    // 用户ID输入处理
    async onUserIdInput() {
      // 只允许数字
      this.userId = this.userId.replace(/\D/g, '')

      // 当输入6位数字时自动搜索用户
      if (this.userId.length === 6) {
        await this.searchUser()
      } else {
        this.userInfo = null
      }
    },

    // 搜索用户信息
    async searchUser() {
      if (!this.userId || this.userId.length !== 6) {
        return
      }

      try {
        this.$toast.loading({
          message: '搜索用户中...',
          forbidClick: true,
          duration: 0
        })

        // 调用API搜索用户信息
        const res = await getUserInfo(this.userId)
        this.$toast.clear()

        if (res.data && res.data.userId) {
          this.userInfo = {
            id: res.data.userId,
            nickname: res.data.userName || '未知用户',
            avatar: res.data.avatar || ''
          }
        } else {
          this.userInfo = null
          this.$toast('未找到该用户')
        }
      } catch (error) {
        this.$toast.clear()
        this.userInfo = null
        this.$toast('搜索用户失败')
        console.error('搜索用户失败:', error)
      }
    },

    // 兑换数量输入处理
    onExchangeAmountInput() {
      // 只允许正整数
      this.exchangeAmount = this.exchangeAmount.replace(/\D/g, '')

      // 检查是否超过余额
      const amount = parseInt(this.exchangeAmount) || 0
      if (amount > this.coinBalance) {
        this.$toast('兑换数量不能超过余额')
        this.exchangeAmount = this.coinBalance.toString()
      }
    },

    // 显示确认对话框
    showConfirmDialog() {
      if (!this.canExchange) {
        if (!this.userInfo) {
          this.$toast('请先输入有效的用户ID')
        } else if (!this.exchangeAmount || this.exchangeAmount <= 0) {
          this.$toast('请输入有效的兑换数量')
        } else if (parseInt(this.exchangeAmount) > this.coinBalance) {
          this.$toast('兑换数量不能超过余额')
        }
        return
      }

      this.confirmDialogVisible = true
    },

    // 确认兑换
    async confirmExchange() {
      // 关闭弹窗
      this.confirmDialogVisible = false

      try {
        this.$toast.loading({
          message: '兑换中...',
          forbidClick: true,
          duration: 0
        })

        // 调用兑换API
        const response = await integralExchangeGoldCoinToOther(
          this.userId,
          parseInt(this.exchangeAmount)
        )

        this.$toast.clear()
        this.$toast.success('兑换成功')

        // 更新余额 - 从API返回值获取最新的integral并更新localStorage
        if (response && response.data && typeof response.data.integral !== 'undefined') {
          this.coinBalance = response.data.integral
          localStorage.setItem('integral', response.data.integral.toString())
        } else {
          // 如果API没有返回integral，则使用原来的减法逻辑
          this.coinBalance -= parseInt(this.exchangeAmount)
        }

        // 重置表单
        this.resetForm()

      } catch (error) {
        this.$toast.clear()
        this.$toast.fail('兑换失败，请重试')
        console.error('兑换失败:', error)
      }
    },

    // 重置表单
    resetForm() {
      this.userId = ''
      this.userInfo = null
      this.exchangeAmount = ''
      this.confirmDialogVisible = false
    }
  }
}
</script>

<style scoped>
.coin-exchange-page {
  min-height: 100vh;
  background-color: var(--background-color);
}

/* 页面头部 */
.page-header {
  background: var(--card-background);
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-color);
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
}

.record-btn {
  font-size: 14px;
  color: var(--primary-color);
  cursor: pointer;
  padding: 8px 12px;
}

.record-btn:hover {
  opacity: 0.8;
}

/* 余额部分 */
.balance-section {
  padding: 20px 16px;
}

.balance-card {
  background: linear-gradient(135deg, var(--primary-color), #9B59FF);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  color: white;
}

.balance-label {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 8px;
}

.balance-amount {
  font-size: 32px;
  font-weight: 700;
}

/* 表单部分 */
.exchange-form {
  padding: 0 16px 20px;
}

.form-card {
  background: var(--card-background);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.form-item {
  margin-bottom: 24px;
}

.form-label {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 12px;
}

.user-id-input,
.exchange-input {
  background: var(--input-background);
  border-radius: 12px;
}

.user-id-input :deep(.van-field__control),
.exchange-input :deep(.van-field__control) {
  font-size: 16px;
  color: var(--text-color);
  padding: 16px;
}

/* 用户信息显示 */
.user-info-section {
  margin-bottom: 24px;
}

.user-info-card {
  background: var(--secondary-color);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
  background: var(--card-background);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  color: var(--text-lighter-color);
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 4px;
}

.user-id-display {
  font-size: 14px;
  color: var(--text-lighter-color);
}

/* 兑换结果 */
.exchange-result {
  background: var(--secondary-color);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
}

.result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.result-label {
  font-size: 14px;
  color: var(--text-color);
}

.result-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--primary-color);
}

/* 确认按钮 */
.confirm-btn-container {
  margin-top: 32px;
}

.confirm-btn {
  height: 48px;
  font-size: 16px;
  font-weight: 500;
  background: var(--primary-color);
  border: none;
}

.confirm-btn:disabled {
  background: var(--text-lighter-color);
  opacity: 0.6;
}

/* 确认对话框 */
.confirm-dialog :deep(.van-dialog) {
  border-radius: 16px;
  overflow: hidden;
}

.confirm-dialog :deep(.van-dialog__header) {
  padding: 20px 24px 16px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.confirm-dialog :deep(.van-dialog__content) {
  padding: 0 24px 24px;
}

.confirm-dialog :deep(.van-dialog__footer) {
  padding: 16px 24px 24px;
  display: flex;
  gap: 12px;
}

.confirm-dialog :deep(.van-dialog__cancel) {
  flex: 1;
  background: #f5f5f5;
  color: #666;
  border: none;
  border-radius: 24px;
  height: 48px;
  font-size: 16px;
}

.confirm-dialog :deep(.van-dialog__confirm) {
  flex: 1;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 24px;
  height: 48px;
  font-size: 16px;
}

.confirm-content {
  text-align: center;
}

.confirm-user-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 24px;
  padding: 0;
}

.confirm-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-avatar .avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.confirm-user-details {
  text-align: left;
  flex: 1;
}

.confirm-user-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.confirm-user-id {
  font-size: 14px;
  color: #999;
}

.confirm-exchange-info {
  text-align: left;
}

.confirm-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0;
}

.confirm-label {
  font-size: 14px;
  color: var(--text-color);
}

.confirm-value {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
}

.confirm-value.highlight {
  color: var(--primary-color);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 响应式设计 */
@media (max-width: 375px) {
  .balance-card {
    padding: 20px;
  }

  .balance-amount {
    font-size: 28px;
  }

  .form-card {
    padding: 20px;
  }

  .confirm-user-info {
    flex-direction: column;
    text-align: center;
  }

  .confirm-avatar {
    margin-right: 0;
    margin-bottom: 12px;
  }

  .confirm-user-details {
    text-align: center;
  }
}
</style>