<template>
  <div class="app-container">
    <el-form :model="queryParams" :inline="true" size="small" label-width="90px">
      <el-form-item label="单据日期">
        <el-date-picker
          v-model="queryParams.bizDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择"
          style="width: 220px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button size="mini" icon="el-icon-refresh" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-check"
          size="mini"
          :disabled="multiple"
          @click="handleBatchDeduct"
          v-hasPermi="['erp:arap:deduct:run']"
        >批量扣款</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-refresh-left"
          size="mini"
          :disabled="multiple"
          @click="handleBatchUndeduct"
          v-hasPermi="['erp:arap:deduct:reverse']"
        >批量反扣款</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
    </el-row>

    <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="单据编号" prop="docNo" min-width="180" align="center" />
      <el-table-column label="单据类型" prop="docType" min-width="100" align="center" />
      <el-table-column label="客户编号" prop="custNo" min-width="140" align="center" />
      <el-table-column label="客户名称" prop="custName" min-width="180" align="center" />
      <el-table-column label="银行卡号" prop="bankNo" min-width="180" align="center" />
      <el-table-column label="应收金额" prop="arAmt" min-width="140" align="right" />
      <el-table-column label="单据日期" prop="docDate" min-width="120" align="center" />
      <el-table-column label="是否已扣款" min-width="120" align="center">
        <template slot-scope="scope">
          {{ String(scope.row.deducted || "0") === "1" ? "是" : "否" }}
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listDeduct, batchDeduct, batchUndeduct } from "@/api/erp/arap";

export default {
  name: "ArapDeduct",
  data() {
    return {
      loading: false,
      showSearch: true,
      total: 0,
      list: [],
      selectedRows: [],
      multiple: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        bizDate: undefined,
      },
    };
  },
  created() {
    this.queryParams.bizDate = this.parseTime(new Date(), "{y}-{m}-{d}");
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      listDeduct(this.queryParams).then((res) => {
        this.list = res.rows || [];
        this.total = res.total || 0;
        this.loading = false;
      });
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    handleReset() {
      this.queryParams.bizDate = this.parseTime(new Date(), "{y}-{m}-{d}");
      this.handleQuery();
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection || [];
      this.multiple = !this.selectedRows.length;
    },
    handleBatchDeduct() {
      if (!this.selectedRows.length) return;
      this.$modal.confirm("确认对选中条目执行批量扣款吗？").then(() => {
        return batchDeduct(this.selectedRows);
      }).then(() => {
        this.$modal.msgSuccess("批量扣款成功");
        this.getList();
      }).catch(() => {});
    },
    handleBatchUndeduct() {
      if (!this.selectedRows.length) return;
      this.$modal.confirm("确认对选中条目执行批量反扣款吗？").then(() => {
        return batchUndeduct(this.selectedRows);
      }).then(() => {
        this.$modal.msgSuccess("批量反扣款成功");
        this.getList();
      }).catch(() => {});
    },
  },
};
</script>

