<template>
  <div class="user-invites">
    <!-- 添加返回按钮 -->
    <div class="page-header" style="margin-bottom: 20px;">
      <el-button 
        type="primary" 
        :icon="ArrowLeft"
        @click="handleBack"
      >
        返回
      </el-button>
    </div>
    
    <!-- 标签页 -->
    <el-tabs v-model="activeTab" type="card" @tab-change="handleTabChange">
      <!-- 邀请码列表 -->
      <el-tab-pane label="邀请码列表" name="inviteCode">
        <!-- 邀请码列表内容 -->
        <div class="invite-code-section">
          <!-- 筛选和生成按钮区域 -->
          <div class="filter-section">
            <el-form :inline="true" :model="filterForm" class="filter-form">
              <el-form-item label="用户ID" v-if="false">
              <el-input v-model="filterForm.userId" placeholder="请输入用户ID" style="width: 150px;"></el-input>
            </el-form-item>
              <el-form-item label="邀请码">
                <el-input v-model="filterForm.inviteCode" placeholder="请输入邀请码" style="width: 200px;"></el-input>
              </el-form-item>
              <el-form-item label="使用状态">
                <el-select v-model="filterForm.isUsed" placeholder="请选择使用状态" style="width: 150px;">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="已使用" :value="1"></el-option>
                  <el-option label="未使用" :value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button @click="handleReset">重置</el-button>
              </el-form-item>
            </el-form>
            <el-button type="success" @click="showGenerateDialog = true">生成邀请码</el-button>
          </div>
          
          <!-- 邀请码列表 -->
          <div class="invite-table">
              <!-- stripe  -->
            <el-table 
              :data="inviteCodeList" 
              style="width: 100%"
              v-loading="loadingCode"
            >
              <el-table-column prop="id" label="ID" width="80" align="center" />
              <el-table-column prop="userNickname" label="用户名" min-width="120" align="center" />
              <el-table-column prop="userEmail" label="邮箱" min-width="180" align="center" />
              <el-table-column prop="inviteCode" label="邀请码" min-width="200" align="center" />
              <el-table-column prop="isUsed" label="使用状态" min-width="100" align="center">
                <template #default="{ row }">
                  <el-tag :type="row.isUsed ? 'success' : 'warning'">
                    {{ row.isUsed ? '已使用' : '未使用' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="invitedUserNickname" label="邀请用户" min-width="120" align="center" />
              <el-table-column prop="usedAt" label="使用时间" min-width="180" align="center">
                <template #default="{ row }">
                  {{ formatDateTime(row.usedAt) }}
                </template>
              </el-table-column>
              <el-table-column prop="createdAt" label="创建时间" min-width="180" align="center">
                <template #default="{ row }">
                  {{ formatDateTime(row.createdAt) }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120" align="center">
                <template #default="{ row }">
                  <el-button 
                    type="danger" 
                    size="small" 
                    @click="handleDeleteCode(row)"
                    :disabled="Boolean(row.isUsed)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              v-model:current-page="currentPageCode"
              v-model:page-size="pageSizeCode"
              :page-sizes="[10, 20, 50, 100]"
              :total="totalCodes"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChangeCode"
              @current-change="handleCurrentChangeCode"
            />
          </div>
        </div>
        
        <!-- 生成邀请码对话框 -->
        <el-dialog
          v-model="showGenerateDialog"
          title="生成邀请码"
          width="400px"
        >
          <el-form :model="generateForm" label-position="top">
            <el-form-item label="生成数量" required>
              <el-input-number
                v-model="generateForm.count"
                :min="1"
                :max="100"
                :step="1"
                placeholder="请输入生成数量"
              ></el-input-number>
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="showGenerateDialog = false">取消</el-button>
              <el-button type="primary" @click="handleGenerateCode">确认</el-button>
            </span>
          </template>
        </el-dialog>
        
        <!-- 删除确认对话框 -->
        <el-dialog
          v-model="showDeleteDialog"
          title="确认删除"
          width="400px"
        >
          <div>确定要删除邀请码 {{ deleteCodeInfo.inviteCode }} 吗？</div>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="showDeleteDialog = false">取消</el-button>
              <el-button type="danger" @click="confirmDeleteCode">确认删除</el-button>
            </span>
          </template>
        </el-dialog>
      </el-tab-pane>
      
      <!-- 邀请用户列表 -->
      <el-tab-pane label="邀请用户列表" name="invitedUsers">
        <!-- 列表区域 -->
        <div class="invite-table">
          <!-- stripe -->
          <el-table 
            :data="inviteList" 
            style="width: 100%"
            v-loading="loading"
          >
            <el-table-column prop="id" label="ID" width="80" align="center" />
            <el-table-column prop="nickname" label="用户名" min-width="120" align="center" />
            <el-table-column prop="email" label="邮箱" min-width="180" align="center" />
            <el-table-column prop="userRole" label="用户角色" min-width="120" align="center">
              <template #default="{ row }">
                {{ getUserRoleLabel(row.userRole) }}
              </template>
            </el-table-column>
            <el-table-column prop="createdAt" label="注册日期" min-width="160" align="center">
              <template #default="{ row }">
                {{ formatDateTime(row.createdAt) }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" min-width="100" align="center">
              <template #default="{ row }">
                <el-tag :type="getStatusTagType(row.status)">
                  {{ getStatusLabel(row.status) }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
        
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="totalInvites"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'
import { AdminOrders } from './index.js'

const route = useRoute()
const router = useRouter()
const { t } = useI18n()
const adminOrders = new AdminOrders()

// 响应式数据 - 标签页
const activeTab = ref('inviteCode')

// 响应式数据 - 邀请用户列表
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(20)
const totalInvites = ref(0)
const inviteList = ref([])
const userId = ref(route.params.id)

// 响应式数据 - 邀请码列表
const loadingCode = ref(false)
const currentPageCode = ref(1)
const pageSizeCode = ref(20)
const totalCodes = ref(0)
const inviteCodeList = ref([])

// 筛选表单数据
const filterForm = ref({
  userId: '',
  inviteCode: '',
  isUsed: ''
})

// 生成邀请码表单数据
const generateForm = ref({
  count: 1
})

// 对话框显示状态
const showGenerateDialog = ref(false)
const showDeleteDialog = ref(false)
const deleteCodeInfo = ref({})


// 获取状态标签类型
const getStatusTagType = (status) => {
  const typeMap = {
    active: 'success',
    disable: 'info',
    banned: 'danger'
  }
  return typeMap[status] || 'info'
}

// 获取状态标签文本
const getStatusLabel = (status) => {
  const labelMap = {
    active: '活跃',
    disable: '禁用',
    banned: '已封禁'
  }
  return labelMap[status] || status
}

// 获取用户角色标签
const getUserRoleLabel = (userRole) => {
  const roleMap = {
    0: '候补中',
    1: '免费会员',
    2: '达人会员'
  }
  return roleMap[userRole] || '未知角色'
}

// 格式化日期时间
const formatDateTime = (dateTimeString) => {
  if (!dateTimeString) return '-'
  const date = new Date(dateTimeString)
  return date.toLocaleString(
    t('admin.review.dateFormat') === 'en-US' ? 'en-US' : 'zh-CN', 
    {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    }
  )
}

// 获取邀请列表
const getInviteList = async () => {
  loading.value = true
  try {
    const result = await adminOrders.getUsersInvites({
      id: userId.value,
      pageSize: pageSize.value,
      pageNum: currentPage.value
    })
    inviteList.value = result.rows || []
    totalInvites.value = result.total || 0
  } catch (error) {
    console.error('获取邀请列表失败:', error)
    ElMessage.error('获取邀请列表失败')
  } finally {
    loading.value = false
  }
}

// 获取邀请码列表
const getInviteCodeList = async () => {
  loadingCode.value = true
  try {
    const result = await adminOrders.getInviteCodeList({
      id: filterForm.value.userId || userId.value,
      inviteCode: filterForm.value.inviteCode,
      isUsed: filterForm.value.isUsed,
      pageSize: pageSizeCode.value,
      pageNum: currentPageCode.value
    })
    const data = result.data;
    inviteCodeList.value = data.rows || []
    totalCodes.value = data.total || 0
  } catch (error) {
    console.error('获取邀请码列表失败:', error)
    ElMessage.error('获取邀请码列表失败')
  } finally {
    loadingCode.value = false
  }
}

// 生成邀请码
const handleGenerateCode = async () => {
  try {
    const result = await adminOrders.generateInviteCode({
      id: userId.value,
      count: generateForm.value.count
    })
    ElMessage.success('邀请码生成成功')
    showGenerateDialog.value = false
    // 重置表单
    generateForm.value.count = 1
    // 刷新邀请码列表
    getInviteCodeList()
  } catch (error) {
    console.error('生成邀请码失败:', error)
    ElMessage.error('生成邀请码失败')
  }
}

// 删除邀请码 - 显示确认对话框
const handleDeleteCode = (row) => {
  deleteCodeInfo.value = row
  showDeleteDialog.value = true
}

// 删除邀请码 - 确认删除
const confirmDeleteCode = async () => {
  try {
    const result = await adminOrders.deleteInviteCode({
      id: deleteCodeInfo.value.id
    })
    ElMessage.success('邀请码删除成功')
    showDeleteDialog.value = false
    // 刷新邀请码列表
    getInviteCodeList()
  } catch (error) {
    console.error('删除邀请码失败:', error)
    ElMessage.error('删除邀请码失败')
  }
}

// 分页处理 - 邀请用户列表
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  getInviteList()
}

const handleCurrentChange = (page) => {
  currentPage.value = page
  getInviteList()
}

// 分页处理 - 邀请码列表
const handleSizeChangeCode = (size) => {
  pageSizeCode.value = size
  currentPageCode.value = 1
  getInviteCodeList()
}

const handleCurrentChangeCode = (page) => {
  currentPageCode.value = page
  getInviteCodeList()
}

// 筛选处理
const handleSearch = () => {
  currentPageCode.value = 1
  getInviteCodeList()
}

const handleReset = () => {
  filterForm.value = {
    userId: '',
    inviteCode: '',
    isUsed: ''
  }
  currentPageCode.value = 1
  getInviteCodeList()
}

// 标签页切换处理
const handleTabChange = (tabName) => {
  if (tabName === 'inviteCode') {
    getInviteCodeList()
  } else if (tabName === 'invitedUsers') {
    getInviteList()
  }
}

// 返回上一页
const handleBack = () => {
  router.push('/admin/users')
}

// 初始化
onMounted(() => {
  // 默认加载邀请码列表
  getInviteCodeList()
})
</script>

<style scoped>
.user-invites {
  padding: 20px;
}

.invite-table {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  margin-bottom: 24px;
}

.invite-code-section {
  margin-top: 20px;
}

.filter-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
}

.filter-form {
  display: flex;
  gap: 16px;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  padding: 16px 0;
}

/* 表格样式优化 */
.invite-table :deep(.el-table) {
  width: 100% !important;
  table-layout: auto;
}

.invite-table :deep(.el-table__cell) {
  padding: 8px 12px;
  white-space: nowrap;
  vertical-align: middle;
}

.invite-table :deep(.el-table__row) {
  height: 66px;
}

.invite-table :deep(.el-table__header-wrapper) {
  background-color: #f8fafc;
}

.invite-table :deep(.el-table__header th) {
  background-color: #f8fafc;
  color: #374151;
  font-weight: 600;
  border-bottom: 2px solid #e5e7eb;
  white-space: nowrap !important;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 标签页样式 */
:deep(.el-tabs__content) {
  padding-top: 20px;
}
</style>
