<template>
  <div>
    <Card :bordered="false" dis-hover class="ivu-mt" :padding="0">
      <div class="new_card_pd">
        <Form inline @submit.native.prevent>
          <FormItem label="关键词："><Input v-model="query.keyword" placeholder="任务号/用户" class="input-add" clearable /></FormItem>
          <FormItem label="状态：">
            <Select v-model="query.audit_status" class="input-add" clearable>
              <Option :value="0">待审核</Option>
              <Option :value="1">已通过</Option>
              <Option :value="2">已拒绝</Option>
            </Select>
          </FormItem>
          <FormItem><Button type="primary" @click="getList">查询</Button></FormItem>
        </Form>
      </div>
    </Card>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Table :columns="columns" :data="list" :loading="loading">
        <template slot-scope="{ row }" slot="amount">¥{{ row.net_amount }} / 应结 ¥{{ row.gross_amount }}</template>
        <template slot-scope="{ row }" slot="status">{{ ['待审核','已通过','已拒绝'][row.audit_status] }}</template>
        <template slot-scope="{ row }" slot="action">
          <Button v-if="row.audit_status == 0" size="small" type="primary" @click="audit(row, 1)">通过</Button>
          <Button v-if="row.audit_status == 0" size="small" class="ivu-ml-8" @click="audit(row, 2)">拒绝</Button>
        </template>
      </Table>
    </Card>
  </div>
</template>

<script>
import { cashoutListApi, auditCashoutApi } from '@/api/syjPromote.js';

export default {
  name: 'SyjCashout',
  data() {
    return {
      loading: false,
      list: [],
      query: { keyword: '', audit_status: 0, page: 1, limit: 20 },
      columns: [
        { title: '任务号', key: 'task_no', minWidth: 180 },
        { title: '用户', key: 'nickname', minWidth: 140 },
        { title: '到账/应结', slot: 'amount', minWidth: 160 },
        { title: '扣费', key: 'fee_amount', width: 100 },
        { title: '状态', slot: 'status', width: 100 },
        { title: '操作', slot: 'action', width: 160 }
      ]
    };
  },
  created() { this.getList(); },
  methods: {
    getList() {
      this.loading = true;
      cashoutListApi(this.query).then(res => {
        const data = res.data || res;
        this.list = data.list || [];
      }).finally(() => { this.loading = false; });
    },
    audit(row, status) {
      auditCashoutApi(row.id, { status, remark: status === 1 ? '审核通过' : '审核拒绝' }).then(() => {
        this.$Message.success('审核成功');
        this.getList();
      });
    }
  }
};
</script>
