<template>
  <div>
    <up-down-layout :header="$t('invoiceAssignmentList.head')" :handleFlag.sync="handleFlag">
      <search-form :formValue.sync="queryParas"
                   searchPerms="search"
                   @handleFilter="handleFilter"
                   @clearParam="clearParam"
                   slot="query"
                   resetPerms="reset"
                   :componentList="componentList"></search-form>
      <template slot="table">
        <data-table :api="api"
            :headTitle = "$t('invoiceAssignmentList.tableHead')"
            selectable="false"
            :menuFlag="true"
            :queryParas="queryParas"
            :sourceData.sync="sourceData"
            :loadCount.sync="loadCount"
            :span-method="objectSpanMethod"
            :columns="columns"
            operateBtnLayout=""
            @getTableData="getTableData"
            v-bind="elHeightObj">
          <!--付款确认书编号-->
<!--          <template slot="assetCode" slot-scope="scope">-->
<!--            <expand-collapse :sourceData="sourceData" :colProp="'assetCodeLocal'"-->
<!--                             :valueProp="'assetCode'" :rowIndex="scope.data.$index"></expand-collapse>-->
<!--          </template>-->
<!--          &lt;!&ndash;转让金额(元)&ndash;&gt;-->
<!--          <template slot="usedAmount" slot-scope="scope">-->
<!--            <expand-collapse :sourceData="sourceData" :colProp="'usedAmountLocal'" :isFormat="true" :formatFun="usedAmountFun"-->
<!--                             :valueProp="'usedAmount'" :rowIndex="scope.data.$index"></expand-collapse>-->
<!--          </template>-->
<!--          &lt;!&ndash;合同名称&ndash;&gt;-->
<!--          <template slot="basicContractName" slot-scope="scope">-->
<!--            <expand-collapse :sourceData="sourceData" :colProp="'abasicContractNameLocal'"-->
<!--                             :valueProp="'basicContractName'" :rowIndex="scope.data.$index"></expand-collapse>-->
<!--          </template>-->
<!--          &lt;!&ndash;项目公司名称&ndash;&gt;-->
<!--          <template slot="planningManagerName" slot-scope="scope">-->
<!--            <expand-collapse :sourceData="sourceData" :colProp="'planningManagerNameLocal'"-->
<!--                             :valueProp="'planningManagerName'" :rowIndex="scope.data.$index"></expand-collapse>-->
<!--          </template>-->
        </data-table>
      </template>
    </up-down-layout>
  </div>
</template>
<script>
import { upDownLayout, searchForm, DataTable, ExpandCollapse, SelectFinancialInstitutions } from 'newepoch-components'
import invoiceAssignmentApi from '@/api/invoiceAssignmentApi'
import * as format from '@/filters/index'
import BasePage from '@/pages/basePage'
import mixin from '@/pages/mixin.js'

export default {
  extends: new BasePage(),
  mixins: [mixin],
  name: 'invoiceAssignment',
  components: {
    searchForm,
    upDownLayout,
    DataTable,
    ExpandCollapse
  },
  data () {
    const searchWidth = '160px'
    return {
      loadCount: 0,
      sourceData: [],
      formItem: {},
      queryParas: {},
      editModel: 'V',
      editVisible: false,
      componentList: [
        {
          // 发票号码
          label: this.$i18n.messages[this.$i18n.locale].invoiceAssignmentList.invoiceNumber,
          disabled: false,
          value: 'invoiceNo',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: searchWidth,
          clearable: true,
          componentName: 'el-input'
        },
        {
          // 供应商名称
          label: this.$i18n.messages[this.$i18n.locale].invoiceAssignmentList.suppliersName,
          disabled: false,
          value: 'creditor',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: searchWidth,
          clearable: true,
          componentName: 'el-input'
        },
        {
          // 付款确认书编号
          label: this.$i18n.messages[this.$i18n.locale].invoiceAssignmentList.payCode,
          disabled: false,
          value: 'assetCode',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: searchWidth,
          clearable: true,
          componentName: 'el-input'
        },
        {
          // 项目公司名称
          label: this.$i18n.messages[this.$i18n.locale].invoiceAssignmentList.projectCompanyName,
          disabled: false,
          value: 'debtor',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: searchWidth,
          clearable: true,
          componentName: 'el-input'
        },
        {
          // 计划管理人/再保理银行
          label: this.$i18n.messages[this.$i18n.locale].invoiceAssignmentList.planningManagerName,
          disabled: false,
          value: 'planningManagerId',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          labelWidth: searchWidth,
          clearable: true,
          componentName: SelectFinancialInstitutions
        },
        {
          // 计划管理人/再保理银行
          label: this.$i18n.messages[this.$i18n.locale].invoiceAssignmentList.basicContractName,
          disabled: false,
          value: 'basicContractName',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: searchWidth,
          clearable: true,
          componentName: 'el-input'
        }
      ],
      columns: [
        {
          // 发票号码
          prop: 'invoiceNo',
          align: 'left',
          width: '110px',
          label: this.$i18n.messages[this.$i18n.locale].invoiceAssignmentList.invoiceNumber
        },
        {
          // 发票名称
          prop: 'invoiceName',
          align: 'left',
          width: '100px',
          label: this.$i18n.messages[this.$i18n.locale].invoiceAssignmentList.invoiceName
        },
        {
          // 开票日期
          prop: 'openDate',
          align: 'center',
          width: '110px',
          label: this.$i18n.messages[this.$i18n.locale].invoiceAssignmentList.openDate,
          format: (row) => {
            return format.formatDate(row.openDate)
          }
        },
        {
          // 供应商名称
          prop: 'creditor',
          align: 'left',
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].invoiceAssignmentList.suppliersName
        },
        {
          // 发票金额(元)
          prop: 'invoiceAmount',
          align: 'right',
          width: '120px',
          label: this.$i18n.messages[this.$i18n.locale].invoiceAssignmentList.invoiceMoney,
          format: (row) => {
            if (row.invoiceAmount === 0) return ''
            return format.thousandFilter(row.invoiceAmount)
          }
        },
        {
          // 已转让金额合计(元)
          prop: 'relUsedAmount',
          align: 'right',
          width: '130px',
          label: this.$i18n.messages[this.$i18n.locale].invoiceAssignmentList.usedReceivable,
          format: (row) => {
            if (row.relUsedAmount === 0) return ''
            return format.thousandFilter(row.relUsedAmount)
          }
        },
        {
          // 剩余可转让金额(元)
          prop: 'availableAmount',
          align: 'right',
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].invoiceAssignmentList.surplusMoney,
          format: (row) => {
            if (row.availableAmount === 0) return ''
            return format.thousandFilter(row.availableAmount)
          }
        },
        {
          // 项目公司名称
          prop: 'debtor',
          align: 'left',
          width: '170px',
          label: this.$i18n.messages[this.$i18n.locale].invoiceAssignmentList.projectCompanyName
        },
        {
          // 付款确认书编号
          prop: 'assetCode',
          align: 'left',
          width: '280px',
          // slot: true,
          label: this.$i18n.messages[this.$i18n.locale].invoiceAssignmentList.payCode
        },
        {
          // 转让金额(元)
          prop: 'usedAmount',
          align: 'right',
          width: '110px',
          // slot: true,
          label: this.$i18n.messages[this.$i18n.locale].invoiceAssignmentList.assignmentMoney,
          format: (row) => {
            if (row.usedAmount === 0) return ''
            return format.thousandFilter(row.usedAmount)
          }
        },
        {
          // 合同名称
          prop: 'basicContractName',
          align: 'left',
          width: '200px',
          // slot: true,
          label: this.$i18n.messages[this.$i18n.locale].invoiceAssignmentList.basicContractName
        },
        {
          // 项目公司名称
          prop: 'planningManagerName',
          align: 'left',
          width: '200px',
          // slot: true,
          label: this.$i18n.messages[this.$i18n.locale].invoiceAssignmentList.planningManagerName
        }
      ],
      spanArr: []
    }
  },
  computed: {
    api () {
      return invoiceAssignmentApi.invoiceAssignment
    }
  },
  methods: {
    // 行合并
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex < 8) {
        if (row.indexSpanIndex) {
          return {
            rowspan: row.indexSpanIndex, // 行
            colspan: 1 // 列
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0 // 列
          }
        }
      }
      // }
    },
    getTableData (data) {
      var a = []
      data.forEach((it) => {
        var b = JSON.parse(JSON.stringify(it))
        // b.indexSpanIndex = 0
        delete b.assetInfoList
        if (it.assetInfoList.length > 0) {
          it.assetInfoList.forEach((it1, index) => {
            var c = {}
            if (index === 0) c = { indexSpanIndex: it.assetInfoList.length }
            c = Object.assign(c, b, it1)
            a.push(c)
          })
        } else {
          b.indexSpanIndex = 1
          a.push(b)
        }
      })
      this.sourceData = a
    },
    usedAmountFun (data) {
      if (data === 0) return '0'
      return format.thousandFilter(data)
    }
  }
}
</script>
<style scoped>
</style>
