<style>
    .channelCodeStatistics .q-pr-lg {
        padding-right: 0;
        margin-top: 20px;
    }

    .channelCodeStatistics .todaybox {
        height: 120px;
        padding: 10px;
        font-size: 13px;
        color: #FFF;
    }

    .channelCodeStatistics .todayboxt {
        font-size: 24px;
        font-weight: bold;
    }

    .channelCodeStatistics .el-range-editor .el-range-input {
        background: transparent;
    }

    .channelCodeStatistics .el-range-editor.el-input__inner {
        background-color: transparent;
    }
</style>
<template>
    <div class="channelCodeStatistics page-body">
        <q-btn color="accent" style="margin-bottom:20px" size="sm" class="q-mr-md" icon='iconfont icon-fanhui'
            label="返回" @click="goblack()"></q-btn>
        <div class="page-search row items-center">
            <div class="col row wrap q-mr-lg q-col-gutter-md">
                <div class="col-3 ">
                    <div class="todaybox " style='background:#40a9ff'>
                        <p>今日新增客户数</p>
                        <p class="todayboxt">{{ForDayobj && ForDayobj.AddNum ? ForDayobj.AddNum:'0'}}</p>
                    </div>
                </div>
                <div class="col-3">
                    <div class="todaybox " style='background:#fcc71b'>
                        <p>今日被客户删除/拉黑的人数</p>
                        <p class="todayboxt">{{ForDayobj && ForDayobj.BlacklistNum ? ForDayobj.BlacklistNum:'0'}}</p>
                    </div>

                </div>
                <div class="col-3 ">
                    <div class="todaybox " style='background:#8f8aff'>
                        <p>今日删除人数</p>
                        <p class="todayboxt">{{ForDayobj && ForDayobj.DelNum ? ForDayobj.DelNum:'0'}}</p>
                    </div>

                </div>
                <div class="col-3">
                    <div class="todaybox " style='background:#f9688e'>
                        <p>今日净增人数</p>
                        <p class="todayboxt">{{ForDayobj && ForDayobj.NetNum ? ForDayobj.NetNum:'0'}}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="page-content">
            <div class="row items-center">
                <q-btn-toggle v-model="msg.Type" toggle-color="primary" @input="gettime" :options="[
                    {label: '按日', value: '1'},
                    {label: '按周', value: '2'},
                    {label: '按月', value: '3'}
                ]" />
                <div style="margin-left: 20px;">
                    <div class="col-3">
                        <q-field filled>
                             <template v-slot:control>
                                <el-date-picker v-model="dateList" @change="ChannelStatistics()" value-format="yyyy-MM-dd" type="daterange" style="border:none;"
                                     :disabled="msg.Type==2||msg.Type==3" range-separator="至"  start-placeholder="开始时间"
                                     end-placeholder="结束时间">
                                </el-date-picker>       
                            </template>
                        </q-field>
                    </div>
                </div>
            </div>
            <div style="margin-top: 20px;">这段时间里，共新增客户数 {{totalnum.AddNum}} 人，被客户删除/拉黑 {{totalnum.BlacklistNum}}
                人，员工删除客户 {{totalnum.DelNum}} 人，净增人数 {{totalnum.NetNum}} 人</div>
            <div id="main" style="width: 100%;height:500px;"> </div>
            <q-table :pagination="msg2" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table"
                style="margin-top: 20px;" separator="none" title="" :data="data" :columns="columns" row-key="name">
                <template v-slot:top="props">
                    <div class="col-2 q-table__title">详情数据</div>
                    <q-space />

                </template>


                <template v-slot:body-cell-SkipVerify="props">
                    <q-td :props="props">
                        <div>{{props.row.SkipVerify==1?'需要验证':'自动通过'}}</div>
                    </q-td>
                </template>



                <template v-slot:bottom>
                    <q-pagination class="full-width justify-end" v-model="msg2.pageIndex" color="primary"
                        :max="pageCount" :input="true" @input="changePage" />
                </template>
            </q-table>
        </div>



    </div>
</template>

<script>
    import {
        getWeChatChannelStatisticsForDay,
        getWeChatChannelStatistics,
        getWeChatChannelStatisticsPageList

    } from '../../api/system/wechat';

    export default {
        meta: {
            title: "渠道码统计"
        },
        name: "channelCodeStatistics",
        data() {
            return {
                loading: false,
                ForDayobj: null,
                msg: {
                    ChannelId: 0,
                    Type: '2',//类型 1按日 2按周 3按月 (周：最近一周 月：最近一年)	
                    StartTime: '',
                    EndTime: '',
                },
                dateList: [],
                StatisticsList: [],
                totalnum: {
                    AddNum: 0,
                    DelNum: 0,
                    BlacklistNum: 0,
                    NetNum: 0,
                },
                msg2: {
                    pageIndex: 1,
                    pageSize: 10,
                    rowsPerPage: 10,
                    ChannelId: 0,
                    Type: "2",
                    StartTime: '',
                    EndTime: '',

                },
                data: [],
                pageCount: 0,
                columns: [
                    {
                        name: 'DateStr',
                        label: '时间',
                        field: 'DateStr',
                        align: 'left'
                    },
                    {
                        name: 'AddNum',
                        label: '新增客户数',
                        field: 'AddNum',
                        align: 'left'
                    },
                    {
                        name: 'BlacklistNum',
                        label: '被客户删除/拉黑人数',
                        field: 'BlacklistNum',
                        align: 'left'
                    },
                    {
                        name: 'DelNum',
                        label: '删除人数',
                        field: 'DelNum',
                        align: 'left'
                    },
                    {
                        name: 'NetNum',
                        label: '净增客户数',
                        field: 'NetNum',
                        align: 'left'
                    },
                ]
            }
        },
        created() {
            if (this.$route.query && this.$route.query.Id) {
                this.msg.ChannelId = this.$route.query.Id
                this.msg2.ChannelId = this.$route.query.Id
            }
            this.gettoday()
        },
        methods: {
            gettoday() {
                this.loading = true
                getWeChatChannelStatisticsForDay({ ChannelId: this.msg.ChannelId }).then(res => {
                    this.loading = false
                    this.ForDayobj = res.Data
                })
                this.ChannelStatistics()
            },
            ChannelStatistics() {
                if (this.msg.Type == 1) {
                    if (this.dateList && this.dateList.length > 0) {
                        this.msg.StartTime = this.dateList[0]
                        this.msg.EndTime = this.dateList[1]
                    } else {
                        this.$q.notify({
                            type: 'negative',
                            message: `请输入日期范围`,
                            position: 'top'
                        })
                        return
                    }
                }
                getWeChatChannelStatistics(this.msg).then(res => {
                    this.StatisticsList = res.Data
                    this.totalnum.AddNum = 0;
                    this.totalnum.DelNum = 0;
                    this.totalnum.BlacklistNum = 0;
                    this.totalnum.NetNum = 0;
                    if (res.Data && res.Data.length > 0) {
                        res.Data.map(x => {
                            this.totalnum.AddNum += x.AddNum;
                            this.totalnum.DelNum += x.DelNum;
                            this.totalnum.BlacklistNum += x.BlacklistNum;
                            this.totalnum.NetNum += x.NetNum;
                        })
                    }
                    this.tubiao()
                    this.getStatisticsPageList()

                })
            },
            getStatisticsPageList() {
                this.msg2.Type = this.msg.Type;
                this.msg2.StartTime = this.msg.StartTime;
                this.msg2.EndTime = this.msg.EndTime;
                getWeChatChannelStatisticsPageList(this.msg2).then(res => {
                    this.data = res.Data.PageData;
                    this.pageCount = res.Data.PageCount
                })
            },
            changePage(e) {
                this.msg.pageIndex = e
                this.getStatisticsPageList()
            },
            gettime() {
                if (this.msg.Type == 1) {
                    if (this.dateList.length == 0 || this.dateList == null) {
                        //昨天的时间
                        var day1 = new Date();
                        day1.setDate(day1.getDate() - 6);
                        this.dateList.push(day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate());
                        //今天的时间
                        var day2 = new Date();
                        day2.setTime(day2.getTime());
                        this.dateList.push(day2.getFullYear() + "-" + (day2.getMonth() + 1) + "-" + day2.getDate());
                    }


                }
                this.ChannelStatistics()
            },
            tubiao() {
                var echarts = require('echarts')
                var myChart;
                myChart = echarts.init(document.getElementById('main'))
                let xAxisdata = []
                if (this.msg.Type == 1) {//按日
                    xAxisdata = this.getDayAll(this.msg.StartTime, this.msg.EndTime);
                } else if (this.msg.Type == 2) {//按周
                    let date1 = new Date();
                    let time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();//time1表示当前时间
                    var date2 = new Date(date1);
                    date2.setDate(date1.getDate() - 6);//7天前
                    var time2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
                    xAxisdata = this.getDayAll(time2, time1);
                } else if (this.msg.Type == 3) {
                    xAxisdata = [];
                    var data = new Date();
                    var year = data.getFullYear();
                    data.setMonth(data.getMonth() + 1, 1)//获取到当前月份,设置月份
                    for (var i = 0; i < 12; i++) {
                        data.setMonth(data.getMonth() - 1);//每次循环一次 月份值减1
                        var m = data.getMonth() + 1;
                        m = m < 10 ? "0" + m : m;
                        xAxisdata.unshift(data.getFullYear() + "-" + (m))
                    }
                }
                let seriesData = [
                    { name: '新增客户数', type: 'line', data: [], smooth: true, },
                    { name: '被客户删除/拉黑的人数', type: 'line', data: [], smooth: true, },
                    { name: '删除人数', type: 'line', data: [], smooth: true, },
                    { name: '净增人数', type: 'line', data: [], smooth: true, },
                ]
                xAxisdata.forEach(x => {
                    if (this.StatisticsList.length > 0) {
                        for (var i = 0; i < this.StatisticsList.length; i++) {
                            if (x == this.StatisticsList[i].DateStr) {
                                seriesData[0].data.push(this.StatisticsList[i].AddNum)
                                seriesData[1].data.push(this.StatisticsList[i].BlacklistNum)
                                seriesData[2].data.push(this.StatisticsList[i].DelNum)
                                seriesData[3].data.push(this.StatisticsList[i].NetNum)
                                return
                            } else {
                                if (i + 1 == this.StatisticsList.length) {
                                    seriesData[0].data.push(0)
                                    seriesData[1].data.push(0)
                                    seriesData[2].data.push(0)
                                    seriesData[3].data.push(0)
                                }
                            }

                        }
                    } else {
                        seriesData[0].data.push(0)
                        seriesData[1].data.push(0)
                        seriesData[2].data.push(0)
                        seriesData[3].data.push(0)
                    }


                })
                var option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        grid: {
                            left: '2%',
                            right: '2%',
                            bottom: '10%',
                            containLabel: true
                        },
                        legend: {
                            data: ['新增客户数', '被客户删除/拉黑的人数', '删除人数', '净增人数']
                        },
                        xAxis: {
                            type: 'category',
                            data: xAxisdata,

                        },
                        dataZoom: [{ // 第一个 dataZoom 组件
                            xAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 xAxis
                        },
                        { // 第二个 dataZoom 组件
                            xAxisIndex: 3      // 表示这个 dataZoom 组件控制 第四个 xAxis
                        }],
                        yAxis: {
                            type: 'value'
                        },
                        series: seriesData
                    }
           

                myChart.setOption(option)
            },
            getDayAll(starDay, endDay) {

                var arr = [];
                var dates = [];

                // 设置两个日期UTC时间
                var db = new Date(starDay);
                var de = new Date(endDay);

                // 获取两个日期GTM时间
                var s = db.getTime() - 24 * 60 * 60 * 1000;
                var d = de.getTime() - 24 * 60 * 60 * 1000;

                // 获取到两个日期之间的每一天的毫秒数
                for (var i = s; i <= d;) {
                    i = i + 24 * 60 * 60 * 1000;
                    arr.push(parseInt(i))
                }

                // 获取每一天的时间  YY-MM-DD
                for (var j in arr) {
                    var time = new Date(arr[j]);
                    var year = time.getFullYear(time);
                    var mouth = (time.getMonth() + 1) >= 10 ? (time.getMonth() + 1) : ('0' + (time.getMonth() + 1));
                    var day = time.getDate() >= 10 ? time.getDate() : ('0' + time.getDate());
                    var YYMMDD = year + '-' + mouth + '-' + day;
                    dates.push(YYMMDD)
                }

                return dates
            },
            goblack() {
                this.$router.go(-1);//返回上一层
            }

        }
    }

</script>