<template>
    <!--已选择订单列表组件-->
    <div>
        <data-table :sourceData.sync="tableData"
                    :columns="selectedOrderColumns"
                    :showSelection="showSelection"
                    :border="true"
                    :stripe="true"
                    @selectRowChange="handleSelectionChange"
                    operateBtnLayout=""
                    :showPage="false"
                    :queryParas="searchFormQueryParas" :menuFlag="false">
                <template slot="auditOpinion" slot-scope="scope">
                    <el-row>
                        <el-col :span="18">
                            <el-input type="textarea" v-model="scope.data.row.opinion" :autosize="autosize"></el-input>
                        </el-col>
                        <el-col class="text-center" :span="6">
                            <auth-button type="primary" size="small" :label="$t('common.reset')" @click="clearOpinion(scope.data.row)"></auth-button>
                        </el-col>
                    </el-row>
                </template>
        </data-table>
    </div>
</template>

<script>
import * as format from '@/filters/index'
import { DataTable, authButton } from 'newepoch-components'
import tracemgrApi from '@/api/tracemgrApi'
export default {
  name: 'selectedOrderList',
  components: {
    authButton,
    format,
    DataTable
  },
  data () {
    return {
      spanArr: [],
      tableData: [],
      selectedOrderColumns: [
        {
          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: 100
        },
        {
          prop: 'theAmountOfFactoring',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].common.theAmountOfFactoring,
          align: 'left',
          width: 100
        },
        {
          prop: 'TakeTheChapterWay',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].common.sealWay,
          align: 'left',
          width: 100,
          format: (row) => {
            return (row.takeTheChapterWay === 0 || row.takeTheChapterWay === 1) ? format.formatDict(row.takeTheChapterWay + '', 'tracemgr_seal_type') : ''
          }
        },
        {
          prop: 'fileName',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.fileName,
          align: 'left',
          width: 100
        },
        {
          prop: 'auditOpinion',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.auditOpinion,
          align: 'left',
          width: 260,
          slot: true
        }
      ],
      searchFormQueryParas: {},
      autosize: {
        minRows: 1,
        maxRows: 2
      },
      opinion: ''
    }
  },
  props: {
    showDialog: {
      type: Boolean
    },
    orderParam: {
      type: Array
    },
    sourceData: {
      type: Array
    },
    showSelection: {
      type: Boolean
    },
    getSelectRows: {
      type: Function
    }
  },
  computed: {
  },
  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 === 14 || columnIndex === 15 || columnIndex === 16) { // 对第i列进行合并
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    handleSelectionChange (val) {
      this.getSelectRows(val)
    },
    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].employeeId === $this.formTableData.sourceData[index - 1].employeeId) { // 这里是要合并行
            $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])
          }
        }
      })
    },
    clearOpinion (row) {
      row.opinion = ''
    }
  },
  watch: {
    showDialog: {
      handler: function (val) {
        let $this = this
        if (val) {
          let assetCodes = []
          $this.orderParam.forEach(item => {
            assetCodes.push(item.paymentConfirmationNumber)
          })
          tracemgrApi['supplierSealNotice'].getSelectOrderList({ 'fileListSaveJson': assetCodes }).then(res => {
            $this.tableData = res.data
          })
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
