<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>销售活动报表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-tabs type="border-card">
            <el-tab-pane label="2022双12战报">
                <!-- 查询和其他操作 -->
                <div class="filter-container">
                    <el-form :inline="true" size="small" v-model="listQuery">
                        <el-form-item>
                            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getTicketList">
                                查找</el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <!-- 查询结果 -->
                <el-table :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
                    <el-table-column align="center" label="城市" prop="城市" />
                    <el-table-column align="center" label="单次" prop="日保单次" />
                    <el-table-column align="center" label="单次比例" prop="日保单次比例" />
                    <el-table-column align="center" label="单次Gmv" prop="日保单次Gmv" />
                    <el-table-column align="center" label="单次Gmv比例" prop="日保单次Gmv比例" />
                    <el-table-column align="center" label="鲸选单次" prop="鲸选单次" />
                    <el-table-column align="center" label="鲸选单次比例" prop="鲸选单次比例" />
                    <el-table-column align="center" label="鲸选单次Gmv" prop="鲸选单次Gmv" />
                    <el-table-column align="center" label="鲸选单次Gmv比例" prop="鲸选单次Gmv比例" />
                    <el-table-column align="center" label="日保2次" prop="日保2次" />
                    <el-table-column align="center" label="日保2次比例" prop="日保2次比例" />
                    <el-table-column align="center" label="日保2次Gmv" prop="日保2次Gmv" />
                    <el-table-column align="center" label="日保2次Gmv比例" prop="日保2次Gmv比例" />
                    <el-table-column align="center" label="日保4次" prop="日保4次" />
                    <el-table-column align="center" label="日保4次比例" prop="日保4次比例" />
                    <el-table-column align="center" label="日保4次Gmv" prop="日保4次Gmv" />
                    <el-table-column align="center" label="日保4次Gmv比例" prop="日保4次Gmv比例" />
                    <el-table-column align="center" label="鲸选4次" prop="鲸选4次" />
                    <el-table-column align="center" label="鲸选4次比例" prop="鲸选4次比例" />
                    <el-table-column align="center" label="鲸选4次Gmv" prop="鲸选4次Gmv" />
                    <el-table-column align="center" label="鲸选4次Gmv比例" prop="鲸选4次Gmv比例" />
                    <el-table-column align="center" label="日保24次" prop="日保24次" />
                    <el-table-column align="center" label="日保24次比例" prop="日保24次比例" />
                    <el-table-column align="center" label="日保24次Gmv" prop="日保24次Gmv" />
                    <el-table-column align="center" label="日保24次Gmv比例" prop="日保24次Gmv比例" />
                    <el-table-column align="center" label="鲸选24次" prop="鲸选24次" />
                    <el-table-column align="center" label="鲸选24次比例" prop="鲸选24次比例" />
                    <el-table-column align="center" label="鲸选24次Gmv" prop="鲸选24次Gmv" />
                    <el-table-column align="center" label="鲸选24次Gmv比例" prop="鲸选24次Gmv比例" />
                    <el-table-column align="center" label="品类" prop="品类" />
                    <el-table-column align="center" label="品类比例" prop="品类比例" />
                    <el-table-column align="center" label="品类Gmv" prop="品类Gmv" />
                    <el-table-column align="center" label="品类Gmv比例" prop="品类Gmv比例" />
                </el-table>


            </el-tab-pane>
            <!-- <el-tab-pane label="2022双11战报-分类明细">
                <div class="filter-container">
                    <el-form :inline="true" size="small" v-model="listQuery">
                        <el-form-item>
                            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getDetailList">
                                查找</el-button>
                            <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-download"
                                @click="handleTicketReprotExport">导出</el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <div id="output"></div>

            </el-tab-pane> -->
        </el-tabs>

    </div>
</template>
  
<script>
import Pagination from "./common/Pagination";
import service from "../script/api/service";
import "pivottable/dist/pivot.js";
import "pivottable/dist/pivot.css";
import "pivottable/dist/pivot.zh.js";
import "jquery-ui-dist/jquery-ui";
import "@/script/table2excel";
import $ from "jquery";

export default {
    name: "marketActivity",
    components: { Pagination },
    filters: {},
    data() {
        return {
            listLoading: false,
            list: [],
            details:[],
            total: 0,
            listLoading: false,
            listQuery: {
                page: 1,
                limit: 50,
                campaignId: "",
                order: "desc",
            },
        };
    },
    computed: {},
    created() {
    },
    methods: {
        getTicketList() {
            this.listLoading = true;
            service.$axiosGetReprotMarketActivity202211({ type: 1 })
                .then((response) => {
                    this.listLoading = false;
                    this.list = response.data.data;
                })
                .catch((res) => {
                    this.list = [];
                    // this.total = 0;
                    this.listLoading = false;
                    this.$message.warning(res.data.errmsg);
                });
        },
        handleTicketReprotExport() {
            $(".pvtTable").table2excel({
                exclude: ".noExl",
                name: "order11",
                filename: "order11.xls", // do include extension
                preserveColors: false
            })
        },
        getDetailList() {
            this.listLoading = true;

            service.$axiosGetReprotMarketActivity202211({ type: 0 })
                .then((response) => {
                    this.listLoading = false;
                    this.details = response.data.data;
                    $("#output").pivotUI(
                        this.details,
                        {
                            rows: ["城市"],
                            cols: ["日期","分类" ],
                            aggregatorName: "求和后取整",
                            vals: ["数量"],
                            rendererName: "表格",
                            rendererOptions: {
                                table: {
                                    clickCallback: function (e, value, filters, pivotData) {
                                        var names = [];
                                        pivotData.forEachMatchingRecord(filters, function (record) {
                                            names.push(record.Name);
                                        });
                                    },
                                },
                            },
                        },
                        true,
                        "zh"
                    );
                    // $('.pvtUiCell').hide();

                })
                .catch((res) => {
                    this.list = [];
                    // this.total = 0;
                    this.listLoading = false;
                    this.$message.warning(res.data.errmsg);
                });
        }
    },
};
</script>
  
<style>
.detail-container {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
}
</style>
  