<template>
    <!--订单列表组件-->
    <div>
        <data-table :sourceData.sync="formTableData.sourceData"
                    :columns="orderColumns"
                    showSelection
                    :spanMethod="mergedCell"
                    :border="true"
                    @getTableData="tableData"
                    :stripe="true"
                    :loadList='loadList'
                    :api="api"
                    :loadCount.sync="loadCount"
                    operateBtnLayout=""
                    @selectRowChange="handleSelectionChange"
                    :showPage="false"
                    :queryParas="searchFormQueryParas"
                    :menuFlag="false">
            <el-table-column align="center"
                             min-width="120px"
                             :label="$t('common.stampedFileDownload')"
                             fixed="right">
                <template slot-scope="scope">
                    <btn-download v-if="scope.row.fileId" :fileID="scope.row.fileId"></btn-download>
                </template>
            </el-table-column>
        </data-table>
    </div>
</template>

<script>
import * as format from '@/filters/index'
import tracemgrApi from '@/api/tracemgrApi'
import { DataTable, btnDownload } from 'newepoch-components'
import BasePage from '@/pages/basePage'
import mixin from '@/pages/mixin'
export default {
  extends: new BasePage(),
  mixins: [mixin],
  name: 'orderList',
  components: {
    btnDownload,
    DataTable
  },
  data () {
    return {
      spanArr: [],
      loadCount: 0,
      loadList: 'getOrderList',
      formTableData: {
        sourceData: []
      },
      selectedRows: [],
      orderColumns: [
        {
          prop: 'productInfo',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.productInfo,
          align: 'left',
          width: 100
        },
        {
          prop: 'paymentConfirmationNumber',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].common.paymentConfirmationNo,
          align: 'left',
          width: 150
        },
        {
          prop: 'supplierName',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.supplierName,
          align: 'left',
          width: 100
        },
        {
          prop: 'nameOfProjectCompany',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].common.nameOfProjectCompany,
          align: 'left',
          width: 150
        },
        {
          prop: 'nameOfTheContract',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].common.nameOfTheContract,
          align: 'left',
          width: 100
        },
        {
          prop: 'theAmountOfFactoring',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].common.theAmountOfFactoring,
          align: 'left',
          width: 100
        },
        {
          prop: 'region',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.region,
          align: 'left',
          width: 100
        },
        {
          prop: 'takeTheChapterWay',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].common.sealWay,
          align: 'left',
          width: 100,
          format: (row) => {
            return  format.formatDict(row.takeTheChapterWay + '', 'tracemgr_seal_type')
          }
        },
        {
          prop: 'contact',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].common.contact,
          align: 'left',
          width: 180
        },
        {
          prop: 'phoneNum',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].common.phoneNum,
          align: 'left',
          width: 150
        },
        {
          prop: 'account',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.loginInfo,
          align: 'left',
          width: 100
        }
      ],
      searchFormQueryParas: {
        assetCodes: '',
        pageIndex: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    // 合并行
    mergedCell: function ({ row, column, rowIndex, columnIndex }) {
      if (this.spanArr.length === 0) {
        this.getSpanArr()
      }
      if (columnIndex === 0) { // 对第一列进行合并
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
      for (let i = 1; i < 9; i++) {
        if (columnIndex === i) { // 对第i列进行合并
          const _row = this.spanArr[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      }
      if (columnIndex === 12) { // 对第i列进行合并
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    getSpanArr () {
      this.spanArr = [] // 避免表格错乱！
      let $this = this
      this.sIdx = 0
      this.formTableData.sourceData.forEach((item, index) => {
        item.index = index
        if (index === 0) {
          $this.spanArr.push(1)
          $this.position = 0
          $this.sameRowArr.push([index])
        } else {
          if ($this.formTableData.sourceData[index].paymentConfirmationNumber === $this.formTableData.sourceData[index - 1].paymentConfirmationNumber) { // 这里是要合并行
            $this.spanArr[this.position] += 1
            $this.spanArr.push(0)
            $this.sameRowArr[$this.sIdx].push(index)
          } else {
            $this.spanArr.push(1)
            $this.position = index
            $this.sIdx += 1
            $this.sameRowArr.push([index])
          }
        }
      })
    },
    handleSelectionChange (val) {
      this.getSelectRows(val)
    },
    tableData (data) {
      this.formTableData.sourceData = data['datas']
    }
  },
  mounted () {
    let param = []
    this.assetCode.forEach(item => {
      param.push(
        item.assetCode
      )
    })
    this.searchFormQueryParas['assetCode'] = param
    this.searchFormQueryParas['supplierId'] = this.supplierId
    this.handleFilter()
  },
  watch: {
    diff: function (newValue, oldValue) {
      let $this = this
      if (newValue) {
        $this.$nextTick(() => {
          let param = []
          $this.assetCode.forEach(item => {
            param.push(
              item.assetCode
            )
          })
          $this.searchFormQueryParas['assetCode'] = param
          $this.searchFormQueryParas['supplierId'] = this.supplierId
          $this.handleFilter()
        })
      }
    },
    'formTableData.sourceData': {
      deep: true,
      handler: function () {
        this.spanArr = []
        this.sameRowArr = []
      }
    }
  },
  computed: {
    diff: {
      get () {
        return this.fatherVisible
      }
    },
    api () {
      return tracemgrApi['supplierSealNotice']
    }
  },
  props: {
    fatherVisible: {
      type: Boolean
    },
    multipleSelection: {
      type: Array,
      default: function () {
        return this.selectedRows
      }
    },
    assetCode: {
      type: Array
    },
    supplierId: {
      type: String
    },
    showSelection: {
      type: Boolean
    },
    getSelectRows: {
      type: Function
    }
  }
}
</script>

<style scoped>

</style>
