<template>
  <div class="user-table">
    <el-table :data="data" v-loading="loading" border stripe>
      <!-- 用户信息 -->
      <el-table-column label="用户信息" min-width="200" fixed="left">
        <template #default="{ row }">
          <div class="user-info">
            <el-avatar :src="row.avatar" :size="40">
              <el-icon><User /></el-icon>
            </el-avatar>
            <div class="user-detail">
              <div class="nickname">{{ row.nickname || '-' }}</div>
              <div class="user-id">ID: {{ row.id }}</div>
              <div class="user-uid" v-if="row.uid">UID: {{ row.uid }}</div>
              <div class="mobile" v-if="row.mobile">{{ row.mobile }}</div>
            </div>
          </div>
        </template>
      </el-table-column>

      <!-- 推荐人 -->
      <el-table-column label="推荐人" min-width="100">
        <template #default="{ row }">
          <span v-if="row.parentId">{{ row.parentId }}</span>
          <span v-else class="text-muted">-</span>
        </template>
      </el-table-column>

      <!-- 钻石 (Balance/Money) -->
      <el-table-column prop="balance" :label="balanceName" min-width="100" align="right">
        <template #default="{ row }">
          <span class="money">{{ row.balance?.toFixed(2) || '0.00' }}</span>
        </template>
      </el-table-column>

      <!-- HH币 (Integral) -->
      <el-table-column prop="integral" :label="integralName" min-width="80" align="right">
        <template #default="{ row }">
          {{ row.integral || 0 }}
        </template>
      </el-table-column>

      <!-- 哈尼券 (Diamond/Money2) -->
      <el-table-column prop="diamond" :label="diamondName" min-width="80" align="right">
        <template #default="{ row }">
          {{ row.diamond || 0 }}
        </template>
      </el-table-column>

      <!-- 消费统计 -->
      <el-table-column label="消费统计" min-width="180">
        <template #default="{ row }">
          <div class="stats-info">
            <div>总消费: <span class="money">¥{{ row.totalConsumption?.toFixed(2) || '0.00' }}</span></div>
            <div>出货价值: <span class="money">¥{{ row.shippingValue?.toFixed(2) || '0.00' }}</span></div>
            <div>盒柜价值: <span class="money">¥{{ row.boxValue?.toFixed(2) || '0.00' }}</span></div>
          </div>
        </template>
      </el-table-column>

      <!-- VIP等级 -->
      <el-table-column prop="vipLevel" label="VIP" width="80" align="center">
        <template #default="{ row }">
          <el-tag v-if="row.vipLevel > 0" type="warning" size="small">VIP{{ row.vipLevel }}</el-tag>
          <span v-else class="text-muted">-</span>
        </template>
      </el-table-column>

      <!-- 状态 -->
      <el-table-column label="状态" width="100" align="center">
        <template #default="{ row }">
          <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
            {{ row.status === 1 ? '正常' : '封禁' }}
          </el-tag>
          <el-tag v-if="row.isTest === 1" type="info" size="small" style="margin-left: 4px">测试</el-tag>
        </template>
      </el-table-column>

      <!-- 最后登录 -->
      <el-table-column label="最后登录" min-width="140">
        <template #default="{ row }">
          <div v-if="row.lastLoginIp">{{ row.lastLoginIp }}</div>
          <div class="text-muted">{{ row.createdAt }}</div>
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column label="操作" width="280" fixed="right">
        <template #default="{ row }">
          <div class="action-buttons">
            <el-dropdown trigger="click" @command="(cmd: string) => handleCommand(cmd, row)">
              <el-button type="primary" link>
                资金变动<el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="money:change">{{ balanceName }}变动</el-dropdown-item>
                  <el-dropdown-item command="integral:change">{{ integralName }}变动</el-dropdown-item>
                  <el-dropdown-item command="diamond:change">{{ diamondName }}变动</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

            <el-dropdown trigger="click" @command="(cmd: string) => handleCommand(cmd, row)">
              <el-button type="warning" link>
                状态管理<el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-if="row.status === 1" command="status:ban">封号</el-dropdown-item>
                  <el-dropdown-item v-else command="status:unban">解封</el-dropdown-item>
                  <el-dropdown-item command="status:test">设为测试账号</el-dropdown-item>
                  <el-dropdown-item command="status:clearMobile">清空手机号</el-dropdown-item>
                  <el-dropdown-item command="status:clearWechat">重置微信登录</el-dropdown-item>
                  <el-dropdown-item command="status:bindMobile">绑定手机号</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

            <el-dropdown trigger="click" @command="(cmd: string) => handleCommand(cmd, row)">
              <el-button type="success" link>
                赠送<el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="gift:coupon">赠送优惠券</el-dropdown-item>
                  <!-- 赠送卡牌功能暂时隐藏 -->
                  <!-- <el-dropdown-item command="gift:card">赠送卡牌</el-dropdown-item> -->
                </el-dropdown-menu>
              </template>
            </el-dropdown>

            <el-dropdown trigger="click" @command="(cmd: string) => handleCommand(cmd, row)">
              <el-button type="info" link>
                查看详情<el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="view:team">查看下级</el-dropdown-item>
                  <el-dropdown-item command="view:box">查看盒柜</el-dropdown-item>
                  <el-dropdown-item command="view:orders">查看订单</el-dropdown-item>
                  <el-dropdown-item command="view:moneyDetail">{{ balanceName }}流水明细</el-dropdown-item>
                  <el-dropdown-item command="view:integralDetail">{{ integralName }}流水明细</el-dropdown-item>
                  <el-dropdown-item command="view:diamondDetail">{{ diamondName }}流水明细</el-dropdown-item>
                  <el-dropdown-item command="view:ipLogs">查看IP登录列表</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="currentPageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handlePageChange"
      class="pagination"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed, onMounted } from 'vue'
import { User, ArrowDown } from '@element-plus/icons-vue'
import type { UserListItem } from '@/api/business/user'
import { getAppSetting } from '@/api/business/config'

interface Props {
  data: UserListItem[]
  loading: boolean
  total: number
  page: number
  pageSize: number
}

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'page-change', page: number): void
  (e: 'size-change', size: number): void
  (e: 'command', command: string, row: UserListItem): void
}>()

const currentPage = ref(props.page)
const currentPageSize = ref(props.pageSize)

// 应用设置
const appSetting = ref<any>({})

// 动态货币名称
const balanceName = computed(() => appSetting.value.balance_name || '钻石')
const integralName = computed(() => appSetting.value.currency1_name || 'HH币')
const diamondName = computed(() => appSetting.value.currency2_name || '哈尼券')

// 加载应用设置
const loadAppSetting = async () => {
  try {
    const res = await getAppSetting()
    if (res.data?.value) {
      appSetting.value = res.data.value
    }
  } catch (error) {
    console.error('加载应用设置失败:', error)
  }
}

onMounted(() => {
  loadAppSetting()
})

watch(() => props.page, (val) => {
  currentPage.value = val
})

watch(() => props.pageSize, (val) => {
  currentPageSize.value = val
})

const handlePageChange = (page: number) => {
  emit('page-change', page)
}

const handleSizeChange = (size: number) => {
  emit('size-change', size)
}

const handleCommand = (command: string, row: UserListItem) => {
  emit('command', command, row)
}
</script>

<style scoped>
.user-table {
  width: 100%;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nickname {
  font-weight: 500;
}

.user-id {
  font-size: 12px;
  color: #409eff;
  font-weight: 500;
}

.user-uid {
  font-size: 12px;
  color: #67c23a;
  font-weight: 500;
}

.mobile {
  font-size: 12px;
  color: #606266;
}

.money {
  color: #e6a23c;
  font-weight: 500;
}

.stats-info {
  font-size: 12px;
  line-height: 1.6;
}

.text-muted {
  color: #909399;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pagination {
  margin-top: 16px;
  justify-content: flex-end;
}
</style>
