<template>
  <div class="user-balance-container">
    <!-- 顶部信息栏 -->
    <div class="page-header">
      <div class="header-left">
        <el-button @click="router.go(-1)" link class="back-btn">
          <el-icon><ArrowLeft /></el-icon> 返回
        </el-button>
        <el-divider direction="vertical" />
        <h2 class="page-title">用户余额管理</h2>
        <div class="user-info">
          <span class="user-name">{{ getCurrentUserName() }}</span>
          <span class="user-id">ID: {{ queryParams.user_id }}</span>
        </div>
      </div>
      <el-button type="primary" @click="fetchUserBalance">
        <el-icon><Refresh /></el-icon>刷新数据
      </el-button>
    </div>

    <!-- 余额卡片 -->
    <div class="balance-cards" v-loading="loading">
      <div 
        v-for="balance in balanceList" 
        :key="balance.type" 
        class="balance-card"
        :class="`balance-card-${balance.type}`"
      >
        <div class="card-header">
          <span class="balance-type">{{ getBalanceTypeName(balance.type) }}</span>
          <span class="balance-id">ID: {{ balance.id }}</span>
        </div>
        <div class="card-body">
          <div class="balance-amount">
            <span class="currency">¥</span>
            <span class="amount">{{ (balance.price / 100).toFixed(2) }}</span>
          </div>
          <div class="balance-time">更新于 {{ formatDateTime(balance.UpdatedAt) }}</div>
        </div>
        <div class="card-footer">
          <el-button size="small" @click="handleEditBalance(balance.type)">修改余额</el-button>
          <el-button size="small" @click="handleAddRecord(balance.type)">添加记录</el-button>
        </div>
      </div>
    </div>

    <!-- 余额记录 -->
    <div class="record-section">
      <div class="section-header">
        <h3 class="section-title">余额变动记录</h3>
      </div>
      <div class="table-wrapper">
        <el-table 
          :data="recordList" 
          v-loading="loading" 
          style="width: 100%"
          :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
        >
          <el-table-column prop="Id" label="记录ID" width="100" />
          <el-table-column label="余额类型" width="120">
            <template #default="{ row }">
              <el-tag size="small">{{ getBalanceTypeByRecordId(row.BalanceId) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="变动类型" width="100">
            <template #default="{ row }">
              <el-tag v-if="row.Change" type="success" size="small">增加</el-tag>
              <el-tag v-else type="danger" size="small">减少</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="变动金额" width="150">
            <template #default="{ row }">
              <span :class="row.Change ? 'amount-plus' : 'amount-minus'">
                {{ row.Change ? '+' : '-' }}¥{{ (row.Price / 100).toFixed(2) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="变动后余额" width="150">
            <template #default="{ row }">
              <span class="balance-after">¥{{ ((row.BalanceAfter || 0) / 100).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Note" label="备注" min-width="200" show-overflow-tooltip />
          <el-table-column label="支付订单ID" width="150" show-overflow-tooltip>
            <template #default="{ row }">
              <el-link v-if="row.PaymentOrderId" type="primary" :underline="false" @click="router.push({ path: '/order/list', query: { key: row.PaymentOrderId } })">{{ row.PaymentOrderId }}</el-link>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="180">
            <template #default="{ row }">
              {{ formatDateTime(row.CreatedAt) }}
            </template>
          </el-table-column>
        </el-table>
        
        <div class="pagination-wrapper">
          <el-pagination
            v-model:current-page="recordParams.page"
            v-model:page-size="recordParams.count"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="recordTotal"
            @size-change="handleRecordSizeChange"
            @current-change="handleRecordCurrentChange"
            background
          />
        </div>
      </div>
    </div>

    <!-- 修改余额对话框 -->
    <el-dialog v-model="balanceDialogVisible" title="修改用户余额" width="500px">
      <el-form ref="balanceFormRef" :model="balanceForm" :rules="balanceRules" label-width="100px">
        <el-form-item label="余额类型">
          <el-input :value="getBalanceTypeNameByApiType(balanceForm.balance_type)" disabled />
        </el-form-item>
        <el-form-item label="当前余额">
          <el-input :value="currentBalanceDisplay" disabled>
            <template #prepend>¥</template>
          </el-input>
        </el-form-item>
        <el-form-item label="变动类型" prop="state">
          <el-radio-group v-model="balanceForm.state">
            <el-radio label="add">增加</el-radio>
            <el-radio label="sub">减少</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="balanceForm.state === 'add'" label="收益入账">
          <div class="account-amount-field">
            <el-switch
              v-model="balanceForm.account_amount"
              active-text="计入 007pay"
              inactive-text="不计入"
            />
            <div class="form-tip">加款同时生成 007pay 手工入账记录，用于收益统计。</div>
          </div>
        </el-form-item>
        <el-form-item label="变动金额" prop="price">
          <el-input v-model.number="balanceForm.price" placeholder="请输入变动金额">
            <template #prepend>¥</template>
          </el-input>
        </el-form-item>
        <el-form-item label="备注" prop="note">
          <el-input v-model="balanceForm.note" type="textarea" :rows="3" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="balanceDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitBalanceForm">确定</el-button>
      </template>
    </el-dialog>

    <!-- 添加记录对话框 -->
    <el-dialog v-model="recordDialogVisible" title="添加消费记录" width="500px">
      <el-form ref="recordFormRef" :model="recordForm" :rules="recordRules" label-width="120px">
        <el-form-item label="余额类型">
          <el-input :value="getBalanceTypeNameByApiType(recordForm.balance_type)" disabled />
        </el-form-item>
        <el-form-item label="是否执行到余额" prop="apply_balance">
          <el-switch v-model="recordForm.apply_balance" active-text="是" inactive-text="否" />
        </el-form-item>
        <el-form-item label="变动类型" prop="state">
          <el-radio-group v-model="recordForm.state">
            <el-radio label="add">增加</el-radio>
            <el-radio label="sub">减少</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="变动金额" prop="price">
          <el-input v-model.number="recordForm.price" placeholder="请输入金额">
            <template #prepend>¥</template>
          </el-input>
        </el-form-item>
        <el-form-item label="支付平台订单id" prop="paymentOrderId">
          <el-input v-model="recordForm.paymentOrderId" placeholder="请输入支付平台订单ID" />
        </el-form-item>

        <el-form-item label="备注" prop="note">
          <el-input v-model="recordForm.note" type="textarea" :rows="3" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="recordDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitRecordForm">确定</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Refresh, ArrowLeft } from '@element-plus/icons-vue'
import { getUserBalanceRecord, editUserBalance, addUserConsumption, getUserBalanceCount, getUserList } from '@/api/admin/user'

const route = useRoute()
const router = useRouter()

// 余额类型映射
const userBalance = {
  entity: { name: '云钻', type: 'cloud_diamond' },
  general: { name: '云币', type: 'cloud_coin' },
  withdraw: { name: '云点', type: 'cloud_points' }
}

// 查询参数
const queryParams = reactive({
  user_id: route.query.user_id || ''
})

// 余额记录查询参数
const recordParams = reactive({
  user_id: '',
  balance_type: '', // 初始化为空字符串，避免 undefined
  page: 1,
  count: 10
})

// 状态数据
const loading = ref(false)
const balanceInfo = ref(null)
const balanceList = ref([])
const recordList = ref([])
const recordTotal = ref(0)
const userList = ref([])

// 对话框
const balanceDialogVisible = ref(false)
const recordDialogVisible = ref(false)
const balanceFormRef = ref(null)
const recordFormRef = ref(null)

// 余额表单
const balanceForm = reactive({
  user_id: '',
  balance_type: '',
  price: 0,
  state: 'add',
  note: '',
  account_amount: false
})

const balanceRules = {
  price: [
    { required: true, message: '请输入变动金额', trigger: 'blur' },
    { type: 'number', message: '请输入数字', trigger: 'blur' }
  ],
  state: [{ required: true, message: '请选择变动类型', trigger: 'change' }],
  note: [{ required: true, message: '请输入备注', trigger: 'blur' }]
}

// 记录表单
const recordForm = reactive({
  user_id: '',
  balance_type: '',
  apply_balance: false,
  price: 0,
  state: 'add',
  note: '',
  paymentOrderId: ''
})

const recordRules = {
  price: [
    { required: true, message: '请输入金额', trigger: 'blur' },
    { type: 'number', message: '请输入数字', trigger: 'blur' }
  ],
  state: [{ required: true, message: '请选择状态类型', trigger: 'change' }],
  note: [{ required: true, message: '请输入备注', trigger: 'blur' }]
}

// 当前余额显示
const currentBalanceDisplay = computed(() => {
  const balance = balanceList.value.find(b => userBalance[b.type]?.type === balanceForm.balance_type)
  return balance ? (balance.price / 100).toFixed(2) : '0.00'
})

// 获取用户列表（用于显示用户名）
const getUserListData = async () => {
  try {
    const res = await getUserList({ page: 1, count: 10, key: '' })
    if (res.data.code === 200) {
      userList.value = res.data.data.data || []
    }
  } catch (error) {
    console.error('获取用户列表错误:', error)
  }
}

// 获取当前用户名
const getCurrentUserName = () => {
  if (!queryParams.user_id) return '未知用户'
  const user = userList.value.find(u => u.UserId === queryParams.user_id)
  return user ? user.UserName : `用户${queryParams.user_id}`
}

// 获取余额类型名称
const getBalanceTypeName = (type) => {
  return userBalance[type]?.name || type
}

// 通过API类型获取余额类型名称
const getBalanceTypeNameByApiType = (apiType) => {
  const entry = Object.values(userBalance).find(b => b.type === apiType)
  return entry ? entry.name : apiType
}

// 通过记录的BalanceId获取余额类型名称
const getBalanceTypeByRecordId = (balanceId) => {
  if (!balanceId) return '未知类型'
  const balance = balanceList.value.find(b => b.id === balanceId)
  return balance ? getBalanceTypeName(balance.type) : '未知类型'
}

// 格式化时间
const formatDateTime = (dateStr) => {
  if (!dateStr) return '-'
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN', { hour12: false })
}

// 获取用户余额
const fetchUserBalance = async () => {
  if (!queryParams.user_id) {
    ElMessage.warning('缺少用户ID参数')
    return
  }

  loading.value = true
  try {
    const res = await getUserBalanceCount({ user_id: queryParams.user_id })
    if (res.data.code === 200) {
      balanceInfo.value = res.data.data
      const returnedData = Array.isArray(res.data.data) ? res.data.data : []
      
      // 定义默认余额
      const defaultBalances = [
        { id: '-', userId: queryParams.user_id, price: 0, type: 'entity', CreatedAt: new Date().toISOString(), UpdatedAt: new Date().toISOString() },
        { id: '-', userId: queryParams.user_id, price: 0, type: 'general', CreatedAt: new Date().toISOString(), UpdatedAt: new Date().toISOString() },
        { id: '-', userId: queryParams.user_id, price: 0, type: 'withdraw', CreatedAt: new Date().toISOString(), UpdatedAt: new Date().toISOString() }
      ]
      
      // 检查缺失的余额类型
      const requiredTypes = ['entity', 'general', 'withdraw']
      const missingTypes = requiredTypes.filter(type => !returnedData.some(item => item.type === type))
      
      // 初始化缺失的余额类型
      if (missingTypes.length > 0) {
        const initPromises = missingTypes.map(type => 
          editUserBalance({
            user_id: queryParams.user_id,
            balance_type: userBalance[type].type,
            price: 0,
            state: 'add',
            note: `系统自动初始化${getBalanceTypeName(type)}余额`
          })
        )
        await Promise.all(initPromises)
        
        // 重新获取余额
        const newRes = await getUserBalanceCount({ user_id: queryParams.user_id })
        if (newRes.data.code === 200) {
          const newReturnedData = Array.isArray(newRes.data.data) ? newRes.data.data : []
          balanceList.value = defaultBalances.map(defaultItem => 
            newReturnedData.find(item => item.type === defaultItem.type) || defaultItem
          )
        }
      } else {
        balanceList.value = defaultBalances.map(defaultItem => 
          returnedData.find(item => item.type === defaultItem.type) || defaultItem
        )
      }
      
      recordParams.user_id = queryParams.user_id
      fetchBalanceRecord()
    } else {
      ElMessage.error(res.data.message || '获取用户余额失败')
    }
  } catch (error) {
    console.error('获取用户余额错误:', error)
    ElMessage.error('获取用户余额失败')
  } finally {
    loading.value = false
  }
}

// 获取余额记录
const fetchBalanceRecord = async () => {
  loading.value = true
  try {
    const res = await getUserBalanceRecord(recordParams)
    if (res.data.code === 200) {
      recordList.value = res.data.data.data || []
      recordTotal.value = res.data.data.total || 0
    } else {
      ElMessage.error(res.data.message || '获取余额记录失败')
    }
  } catch (error) {
    console.error('获取余额记录错误:', error)
    ElMessage.error('获取余额记录失败')
  } finally {
    loading.value = false
  }
}

// 修改余额
const handleEditBalance = (balanceType) => {
  const apiType = userBalance[balanceType]?.type
  balanceFormRef.value?.resetFields()
  Object.assign(balanceForm, {
    user_id: queryParams.user_id,
    balance_type: apiType,
    price: 0,
    state: 'add',
    note: '',
    account_amount: false
  })
  balanceDialogVisible.value = true
}

// 添加记录
const handleAddRecord = (balanceType) => {
  const apiType = userBalance[balanceType]?.type
  recordFormRef.value?.resetFields()
  Object.assign(recordForm, {
    user_id: queryParams.user_id,
    balance_type: apiType,
    apply_balance: false,
    price: 0,
    state: 'add',
    note: '',
    paymentOrderId: ''
  })
  recordDialogVisible.value = true
}

// 提交余额修改
const submitBalanceForm = () => {
  balanceFormRef.value?.validate(async (valid) => {
    if (valid) {
      try {
        const submitData = { ...balanceForm }
        if (submitData.state !== 'add' || !submitData.account_amount) {
          delete submitData.account_amount
        }
        const res = await editUserBalance(submitData)
        if (res.data.code === 200) {
          ElMessage.success('修改成功')
          balanceDialogVisible.value = false
          fetchUserBalance()
        } else {
          ElMessage.error(res.data.message || '修改失败')
        }
      } catch (error) {
        console.error('修改余额错误:', error)
        ElMessage.error('修改失败')
      }
    }
  })
}

// 提交记录添加
const submitRecordForm = () => {
  recordFormRef.value?.validate(async (valid) => {
    if (valid) {
      try {
        const res = await addUserConsumption(recordForm)
        if (res.data.code === 200) {
          ElMessage.success('添加成功')
          recordDialogVisible.value = false
          fetchUserBalance()
        } else {
          ElMessage.error(res.data.message || '添加失败')
        }
      } catch (error) {
        console.error('添加记录错误:', error)
        ElMessage.error('添加失败')
      }
    }
  })
}

// 分页
const handleRecordSizeChange = () => {
  fetchBalanceRecord()
}

const handleRecordCurrentChange = () => {
  fetchBalanceRecord()
}

// 初始化
onMounted(() => {
  getUserListData()
  if (queryParams.user_id) {
    fetchUserBalance()
  } else {
    ElMessage.warning('缺少用户ID参数')
  }
})

// 监听路由参数变化
watch(
  () => route.query.user_id,
  (newUserId) => {
    if (newUserId && newUserId !== queryParams.user_id) {
      queryParams.user_id = newUserId
      recordParams.user_id = newUserId
      fetchUserBalance()
    }
  },
  { immediate: true }
)

watch(
  () => balanceForm.state,
  (state) => {
    if (state !== 'add') {
      balanceForm.account_amount = false
    }
  }
)
</script>

<style scoped>
.user-balance-container {
  padding: 0;
  background: #f5f7fa;
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  background: #fff;
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e4e7ed;
  margin-bottom: 24px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.back-btn {
  font-size: 14px;
  color: #606266;
}

.page-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #f5f7fa;
  border-radius: 4px;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}

.user-id {
  font-size: 13px;
  color: #909399;
}

/* 余额卡片 */
.balance-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 0 32px 24px;
}

.balance-card {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.balance-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #409eff, #66b1ff);
}

.balance-card-entity::before {
  background: linear-gradient(90deg, #67c23a, #85ce61);
}

.balance-card-general::before {
  background: linear-gradient(90deg, #409eff, #66b1ff);
}

.balance-card-withdraw::before {
  background: linear-gradient(90deg, #e6a23c, #f0c78a);
}

.balance-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.balance-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.balance-type {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.balance-id {
  font-size: 12px;
  color: #909399;
  background: #f5f7fa;
  padding: 4px 8px;
  border-radius: 4px;
}

.balance-card .card-body {
  margin-bottom: 20px;
}

.balance-amount {
  display: flex;
  align-items: baseline;
  margin-bottom: 8px;
}

.balance-amount .currency {
  font-size: 20px;
  color: #606266;
  margin-right: 4px;
}

.balance-amount .amount {
  font-size: 32px;
  font-weight: 600;
  color: #303133;
}

.balance-time {
  font-size: 13px;
  color: #909399;
}

.balance-card .card-footer {
  display: flex;
  gap: 8px;
}

.balance-card .card-footer .el-button {
  flex: 1;
}

/* 记录区域 */
.record-section {
  background: #fff;
  margin: 0 32px 32px;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  overflow: hidden;
}

.section-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e4e7ed;
}

.section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.table-wrapper {
  padding: 0;
}

.table-wrapper :deep(.el-table) {
  border: none;
}

.table-wrapper :deep(.el-table td),
.table-wrapper :deep(.el-table th) {
  border-bottom: 1px solid #f0f2f5;
}

.table-wrapper :deep(.el-table tr:hover > td) {
  background-color: #fafafa;
}

.amount-plus {
  color: #67c23a;
  font-weight: 600;
  font-size: 14px;
}

.amount-minus {
  color: #f56c6c;
  font-weight: 600;
  font-size: 14px;
}

.balance-after {
  color: #303133;
  font-weight: 500;
}

.pagination-wrapper {
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #e4e7ed;
  background: #fafafa;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.account-amount-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 响应式 */
@media (max-width: 1200px) {
  .balance-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .balance-cards {
    grid-template-columns: 1fr;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
</style>
