<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>预采&日常回访</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- <el-card shadow="hover"> -->
        <el-tabs type="border-card">
            <el-tab-pane label="预采任务">
                <!-- 搜索 -->
                <el-form :inline="true" size="small" v-model="listQuery">
                    <el-form-item label="回访时间">
                        <el-date-picker v-model="timeArray1" type="daterange" value-format="yyyy-MM-dd" class="filter-item"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="{}" />
                    </el-form-item>
                    <el-form-item label="回访任务">
                        <el-select v-model="listQuery.campaignId" clearable placeholder="请选择回访任务">
                            <el-option v-for="(item, index) in campaignList" :key="index" :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-search" type="primary" plan @click="querySearch(false)">查询</el-button>
                        <el-button type="primary" icon="el-icon-download" @click="querySearch(true)">导出</el-button>
                    </el-form-item>
                </el-form>

                <el-table :data="listData1" :ref="listData1" border style="width: 100%" class="table">
                    <el-table-column prop="预采任务" label="预采任务"></el-table-column>
                    <el-table-column prop="日期" label="日期"></el-table-column>
                    <el-table-column prop="当日预采总数" label="当日预采总数"></el-table-column>
                    <el-table-column prop="累计拨打数" label="累计拨打数"></el-table-column>
                    <el-table-column prop="累计成功接听" label="累计成功接听"></el-table-column>
                    <el-table-column prop="企微添加数" label="企微添加数"></el-table-column>
                    <el-table-column prop="企微添加成功率" label="企微添加成功率"></el-table-column>
                    <el-table-column prop="保洁客户数" label="保洁客户数"></el-table-column>
                    <el-table-column prop="保洁累计拨打数" label="保洁累计拨打数"></el-table-column>
                    <el-table-column prop="保洁累计成功接听" label="保洁累计成功接听"></el-table-column>
                    <el-table-column prop="保洁企微添加数" label="保洁企微添加数"></el-table-column>
                    <el-table-column prop="品类客户数" label="品类客户数"></el-table-column>
                    <el-table-column prop="品类累计拨打数" label="品类累计拨打数"></el-table-column>
                    <el-table-column prop="品类累计成功接听" label="品类累计成功接听"></el-table-column>
                    <el-table-column prop="品类企微添加数" label="品类企微添加数"></el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="日常回访">
                <el-form :inline="true" size="small" v-model="listQuery2">
                    <el-form-item label="回访时间">
                        <el-date-picker v-model="timeArray2" type="daterange" value-format="yyyy-MM-dd" class="filter-item"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="{}" />
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-search" type="primary" plan @click="querySearch2(false)">查询</el-button>
                        <el-button type="primary" icon="el-icon-download" @click="querySearch2(true)">导出</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="listData2" border style="width: 100%" class="table">
                    <el-table-column prop="回访任务" label="回访任务"></el-table-column>
                    <el-table-column prop="日期" label="日期"></el-table-column>
                    <el-table-column prop="任务数量" label="任务数量"></el-table-column>
                    <el-table-column prop="已拨打" label="已拨打"></el-table-column>
                    <el-table-column prop="成功拨打" label="成功拨打"></el-table-column>
                    <el-table-column prop="加企微数量" label="加企微数量"></el-table-column>
                    <el-table-column prop="企微添加成功率" label="企微添加成功率"></el-table-column>
                    <el-table-column prop="单次保洁单量" label="单次保洁单量"></el-table-column>
                    <el-table-column prop="单次保洁拨打" label="单次保洁拨打"></el-table-column>
                    <el-table-column prop="单次保洁拨打成功" label="单次保洁拨打成功"></el-table-column>
                    <el-table-column prop="单次保洁加企微数量" label="单次保洁加企微数量"></el-table-column>
                    <el-table-column prop="周期保洁单量" label="周期保洁单量"></el-table-column>
                    <el-table-column prop="周期保洁拨打" label="周期保洁拨打"></el-table-column>
                    <el-table-column prop="周期保洁拨打成功" label="周期保洁拨打成功"></el-table-column>
                    <el-table-column prop="周期保洁加企微数量" label="周期保洁加企微数量"></el-table-column>
                </el-table>

                <pagination :total="listQuery2.total" :page.sync="listQuery2.currentPage" :limit.sync="listQuery2.pageSize"
                    @pagination="querySearch2(false)" />
            </el-tab-pane>
            <el-tab-pane label="每日添加人数">
                <el-form :inline="true" size="small" v-model="listQuery3">
                    <el-form-item label="添加日期">
                        <el-date-picker v-model="timeArray3" type="daterange" value-format="yyyy-MM-dd" class="filter-item"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="{}" />
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-search" type="primary" plan @click="querySearch3(false)">查询</el-button>
                        <!-- <el-button type="primary" icon="el-icon-download" @click="querySearch3(true)">导出</el-button> -->
                    </el-form-item>
                </el-form>
                <!-- 保洁品类拉新 -->
                <el-table :data="listData3" border style="width: 100%" class="table">
                    <el-table-column prop="员工" label="员工"></el-table-column>
                    <el-table-column prop="日期" label="添加日期"></el-table-column>
                    <el-table-column prop="企微客户数" label="企微客户数"></el-table-column>
                    <el-table-column prop="认证客户数" label="认证客户数"></el-table-column>
                </el-table>

            </el-tab-pane>
            <el-tab-pane label="添加人数汇总">
                <el-form :inline="true" size="small" v-model="listQuery4">
                    <el-form-item label="服务时间">
                        <el-date-picker v-model="timeArray4" type="daterange" value-format="yyyy-MM-dd" class="filter-item"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="{}" />
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-search" type="primary" plan @click="querySearch4(false)">查询</el-button>
                        <el-button type="primary" icon="el-icon-download" @click="querySearch4(true)">导出</el-button>
                    </el-form-item>
                </el-form>
                <!-- 保洁品类拉新 -->
                <el-table :data="listData4" border style="width: 100%" class="table">
                    <el-table-column prop="服务日期" label="服务日期"></el-table-column>
                    <el-table-column prop="城市" label="城市"></el-table-column>
                    <el-table-column prop="渠道" label="渠道"></el-table-column>
                    <el-table-column prop="服务类型" label="服务类型"></el-table-column>
                    <el-table-column prop="服务人员类型" label="服务人员类型"></el-table-column>
                    <el-table-column prop="服务人数" label="服务人数"></el-table-column>
                    <el-table-column prop="服务人次" label="服务人次"></el-table-column>
                    <el-table-column prop="添加企微总人数" label="添加企微总人数"></el-table-column>
                    <el-table-column prop="服务后添加人数" label="服务后添加人数"></el-table-column>
                </el-table>

                <pagination :total="listQuery4.total" :page.sync="listQuery4.currentPage" :limit.sync="listQuery4.pageSize"
                    @pagination="querySearch4(false)" />
            </el-tab-pane>

            <el-tab-pane label="企微添加明细">
                <el-form :inline="true" size="small" v-model="listQuery5">
                    <el-form-item label="服务时间">
                        <el-date-picker v-model="timeArray5" type="daterange" value-format="yyyy-MM-dd" class="filter-item"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="{}" />
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-search" type="primary" plan @click="querySearch5(false)">查询</el-button>
                        <el-button type="primary" icon="el-icon-download" @click="querySearch5(true)">导出</el-button>
                    </el-form-item>
                </el-form>
                <!-- 保洁品类拉新 -->
                <el-table :data="listData5" border style="width: 100%" class="table">
                    <el-table-column prop="服务单号" label="服务单号"></el-table-column>
                    <el-table-column prop="服务日期" label="服务日期"></el-table-column>
                    <el-table-column prop="城市" label="城市"></el-table-column>
                    <el-table-column prop="渠道" label="渠道"></el-table-column>
                    <el-table-column prop="服务类型" label="服务类型"></el-table-column>
                    <el-table-column prop="服务人员类型" label="服务人员类型"></el-table-column>
                    <el-table-column prop="服务人员" label="服务人员"></el-table-column>
                    <el-table-column prop="服务人员手机" label="服务人员手机"></el-table-column>
                    <el-table-column prop="服务站" label="服务站"></el-table-column>
                    <el-table-column prop="运营老师" label="运营老师"></el-table-column>
                    <el-table-column prop="服务人员手机" label="服务人员手机"></el-table-column>
                    <el-table-column prop="服务状态" label="服务状态"></el-table-column>
                    <el-table-column prop="是否加企微" label="是否加企微"></el-table-column>
                    <el-table-column prop="添加时间" label="添加时间"></el-table-column>
                    <el-table-column prop="是否本单本服务者添加" label="是否本单本服务者添加"></el-table-column>
                    <el-table-column prop="添加服务者" label="添加服务者"></el-table-column>
                    <el-table-column prop="添加时间顺序" label="添加时间顺序"></el-table-column>
                </el-table>

                <pagination :total="listQuery5.total" :page.sync="listQuery5.currentPage" :limit.sync="listQuery5.pageSize"
                    @pagination="querySearch5(false)" />
            </el-tab-pane>


        </el-tabs>

        <!-- </el-card> -->
    </div>
</template>
<script>
import moment from "moment";
import Pagination from "./common/Pagination";
import Service from "../script/api/service";
import globalData from "@/components/common/globaldata/global.data.vue";
import commutil from "@/components/common/globaldata/commutil.data.vue";
import "@/script/table2excel";
// import addTrainHisDia from './components/addTrainHisDia';
export default {
    components: { Pagination },
    data() {
        return {
            cityList: [],
            campaignList: [],
            listData1: [],
            timeArray1: [new Date(new Date() - 3600 * 1000 * 24 * 7), new Date()],
            timeArray2: [new Date(new Date() - 3600 * 1000 * 24 * 7), new Date()],
            timeArray3: [new Date(new Date() - 3600 * 1000 * 24 * 7), new Date()],
            timeArray4: [new Date(new Date() - 3600 * 1000 * 24 * 7), new Date()],
            timeArray5: [new Date(new Date() - 3600 * 1000 * 24 * 7), new Date()],
            listQuery: {
                total: 0,
                currentPage: 1,
                pageSize: 50,
                startTime: "",
                endTime: ""
            },
            listData2: [],
            listQuery2: {
                total: 0,
                currentPage: 1,
                pageSize: 50,
                startTime: "",
                endTime: ""
            },
            listData3: [],
            listQuery3: {
                total: 0,
                currentPage: 1,
                pageSize: 50,
                startTime: "",
                endTime: "",
            },
            listData4: [],
            listQuery4: {
                total: 0,
                currentPage: 1,
                pageSize: 50,
                startTime: "",
                endTime: "",
            },
            listData5: [],
            listQuery5: {
                total: 0,
                currentPage: 1,
                pageSize: 50,
                startTime: "",
                endTime: "",
            }
        };
    },
    mounted() {
    },
    created() {
        this.getTaskName();
    },
    methods: {
        getTaskName() {
            Service
                .$axiosGetCampaign({ category: '预采回访' })
                .then((response) => {
                    console.info(response.data.data)
                    this.campaignList = response.data.data;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        querySearch(value) {
            if (this.timeArray1 == null) {
                this.$message.warning("请选择服务日期");
                return;
            }

            let temp = {
                startTime: moment(this.timeArray1[0]).format("YYYY-MM-DD"),
                endTime: moment(this.timeArray1[1]).format("YYYY-MM-DD"),
                pageIndex: this.listQuery.currentPage,
                pageSize: this.listQuery.pageSize,
                isExport: value,
                campaignId: this.listQuery.campaignId
            };
            if (value) {
                Service.$axiosGetPreCollectExport(temp);
            } else {
                Service.$axiosGetPreCollect(temp)
                    .then((res) => {
                        this.listData1 = res.data.data;
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
        },
        querySearch2(value) {
            console.info(value);
            console.info("querySearch2");
            if (this.timeArray2 == null) {
                this.$message.warning("请选择任务日期");
                return;
            }

            let temp = {
                startTime: moment(this.timeArray2[0]).format("YYYY-MM-DD"),
                endTime: moment(this.timeArray2[1]).format("YYYY-MM-DD"),
                pageIndex: this.listQuery2.currentPage,
                pageSize: this.listQuery2.pageSize,
                isExport: value,
            };
            if (value) {
                Service.$axiosGetCPDailyCallExport(temp);
            } else {
                Service.$axiosGetCPDailyCall(temp)
                    .then((res) => {
                        console.info(res.data.data);
                        this.listData2 = res.data.data;
                        console.info(res.data.data[0].rowTotal);
                        if (res.data.data.length > 0)
                            this.listQuery2.total = res.data.data[0].rowTotal;
                        else this.listQuery2.total = 0;
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
        },
        querySearch3(value) {
            console.info("querySearch3");
            if (this.timeArray3 == null) {
                this.$message.warning("请选择添加日期");
                return;
            }

            let temp = {
                isExport: value,
                startTime: moment(this.timeArray3[0]).format("YYYY-MM-DD"),
                endTime: moment(this.timeArray3[1]).format("YYYY-MM-DD"),
            };
            if (value) {
                Service.$axiosGetCPJoin(temp);
            } else {
                Service.$axiosGetCPJoin(temp)
                    .then((res) => {
                        this.listData3 = res.data.data;
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
        },
        querySearch4(value) {
            console.info(value);
            console.info("querySearch4");
            if (this.timeArray4 == null) {
                this.$message.warning("请选择服务日期");
                return;
            }
            let days = moment(this.timeArray4[1]).diff(moment(this.timeArray4[0]), "days");
            if (days > 31) {
                this.$message.warning("请调整服务日期范围，不能超过30天");
                return;
            }

            let temp = {
                pageIndex: this.listQuery4.currentPage,
                pageSize: this.listQuery4.pageSize,
                isExport: value,
                startTime: moment(this.timeArray4[0]).format("YYYY-MM-DD"),
                endTime: moment(this.timeArray4[1]).format("YYYY-MM-DD"),
            };
            if (value) {
                Service.$axiosGetCPTotalExport(temp);
            } else {
                Service.$axiosGetCPTotal(temp)
                    .then((res) => {
                        this.listData4 = res.data.data.list;
                        this.listQuery4.total = res.data.data.total;
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
        },
        querySearch5(value) {
            console.info(value);
            console.info("querySearch5");
            if (this.timeArray5 == null) {
                this.$message.warning("请选择服务日期");
                return;
            }
            let days = moment(this.timeArray5[1]).diff(moment(this.timeArray5[0]), "days");
            if (days > 31) {
                this.$message.warning("请调整服务日期范围，不能超过30天");
                return;
            }

            let temp = {
                pageIndex: this.listQuery5.currentPage,
                pageSize: this.listQuery5.pageSize,
                isExport: value,
                startTime: moment(this.timeArray5[0]).format("YYYY-MM-DD"),
                endTime: moment(this.timeArray5[1]).format("YYYY-MM-DD"),
            };
            if (value) {
                Service.$axiosGetCPDetailExport(temp);
            } else {
                Service.$axiosGetCPDetail(temp)
                    .then((res) => { 
                        this.listData5 = res.data.data.list;
                        this.listQuery5.total = res.data.data.total;
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
        }
    },
};
</script>
<style>
.crumbs {
    margin: 0 0 10px 0;
}
</style>