<template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="产品订单统计" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <div slot="content"></div>

      </lx-header>
    </div>
    <div style="margin-bottom:20px">
      <el-date-picker v-model="dateRange" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
        start-placeholder="开始日期" end-placeholder="结束日期" @change="dateChange">
      </el-date-picker>
    </div>
    <xy-table :isPage='false' :sumText="'合计'" :showSummary='true' :summaryMethod='summaryMethod' :list="list"
      :table-item="table">
      <template slot="btns">
        <div></div>
      </template>

    </xy-table>

  </div>
</template>

<script>
  import {
    reporttotal
  } from '@/api/type'
  import {
    Message
  } from 'element-ui'
  export default {
    components: {},
    data() {
      return {
        select: {
          start_date: '2000-01-01',
          end_date: ""
        },
        today: '',
        dateRange: [],
        list: [],
        table: [{
            prop: 'name',
            label: '产品类型',
            width: 180
          },
          {
            prop: 'total_order_person',
            label: '下单人总数(含取消)',
            width: 180
          },
          {
            prop: 'total_order_all',
            label: '下单总订单数(不含取消)',
            width: 180
          },
          {
            prop: 'total_order_cancel_all',
            label: '下单取消数',
            width: 180
          },
          {
            prop: 'total_order',
            label: '下单完成数',
            width: 180
          },
          {
            prop: 'max_order',
            label: '多次下单人数',
            width: 180,
            customFn: (row) => {
              return ( <div style = {
                  {
                    textDecoration:'underline',
                    cursor: 'pointer',
                    color: "#bf617c"
                  }
                }
                on = {
                  {
                    ['click']: (e) => {
                      this.toReturnUser(row.id)
                    }
                  }
                }>
                {
                  row.max_order?row.max_order:0
                } </div> )
              }
            // formatter: (cell, data, value) => {
            //   return value ? value : 0
            // }
          },
          {
            prop: 'max_product.name',
            label: '最多下单产品'
          }

        ]
      }
    },
    methods: {
      toReturnUser(id){
        let url =`/admin/#/reports/userOrder?total_related_person=5&product_pid=`+id+`&start_date=`+this.select.start_date+`&end_date=`+this.select.end_date
        let seeBuy = window.open(url, 'seeBuy','location=0')
      },
      summaryMethod(param) {
        console.log("para", param)
        const {
          columns,
          data
        } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += '';
          } else {
            sums[index] = '';
          }
        });

        return sums;
      },
      dateChange(e) {
        if (e) {
          this.select.start_date = e[0]
          this.select.end_date = e[1]
        } else {
          this.select.start_date = '2000-01-01'
          this.select.end_date = this.today
        }
        this.getTotal()
      },
      async initTotal() {
        const res = await reporttotal({
          start_date: '2000-01-01',
          end_date: this.select.end_date
        })
        // this.total = res.total
        this.list = res
      },
      async getTotal() {
        const res = await reporttotal({
          start_date: this.select.start_date,
          end_date: this.select.end_date
        })
        this.list = res
      }
    },
    mounted() {
      let date = new Date()
      let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      let dateDay = date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()
      this.today = date.getFullYear() + '-' + month + '-' + dateDay
      this.select.end_date = this.today
      this.initTotal()
    }

  }
</script>

<style scoped lang="scss">
  .selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;

    &-item {
      display: flex;
      align-items: center;
      align-content: center;

      margin-top: 6px;
      margin-right: 10px;

      &__label {
        word-break: keep-all;
      }
    }
  }
</style>
