<template>
    <div>
        <Row :gutter="32">
            <i-col span="32">
                <row>
                    <!--筛选-->
                    <row>
            <span>
              <span class="title-span">
                <span class="date-btn" :style="dateBtnValue === '今日' ? 'background: #2D8CF0;color: #fff' : ''"
                      @click="dateBtnClick('今日')">今日</span>
                <span class="date-btn" :style="dateBtnValue === '本周' ? 'background: #2D8CF0;color: #fff' : ''"
                      @click="dateBtnClick('本周')">本周</span>
                <span class="date-btn" :style="dateBtnValue === '本月' ? 'background: #2D8CF0;color: #fff' : ''"
                      @click="dateBtnClick('本月')">本月</span>
                <span class="date-btn" :style="dateBtnValue === '自定义' ? 'background: #2D8CF0;color: #fff' : ''"
                      @click="dateBtnClick('自定义')">自定义</span>
              </span>
            </span>
                        <span class="title-select-date">
              <span class="view-text">{{dateBtnValue}}概览</span>
              <span v-if="dateBtnValue !== '自定义'" class="view-date">{{viewDate}}</span>
              <span class="left-10" v-if="dateBtnValue === '自定义'" style="vertical-align: top">
                <DatePicker v-model="selectStartTime"  type="date" placeholder="请选择时间"
                            class="date-picker" size="small" @on-change="diyDateChange"></DatePicker>
                <span style="margin: 0 5px">至</span>
                <DatePicker v-model="selectEndTime" type="date" placeholder="请选择时间"
                            class="date-picker" size="small" @on-change="diyDateChange"></DatePicker>
              </span>
              <img src="../../../static/img/bsd-logo.png" class="title-logo"/>
            </span>
                    </row>
                    <!--柱状图-->
                    <row class="top-10">
                        <i-col span="24" class="outline">
                            <span class="blue-logo"></span>
                            <span class="chart-title-date">累计拓客报表</span>
                            <span style="font-size: 14px;color:#666;margin-left: 100px">
                                拓客<input-number  size="small" :min="1" v-model="count"></input-number>以内门店数量
                            </span>
                            <ve-histogram :data="chartData" :extend="chartExtend" :settings="chartSettings"  :colors="chartColor"></ve-histogram>
                        </i-col>
                    </row>
                    <Spin style="top: 50px" size="large" fix v-if="spinShow"></Spin>
                </row>
            </i-col>
        </Row>
    </div>
</template>
<script>

    import customerView from "../../services/datacenter/customerView";
    import 'echarts/lib/chart/line'
    import 'echarts/lib/component/toolbox'
    export default {
        inject: ['setMenuName'],
        data() {
            return {
                userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId,
                //加载遮罩
                spinShow: false,
                count: 3,
                dateBtnValue: "今日",
                viewDate: this.$moment(new Date()).format("YYYY-MM-DD"),
                //近七天日期
                recentName: "近七天",
                //选中时间
                selectStartTime: "",
                selectEndTime: "",
                //柱状图时间
                startTime: "",
                endTime: "",
                chartExtend: {
                    barWidth: 28,
                    grid: {
                        left:50,
                        right:50,
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: { show: true, readOnly: false },
                            restore: { show: true },
                            saveAsImage: { show: true },
                            myTool1: {
                                show: true,
                                title: '下载excel',
                                icon:'path://M877.6 289.5L656 68.4c-2.8-2.8-6.6-4.4-10.6-4.4h-463c-22.3 0-40.5 18.1-40.5 40.4v815.2c0 22.3 18.1 40.4 40.5 40.4h659.1c22.3 0 40.5-18.1 40.5-40.4V300.1c0-4-1.6-7.8-4.4-10.6zM641.2 96.1l207.6 207.2H641.2V96.1zM841.5 930h-659c-5.8 0-10.5-4.7-10.5-10.4V104.4c0-5.6 4.8-10.4 10.5-10.4h428.8v224.3c0 8.3 6.7 15 15 15H852v586.3c0 5.7-4.7 10.4-10.5 10.4z M447.9 520.2h-32l-44.8 74.2c-3.3 5.7-6 11-8.3 16.1h-0.6c-2.5-5.9-5-11-7.6-15.4l-42.8-74.9h-34.3l66.3 107.7-72.1 108.6H306l49.8-81.3c3.2-6.8 4.8-10.6 5-11.3h0.7c2.1 5.6 3.8 9.3 4.9 11.2l48.4 81.4h34l-68.7-109.1 67.8-107.2zM509 520.2h-28v216.3h114.4v-24.7H509zM693.9 616.5c-19.3-9.5-31.9-17-37.6-22.5-5.8-5.5-8.7-12.6-8.7-21.4 0-9.9 4.2-17.6 12.5-23.1s19.1-8.3 32.4-8.3c20 0 36.5 4.5 49.5 13.5v-30.4c-10.1-5.2-25.9-7.8-47.4-7.8-22 0-40.3 5.3-54.7 15.8-14.5 10.5-21.7 24.8-21.7 42.7 0 11.9 3.5 22.5 10.4 31.8s21.2 19.3 43 30.1c15.7 7.7 26.4 13.5 32 17.2 5.7 3.7 10.2 8 13.4 12.8 3.3 4.8 4.9 10.3 4.9 16.3 0 21.6-15.2 32.4-45.6 32.4-10 0-20.5-1.9-31.6-5.6-11.1-3.7-20-8.5-26.6-14.2v31.8c5.2 3.5 13.5 6.5 25 8.9 11.4 2.4 21.4 3.6 30 3.6 24.5 0 43.7-5.1 57.5-15.2 13.8-10.1 20.7-24.7 20.7-43.7 0-12.7-4.2-24.1-12.7-34.2-8.6-10.2-23.4-20.3-44.7-30.5z',
                                onclick: function (data){
                                    let title =JSON.stringify(data.getOption().series[0].name);
                                    title += ","+JSON.stringify(data.getOption().series[1].name);
                                    let jsonData =JSON.stringify(data.getOption().series[0].data);//将series转成JSON字符串
                                    jsonData += "##"+JSON.stringify(data.getOption().series[1].data);
                                    let company =JSON.stringify(data.getOption().xAxis[0].data);//将series转成JSON字符串
                                    let request = {
                                        title: title,
                                        jsonData: jsonData,
                                        company: company,
                                    };
                                    //加载遮罩
                                    this.spinShow = true;
                                    customerView.downLoadExcel(request, title,function (data) {

                                    });
                                }
                            },
                        }
                    },
                    label: {show: false, position: "top"},
                    xAxis: {
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            fontSize: 10,
                            fontWeight:"normal"
                        },
                        triggerEvent: true
                    },
                    dataZoom: {
                        type: "slider",
                        realtime: true, //拖动滚动条时是否动态的更新图表数据
                        height: 25, //滚动条高度
                        start: 0, //滚动条开始位置（共100等份）
                        end: 100 //结束位置（共100等份）
                    }
                },
                chartColor: ["#FFCC00","#EC6A2F"],
                chartData: {
                    columns: ['零售公司','店铺数','发起申请数'],
                    rows: [
                        {'零售公司': 'qishuo', '发起申请数': 14, '店铺数': 7},
                        {'零售公司': 'qishuo', '发起申请数': 7, '店铺数': 3},
                        {'零售公司': 'qishuo', '发起申请数': 8, '店铺数': 4},
                        {'零售公司': 'qishuo', '发起申请数': 5, '店铺数': 2},
                        {'零售公司': 'qishuo', '发起申请数': 10, '店铺数': 9}
                    ]
                },
                chartSettings : {
                    showLine: ['发起申请数']
                }
            }
        },
        mounted: function () {
            this.dateBtnClick('今日');
            this.timingRefresh();
        },
        methods: {
            //页面重绘
            resizeWindow: function () {
                let event = document.createEvent("HTMLEvents");
                event.initEvent("resize", true, true);
                window.dispatchEvent(event);
            },
            //日期按钮
            dateBtnClick: function (value) {
                switch (value) {
                    case '今日':
                        this.dateBtnValue = "今日";
                        this.recentName = "近七天";
                        this.dateSelectChange('今日');
                        this.chartExtend.barWidth = 28;
                        this.chartExtend.label.show = true;
                        break;
                    case '本周':
                        this.dateBtnValue = "本周";
                        this.recentName = "本周";
                        this.dateSelectChange('本周');
                        this.chartExtend.barWidth = 28;
                        this.chartExtend.label.show = true;
                        break;
                    case '本月':
                        this.dateBtnValue = "本月";
                        this.recentName = "本月";
                        this.dateSelectChange('本月');
                        this.chartExtend.barWidth = 28;
                        this.chartExtend.label.show = true;
                        break;
                    case '自定义':
                        this.dateBtnValue = "自定义";
                        this.recentName = "自定义";
                        this.diyDateChange();
                        break;
                }
            },
            //自定义日期
            diyDateChange: function () {
                if (this.selectStartTime && this.selectEndTime) {
                    this.dateSelectChange('自定义');
                }
            },
            //日期改变
            dateSelectChange: function (value) {
                //概览日期text
                let nowDate = this.$moment(new Date());
                switch (value) {
                    case '今日':
                        this.viewDate = nowDate.format("YYYY-MM-DD");
                        this.selectStartTime = this.$moment(new Date()).format("YYYY-MM-DD 00:00:00");
                        this.selectEndTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
                        this.startTime = this.$moment(new Date()).add(-6, "days").format("YYYY-MM-DD 00:00:00");
                        this.endTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
                        break;
                    case '本周':
                        this.viewDate = nowDate.startOf('week').format("YYYY-MM-DD") + ' 至 ' + this.$moment(new Date()).format("YYYY-MM-DD");
                        this.selectStartTime = this.$moment(new Date()).startOf("week").format("YYYY-MM-DD 00:00:00");
                        this.selectEndTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
                        this.startTime = this.selectStartTime;
                        this.endTime = this.$moment(new Date()).endOf("week").format("YYYY-MM-DD HH:mm:ss");
                        break;
                    case '本月':
                        this.viewDate = nowDate.startOf('month').format("YYYY-MM-DD") + ' 至 ' + this.$moment(new Date()).format("YYYY-MM-DD");
                        this.selectStartTime = this.$moment(new Date()).startOf("month").format("YYYY-MM-DD 00:00:00");
                        this.selectEndTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
                        this.startTime = this.selectStartTime;
                        this.endTime = this.$moment(new Date()).endOf("month").format("YYYY-MM-DD HH:mm:ss");
                        break;
                    case '自定义':
                        this.selectStartTime = this.$moment(this.selectStartTime).format("YYYY-MM-DD 00:00:00");
                        this.selectEndTime = this.$moment(this.selectEndTime).format("YYYY-MM-DD 23:59:59");
                        this.startTime = this.selectStartTime;
                        this.endTime = this.selectEndTime;
                        break;
                }
                this.getMainList();
            },
            /**mainList*/
            getMainList: function () {
                let request = {
                    count: this.count,
                    selectStartTime: this.selectStartTime == null ? null : this.$moment(this.selectStartTime).format("YYYY-MM-DD 00:00:00"),
                    selectEndTime: this.selectEndTime == null ? null : this.$moment(this.selectEndTime).format("YYYY-MM-DD HH:mm:ss"),
                };
                let that = this;
                //加载遮罩
                this.spinShow = true;
                customerView.getAnalysisApplyRequest(request, function (data) {
                    that.spinShow = false;
                    if (data.data.code !== "0000") {
                        that.$Message.error("系统异常");
                    }
                    data = data.data.results;
                    // that.customerViewVO = data;//数据部分没刷新
                    that.chartData.rows = [];
                    for (let i = 0;i<data.length;i++) {
                        let obj1 = {
                            "零售公司": data[i].companyName,
                            "发起申请数": data[i].applyCustomer,
                            "店铺数": data[i].storeNum
                        };
                        that.chartData.rows.push(obj1);
                    }
                    //页面重绘(柱状图)
                    that.resizeWindow();
                });
            }
        }
    }
</script>
<style scoped>
    /*日期按钮*/
    .date-btn {
        display: inline-block;
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 8px;
        cursor: pointer;
    }

    /*概览字体*/
    .view-text {
        font-size: 18px;
        font-weight: 600;
        font-family: "Microsoft YaHei";
    }

    /*概览日期*/
    .view-date {
        font-size: 16px;
        color: #97A4B3;
        margin-left: 10px;
    }

    /*蓝色logo*/
    .blue-logo {
        background: #1A80D2;
        height: 26px;
        width: 6px;
        border-radius: 3px;
        display: inline-block;
        vertical-align: middle;
    }

    /*外面的边框*/
    .outline {
        border: #e8ecf2 2px solid;
        padding: 10px;
        border-radius: 4px;
    }

    .left-10 {
        margin-left: 10px;
    }

    .top-10 {
        margin-top: 10px;
    }


    .title-span {
        width: 330px;
        border: 1px solid #E8ECF2;
        border-radius: 8px;
        padding: 3px;
        display: inline-block;
    }

    .title-select-date {
        height: 38px;
        line-height: 38px;
        margin-left: 25px;
    }

    .date-picker {
        width: 120px;
    }

    .title-logo {
        position: absolute;
        right: 0px;
        top: -10px;
    }


    .chart-title-date {
        display: inline-block;
        margin-left: 5px;
        font-size: 16px;
        font-weight: bold;
        color:#666666;
    }
</style>
