<template>
  <div class="form-wrap">
    <el-form
      class="search-box"
      ref="form"
      :model="form"
      :inline="true"
      label-width="100px"
    >
      <div class="block-title">
        查询条件
      </div>
      <el-form-item
        v-show="visiable"
        label="起始时间"
        prop="startDate">
        <el-date-picker
          v-model="form.startDate"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item
        v-show="visiable"
        label="截止时间"
        prop="endDate">
        <el-date-picker
          default-time="23:59:59"
          v-model="form.endDate"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
        <el-button @click="getSaleStatistic">
          确定
        </el-button>
      </el-form-item>

      <div class="btn-wrap">
        <el-button @click="setDate(-1)">
          昨天
        </el-button>
        <el-button @click="setDate(0)">
          今天
        </el-button>
        <el-button @click="setDate(7)">
          近七天
        </el-button>
        <el-button @click="setDate(-10)">
          本月
        </el-button>
        <el-button @click="setDate(-30)">
          上月
        </el-button>
        <el-button @click="setDate(2)">
          自定义
        </el-button>
      </div>
    </el-form>
    <!--
        :span-method="objectSpanMethod"
     -->
    <div class="table-box">
      <el-table
        border
        stripe
        :key="tableIndex"
        v-loading="loading"
        :data="tableData"
        :span-method="objectSpanMethod"
        :cell-class-name="handleCellStyle"
        :header-cell-class-name="handleCellStyle"
        :row-class-name="totalRowClassName"
      >
        <el-table-column
          v-for="item in finalGroup"
          :key="item.value"
          :prop="item.prop || item.value"
          :label="item.label"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getBatchAndAreaStatistics } from '@/api/order.js'
import moment from 'moment'

export default {
  computed: {},
  components: {},
  data () {
    return {
      visiable: false,
      finalGroup: [
        { value: 'sale_date', label: '日期', prop: 'sale_date' },
        {
          value: 'batchConfigName',
          label: '场次',
          prop: 'batchConfigName'
        },
        { value: 'area_name', label: '座席', prop: 'area_name' },
        { value: 'total_count', label: '总数量', prop: 'total_count' },
        { value: 'sale_count', label: '已售席位', prop: 'sale_count' },
        { value: 'left_count', label: '未售席位', prop: 'left_count' },
        { value: 'sum_price', label: '销售金额', prop: 'sum_price' }
      ],
      form: {
        startDate: new Date(
          moment()
            .startOf('day')
            .format('YYYY-MM-DD HH:mm:ss')
        ),
        endDate: new Date(
          moment()
            .endOf('day')
            .format('YYYY-MM-DD HH:mm:ss')
        )
      },
      tableData: [],
      loading: false,
      ticketTagList: [],
      OrderIndexArr: [],
      xiaoji: [],
      index: 0,
      tableIndex: 1
    }
  },
  async created () {
    this.getSaleStatistic()
  },
  methods: {
    setDate (index) {
      this.visiable = false
      switch (index) {
        case -1:
          this.form = {
            startDate: new Date(
              moment()
                .subtract(1, 'days')
                .startOf('day')
                .format('YYYY-MM-DD HH:mm:ss')
            ),
            endDate: new Date(
              moment().subtract(1, 'days')
                .endOf('day')
                .format('YYYY-MM-DD HH:mm:ss')
            )
          }
          break
        case 0:
          this.form = {
            startDate: new Date(
              moment()
                .startOf('day')
                .format('YYYY-MM-DD HH:mm:ss')
            ),
            endDate: new Date(
              moment()
                .endOf('day')
                .format('YYYY-MM-DD HH:mm:ss')
            )
          }
          break
        case 7:
          this.form = {
            startDate: new Date(
              moment()
                .subtract(6, 'days')
                .startOf('day')
                .format('YYYY-MM-DD HH:mm:ss')
            ),
            endDate: new Date(
              moment()
                .endOf('day')
                .format('YYYY-MM-DD HH:mm:ss')
            )
          }
          break
        case -10:
          this.form = {
            startDate: new Date(moment().startOf('month')),
            endDate: new Date(
              moment()
                .endOf('day')
                .format('YYYY-MM-DD HH:mm:ss')
            )
          }
          break
        case -30:
          this.form = {
            startDate: new Date(
              moment(new Date())
                .subtract(1, 'months')
                .startOf('month')
                .format('YYYY-MM-DD HH:mm:ss')
            ),
            endDate: new Date(
              moment(new Date())
                .subtract(1, 'months')
                .endOf('month')
                .format('YYYY-MM-DD HH:mm:ss')
            )
          }
          break
        case 2:
          this.visiable = true
          return
      }
      this.getSaleStatistic()
    },
    // 单元格颜色边框设置
    handleCellStyle ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex > 4 && columnIndex <= 8) {
        if (columnIndex === 8) {
          return 'greenBg boldBorder'
        }
        return 'greenBg'
      }

      if (columnIndex > 8 && columnIndex <= 12) {
        if (columnIndex === 12) {
          return 'redBg boldBorder'
        }
        return 'redBg'
      }
      if (columnIndex === 4) {
        return 'boldBorder'
      }
    },
    // 获取表格数据
    getSaleStatistic () {
      this.loading = true
      this.tableData = []
      this.index = 0
      this.xiaoji = []
      let groupArray = []
      let orderIndexArr = []

      getBatchAndAreaStatistics(this.form)
        .then(res => {
          this.tableData = res

          this.finalGroup.forEach(i => {
            groupArray.push({})
          })

          groupArray.forEach((group, index) => {
            const keyName =
              this.finalGroup[index].prop || this.finalGroup[index].value

            this.tableData.forEach((el, index) => {
              if (el[keyName] === '小计') {
                this.index++
                !this.xiaoji.includes(index) && this.xiaoji.push(index)
              }
              if (this.xiaoji.includes(index) || (keyName !== 'sale_date' && keyName !== 'batchConfigName')) {
                this.index++
              }
              // if (index > 0 && this.xiaoji.includes(index - 1)) {
              //   this.index++
              // }
              !group[el[keyName] + '_' + this.index] &&
                (group[el[keyName] + '_' + this.index] = [])
              group[el[keyName] + '_' + this.index].push(index)
            })
            const arr = []
            for (let k in group) {
              if (group[k].length > 1) {
                arr.push(group[k])
              }
            }
            orderIndexArr.push(arr)
          })

          this.OrderIndexArr = orderIndexArr
          console.log(
            '%c [  this.OrderIndexArr  ]-321',
            'font-size:13px; background:pink; color:#bf2c9f;',
            this.OrderIndexArr
          )
        })
        .finally(() => {
          this.loading = false
        })
    },
    totalRowClassName ({ row, rowIndex }) {
      for (let key in row) {
        if (row[key] === '小计') {
          return 'table-total-row table-total-row2'
        }
        if (row[key] === '总计') {
          return 'table-total-row'
        }
      }
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex < this.finalGroup.length) {
        if (
          !(
            this.OrderIndexArr[columnIndex] &&
            this.OrderIndexArr[columnIndex].length
          )
        ) { return }

        for (let i = 0; i < this.OrderIndexArr[columnIndex].length; i++) {
          let element = this.OrderIndexArr[columnIndex][i]
          for (let j = 0; j < element.length; j++) {
            let item = element[j]
            if (rowIndex === item) {
              if (j === 0) {
                return {
                  rowspan: element.length,
                  colspan: 1
                }
              } else if (j !== 0) {
                return {
                  rowspan: 0,
                  colspan: 0
                }
              }
            }
          }
        }
      }
    }
  }
}
</script>

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