<template>
  <div v-loading="loading">
    <div class="heior_box">
      <div class="search-box">
        <el-select
          v-model="searchModel.ProductId"
          collapse-tags
          style="width:200px;"
          size=small
          placeholder="请选择产品">
          <el-option
            v-for="item in products"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-date-picker
          size="small"
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
        <el-input v-model="searchModel.keyWord" placeholder="请输入产品名称" clearable size="small">
          <el-button slot="append" icon="el-icon-search" @click="get"></el-button>
        </el-input>
      </div>
    </div>
    <el-table
      :data="retData"
      border
      size="medium"
      :height="$getHeight(150)"
      :span-method="mergeSpan"
      show-summary
    >
      <el-table-column prop="ProductName" label="产品"></el-table-column>
      <el-table-column prop="PackageName" label="套餐"></el-table-column>
      <el-table-column prop="NewBuyCount" label="新开个数"></el-table-column>
      <el-table-column prop="NewBuyAmount" label="新开金额"></el-table-column>
      <el-table-column prop="AgainBuyCount" label="续费个数"></el-table-column>
      <el-table-column prop="AgainBuyAmount" label="续费金额"></el-table-column>
      <el-table-column prop="RefundCount" label="退货个数"></el-table-column>
      <el-table-column prop="RefundAmount" label="退货金额"></el-table-column>
      <!-- <el-table-column prop="PaymentAmount" label="换货个数"></el-table-column>
      <el-table-column prop="PaymentAmount" label="换货金额"></el-table-column>-->
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'treeTable',
  components: {},
  data () {
    return {
      loading: false,
      retData: [],
      dateRange: [],
      products: [],
      searchModel: {
        PageIndex: 1,
        ProductId: '',
        keyWord: '',
        Status: 0,
        PayType: 0,
        Btime: '',
        Etime: ''
      },
      flagMap: {}
    }
  },
  mounted () {
    this.$store.commit('setCurrentNav', '销售管理>>统计分析')
    this.get()
    this.$api.get('course/v1/product/page', this.searchModel).then(res => {
        res.Data.forEach(m => {
          var product = {
            label: m.Name,
            value: m.Id
          }
          this.products.push(product)
        })
      })
  },
  methods: {
    get () {
      
      this.flagMap = {}
      if (this.dateRange && this.dateRange.length === 2) {
        this.searchModel.Btime = this.dateRange[0]
        this.searchModel.Etime = this.dateRange[1]
      }
      this.$api.get('course/v1/order/Statistics', this.searchModel).then(res => {
        this.retData = res.Data
        this.retData.forEach(item => {
          var flag = this.flagMap[item.ProductName]
          if (!flag) {
            this.flagMap[item.ProductName] = true
            var count = this.retData.filter(m => m.ProductName === item.ProductName).length
            item.rSpan = count
            item.cSpan = 1
          } else {
            item.rSpan = 0
            item.cSpan = 0
          }
        })
      })
    },
    mergeSpan ({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        console.log(`${row.rSpan}-${row.cSpan}`)
        return {
          rowspan: row.rSpan,
          colspan: row.cSpan
        }
      }
    }
  }
}
</script>
<style scoped>
.el-table{
overflow:visible !important;
}
</style>
