<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:ticketConsultReport: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="statusName" />
            <el-table-column v-for="(item,index) in tableList" :key="index" :label="item.name" align="center">


                <template slot-scope="scope" v-if="item.children.length==0">
                   {{ scope.row.consultType[item.id] }}
                </template>

               <el-table-column v-for="(item1,index1) in item.children" :key="index1" :label="item1.name"  v-if="item.children.length>=1" align="center">

                    <template slot-scope="scope" v-if="item1.children.length==0">
                      {{ scope.row.consultType[item1.id] }}
                     </template>
                    <el-table-column v-for="(item2,index2) in item1.children" :key="index2" :label="item2.name"  v-if="item1.children.length>=1" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.consultType[item2.id] }}
                     </template>
                     </el-table-column>
               </el-table-column>



            </el-table-column>

            <!-- <el-table-column v-for="(item,index) in tableList" :key="index" :label="item.name">


               <el-table-column v-for="(item1,index1) in item.children" :key="index1" :label="item1.name">
                 <el-table-column v-for="(item2,index2) in item1.children" :key="index2" :label="item2.name" >
      <template slot-scope="scope">
                   {{ scope.row.consultType[item2.id] }}
                </template>
               </el-table-column>
               </el-table-column>
            </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,
    consultList
} 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: [],
            tableList:[],
            // total: 0,
            // tableList:[
            //     {
            //       name:'咨询',
            //       children:[
            //           {name:'产品',
            //            children:[
            //                {name:'M1',
            //                 prop:'taskname'
            //                },
            //                {name:'M6',
            //                 prop:'tasksum'
            //                }
            //            ]
            //           },
            //           {name:'服务',
            //            children:[
            //                {name:'日保',
            //                 prop:'taskname'
            //                },
            //                {name:'品类',
            //                 prop:'tasksum'
            //                }
            //            ]
            //           }
            //       ]
            //     },
            //     {
            //       name:'投诉',
            //       children:[
            //           {name:'阿姨',
            //            children:[
            //                {name:'M1',
            //                 prop:'taskname'
            //                },
            //                {name:'M6',
            //                 prop:'tasksum'
            //                }
            //            ]
            //           },
            //           {name:'客户',
            //            children:[
            //                {name:'日保',
            //                 prop:'taskname'
            //                },
            //                {name:'品类',
            //                 prop:'tasksum'
            //                }
            //            ]
            //           }
            //       ]
            //     }
                
            // ],
            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;

            consultList(this.listQuery)
                .then((response) => {
                    this.tableList = response.data.data.consultTypeData;
                    this.list = response.data.data.ticketConsultTypeData;
                    // 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>
