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

        <!-- 查询和其他操作 -->
        <div class="filter-container">
           
          
            <el-date-picker v-model="timeArray" type="datetimerange" class="filter-item" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" />
           
            <el-button v-permission="['GET admin:ticketReport:list']" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
        </div>

        <!-- 查询结果 -->
        <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>

            <el-table-column align="center" label="工单类型" prop="ticketType" />
            <el-table-column align="center" label="归属技能组" prop="skillGroupName" />
            <el-table-column align="center" label="工单状态" prop="statusName" />
            <el-table-column align="center" label="工单子状态"  prop="subStatusName" />
            <el-table-column align="center" label="数量"  prop="counts" />
       
          
          
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

       

    </div>
</template>

<script>

import { ticketList} from "@/api/report";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

let vm;


export default {
    name: "Order",
    components: { Pagination },
    filters: {
        orderStatusFilter(status) {
            return statusMap[status];
        },
        channelsFilter(value) {
            const rs = vm.channels.filter((item) => {
                return item.id === value;
            });
            if (rs != null && rs.length > 0) {
                return rs[0].name;
            }
        },
    },
    data() {
        return {
           campaignList:[],
            list: [],
            total: 0,
            timeArray: [new Date(new Date()- 3600 * 1000 * 24 * 90),new Date()],
            listLoading: true,
            listQuery: {
                page: 1,
                limit: 20,
                order: "desc",
            },

            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 7
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            },
            
        };
    },
    computed: {},
    beforeCreate() {
        vm = this;
    },
    created() {
       
        this.getList();
        
    },
    methods: {
       
        getList() {
            
            if (
                this.timeArray &&
                this.timeArray.length === 2
            ) {
                this.listQuery.startTime = this.formateDate(this.timeArray[0]);
                this.listQuery.endTime = this.formateDate(this.timeArray[1]);
            } else {
                this.listQuery.startTime = null;
                this.listQuery.endTime = null;
                this.$message.warning('请先选择日期范围再进行查询')
                return false;
            }
            this.listLoading = true;

            ticketList(this.listQuery)
                .then((response) => {
                    console.log(1);
                    this.list = response.data.data.list;
                    this.total = response.data.data.total;
                    this.listLoading = false;
                })
                .catch(() => {
                    this.list = [];
                    this.total = 0;
                    this.listLoading = false;
                });
        },
        handleFilter() {
            this.listQuery.page = 1;
            this.getList();
        },

      
    },
};
</script>

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