<!--
  @description: 验收情况-发票信息弹框
  @Modifier: haofengxian
  @routerPath:
  @date: 2021-2-26-13:26
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="invoiceInfoVisibleDialog"
    :close-on-click-modal="false"
    title="发票信息"
    width="940px"
    append-to-body
    custom-class="el-dialog__body-p8 el-dialog_table"
  >
    <el-table ref="smallTable" v-loading="loading" :data="tableData">
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="60"
      />
      <el-table-column
        prop="ebeln"
        label="采购员凭证编号"
        header-align="center"
        align="center"
        min-width="150"
      />
      <el-table-column
        prop="ebelp"
        label="采购员凭证的项目编号"
        header-align="center"
        align="center"
        min-width="150"
      />
      <el-table-column
        prop="menge"
        label="发票数量"
        header-align="center"
        min-width="150"
      />
      <el-table-column
        prop="menge"
        label="以凭证货币计的金额"
        header-align="center"
        min-width="150"
      />
      <el-table-column
        prop="budtr"
        label="过账日期"
        header-align="center"
        align="center"
        min-width="150"
      />
    </el-table>
    <pagination :pagination-data="paginationData" @change="getSapAcceptanceCertificateInvoiceList" />
    <!--底部操作按钮-->
    <span slot="footer" class="dialog-footer">
      <el-button @click="invoiceInfoVisibleDialog = false">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* api*/
import { sapAcceptanceCertificateInvoiceList } from '@api/procurement/purchasplan'
import pagination from '@comp/common/pagination/pagination' // 分页组件
import { ListMixin } from '@/mixins/ListMixin' // 分页
export default {
  name: 'AcceptanceSituationinvoiceInfoDialog',
  components: {
    pagination // 分页
  },
  mixins: [ListMixin],
  data() {
    return {
      loading: true,
      invoiceInfoVisibleDialog: false,
      tableData: [],
      sapAcceptanceCertificate: {} // 验收情况行信息
    }
  },
  methods: {
    // 打开弹框查看详情
    invoiceInfoDetail(row) {
      this.sapAcceptanceCertificate = row
      this.getSapAcceptanceCertificateInvoiceList()
      this.invoiceInfoVisibleDialog = true
    },
    // Sap验收单信息列表
    getSapAcceptanceCertificateInvoiceList() {
      const params = {
        ...this.paginationData,
        ebeln: this.sapAcceptanceCertificate.ebeln, // 采购凭证编号
        ebelp: this.sapAcceptanceCertificate.ebelp // 采购凭证的项目编号
      }
      sapAcceptanceCertificateInvoiceList(params).then(res => {
        const { data: { records, total }} = res
        this.tableData = records
        this.paginationData.total = total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
