<script lang="ts">
export default { name: 'airdropRecord' };
</script>

<script setup lang="ts">
import { onMounted, reactive, toRefs } from 'vue';
import { Refresh, Search } from '@element-plus/icons-vue';
import { listAirdropRecords } from '@/api/staking/index';
import { AirdropRecordItem } from '@/types/api/staking/index';

const RECORD_STATUS: Record<number, { label: string; type: string }> = {
  0: { label: '待领取', type: 'info' },
  1: { label: '已发放', type: 'success' },
  2: { label: '审核中', type: 'warning' },
  3: { label: '已拒绝', type: 'danger' }
};

const state = reactive({
  loading: false,
  queryParams: {
    pageNo: 1,
    pageSize: 15,
    status: '' as number | ''
  },
  list: [] as AirdropRecordItem[],
  total: 0
});

const { loading, queryParams, list, total } = toRefs(state);

function handleQuery() {
  state.loading = true;
  const params: Record<string, unknown> = {
    pageNo: state.queryParams.pageNo,
    pageSize: state.queryParams.pageSize
  };
  if (state.queryParams.status !== '') {
    params.status = state.queryParams.status;
  }
  listAirdropRecords(params as any)
    .then(({ data }: any) => {
      state.list = data.content ?? [];
      state.total = data.totalElements ?? 0;
    })
    .finally(() => {
      state.loading = false;
    });
}

function resetQuery() {
  state.queryParams.pageNo = 1;
  state.queryParams.status = '';
  handleQuery();
}

onMounted(handleQuery);
</script>

<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item label="状态">
        <el-select v-model="queryParams.status" placeholder="全部" clearable style="width: 130px">
          <el-option label="待领取" :value="0" />
          <el-option label="已发放" :value="1" />
          <el-option label="审核中" :value="2" />
          <el-option label="已拒绝" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="list" border height="520">
      <el-table-column label="记录ID" prop="id" width="90" align="center" />
      <el-table-column label="用户ID" prop="memberId" width="100" align="center" />
      <el-table-column label="质押订单ID" prop="stakingOrderId" width="110" align="center">
        <template #default="{ row }">
          <span v-if="row.stakingOrderId">{{ row.stakingOrderId }}</span>
          <span v-else style="color:#999">-</span>
        </template>
      </el-table-column>
      <el-table-column label="币种" prop="coinUnit" width="100" align="center" />
      <el-table-column label="金额" prop="amount" min-width="130" align="center" />
      <el-table-column label="状态" prop="status" width="100" align="center">
        <template #default="{ row }">
          <el-tag :type="(RECORD_STATUS[row.status]?.type as any)" size="small">
            {{ RECORD_STATUS[row.status]?.label ?? row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="分配时间" prop="createTime" min-width="155" align="center" />
      <el-table-column label="提交时间" prop="claimTime" min-width="155" align="center">
        <template #default="{ row }">
          <span v-if="row.claimTime">{{ row.claimTime }}</span>
          <span v-else style="color:#999">-</span>
        </template>
      </el-table-column>
      <el-table-column label="审核时间" prop="auditTime" min-width="155" align="center">
        <template #default="{ row }">
          <span v-if="row.auditTime">{{ row.auditTime }}</span>
          <span v-else style="color:#999">-</span>
        </template>
      </el-table-column>
      <el-table-column label="审核备注" prop="auditRemark" min-width="160" show-overflow-tooltip>
        <template #default="{ row }">
          <span v-if="row.auditRemark">{{ row.auditRemark }}</span>
          <span v-else style="color:#999">-</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-if="total > 0"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      :total="total"
      @pagination="handleQuery"
    />
  </div>
</template>
