<template>
  <el-dialog title="收费明细" v-model="visible" width="900px" :close-on-click-modal="false" draggable>
    <div class="fee-header">
      <span>学号: {{ serialNumber }}</span>
      <span style="margin-left: 20px;">姓名: {{ realName }}</span>
      <el-button type="primary" size="small" style="margin-left: 20px;" @click="handleBindProject">绑定收费项目</el-button>
    </div>
    <el-table :data="feeList" v-loading="loading" stripe border style="margin-top: 15px;">
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="projectCode" label="项目代码" width="120" align="center" />
      <el-table-column prop="money" label="应缴金额" width="120" align="right">
        <template #default="{ row }">
          {{ row.money ? Number(row.money).toFixed(2) : '0.00' }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100" align="center">
        <template #default="{ row }">
          <el-tag v-if="row.status === '0'" type="info">未缴费</el-tag>
          <el-tag v-else-if="row.status === '10'" type="success">已缴费</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="payType" label="缴费方式" width="120" align="center">
        <template #default="{ row }">
          <span v-if="row.payType === '0'">-</span>
          <span v-else>{{ row.payType }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="paiedMoney" label="实缴金额" width="120" align="right">
        <template #default="{ row }">
          {{ row.paiedMoney ? Number(row.paiedMoney).toFixed(2) : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="payTime" label="缴费时间" width="180" align="center" />
      <el-table-column label="操作" align="center" fixed="right" width="180">
        <template #default="scope">
          <template v-if="scope.row.status === '0'">
            <el-button link type="primary" size="small" @click="handlePay(scope.row)">缴费</el-button>
            <el-button link type="danger" size="small" @click="handleDeleteFee(scope.row)">删除</el-button>
          </template>
          <template v-else>
            <el-button link type="warning" size="small" @click="handleCancelPay(scope.row)">取消缴费</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">关 闭</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog title="绑定收费项目" v-model="bindDialogVisible" width="500px">
    <el-form label-width="100px">
      <el-form-item label="选择项目">
        <el-select v-model="selectedProjectCodes" multiple placeholder="请选择收费项目" style="width: 100%">
          <el-option v-for="item in projectList" :key="item.projectCode" :label="item.projectName" :value="item.projectCode" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="bindDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitBind">确 定</el-button>
    </template>
  </el-dialog>

  <el-dialog title="缴费登记" v-model="payDialogVisible" width="400px">
    <el-form label-width="100px">
      <el-form-item label="缴费金额">
        <el-input-number v-model="payForm.money" :min="0" :precision="2" style="width: 100%" />
      </el-form-item>
      <el-form-item label="缴费方式">
        <el-select v-model="payForm.payType" placeholder="请选择缴费方式" style="width: 100%">
          <el-option label="现金" value="20" />
          <el-option label="银行转账" value="30" />
          <el-option label="微信" value="40" />
          <el-option label="支付宝" value="21" />
          <el-option label="其他" value="22" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="payDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitPay">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="FinanceRecruitStuFeeDetail">
import { ref, reactive } from 'vue'
import { getBySerialNumber, bindProject, payRegister, cancelPay, delObj } from '/@/api/finance/recruitStuProject';
import { getList } from '/@/api/finance/recruitProject';
import { useMessage, useMessageBox } from '/@/hooks/message';

const visible = ref(false);
const loading = ref(false);
const serialNumber = ref('');
const realName = ref('');
const feeList = ref<any[]>([]);

const bindDialogVisible = ref(false);
const projectList = ref<any[]>([]);
const selectedProjectCodes = ref<string[]>([]);

const payDialogVisible = ref(false);
const payForm = reactive({
  id: '',
  money: 0,
  payType: '',
});

const openDialog = async (stuSerialNumber: string, stuRealName: string) => {
  serialNumber.value = stuSerialNumber;
  realName.value = stuRealName;
  visible.value = true;
  await loadFeeList();
};

const loadFeeList = async () => {
  loading.value = true;
  try {
    const res = await getBySerialNumber(serialNumber.value);
    feeList.value = res?.data || [];
  } catch (err: any) {
    useMessage().error(err.msg || '获取收费明细失败');
    feeList.value = [];
  } finally {
    loading.value = false;
  }
};

const handleBindProject = async () => {
  try {
    const res = await getList({});
    projectList.value = res?.data || [];
    selectedProjectCodes.value = [];
    bindDialogVisible.value = true;
  } catch (err: any) {
    useMessage().error(err.msg || '获取收费项目失败');
  }
};

const submitBind = async () => {
  if (selectedProjectCodes.value.length === 0) {
    useMessage().warning('请选择收费项目');
    return;
  }
  try {
    await bindProject(serialNumber.value, selectedProjectCodes.value);
    useMessage().success('绑定成功');
    bindDialogVisible.value = false;
    await loadFeeList();
  } catch (err: any) {
    useMessage().error(err.msg || '绑定失败');
  }
};

const handlePay = (row: any) => {
  payForm.id = row.id;
  payForm.money = Number(row.money) || 0;
  payForm.payType = '';
  payDialogVisible.value = true;
};

const submitPay = async () => {
  if (!payForm.payType) {
    useMessage().warning('请选择缴费方式');
    return;
  }
  try {
    await payRegister(payForm.id, payForm.payType);
    useMessage().success('缴费成功');
    payDialogVisible.value = false;
    await loadFeeList();
  } catch (err: any) {
    useMessage().error(err.msg || '缴费失败');
  }
};

const handleCancelPay = async (row: any) => {
  try {
    await useMessageBox().confirm('确定要取消该缴费记录吗？', '提示', { type: 'warning' });
    await cancelPay(row.id);
    useMessage().success('取消成功');
    await loadFeeList();
  } catch {
    // 用户取消操作
  }
};

const handleDeleteFee = async (row: any) => {
  try {
    await useMessageBox().confirm('确定要删除该收费项目吗？', '提示', { type: 'warning' });
    await delObj(row.id);
    useMessage().success('删除成功');
    await loadFeeList();
  } catch {
    // 用户取消操作
  }
};

defineExpose({ openDialog });
</script>

<style scoped>
.fee-header {
  padding: 10px 0;
  font-size: 14px;
  color: #606266;
}
</style>