<template>
    <div>
        <el-form :model="formTableData" ref="formTableData" :show-message="false">
            <el-row class="marginBottom4">
                <h3 class="marginBottom3 title" >{{$t('traceMgr.orderInfo')}}</h3>
                <el-divider></el-divider>
            </el-row>
            <data-table :api="api"
                        :handleFlag.sync="handleFlag"
                        :showPage='false'
                        :showSelection="true"
                        :loadList="loadList"
                        @getTableData="tableData"
                        :sourceData.sync="formTableData.sourceData"
                        :menuFlag="true"
                        operateBtnLayout=""
                        :loadCount.sync="loadCount"
                        :queryParas="searchFormQueryParas"
                        @selection-change="changeFun"
                        :columns="columns"
                        :border="true"
                        :stripe="true">
            </data-table>
        </el-form>
    </div>
</template>

<script>
import { DataTable } from 'newepoch-components'
import tracemgrApi from '@/api/tracemgrApi'
import * as format from '@/filters/index'
import BasePage from '@/pages/basePage'
import mixin from '@/pages/mixin'
export default {
  extends: new BasePage(),
  mixins: [mixin],
  name: 'orderList',
  components: {
    DataTable,
    format,
    tracemgrApi
  },
  props: {
    assetCodes: {
      type: Array
    },
    dataReset: {
      type: Boolean
    },
    orderListResetData: {
      type: Object
    },
    checkDialogClose: {
      type: Function
    }
  },
  data () {
    return {
      loadList: 'getOrderList',
      handleFlag: true,
      loadCount: 0,
      // 选择行数组
      checkBoxData: [],
      formTableData: {
        sourceData: [
        ]
      },
      columns: [
        {
          prop: 'productInfo',
          align: 'left',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].common.productInformation,
          showOverflowTooltip: true,
          format: function (row) {
            if (row.productType === '1') {
              return row.coreEnterpriseName + row.planOrBankName + row.specialPlanPeriods
            } else if (row.productType === '2') {
              return row.coreEnterpriseName + row.planOrBankName
            } else {
              return ''
            }
          }
        },
        {
          prop: 'assetCode',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].common.paymentConfirmationNo,
          showOverflowTooltip: true,
          width: '250px'
        },
        {
          prop: 'creditor',
          align: 'left',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.supplierName,
          showOverflowTooltip: true
        },
        {
          prop: 'debtor',
          align: 'left',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.projectCompanyName,
          showOverflowTooltip: true
        },
        {
          prop: 'projectContractName',
          align: 'left',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.projectName,
          showOverflowTooltip: true
        },
        {
          prop: 'factoringMoney',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.factoringAmount,
          showOverflowTooltip: true
        },
        {
          prop: 'factoringRate',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.rate,
          showOverflowTooltip: true,
          format: function (row) {
            if (!isNaN(row.factoringRate) && row.factoringRate !== '') {
              // 截取当前数据到小数点后四位
              return (parseFloat(row.factoringRate) * 100).toFixed(2) + '%'
            } else {
              return '0.00%'
            }
          }
        },
        {
          prop: 'coreAreaName',
          align: 'center',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].common.district,
          showOverflowTooltip: true
        },
        {
          prop: 'coreAreaAttacheName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.serviceAreaPerson,
          showOverflowTooltip: true
        },
        {
          prop: 'creditorContactName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.initContactor,
          showOverflowTooltip: true
        },
        {
          prop: 'creditorContactInfo',
          align: 'center',
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.phone,
          showOverflowTooltip: true
        }
      ],
      searchFormQueryParas: {
        assetCodes: '',
        pageIndex: 1,
        pageSize: 10
      }
    }
  },
  computed: {
    api () {
      return tracemgrApi['orderList']
    }
  },
  watch: {
    checkBoxData: function (newValue, oldValue) {
      if (newValue !== oldValue) {
        this.sendMsg()
      }
    },
    dataReset: {
      handler: function (val) {
        let $this = this
        if (val) {
          $this.$nextTick(() => {
            $this.checkBoxData = []
            $this.searchFormQueryParas['assetCode'] = $this.assetCodes
            $this.handleFilter()
          })
        } else {
          $this.formTableData.sourceData = []
        }
      }
    },
    orderListResetData: {
      deep: true,
      handler: function (val) {
        if (val.check) {
          let $this = this
          let sourceData = $this.formTableData.sourceData
          for (let y = 0; y < sourceData.length; y++) {
            for (let i = 0; i < val.dataList.length; i++) {
              if (sourceData[y].assetInfoId === val.dataList[i]) {
                sourceData.splice(y, 1)
              }
            }
          }
          if (sourceData.length === 0) {
            this.checkDialogClose()
          }
        }
      }
    }
  },
  methods: {
    changeFun (val) {
      this.checkBoxData = val
    },
    sendMsg () {
      // func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
      this.$emit('func', this.checkBoxData)
    },
    tableData (data) {
      this.formTableData.sourceData = data
    }
  }
}
</script>
