<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-select v-model="listQuery.month" style="width: 200px" class="filter-item" placeholder="请选择月份" clearable>
        <el-option v-for="(item, index) in months" :key="index" :label="item" :value="item" />
      </el-select> 
       <el-select v-model="listQuery.category" style="width: 200px" class="filter-item" placeholder="请选择新客类型">
        <el-option v-for="(item, index) in categorys" :key="index" :label="item.name" :value="item.id" />
      </el-select>
      <el-button  :loading="listLoading" v-permission="['GET /admin/report/changeReport']" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
      <el-button class="filter-item" v-permission="['GET /admin/report/changeReportExport']"  type="primary" icon="el-icon-download" @click="handleExport">导出</el-button>

    </div>

    <!-- 查询结果 --> 
    <div id="output"></div> 

  </div>
</template>

<script>
import { changeAnaylse } from "@/api/report";
import { formatDate } from "@/utils/date";
import "pivottable/dist/pivot.js";
import "pivottable/dist/pivot.css";
import "pivottable/dist/pivot.zh.js";
import "jquery-ui-dist/jquery-ui"; 
import "@/utils/table2excel";
import $ from "jquery";

let vm;

export default {
  name: "consultDetailReport",
  components: {}, 
  data() {
    return { 
      categorys:[{id:0,name:"保洁"},{id:1,name:"品类"}],
      months:[], 
      list: [],
      downloadLoading: false,
      timeArray: [new Date(new Date() - 3600 * 1000 * 24 * 7), new Date()],
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 20,
        month: "",
        order: "desc",
        category:0
      }, 
    };
  },
  computed: {},
  beforeCreate() {
    vm = this;
  },
  created() {  
     for(var i=0;i<24;i++){
       var begin=new Date(); 
       var month= new Date(begin.setMonth((new Date().getMonth()-i)));
       this.months.push(formatDate(month,"yyyy-MM"));
     } 
  },
  methods: { 
    handleExport() { 
       $(".pvtTable").table2excel({
        exclude:".noExl",
        name:"test",
        filename: "转化分析报表", // do include extension
        preserveColors: false,
        msoNumberFormat:"\@"
      })
    },
    getList() {
      if (this.listQuery.month=='') { 
        this.$message.warning("请先选择月份");
        return false;
      }
      this.listLoading = true; 
      
        var tpl =   $.pivotUtilities.aggregatorTemplates;  
        var fmt =  $.pivotUtilities.numberFormat({digitsAfterDecimal: 4});

      changeAnaylse(this.listQuery)
        .then((response) => { 
          this.listLoading = false;  
          this.list = response.data.data; 
          $("#output").pivotUI(
            this.list,
            {  
              rows: ["月份", "累计客户数", "累计订单数", "累计金额"],
              cols: ["商品类型", "商品", "转化分类"],
              aggregatorName: "求和",
              vals: ["数量"],
              rendererName: "表格",
              // aggregators: {
              //           "Mean Temperature":
              //               function() { return tpl.sum(fmt)(["数量"])},
              // },
              sorters: {
                    转化分类: $.pivotUtilities.sortAs(["客户数", "转化率","订单数", "金额"]) 
                }
            },
            true,
            "zh"
          );
          $('.pvtUiCell').hide();

        })
        .catch((res) => {
          this.list = [];
          // this.total = 0;
          this.listLoading = false;
          this.$message.warning(res.data.errmsg);
        });
    },
    handleFilter() { 
      this.getList();
    },
  },
};
</script>

<style>
.detail-container {
  width: 80%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}
#output{
  width: 100%;
  overflow: auto;
}
</style>
