<template>
  <div>
    <div class="searchForm">
      <searchForm
        :search="VIP_USER_SEARCH_CONFIG"
        @searchData="searchData"
        @resetData="resetData"
        class="search-box searchForm"
      />
    </div>
    <div class="gva-table-box">
      <Content
        @changePage="changePage"
        :total="total"
        v-model:tabloading="tableLoading"
        v-model:currentPage="queryParams.page"
        v-model:pageSize="queryParams.pageSize"
        :data="tableData"
        :config="VIP_USER_TABLE_CONFIG"
      >
        <template #avatar="{ row }">
          <el-image
            style="width: 60px; height: 60px"
            :src="row.avatar"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[row.avatar]"
            show-progress
            :initial-index="4"
            fit="cover"
          />
        </template>
        <template #user_label="{ row }">
          <el-tag :type="getVipLabelType(row.user_label)">
            {{ getVipLabelText(row.user_label) }}
          </el-tag>
        </template>
        <template #vip_expire_time="{ row }">
          {{ row.vip_expire_time || '-' }}
        </template>
        <template #balance="{ row }">
          {{ formatBalance(row.balance) }}
        </template>
        <template #operate="{ row }">
          <el-button type="danger" link @click="handleRemoveVip(row)">
            移除VIP
          </el-button>
        </template>
      </Content>
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import searchForm from '@/components/searchForm/index.vue'
import Content from '@/components/content/index.vue'
import { getVipUserList, removeUserVip } from '@/api/user/index.js'
import { ref, onMounted } from 'vue'
import { VIP_USER_SEARCH_CONFIG, VIP_USER_TABLE_CONFIG } from '@/config'

const tableLoading = ref(true)
const tableData = ref([])
const queryParams = ref({
  page: 1,
  pageSize: 10,
  user_id: '',
  name: ''
})
const total = ref(0)

// 搜索数据
const searchData = (data) => {
  queryParams.value.page = 1
  queryParams.value = { ...queryParams.value, ...data }
  getList()
}

// 重置数据
const resetData = () => {
  queryParams.value = {
    page: 1,
    pageSize: 10,
    user_id: '',
    name: ''
  }
  getList()
}

// 获取VIP用户列表
async function getList() {
  try {
    tableLoading.value = true
    const res = await getVipUserList(queryParams.value)
    if (res.code === 0) {
      tableData.value = res.data.list || []
      total.value = res.data.total || 0
    } else {
      ElMessage.error(res.msg || '获取VIP用户列表失败')
    }
  } catch (error) {
    console.error('获取VIP用户列表失败:', error)
    ElMessage.error('获取VIP用户列表失败')
  } finally {
    tableLoading.value = false
  }
}

// 分页处理
function changePage(data) {
  queryParams.value.page = data
  getList()
}

// 格式化余额显示
function formatBalance(balance) {
  if (!balance || balance === 0) return '0.00元'
  return (balance / 100).toFixed(2) + '元'
}

// 获取VIP等级标签类型
function getVipLabelType(userLabel) {
  const typeMap = {
    1: 'info',    // 注册会员
    2: 'warning', // VIP
    3: 'success'  // SVIP
  }
  return typeMap[userLabel] || 'info'
}

// 获取VIP等级文本
function getVipLabelText(userLabel) {
  const textMap = {
    1: '注册会员',
    2: 'VIP',
    3: 'SVIP'
  }
  return textMap[userLabel] || '未知'
}

// 移除用户VIP
async function handleRemoveVip(row) {
  try {
    await ElMessageBox.confirm(
      `确定要移除用户 "${row.nick_name}" 的VIP身份吗？此操作不可撤销。`,
      '确认移除VIP',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )

    const res = await removeUserVip({ id: row.id })
    if (res.code === 0) {
      ElMessage.success('移除VIP成功')
      getList() // 刷新列表
    } else {
      ElMessage.error(res.msg || '移除VIP失败')
    }
  } catch (error) {
    // 取消操作时不需要提示
    if (error !== 'cancel') {
      ElMessage.error('移除VIP失败')
    }
  }
}

// 页面加载时获取数据
onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.searchForm {
  margin-bottom: 20px;
}

.gva-table-box {
  background: white;
  border-radius: 4px;
  padding: 20px;
}
</style>
