<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-select v-model="listQuery.campaignId"  style="width: 200px" class="filter-item" placeholder="请选择任务" clearable>
                <el-option v-for="(item, index) in campaignList" :key="index" :label="item.name" :value="item.id" />
            </el-select>
       
            <el-button v-permission="['GET admin:builtlistReport: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="userName" />
            <el-table-column align="center" label="任务名" min-width="150" prop="taskname" />
            <el-table-column align="center" label="任务数" prop="tasksum" />
            <el-table-column align="center" label="已拨打" prop="dialed" />
            <el-table-column align="center" label="未拨打"  prop="nodialed" />
            <el-table-column align="center" label="成功"  prop="dialedsuccess" />
            <el-table-column align="center" label="未接通"  prop="noconnect" />
            <el-table-column align="center" label="拒访"  prop="refuse" />
            <!-- <el-table-column align="center" label="订单渠道" min-width="90" prop="orderChannel">
                <template slot-scope="scope">
                    <el-tag type="success">{{ scope.row.orderChannel | channelsFilter }}</el-tag>
                </template>
            </el-table-column> -->

            
        </el-table>

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

       

    </div>
</template>

<script>

import {
    taskName,
    taskList
} 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,
                campaignId:'',
                
                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.getTaskName();
        this.getList();
        
    },
    methods: {
          getTaskName() {
           let params={
               page:1,
               limit:50,
               sort:'id',
               order:'desc'
           }
            taskName(params)
                .then((response) => {
                   this.campaignList=response.data.data.list;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
       
        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;

            taskList(this.listQuery)
                .then((response) => {
                    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>
