<!-- 基础信息 -->
<template>
  <div class="baseAssetInfoPop">
    <!-- {{JSON.stringify(form)}} -->
    <div v-show="false">{{form}}</div>
    <div v-if="form.assetBasicInfoDto">
      <externalTransition :isCollapse="true" :title="$t('expressFileReceiveList.payInfoList')">
        <template slot="transition">
          <dym-form :componentList="componentList_fk" :formValue="form.assetBasicInfoDto"></dym-form>
        </template>
      </externalTransition>
      <externalTransition :isCollapse="true" :title="$t('effectDealFeedBackMain.sampleDimension')">
        <template slot="transition">
          <dym-form :componentList="componentList_cy" :formValue="form.assetBasicInfoDto"></dym-form>
        </template>
      </externalTransition>
      <externalTransition :isCollapse="true" :title="$t('effectDealFeedBackMain.intermediateState')">
        <template slot="transition">
          <dym-form :componentList="componentList_zd" :formValue="form.assetBasicInfoDto"></dym-form>
        </template>
      </externalTransition>
      <externalTransition :isCollapse="true" :title="$t('effectDealFeedBackMain.operationInformation')">
        <template slot="transition">
          <dym-form :componentList="componentList_cz" :formValue="form.assetBasicInfoDto"></dym-form>
        </template>
      </externalTransition>
    </div>
    <externalTransition :isCollapse="true" :title="$t('expressFileReceiveList.invoiceInfoList')">
      <template slot="transition">
        <data-table :columns="columnsInvoice" maxHeight="300px" ref="mydata"
                    :queryParas.sync="queryParas"
                    @sizeChange="pageChange"
                    @currentChange="pageChange">
          <template slot="paginationLeft">
            <div class="basediv">
              <span class="basefont basefontflex">{{$t('effectDealFeedBackMain.totalInvoiceAmount')}}{{moneny_1}}</span><span class="basefont">{{$t('effectDealFeedBackMain.totalReceivables')}}{{moneny_2}}</span>
            </div>
          </template>
        </data-table>
      </template>
    </externalTransition>
    <externalTransition v-if="form.assetBasicInfoDto && form.assetBasicInfoDto.assetRelatedModifyInfos" :isCollapse="true" :title="$t('effectDealFeedBackMain.payCodeModify')" class="basetop">
      <template slot="transition">
        <data-table :sourceData.sync="form.assetBasicInfoDto.assetRelatedModifyInfos" :columns="columnsPayChange" :showPage="showPage"></data-table>
      </template>
    </externalTransition>
  </div>
</template>

<script>
import externalTransition from '@/components/element/assetoutfeedback/externalTransition'
import * as format from '@/filters/index'
import { DataTable, authButton, dymForm, SelectDictionary } from 'newepoch-components'
export default {
  components: { DataTable, authButton, dymForm, externalTransition, SelectDictionary },
  props: {
    form: {
      type: Object,
      default () {
        return null
      }
    }
  },
  data () {
    return {
      queryParas: {
        pageIndex: 1,
        pageSize: 10
      },
      showPage: false,
      moneny_1: 0,
      moneny_2: 0,
      tablePayChange: [],
      tableInvoiceInformation: [],
      // form: {},
      componentList_fk: [
        {
          // 核心企业
          value: 'coreEnterpriseName',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].common.coreEnterprises,
          labelWidth: '160px',
          name: 'coreEnterpriseName',
          cols: [8, 8, 8, 8],
          prop: 'coreEnterpriseName'
        }, {
          // 付款确认书编号
          value: 'assetCode',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].common.payCode,
          labelWidth: '160px',
          name: 'assetCode',
          cols: [8, 8, 8, 8],
          prop: 'assetCode'
        }, {
          // 签约主体
          value: 'initialOwnersName',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.signingSubject,
          labelWidth: '160px',
          name: 'initialOwnersName',
          cols: [8, 8, 8, 8],
          prop: 'initialOwnersName'
        }, {
          // 计划管理人/再保理银行
          value: 'planOrBankName',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].uninvoiced.refactorBank,
          labelWidth: '160px',
          name: 'planOrBankName',
          cols: [8, 8, 8, 8],
          prop: 'planOrBankName'
        }, {
          // 项目公司名称
          value: 'debtor',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].documentSealingTaskManage.projectCompanyName,
          labelWidth: '160px',
          name: 'debtor',
          cols: [8, 8, 8, 8],
          prop: 'debtor'
        }, {
          // 供应商名称
          value: 'creditor',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].documentSealingTaskManage.supplierName,
          labelWidth: '160px',
          name: 'creditor',
          cols: [8, 8, 8, 8],
          prop: 'creditor'
        }, {
          // 期数
          value: 'specialPlanPeriods',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].documentSealingTaskManage.periodsNum,
          labelWidth: '160px',
          name: 'specialPlanPeriods',
          cols: [8, 8, 8, 8],
          prop: 'specialPlanPeriods'
        }, {
          // BIP编码
          value: 'regionCode',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.bipmas,
          labelWidth: '160px',
          name: 'regionCode',
          cols: [8, 8, 8, 8],
          prop: 'regionCode'
        }, {
          // 账款到期日
          value: 'dueDate',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].confirmationRightData.dueDate,
          labelWidth: '160px',
          name: 'dueDate',
          cols: [8, 8, 8, 8],
          prop: 'dueDate'
        }, {
          // 收款人名称
          value: 'receiverName',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].guideSheetManage.payee,
          labelWidth: '160px',
          name: 'receiverName',
          cols: [8, 8, 8, 8],
          prop: 'receiverName'
        }, {
          // 收款人开户行
          value: 'receiverBank',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.openingBank,
          labelWidth: '160px',
          name: 'receiverBank',
          cols: [8, 8, 8, 8],
          prop: 'receiverBank'
        }, {
          // 收款人银行账号
          value: 'receiverBankAccount',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].sendLoanInfo.recipientAccount,
          labelWidth: '160px',
          name: 'receiverBankAccount',
          cols: [8, 8, 8, 8],
          prop: 'receiverBankAccount'
        }, {
          // 费率
          value: 'factoringRate',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].factoringBusinessInfo.factoring_rate_je,
          labelWidth: '160px',
          name: 'factoringRate',
          cols: [8, 8, 8, 8],
          prop: 'factoringRate'
        }, {
          // 应收账款金额
          value: 'factoringMoney',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].factoringBusinessInfoQuery.accountsReceivable,
          labelWidth: '160px',
          name: 'factoringMoney',
          cols: [8, 8, 8, 8],
          prop: 'factoringMoney'
        }, {
          // 商务合同编号
          value: 'bussContractCode',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.BusinessContractNumber,
          labelWidth: '160px',
          name: 'bussContractCode',
          cols: [8, 8, 8, 8],
          prop: 'bussContractCode'
        }, {
          // 商务合同名称
          value: 'bussContractName',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.BusinessContractName,
          labelWidth: '160px',
          name: 'bussContractName',
          cols: [8, 8, 8, 8],
          prop: 'bussContractName'
        }, {
          // 合同名称
          value: 'basicContractName',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].common.nameOfTheContract,
          labelWidth: '160px',
          name: 'basicContractName',
          cols: [8, 8, 8, 8],
          prop: 'basicContractName'
        }, {
          // 合同编号
          value: 'basicContractCode',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].factoringBusinessInfo.contract_no,
          labelWidth: '160px',
          name: 'basicContractCode',
          cols: [8, 8, 8, 8],
          prop: 'basicContractCode'
        }
      ],
      componentList_cy: [
        {
          // 区域
          value: 'coreAreaName',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].factoringBusinessInfo.area,
          labelWidth: '160px',
          name: 'coreAreaName',
          cols: [8, 8, 8, 8],
          prop: 'coreAreaName'
        }, {
          // 大区域
          value: 'bigAreaName',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].feedBackMain.fourArea,
          labelWidth: '160px',
          name: 'bigAreaName',
          cols: [8, 8, 8, 8],
          prop: 'bigAreaName'
        }, {
          // 拟入池清单合同类型
          value: 'nrcContractType',
          disabled: true,
          label: this.$i18n.messages[this.$i18n.locale].feedBackMain.nrcContractType,
          labelWidth: '160px',
          name: 'nrcContractType',
          cols: [8, 8, 8, 8],
          prop: 'nrcContractType',
          componentName: 'el-input'
        }, {
          // 合同类型
          value: 'contractType',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].feedBackMain.contractTypes,
          labelWidth: '160px',
          name: 'contractType',
          cols: [8, 8, 8, 8],
          prop: 'contractType'
        }, {
          // 是否关联企业
          value: 'relationEnterpiseFlag',
          disabled: true,
          label: this.$i18n.messages[this.$i18n.locale].feedBackMain.ifsConnectCompany,
          labelWidth: '160px',
          name: 'relationEnterpiseFlag',
          cols: [8, 8, 8, 8],
          prop: 'relationEnterpiseFlag',
          componentName: 'el-input'
        }
      ],
      componentList_zd: [
        {
          // 查询状态
          value: 'queryStatus',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].effectDealFeedBackMain.queryState,
          labelWidth: '160px',
          name: 'queryStatus',
          cols: [8, 8, 8, 8],
          prop: 'queryStatus'
        }, {
          // 登记状态
          value: 'registStatus',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].effectDealFeedBackMain.registStatus,
          labelWidth: '160px',
          name: 'registStatus',
          cols: [8, 8, 8, 8],
          prop: 'registStatus'
        }
      ],
      componentList_cz: [
        {
          // 保理进度
          value: 'businessProcessStatus',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].factorRateList.factoringProgress,
          labelWidth: '160px',
          name: 'businessProcessStatus',
          cols: [8, 8, 8, 8],
          prop: 'businessProcessStatus'
        }, {
          // 是否急单
          value: 'ifsUrgent',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].effectDealFeedBackMain.ifsUrgent,
          labelWidth: '160px',
          name: 'ifsUrgent',
          cols: [8, 8, 8, 8],
          prop: 'ifsUrgent'
        }, {
          // 供应商盖章方式
          value: 'stampWay140',
          disabled: true,
          label: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.suppliersStampType,
          labelWidth: '160px',
          name: 'stampWay140',
          cols: [8, 8, 8, 8],
          prop: 'stampWay140',
          componentName: 'el-input'
        }, {
          // 项目公司盖章方式
          value: 'stampWay150',
          disabled: true,
          label: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.projectStampType,
          labelWidth: '160px',
          name: 'stampWay150',
          cols: [8, 8, 8, 8],
          prop: 'stampWay150',
          componentName: 'el-input'
        }, {
          // 客服
          value: 'customerAccountName',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.customerService,
          labelWidth: '160px',
          name: 'customerAccountName',
          cols: [8, 8, 8, 8],
          prop: 'customerAccountName'
        }, {
          // 区域专员
          value: 'regionAttacheName',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.areaCommissioner,
          labelWidth: '160px',
          name: 'regionAttacheName',
          cols: [8, 8, 8, 8],
          prop: 'regionAttacheName'
        }, {
          // 业务
          value: 'businessPersonnel',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.business,
          labelWidth: '160px',
          name: 'businessPersonnel',
          cols: [8, 8, 8, 8],
          prop: 'businessPersonnel'
        }, {
          // 单证
          value: 'danZhengName',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].effectDealFeedBackMain.documents,
          labelWidth: '160px',
          name: 'danZhengName',
          cols: [8, 8, 8, 8],
          prop: 'danZhengName'
        }, {
          // 中登
          value: 'zhongDengName',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].effectDealFeedBackMain.zhongD,
          labelWidth: '160px',
          name: 'zhongDengName',
          cols: [8, 8, 8, 8],
          prop: 'zhongDengName'
        }
      ],
      columnsInvoice: [
        {
          // 发票号码
          prop: 'invoiceNumber',
          align: 'left',
          width: '40px',
          label: this.$i18n.messages[this.$i18n.locale].invoiceAssignmentList.invoiceNumber
        }, {
          // 票据名称
          prop: 'invoiceName',
          align: 'left',
          width: '120px',
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.billName
        }, {
          // 开票日期
          prop: 'openDate',
          align: 'center',
          width: '60px',
          label: this.$i18n.messages[this.$i18n.locale].expressFileReceiveList.billingDate,
          format: (row) => {
            return format.formatCheckDatetime(row.openDate, 'yyyy-MM-dd')
          }
        }, {
          // 发票金额
          prop: 'invoiceAmount',
          align: 'right',
          width: '60px',
          label: this.$i18n.messages[this.$i18n.locale].guideSheetManage.invoiceAmount,
          format: (row) => {
            return format.thousandFilter(row.invoiceAmount)
          }
        }, {
          // 应收账款金额
          prop: 'factoringMoney',
          align: 'right',
          width: '60px',
          label: this.$i18n.messages[this.$i18n.locale].guideSheetManage.accountsReceivable,
          format: (row) => {
            return format.thousandFilter(row.factoringMoney)
          }
        }, {
          // 发票备注
          prop: 'remark',
          align: 'left',
          width: '50px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.invoiceRemarks
        }, {
          // 检验结果
          prop: 'lastCheckResult',
          align: 'left',
          width: '50px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.testResult
        }
      ],
      columnsPayChange: [
        {
          // 名称
          prop: 'columnName',
          align: 'left',
          width: '50px',
          label: this.$i18n.messages[this.$i18n.locale].effectDealFeedBackMain.columnName
        }, {
          // 修改时间
          prop: 'addTime',
          align: 'center',
          width: '50px',
          label: this.$i18n.messages[this.$i18n.locale].ladingManageList.modifyTime,
          format: (row) => {
            return format.formatCheckDatetime(row.addTime)
          }
        }, {
          // 修改前
          prop: 'preValue',
          align: 'left',
          width: '50px',
          label: this.$i18n.messages[this.$i18n.locale].factoringBusinessInfo.modify_before
        }, {
          // 修改后（当前值）
          prop: 'modifiedValue',
          align: 'left',
          width: '50px',
          label: this.$i18n.messages[this.$i18n.locale].effectDealFeedBackMain.modified
        }
      ]
    }
  },
  computed: {
    // form: {
    //   get: function () {
    //     return this.form
    //   }
    // }
    // form () {
    //   return this.form
    // }
  },
  watch: {
    // form: {
    //   deep: true,
    //   handle (n) {
    //     console.log(n)
    //   }
    // console.log('val', val)
    // this.handleCurrentChange(this.form.assetBasicInfoDto.assetRelatedInvoiceInfos)
    // }
  },
  mounted () {
    if (this.form.assetBasicInfoDto && this.form.assetBasicInfoDto.assetRelatedInvoiceInfos) {
      let a = this.form.assetBasicInfoDto.assetRelatedInvoiceInfos.reduce((a, item) => a + item.invoiceAmount, 0)
      let b = this.form.assetBasicInfoDto.assetRelatedInvoiceInfos.reduce((b, item) => b + item.factoringMoney, 0)
      this.moneny_1 = format.thousandFilter(a)
      this.moneny_2 = format.thousandFilter(b)
      this.handleCurrentChange(this.form.assetBasicInfoDto.assetRelatedInvoiceInfos)
    }
  },
  methods: {
    // 改变当前页
    handleCurrentChange (form) {
      if (form) {
        this.tablePayChange = form.slice(
          (this.queryParas.pageIndex - 1) * this.queryParas.pageSize,
          this.queryParas.pageIndex * this.queryParas.pageSize
        )
      }
      this.$refs.mydata.buildTableData(this.tablePayChange, form.length)
    },
    // 翻页
    pageChange () {
      this.handleCurrentChange(this.form.assetBasicInfoDto.assetRelatedInvoiceInfos)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/assetoutfeedback/common.scss'
</style>
