<template>
  <div class="app-container">
    <div slot="header" class="card-title">付款单</div>
    <!-- 搜索工作栏 -->
    <el-card v-show="showSearch" class="card">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="100px"
        class="card"
      >
        <el-row :span="24">
          <el-form-item label="柜号:">
            <el-input
              style="max-width: 188px"
              v-model="queryParams.receiptNo"
              placeholder="请输入收款单号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="自编号:">
            <el-input
              style="max-width: 188px"
              v-model="queryParams.receiptNo"
              placeholder="请输入收款单号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="付款单号:">
            <el-input
              style="max-width: 188px"
              v-model="queryParams.receiptNo"
              placeholder="请输入收款单号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="供应商:">
            <el-select
              v-model="queryParams.supplierId"
              placeholder="请选择供应商"
            >
              <el-option
                v-for="supplier in allSupplier"
                :key="supplier.id"
                :label="supplier.companyZh"
                :value="supplier.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态:">
            <dict-selector :type="DICT_TYPE.ECW_PAYMENT_STATE" v-model="queryParams.state" />
          </el-form-item>
        </el-row>
        <el-row :span="24">
          <el-form-item label="业务员:">
            <el-select v-model="form.salesmanId" placeholder="请选择业务员">
              <el-option
                v-for="item in creatorData"
                :key="item.id"
                :label="item.nickname"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间:">
            <el-date-picker
              v-model="queryParams.beginCreateTime"
              type="datetimerange"
              value-format="yyyy-MM-dd"
              range-separator="到"
              start-placeholder="请选择日期"
              end-placeholder="请选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="发票状态:">
            <el-select
              v-model="queryParams.invoiceStatus"
              placeholder="请选择是否开票"
            >
              <el-option label="未开票" value="0" />
              <el-option label="已开票" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查找</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>
    <el-table v-loading="loadings" :data="list" border class="card">
      <el-table-column label="序号" align="center" prop="id" type="index">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="付款单号" align="center" prop="paymentNo" />
      <el-table-column label="供应商" align="center" prop="supplierName" />
      <el-table-column label="创建时间" align="center" prop="createTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最后付款时间" align="center" prop="latestPayAt">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.latestPayAt, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发票" align="center" prop="invoiceStatus">
        <template slot-scope="scope">
          <span>{{ scope.row.invoiceStatus === 0 ? '未开票' : '已开票' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <dict-tag
            :type="DICT_TYPE.ECW_PAYMENT_STATE"
            :value="scope.row.state"  
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button v-if="scope.row.state == 1 || scope.row.state == 3" size="mini" @click="handleAdd(scope.row.id)" type="text">编辑</el-button>
          <el-button v-if="scope.row.state == 1 || scope.row.state == 3" size="mini" type="text" @click="examineClick(scope.row.id)">审核</el-button>

          <el-button v-if="scope.row.state == 2" size="mini" type="text" @click="verifyCancelClick(scope.row)">反审核</el-button>
          <el-button v-if="scope.row.state == 2" size="mini" type="text" @click="verificationClick(scope.row)">核销</el-button>

          <el-button v-if="scope.row.state == 4" size="mini" type="text" @click="verificationCancelClick(scope.row)">反核销</el-button>
          <!-- <el-button v-if="scope.row.state == 3" size="mini" type="text">开票</el-button> -->
          
          <el-button size="mini" type="text" @click="toprint(scope.row.id)">打印</el-button>
          <el-button v-if="scope.row.state == 1 || scope.row.state == 3" size="mini" type="text" @click="deleteClick(scope.row)">删除</el-button>
          <!-- <el-button size="mini" type="text" @click="open = true">导出订单</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.rows"
      @pagination="getList"
    />
    <!-- 对话框(添加 / 修改) -->
    <el-dialog
      title="费用登记"
      :visible.sync="open"
      width="500px"
      style="margin-top: 20vh !important"
      append-to-body
    >
      <div
        slot="header"
        class="card-title"
        style="border-bottom: 2px solid #f8f8f8"
      >
        <span>导出账单</span>
        <i class="el-icon-close" @click="cancel"></i>
      </div>
      <div class="dialog-footer">
        <el-button type="primary" style="width: 130px" @click="submitForm"
          >国内账单</el-button
        >
        <el-button
          plain
          type="primary"
          style="width: 130px; margin: 0"
          @click="submitForm"
          >Debite note</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { userList } from "@/api/system/user";
import { DICT_TYPE } from "@/utils/dict";
import CustomerSelector from "@/components/CustomerSelector";
import { getSupplierPage } from "@/api/ecw/supplier";
import { getPaymentList, deletePayment, paymentVerification, paymentVerificationCancel, paymentVerifyCancel } from "@/api/ecw/financial"

export default {
  name: "paymentVoucher",
  components: {
    CustomerSelector,
  },
  data() {
    return {
      open: false,  
      showSearch: true,
      loadings: false,
      form: {},
      creatorData: [],
      allSupplier: [],
      list: [],
      total: 0,
      dateType: [],
      loading: "",
      // params: {
      //   page: 1,
      //   rows: 20,
      // },
      // 查询参数
      queryParams: {
        page: 1,
        rows: 20,
        dateType: null,
        date: null,
        originId: null,
        destinationId: null,
        transportId: null,
        isCargoControl: null,
        orderExceptionStatus: null,
        orderExceptionType: null,
        orderNo: null,
        consignorId: null,
        marks: null,
        prodId: null,
        productRecord: null,
        followUpSalesmanId: null,
      },
    };
  },
  created() {
    let that = this;
    userList("salesman").then((res) => (that.creatorData = res.data));
    getSupplierPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
      const { data } = res;
      this.allSupplier = data.list;
    });
    this.getList()
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 处理查询参数
      let params = { ...this.queryParams };
      this.addBeginAndEndTime(params, this.queryParams.beginCreateTime, "createTime");
      // 执行查询
      getPaymentList(params).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    stateMap(state) {
      switch (state) {
        case 1:
          return '待审核'
        case 2:
          return '已审核待核销'
        case 3:
          return '审批驳回'
        case 4:
          return '已核销'
      }
    },
    /** 新增按钮操作 */
    handleAdd(id) {
      return this.$router.push("creatPayment?id=" + id);
    },
    examineClick(id) {
      return this.$router.push("paymentExamine?id=" + id);
    },
    deleteClick(row) {
      const id = row.id;
      this.$modal.confirm('是否确认删除该付款单?').then(function() {
        return deletePayment(id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    verificationClick(row) {
      const id = row.id;
      this.$modal.confirm('您确认要核销吗？').then(function() {
        return paymentVerification(id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("核销成功");
      }).catch(() => {});
    },
    verificationCancelClick(row) {
      const id = row.id;
      this.$modal.confirm('您确认要反核销吗？').then(function() {
        return paymentVerificationCancel(id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("反核销成功");
      }).catch(() => {});
    },
    verifyCancelClick(row) {
      const id = row.id;
      this.$modal.confirm('您确认要反审核吗？').then(function() {
        return paymentVerifyCancel(id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("反审核成功");
      }).catch(() => {});
    },
    toprint(id) {
      return this.$router.push("printPaymentVoucher?id=" + id);
    },
    submitForm() {
      this.open = false;
    },
    /** 取消按钮 */
    cancel() {
      this.open = false;
    },
  },
};
</script>

 <style scoped>
.card {
  margin-top: 20px;
}
.dialog-footer {
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 160px;
}
.card-title {
  font-size: 18px;
  font-weight: bold;
}
</style>