<template>
  <div>
    <!-- :span-method="arraySpanMethod" -->
    <el-table
      border
      class="spanTable"
      v-loading="app.loading"
      v-if="tableMaxHeight"
      :max-height="tableMaxHeight"
      :data="app.tableData"
      :span-method="app.isColSpan?arraySpanMethod:null"
      :cell-class-name="handleCellStyle"
      :header-cell-class-name="handleCellStyle"
      :row-class-name="totalRowClassName"
      :row-click="(row, column, event)=>{console.log(row)}"
    >
      <!-- :row-class-name="totalRowClassName" -->
      <el-table-column
        prop="ticket_spot_name"
        label="售票点"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="manager_name"
        label="售票员"
        min-width="100"
      ></el-table-column>
      <el-table-column
        prop="payChannel"
        label="支付方式"
        min-width="100"
      ></el-table-column>
      <el-table-column
        prop="ticketTypeName"
        label="票种/会员类型"
      ></el-table-column>
      <el-table-column
        prop="price"
        label="单价"
      ></el-table-column>
      <el-table-column
        prop="sum_count"
        label="销售数量"
      ></el-table-column>
      <el-table-column
        prop="sum_people"
        label="销售人数"
      ></el-table-column>
      <el-table-column
        prop="sum_price"
        label="销售金额"
      ></el-table-column>
      <el-table-column
        prop="cancel_count"
        label="退款数量"
      ></el-table-column>
      <el-table-column
        prop="cancel_people"
        label="退款人数"
      ></el-table-column>
      <el-table-column
        prop="cancelPrice"
        label="退款金额"
      ></el-table-column>
      <el-table-column
        prop="actual_count"
        label="实售数量"
      ></el-table-column>
      <el-table-column
        prop="actual_people"
        label="实售人数"
      ></el-table-column>
      <el-table-column
        prop="actual_price"
        label="实售金额"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
import mixin from './mixin'

export default {
  mixins: [mixin],
  watch: {
    'app.loading' (val) {
      const keys = Object.keys(this)

      keys.forEach(i => {
        if (i.indexOf('colunmSpan') > -1) {
          delete this[i]
        }
      })
    }
  },
  methods: {
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex < 4) {
        if (row[column.property] === '小计') {
          return [1, 1]
        }

        if (!this[`colunmSpan${columnIndex}`]) {
          this[`colunmSpan${columnIndex}`] = this.getSpanArrayByRepeat(this.app.tableData, column.property)
        }

        return this.getRowSpanByRepeat(this[`colunmSpan${columnIndex}`], rowIndex)
      }

      return [1, 1]
    }
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
