<template>
    <!--表单数据-->
    <data-table
            :border="true"
            :stripe="true"
            :columns="columns"
            :operateBtnLayout="''"
            :sourceData.sync="sourceData"
            :showPage="false">
    </data-table>
</template>

<script>

import { DataTable } from 'newepoch-components'

import tracemgrApi from '@/api/tracemgrApi.js'

export default {
  components: { DataTable },
  props: {
    assetCodeList: {
      type: Array
    },
    data: {
      type: Array
    },
    dialogVisible: {
      type: Boolean
    }
  },

  name: 'urgentOrderList',

  mounted () {
    if (this.assetCodeList !== undefined && this.assetCodeList !== []) { // 请求数据
      setTimeout(() => { // 等待页面渲染完毕，再加载数据
        this.getListDataByApi()
      }, 50)
    }
    if (this.data !== undefined && this.data !== []) { // 展示数据
      this.sourceData = this.data
    }
  },

  watch: {
    dialogVisible: {
      deep: true,
      handler: function () {
        if (!this.dialogVisible) {
          this.sourceData = []
        }
      }
    },
    assetCodeList: {
      deep: true,
      handler: function () {
        this.getListDataByApi()
      }
    },
    data: {
      deep: true,
      handler: function () {
        this.sourceData = this.data
      }
    }
  },

  methods: {
    getListDataByApi () {
      const loading = this.$loading({
        lock: true,
        text: this.$i18n.messages[this.$i18n.locale].baoLiWorkbenchOrderTrack.pleaseWait,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const timeout = setTimeout(() => {
        loading.close()
        this.$message.error(this.$i18n.messages[this.$i18n.locale].baoLiWorkbenchOrderTrack.serverBusy)
      }, 10000)

      tracemgrApi['urgentOrderListApi'].queryTrackOrderAssetInfo({ stringList: this.assetCodeList.join() }).then(res => {
        loading.close()
        clearTimeout(timeout)

        this.sourceData = res.data

        // 将数据传递给父组件（触发自定义方法，传递值）
        this.$emit('listData', this.sourceData)
      })
    }
  },

  data () {
    return {
      sourceData: [],
      columns: [
        // 核心企业
        {
          prop: 'coreEnterpriseName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].common.coreEnterprise,
          width: '150px'
        },
        // 计划管理人/再保理银行
        {
          prop: 'planOrBankName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].common.programManager,
          width: '180px'
        },
        // 期数
        {
          prop: 'specialPlanPeriods',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].common.periods,
          width: '100px'
        },
        // 付款确认书编号
        {
          prop: 'assetCode',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].common.paymentConfirmationNo,
          width: '180px'
        },
        // 供应商名称
        {
          prop: 'creditor',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].common.supplierName,
          width: '180px'
        },
        // 项目公司名称
        {
          prop: 'debtor',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].common.nameOfProjectCompany,
          width: '180px'
        },
        // 保理金额
        {
          prop: 'factoringMoney',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].common.theAmountOfFactoring,
          width: '150px'
        },
        // 合同名称
        {
          prop: 'basicContractName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].common.nameOfTheContract,
          width: '180px'
        },
        // 区域
        {
          prop: 'coreArea',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.region,
          width: '150px'
        },
        // 区域专员
        {
          prop: 'coreAreaAttacheName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].common.theRegionalCommissioner,
          width: '80px'
        },
        // 业务人员
        {
          prop: 'businessPersonnel',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].common.businessPersonnel,
          width: '80px'
        }
      ]
    }
  }
}
</script>
