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

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

const rejectFormRef = ref();

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

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

const rejectRules = {
  remark: [{ required: true, message: '请填写拒绝理由', trigger: 'blur' }]
};

function handleQuery() {
  state.loading = true;
  listAirdropAudit(state.queryParams)
    .then(({ data }: any) => {
      state.list = data.content ?? [];
      state.total = data.totalElements ?? 0;
    })
    .finally(() => {
      state.loading = false;
    });
}

function handleApprove(row: AirdropRecordItem) {
  ElMessageBox.confirm(
    `确认通过用户 ${row.memberId} 的空投申请？将发放 ${row.amount} ${row.coinUnit} 至质押账户。`,
    '审核通过',
    { type: 'warning', confirmButtonText: '通过', cancelButtonText: '取消' }
  )
    .then(() => approveAirdropAudit(row.id))
    .then((res: any) => {
      ElMessage.success(res?.message || '审核通过');
      handleQuery();
    })
    .catch(() => {});
}

function openReject(row: AirdropRecordItem) {
  state.rejectDialog.recordId = row.id;
  state.rejectDialog.remark = '';
  state.rejectDialog.visible = true;
}

function submitReject() {
  rejectFormRef.value?.validate((valid: boolean) => {
    if (!valid || state.rejectDialog.recordId == null) return;
    state.rejectDialog.loading = true;
    rejectAirdropAudit(state.rejectDialog.recordId, state.rejectDialog.remark.trim())
      .then((res: any) => {
        ElMessage.success(res?.message || '已拒绝');
        state.rejectDialog.visible = false;
        handleQuery();
      })
      .finally(() => {
        state.rejectDialog.loading = false;
      });
  });
}

onMounted(handleQuery);
</script>

<template>
  <div class="app-container">
    <el-alert
      type="info"
      :closable="false"
      show-icon
      title="用户在前台提交领取申请后，记录进入「审核中」。请核对后通过或拒绝；通过后奖励入账质押钱包可用余额。"
      class="tip-alert"
    />

    <el-form :inline="true" class="toolbar">
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="handleQuery">刷新列表</el-button>
        <el-button :icon="Refresh" @click="handleQuery">重置</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 class="text-muted">-</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="createTime" min-width="160" align="center" />
      <el-table-column label="提交时间" prop="claimTime" min-width="160" align="center">
        <template #default="{ row }">
          <span v-if="row.claimTime">{{ row.claimTime }}</span>
          <span v-else class="text-muted">-</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100" align="center">
        <template #default>
          <el-tag type="warning" size="small">审核中</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160" align="center" fixed="right">
        <template #default="{ row }">
          <el-button link type="success" @click="handleApprove(row)">通过</el-button>
          <el-button link type="danger" @click="openReject(row)">拒绝</el-button>
        </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"
    />

    <el-empty v-if="!loading && list.length === 0" description="暂无待审核申请" />

    <el-dialog
      v-model="rejectDialog.visible"
      title="拒绝空投申请"
      width="480px"
      destroy-on-close
    >
      <el-form
        ref="rejectFormRef"
        :model="rejectDialog"
        :rules="rejectRules"
        label-width="90px"
      >
        <el-form-item label="拒绝理由" prop="remark">
          <el-input
            v-model="rejectDialog.remark"
            type="textarea"
            :rows="4"
            maxlength="500"
            show-word-limit
            placeholder="请填写拒绝理由，用户可在前台查看"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="rejectDialog.visible = false">取消</el-button>
        <el-button type="danger" :loading="rejectDialog.loading" @click="submitReject">
          确认拒绝
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.tip-alert {
  margin-bottom: 16px;
}

.toolbar {
  margin-bottom: 12px;
}

.text-muted {
  color: #999;
}
</style>
