<!-- 资产资料清单信息管理 -->
<template>
  <div>
    <up-down-layout :handleFlag.sync="handleFlag">
      <search-form @clearParam="clearParam" @handleFilter="handleFilter" :formValue.sync="queryParas"
                   v-model="queryParas" :componentList="componentList" slot="query"
                   :menuCode="menuId" searchPerms="search" resetPerms="reset"></search-form>
      <template slot="table">
        <data-table :api="api" :queryParas="queryParas" :sourceData.sync="sourceData" :menuFlag="true" v-bind="elHeightObj"
                    :loadCount.sync="loadCount" operateBtnLayout="" :columns="columns" :headTitle="$t('assetInfo.payList')">
          <!-- 操作 -->
          <el-table-column :label="$t('common.operate')" align="center" width="120px">
            <template slot-scope="scope">
              <auth-button class="iconCircle" icon="iconfont iconxiangqing" :title="$t('common.detail')" @click="showEdit(scope.row)"></auth-button>
            </template>
          </el-table-column>
        </data-table>
      </template>
    </up-down-layout>
    <assetInfoEdit :visible.sync="showDetail" :editModel="editModel" :form="item" @submit-success="handleFilter"></assetInfoEdit>
  </div>
</template>
<script>
import BasePage from '@/pages/basePage.js'
import { upDownLayout, searchForm, DataTable, authButton, SelectProductName } from 'newepoch-components'
import assetInfoEdit from '@/pages/dataAudit/assetInfo/assetInfoEdit.vue'
import assetInfoApi from '@/api/dataAudit/assetInfoApi.js'
import * as format from '@/filters'
import mixin from '@/pages/mixin.js'
export default {
  name: 'assetInfoList',
  extends: new BasePage(),
  mixins: [mixin],
  components: {
    upDownLayout,
    searchForm,
    DataTable,
    authButton,
    assetInfoEdit,
    SelectProductName
  },
  data () {
    return {
      showDetail: false,
      editModel: '',
      item: {},
      queryParas: {},
      sourceData: [],
      componentList: [
        // 产品名称
        {
          label: this.$i18n.messages[this.$i18n.locale].assetInfo.productName,
          value: 'projectId',
          disabled: false,
          componentName: SelectProductName,
          cols: [8, 8, 8, 8],
          labelWidth: '110px'
        },
        // 付款确认书编号
        {
          label: this.$i18n.messages[this.$i18n.locale].assetInfo.payCode,
          value: 'assetCode',
          disabled: false,
          componentName: 'el-input',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          cols: [8, 8, 8, 8],
          labelWidth: '110px',
          prop: ''
        },
        // 供应商名称
        {
          label: this.$i18n.messages[this.$i18n.locale].assetInfo.supplierName,
          value: 'creditor',
          disabled: false,
          componentName: 'el-input',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          cols: [8, 8, 8, 8],
          labelWidth: '110px',
          prop: ''
        }
      ],
      columns: [
        // 付款确认书编号
        {
          prop: 'assetCode',
          align: 'right',
          label: this.$i18n.messages[this.$i18n.locale].assetInfo.payCode,
          width: '240px',
          sortable: true
        },
        // 核心企业
        {
          prop: 'coreEnterpriseName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].assetInfo.coreEnterprise,
          width: '150px'
        },
        // 供应商名称
        {
          prop: 'creditor',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].assetInfo.supplierName,
          width: '240px'
        },
        // 签约主体
        {
          prop: 'initialOwnersName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].assetInfo.signingBody,
          width: '240px'
        },
        // 计划管理人/再保理银行
        {
          prop: 'planningManagerOrBankName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].assetInfo.planningManagerName,
          width: '170px'
        },
        // 应收账款金额
        {
          prop: 'factoringMoney',
          align: 'right',
          label: this.$i18n.messages[this.$i18n.locale].assetInfo.accountsReceivable,
          width: '150px',
          sortable: true,
          format: (row) => { return format.thousandFilter(row.factoringMoney) }
        },
        // 账款到期日
        {
          prop: 'dueDate',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].assetInfo.endDate,
          width: '150px',
          sortable: true,
          format: (row) => { return format.formatDate(row.dueDate) }
        }
      ]
    }
  },
  computed: {
    api () {
      return assetInfoApi.assetInfo
    }
  },
  mounted () {
    this.handleFilter()
  },
  methods: {
    showEdit (data) {
      this.item = Object.assign({}, data)
      this.editModel = 'E'
      this.showDetail = true
    }
  },
  watch: {}
}
</script>
