<template>
  <div>
    <template v-if="formData.length === 0">
      <span>暂无数据</span>
    </template>
    <div style="margin-left: 50px" v-else>
      <data-table :sourceData="formData" :showPage="false" :operateBtnLayout="''" :columns="columns" :toolMenuFlag="false">
      </data-table>
    </div>
<!--    <el-table :data="formData" style="border-left: 1px solid #dfe6ec"-->
<!--              header-cell-class-name="common-table-header" v-else>-->
<!--      <template v-for="item in columns" >-->
<!--        <el-table-column-->
<!--          header-align="center"-->
<!--          :key="item.prop"-->
<!--          :label="item.label"-->
<!--          :prop="item.prop"-->
<!--          :width="item.width"-->
<!--          :formatter="item.format"-->
<!--          :align="item.align"-->
<!--          ></el-table-column>-->
<!--      </template>-->
<!--    </el-table>-->
  </div>
</template>
<script>
import * as format from '@/filters'
import { DataTable } from 'newepoch-components'
export default {
  components: {
    DataTable
  },
  props: {
    formItem: {
      type: [Object],
      default: () => {}
    }
  },
  data () {
    return {
      columns: [
        {
        // 产品名称
          prop: 'productName',
          align: 'left',
          fixedWidth: '150px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.product_name
        },
        {
        // 核心企业
          prop: 'coreEnterpriseName',
          align: 'left',
          fixedWidth: '130px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.core_enterprise
        },
        {
        // 计划管理人/再保理银行
          prop: 'planOrBankName',
          align: 'left',
          fixedWidth: '170px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.planning_manager
        },
        {
        // 付款确认书编号
          prop: 'assetCode',
          align: 'left',
          fixedWidth: '240px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback
            .pay_code
        },
        {
        // 项目公司名称
          prop: 'debtor',
          align: 'left',
          fixedWidth: '240px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.project_company
        },
        {
        // 供应商名称
          prop: 'creditor',
          align: 'left',
          fixedWidth: '240px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.creditor
        },
        {
        // 应收账款金额
          prop: 'factoringMoney',
          align: 'right',
          fixedWidth: '150px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.account_receivable,
          format: row => format.thousandFilter(row.factoringMoney, 2)
        },
        {
        // 账款到期日
          prop: 'dueDate',
          align: 'center',
          fixedWidth: '140px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.account_maturity_date,
          format: row => format.formatDateNull(row.dueDate)
        },
        {
          // 退单类型
          prop: 'chargebackType',
          align: 'center',
          fixedWidth: '120px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback
            .refundStyles,
          format: row => format.formatDict(row.chargebackType, 'L0005')
        },
        {
        // 退单人
          prop: 'chargebackPerson',
          align: 'left',
          fixedWidth: '100px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.chargeback_person
        },
        {
        // 退单原因
          prop: 'chargebackReason',
          align: 'left',
          fixedWidth: '200px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.chargeback_reason
        },
        {
        // 退单审核结果
          prop: 'reviewStatus',
          align: 'center',
          fixedWidth: '130px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.return_audit_results,
          format: row => format.formatDict(row.reviewStatus, 'L0009')
        },
        {
        // 审核人
          prop: 'reviewer',
          align: 'left',
          fixedWidth: '100px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.auditor
        },
        {
        // 审核意见
          prop: 'reviewOpinion',
          align: 'left',
          fixedWidth: '200px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.audit_opinion
        },
        {
        // 审核时间
          prop: 'reviewTime',
          align: 'center',
          fixedWidth: '140px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.audit_date,
          format: row => format.formatDateNull(row.reviewTime)
        }
      ]
    }
  },
  computed: {
    formData () {
      let list = []
      const { row: { chargebackAuditResults: childItem } } = this.formItem
      return childItem || list
    }
  }
}
</script>
<style>
  .demo-table-expand {
    font-size: 14px;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
