<template>
  <div>
    <el-table
      border
      class="spanTable"
      v-loading="app.loading"
      v-if="tableMaxHeight"
      :max-height="tableMaxHeight"
      :data="app.financialData"
      :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="unit_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="sum_cancel"
        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: {
    totalRowClassName ({ row, rowIndex }) {
      if (row.payChannel === '小计' && row.ticketTypeName === '小计') {
        return 'table-total-row table-total-row1'
      }

      if (row.ticketTypeName === '小计') {
        return 'table-total-row table-total-row2'
      }

      if (row.unit_price === '小计') {
        return 'table-total-row table-total-row3'
      }
    },
    handleCellStyle ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex > 2 && columnIndex <= 5) {
        if (columnIndex === 5) {
          return 'greenBg boldBorder'
        }
        return 'greenBg'
      }

      if (columnIndex > 5 && columnIndex <= 8) {
        if (columnIndex === 8) {
          return 'redBg boldBorder'
        }
        return 'redBg'
      }

      if (columnIndex > 8) {
        if (columnIndex === 8) {
          return 'blueBg boldBorder'
        }
        return 'blueBg'
      }

      if (columnIndex === 2) {
        return 'boldBorder'
      }
    },
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex < 2) {
        if (row[column.property] === '小计') {
          return [1, 1]
        }

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

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

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

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