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

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import { ElForm, ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import { distributeAirdrop } from '@/api/staking/index';
import { getTopCoinNames } from '@/api/system/coin';
import { AirdropDistributeForm } from '@/types/api/staking/index';

const dataFormRef = ref(ElForm);

const state = reactive({
  coinOptions: [] as { name: string; unit: string }[],
  dialog: { visible: false, loading: false },
  formData: {
    memberId: '',
    coinUnit: '',
    amount: '',
    stakingOrderId: ''
  } as AirdropDistributeForm,
  rules: {
    memberId: [{ required: true, message: '请输入用户ID', trigger: 'blur' }],
    coinUnit: [{ required: true, message: '请选择空投币种', trigger: 'change' }],
    amount: [{ required: true, message: '请输入分配金额', trigger: 'blur' }]
  }
});

const { coinOptions, dialog, formData, rules } = toRefs(state);

function fetchCoinOptions() {
  getTopCoinNames().then((res: any) => {
    const list = Array.isArray(res?.data) ? res.data : [];
    state.coinOptions = list.filter((item: { unit?: string }) => item?.unit);
  });
}

function handleDistribute() {
  state.dialog.visible = true;
  state.formData = {
    memberId: '',
    coinUnit: '',
    amount: '',
    stakingOrderId: ''
  };
}

function submitFormData() {
  dataFormRef.value.validate((valid: boolean) => {
    if (!valid) return;
    state.dialog.loading = true;
    const payload: AirdropDistributeForm = {
      memberId: Number(state.formData.memberId),
      coinUnit: state.formData.coinUnit,
      amount: state.formData.amount
    };
    if (state.formData.stakingOrderId) {
      payload.stakingOrderId = Number(state.formData.stakingOrderId);
    }
    distributeAirdrop(payload)
      .then(() => {
        ElMessage.success('分配成功，用户满足条件后可自行领取');
        state.dialog.visible = false;
      })
      .finally(() => {
        state.dialog.loading = false;
      });
  });
}

onMounted(fetchCoinOptions);
</script>

<template>
  <div class="app-container">
    <el-alert
      type="info"
      :closable="false"
      show-icon
      title="向指定用户创建待领取空投记录；用户需持有活跃质押且邀请下级 ≥ 3 人后方可领取。"
      style="margin-bottom: 16px"
    />
    <el-button type="success" :icon="Plus" @click="handleDistribute">分配空投</el-button>

    <el-dialog v-model="dialog.visible" title="分配空投" width="520px" destroy-on-close>
      <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="120px">
        <el-form-item label="用户ID" prop="memberId">
          <el-input v-model="formData.memberId" placeholder="请输入用户 memberId" />
        </el-form-item>
        <el-form-item label="空投币种" prop="coinUnit">
          <el-select
            v-model="formData.coinUnit"
            placeholder="请选择空投币种"
            filterable
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in coinOptions"
              :key="item.unit"
              :label="`${item.name} (${item.unit})`"
              :value="item.unit"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="分配金额" prop="amount">
          <el-input v-model="formData.amount" placeholder="须大于 0" />
        </el-form-item>
        <el-form-item label="质押订单ID">
          <el-input v-model="formData.stakingOrderId" placeholder="选填，关联质押订单" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialog.visible = false">取消</el-button>
        <el-button type="primary" :loading="dialog.loading" @click="submitFormData">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
