<template>
  <div class="app-container">
    <div style="margin-bottom:12px;display:flex;align-items:center;gap:8px">
      <span style="font-size:16px;font-weight:600">待我审批</span>
      <el-tag type="warning" size="small">共 {{ list.length }} 条</el-tag>
      <el-button size="mini" icon="el-icon-refresh" @click="getList" style="margin-left:auto">刷新</el-button>
    </div>

    <el-form :inline="true" size="small">
      <el-form-item label="业务类型">
        <el-select v-model="filterBizType" placeholder="全部" clearable style="width:160px">
          <el-option label="采购订单" value="PURCHASE_ORDER"/>
          <el-option label="客户报价" value="CLIENT_QUOTE"/>
          <el-option label="供应商报价" value="QUOTATION"/>
          <el-option label="发货单" value="DELIVERY_ORDER"/>
          <el-option label="订单异议" value="ORDER_OBJECTION"/>
        </el-select>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="filteredList" border>
      <el-table-column label="业务类型" width="140">
        <template slot-scope="s">
          <el-tag size="small">{{ s.row.bizName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="单号" prop="bizNo" width="200"/>
      <el-table-column label="金额" prop="amount" width="140" align="right">
        <template slot-scope="s">
          <span v-if="s.row.amount" style="color:#e4393c;font-weight:600">¥{{ s.row.amount }}</span>
          <span v-else style="color:#999">-</span>
        </template>
      </el-table-column>
      <el-table-column label="提交人" prop="createBy" width="120"/>
      <el-table-column label="提交时间" prop="createTime" width="180"/>
      <el-table-column label="状态" width="100" align="center">
        <template><el-tag type="warning">审批中</el-tag></template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="s">
          <el-button size="mini" type="text" style="color:#67C23A" @click="handleApprove(s.row)">通过</el-button>
          <el-button size="mini" type="text" style="color:#F56C6C" @click="handleReject(s.row)">驳回</el-button>
        </template>
      </el-table-column>
      <template slot="empty">
        <div style="padding:24px;color:#999">暂无待审批单据</div>
      </template>
    </el-table>
  </div>
</template>

<script>
import { listPending, approveBiz, rejectBiz } from "@/api/bid/approvalAction";

export default {
  name: "ApprovalPending",
  data() {
    return { loading: false, list: [], filterBizType: null };
  },
  computed: {
    filteredList() {
      if (!this.filterBizType) return this.list;
      return this.list.filter(r => r.bizType === this.filterBizType);
    }
  },
  created() { this.getList(); },
  methods: {
    getList() {
      this.loading = true;
      listPending().then(r => { this.list = r.data || []; this.loading = false; })
        .catch(() => { this.loading = false; });
    },
    handleApprove(row) {
      this.$modal.confirm(`确认通过【${row.bizName} · ${row.bizNo}】？`)
        .then(() => approveBiz(row.bizType, row.id))
        .then(() => { this.$modal.msgSuccess("审批通过"); this.getList(); });
    },
    handleReject(row) {
      this.$prompt("请输入驳回原因", "驳回", { inputPattern: /.+/, inputErrorMessage: "请填写原因" })
        .then(({ value }) => rejectBiz(row.bizType, row.id, value))
        .then(() => { this.$modal.msgSuccess("已驳回"); this.getList(); })
        .catch(() => {});
    }
  }
};
</script>
