<!--供应商保理信息-->
<template>
  <div>
    <dialog-edit :visible.sync="dialogVisible" :title="$t('expressFileReceiveList.supplierFactorInfo')" width="70%" :api="api" :form="form" :editModel="editModel">
      <el-row type="flex" justify="center">
        <el-col :span="24" style="text-align: center;margin-bottom: 8px">
          <span style="text-align: center;font-size: 16px;color: #6e778f;clear: both;margin-bottom: 4px;font-weight: bold;">{{$t('expressFileReceiveList.payInfoList')}}</span>
        </el-col>
      </el-row>
      <dym-form :formValue.sync="payForm" :componentList="componentList"></dym-form>
<!--      <paymentConfirmation :assetCodeForm.sync="assetCodeForm" :initFlag="initFlag"></paymentConfirmation>-->
      <data-table :api="api" :operateBtnLayout="operateBtnLayout" :columns="columns" :loadCount.sync="loadCount" :queryParas="queryParas"
                  :menuFlag="false" :sourceData.sync="sourceData" loadPage="getInvoicesPage" @getTableData="getTableData" :headTitleFlag="true"
                  :headTitle="$t('expressFileReceiveList.invoiceInfoList')">
        <template slot="headButton">
          <el-row style="margin-top: 8px">
            <el-col :span="8">
              <el-form-item :label="$t('expressFileReceiveList.baseBusinessAffairsCode')" label-width="130px" style="margin-bottom: 0px">
                <el-input size="medium" v-model="basicContractCode" placeholder="" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('expressFileReceiveList.baseBusinessAffairs')" label-width="130px" style="margin-bottom: 0px">
                <el-input size="medium" v-model="basicContractName" placeholder="" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <template slot="paginationLeft">
          <div style="height: 100%;line-height: 32px">
            <span style="font-weight: 700;font-size: 15px">
              {{$t('expressFileReceiveList.invoiceAmountTotal')}}：{{invoiceMoneyTotal | thousandFilter}}
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              {{$t('expressFileReceiveList.accountReceivableTotal')}}：{{accountsReceivableTotal | thousandFilter}}
            </span>
          </div>
        </template>
      </data-table>
      <data-table :api="api" :operateBtnLayout="operateBtnLayout1" :columns="columns1" :loadCount.sync="loadCount1"
                  :menuFlag="false" :sourceData.sync="sourceData1" loadPage="getContractPage" :queryParas="queryParas"
                  :headTitle="$t('expressFileReceiveList.invoiceFileList')" :headTitleFlag="true">
        <el-table-column align="center" width="150px" :label="$t('common.operate')" fixed="right">
          <template slot-scope="scope">
            <btn-download size="medium" :xhr="$xhr" :store="$store" :openPerms="false" :fileID="scope.row.fileId"></btn-download>
          </template>
        </el-table-column>
      </data-table>
    </dialog-edit>
  </div>
</template>

<script>
import { DialogEdit, DataTable, dymForm, btnDownload } from 'newepoch-components'
import BaseEditPage from '@/pages/baseEditPage'
import expressApi from '@/api/expressApi'
import * as format from '@/filters/index'
export default {
  extends: new BaseEditPage(''),
  components: {
    DialogEdit,
    DataTable,
    dymForm,
    btnDownload
  },
  data () {
    return {
      supplierFactorInfo: {},
      operateBtnLayout: '',
      operateBtnLayout1: '',
      sourceData: [],
      sourceData1: [],
      loadCount: 0,
      loadCount1: 0,
      payForm: {},
      basicContractCode: '',
      basicContractName: '',
      invoiceMoneyTotal: 0,
      accountsReceivableTotal: 0,
      queryParas: {
        keyId: '',
        pageNumber: 1,
        pageSize: 10
      },
      componentList: [
        // 产品名称
        {
          label: this.$i18n.messages[this.$i18n.locale].common.productName,
          value: 'projectName',
          placeholder: '',
          cols: [8, 8, 8, 8],
          componentName: 'el-input',
          disabled: true
        },
        // 核心企业
        {
          label: this.$i18n.messages[this.$i18n.locale].common.coreEnterprises,
          value: 'coreEnterpriseName',
          placeholder: '',
          cols: [8, 8, 8, 8],
          componentName: 'el-input',
          disabled: true
        },
        // 计划管理人/再保理银行
        {
          label: this.$i18n.messages[this.$i18n.locale].common.refactorBank,
          value: 'planOrBankName',
          placeholder: '',
          cols: [8, 8, 8, 8],
          componentName: 'el-input',
          disabled: true,
          labelWidth: '160px'
        },
        // 期数
        {
          label: this.$i18n.messages[this.$i18n.locale].common.periodsNum,
          value: 'specialPlanPeriods',
          placeholder: '',
          cols: [8, 8, 8, 8],
          componentName: 'el-input',
          disabled: true
        },
        // 原始权益人
        {
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.rightsHolder,
          value: 'initialOwnersName',
          placeholder: '',
          cols: [8, 8, 8, 8],
          componentName: 'el-input',
          disabled: true
        },
        // 资产服务机构
        {
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.assetServiceOrgan,
          value: 'assetServiceName',
          placeholder: '',
          cols: [8, 8, 8, 8],
          componentName: 'el-input',
          disabled: true,
          labelWidth: '160px'
        },
        // 付款确认书编号
        {
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.payCode,
          value: 'payCode',
          placeholder: '',
          cols: [8, 8, 8, 8],
          componentName: 'el-input',
          disabled: true
        },
        // 供应商名称
        {
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.supplierName,
          value: 'suppliersName',
          placeholder: '',
          cols: [8, 8, 8, 8],
          componentName: 'el-input',
          disabled: true
        },
        // 项目公司名称
        {
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.projectCompanyName,
          value: 'projectCompanyName',
          placeholder: '',
          cols: [8, 8, 8, 8],
          componentName: 'el-input',
          disabled: true,
          labelWidth: '160px'
        },
        // 收款人名称
        {
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.payee,
          value: 'payee',
          placeholder: '',
          cols: [8, 8, 8, 8],
          componentName: 'el-input',
          disabled: true
        },
        // 收款人开户行
        {
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.payeeOpeningBank,
          value: 'beneficiaryBank',
          placeholder: '',
          cols: [8, 8, 8, 8],
          componentName: 'el-input',
          disabled: true
        },
        // 收款人银行账号
        {
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.payeeBankAccount,
          value: 'receiverBankAccount',
          placeholder: '',
          cols: [8, 8, 8, 8],
          componentName: 'el-input',
          disabled: true,
          labelWidth: '160px'
        },
        // 账款到期日
        {
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.accountDateDue,
          value: 'dueDate',
          placeholder: '',
          cols: [8, 8, 8, 8],
          componentName: 'el-input',
          disabled: true
        },
        // 应收账款金额
        {
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.accountReceivableLabel,
          value: 'accountsReceivable',
          placeholder: '',
          cols: [8, 8, 8, 8],
          componentName: 'el-input',
          disabled: true
        },
        // 商务合同名称
        {
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.businessAffairs,
          value: 'contractName',
          placeholder: '',
          cols: [8, 8, 8, 8],
          componentName: 'el-input',
          disabled: true,
          labelWidth: '160px'
        },
        // 商务合同编号
        {
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.businessAffairsCode,
          value: 'contractCode',
          placeholder: '',
          cols: [8, 8, 8, 8],
          componentName: 'el-input',
          disabled: true
        },
        // 区域
        {
          label: this.$i18n.messages[this.$i18n.locale].common.area,
          value: 'region',
          placeholder: '',
          cols: [8, 8, 8, 8],
          componentName: 'el-input',
          disabled: true
        },
        // 区域编号
        {
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.areaCode,
          value: 'regionCode',
          placeholder: '',
          cols: [8, 8, 8, 8],
          componentName: 'el-input',
          disabled: true,
          labelWidth: '160px'
        },
        // 区域专员
        {
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.areaCommissioner,
          value: 'regionAttacheName',
          placeholder: '',
          cols: [8, 8, 8, 8],
          componentName: 'el-input',
          disabled: true
        },
        // 保理专员
        {
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.factorCommissioner,
          value: 'customerServiceName',
          placeholder: '',
          cols: [8, 8, 8, 8],
          componentName: 'el-input',
          disabled: true
        }
      ],
      columns: [
        // 发票号码
        {
          prop: 'invoiceNumber',
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.invoiceNum,
          align: 'center',
          width: '200px'
        },
        // 票据名称
        {
          prop: 'invoiceName',
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.billName,
          align: 'center',
          width: '200px'
        },
        // 开票日期
        {
          prop: 'openDate',
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.billingDate,
          align: 'center',
          width: '150px',
          format: (row) => { return format.formatDateMinute(row.openDate) }
        },
        // 发票金额
        {
          prop: 'invoiceMoney',
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.invoiceAmount,
          align: 'center',
          width: '150px',
          format: (row) => { return format.thousandFilter(row.invoiceMoney) }
        },
        // 应收账款金额
        {
          prop: 'usedReceivable',
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.accountReceivable,
          align: 'center',
          width: '150px',
          format: (row) => { return format.thousandFilter(row.usedReceivable) }
        },
        // 发票备注
        {
          prop: 'invoiceRemark',
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.invoiceMemo,
          align: 'center',
          width: '150px'
        },
        // 查验结果
        {
          prop: 'checkResult',
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.checkResult,
          align: 'center',
          width: '150px'
        }
      ],
      columns1: [
        // 发票号码
        {
          prop: 'fileName',
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.fileName,
          align: 'center',
          width: '200px'
        }
      ]
    }
  },
  computed: {
    api: function () {
      return expressApi.supplierFactorInfoApi
    }
  },
  methods: {
    invoicesHandleFilter () {
      this.loadCount = this.loadCount + 1
    },
    contractHandleFilter () {
      this.loadCount1 = this.loadCount1 + 1
    },
    getTableData (datas) {
      if (datas.length > 0) {
        if (!this.UtilJs.isEmpty(datas[0].invoiceMoneyTotal)) {
          this.invoiceMoneyTotal = datas[0].invoiceMoneyTotal
        } else {
          this.invoiceMoneyTotal = 0
        }
        if (!this.UtilJs.isEmpty(datas[0].accountsReceivableTotal)) {
          this.accountsReceivableTotal = datas[0].accountsReceivableTotal
        } else {
          this.accountsReceivableTotal = 0
        }
        if (!this.UtilJs.isEmpty(datas[0].basicContractCode)) {
          this.basicContractCode = datas[0].basicContractCode
        } else {
          this.basicContractCode = ''
        }
        if (!this.UtilJs.isEmpty(datas[0].basicContractName)) {
          this.basicContractName = datas[0].basicContractName
        } else {
          this.basicContractName = ''
        }
      } else {
        this.invoiceMoneyTotal = 0
        this.accountsReceivableTotal = 0
        this.basicContractCode = ''
        this.basicContractName = ''
      }
    }
  },
  watch: {
    dialogVisible (newVal) {
      if (newVal) {
        let $this = this
        let params = { pageIndex: 1, pageSize: 10, assetCode: this.form.assetCode }
        expressApi.supplierFactorInfoApi.getPage(params).then(res => {
          if (res.success) {
            console.log(res)
            $this.payForm = res.data.datas.length > 0 ? res.data.datas[0] : {}
            // $this.payForm = res.data
            // $this.payForm.dueDate = format.formatDateString(res.data.dueDate)
            // $this.payForm.accountsReceivable = format.thousandFilter(res.data.accountsReceivable)
          } else {
            $this.error('获取付款确认书信息失败')
          }
        })
        this.queryParas.keyId = this.form.assetInfoId
        this.$nextTick(function () {
          $this.invoicesHandleFilter()
          $this.contractHandleFilter()
        })
      } else {
        this.sourceData = []
      }
    }
  }
}
</script>
