<template>
    <div>
        <!-- <div style="text-align: center; font-size:32px">私域销售及服务看板</div> -->
        <div style="font-size:11px;color:#666;padding-bottom: 2px;float:right;margin-right:10px;margin-top: 15px;">
            更新时间：{{ refreshTime }}</div>
        <div class="top">
            <div>
                <el-tabs v-model="activeChannel"  @tab-click="tabChannelChange">
                    <el-tab-pane label="抖音+原生" name="抖音" style="font-weight: 600;"></el-tab-pane>
                    <el-tab-pane label="美团点评" name="美团点评"></el-tab-pane>
                    <el-tab-pane label="快手" name="快手"></el-tab-pane>
                    <el-tab-pane label="微信商城" name="微信商城"></el-tab-pane>
                    <el-tab-pane label="全渠道" name="全渠道"></el-tab-pane>
                </el-tabs>
            </div>
            <div class="items" style="display: flex;">
                <div class="item" style="flex:1">
                    <div class="content border-right">
                        <div class="title">
                            <div class="sub-title">今日销量</div>
                            <div style="display: flex;justify-content: center;">
                                <div style="font-size:32px;margin-left:10px;">￥{{ salesToday.gmv }}</div>
                                <div style="font-size:22px;margin-left:10px;margin-top:10px;color:#333">
                                    单量:{{ salesToday.orders }}单</div>
                            </div>
                        </div>
                        <div class="detail">
                            <div class="border-right">保洁:￥{{ salesToday.bjGmv }} 单量:{{ salesToday.bjOrders }}单</div>
                            <div class="border-right">品类:￥{{ salesToday.plGmv }} 单量:{{ salesToday.plOrders }}单</div>
                            <div>其他:￥{{ salesToday.otherGmv }} {{ salesToday.otherOrders }}单</div>
                        </div>
                    </div>
                </div>

                <div class="item" style="flex:1">
                    <div class="content">
                        <div class="title">
                            <div class="sub-title">本月累计</div>
                            <div style="display: flex;justify-content: center;">
                                <div style="font-size:32px;margin-left:10px;">￥{{ salesMonth.gmv }}</div>
                                <div style="font-size:22px;margin-left:10px;margin-top:10px;color:#333">
                                    单量:{{ salesMonth.orders }}单</div>
                            </div>
                        </div>
                        <div class="detail">
                            <div class="border-right">保洁:￥{{ salesMonth.bjGmv }} 单量:{{ salesMonth.bjOrders }}单</div>
                            <div class="border-right">品类:￥{{ salesMonth.plGmv }} 单量:{{ salesMonth.plOrders }}单</div>
                            <div>其他:￥{{ salesMonth.otherGmv }} 单量:{{ salesMonth.otherOrders }}单</div>
                        </div>
                    </div>
                </div>
            </div>
            <el-tabs v-model="activeName" @tab-click="tabChange">
                <el-tab-pane name="map" label="销售热力图" style="background-color: #fff;">
                    <div style="text-align:center;">
                        <el-radio-group v-model="mapDataRank" @change="mapTabChange">
                            <el-radio-button label="今日" value="今日" key="今日"></el-radio-button>
                            <el-radio-button label="近7天" value="近7天" key="近7天"></el-radio-button>
                            <el-radio-button label="近30天" value="近30天" key="近30天"></el-radio-button>
                        </el-radio-group>
                    </div>
                    <div id="container" style="height: 600px"></div>
                </el-tab-pane>
                <el-tab-pane name="line" label="销售走势图" style="background-color: #fff">
                    <div style="padding:10px;margin:10px 0;border-radius: 10px;">
                        <div id="lineChart" style="height: 560px;min-width:600px;"></div>
                    </div>
                </el-tab-pane>
                <el-tab-pane name="book" label="已核销走势图" style="background-color: #fff">
                    <div>每日直营或加盟商的已完成（核销）服务工单量</div>
                    <div style="padding:10px;margin:10px 0;border-radius: 10px;">
                        <div id="bookChart" style="height: 560px;min-width:600px;"></div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>


<script>
import moment from "moment";
import service from '../../script/api/service';

var map;

export default {
    name: "douyinBoard",
    data() {
        return {
            mapDataRank: '今日',
            activeChannel: '抖音',
            activeName: "line",
            cityList: [],
            list: [],
            total: 0,
            refreshTime: '',//刷新时间
            listLoading: false,
            salesToday: '',//当日销售
            salesMonth: '',//当月销售
            lineData: [],
            bookData: [],
            dayss: 1
        };
    },
    watch: {
        activeName(val) {
            this.$nextTick(() => {
                const myEvent = document.createEvent("HTMLEvents");
                myEvent.initEvent("resize", false, true);
                window.dispatchEvent(myEvent);
            });
        }
    },
    computed: {
    },
    mounted() {
        this.getData();
    },
    created() {
        this.cityList = JSON.parse(window.localStorage.getItem("allHmCity"));
    },
    methods: {

        getData() {
            this.dayss = 1;
            this.activeName = "line", 
            this.getSalesToday();
            this.getSalesMonth();
            this.getLineData();
        },
        tabChannelChange() {
            this.getData();
        },
        getSalesToday() {
            service.$axiosGetDYSalesTodayTotal({ channel: this.activeChannel }).then(res => {
                this.salesToday = res.data.data.data;
                this.refreshTime = moment(res.data.data.refreshTime).format("YYYY-MM-DD HH:mm:ss");
            })
        },
        tabChange(e) {
            console.info(this.activeName)
            if (this.activeName == 'book') {
                service.$axiosGetDYBookLineData({ channel: this.activeChannel }).then(
                    res => {
                        this.bookData = res.data.data;
                        this.lineEchart(this.bookData, "bookChart", "服务工单已核销曲线图");
                    }

                )
            }
            else if (this.activeName == 'map')  
               this.mapInit(); 

        },
        getSalesMonth() {
            service.$axiosGetDYSalesMonthTotal({ channel: this.activeChannel }).then(res => {
                this.salesMonth = res.data.data.data;
            })
        },
        getLineData() {
            service.$axiosGetDYSalesLineData({ channel: this.activeChannel }).then(res => {
                console.info(res.data.data)
                this.lineEchart(res.data.data, "lineChart", "订单销售及履约情况");
            })
        },
        mapInit() {
            map = new AMap.Map('container', {
                zoom: 5,
            });
            let that = this;
            //加载相关组件
            AMapUI.load(['ui/geo/DistrictCluster', 'lib/$'], function (DistrictCluster) {
                window.DistrictCluster = DistrictCluster;
                //启动页面
                initPage(DistrictCluster);
            });

            function initPage(DistrictCluster) {
                var distCluster = new DistrictCluster({
                    map: map, //所属的地图实例
                    zIndex: 11,
                    //excludedAdcodes: [120000, 130000, 140000, 150000, 210000, 220000, 230000, 340000,
                    //    350000, 360000, 410000, 420000, 430000, 450000, 460000, 520000, 530000, 540000, 610000,
                    //    620000, 630000, 640000, 650000, 710000, 810000, 820000],
                    autoSetFitView: false,
                    getPosition: function (item) {
                        if (!item) {
                            return null;
                        }
                        var parts = item.split(',');
                        //返回经纬度
                        return [parseFloat(parts[0]), parseFloat(parts[1])];
                    },
                    renderOptions: {

                    }
                });

                window.distCluster = distCluster;
                service.$axiosGetDYSalesHotMap({ days: that.dayss, channel: that.activeChannel }).then(res => {
                    distCluster.setData(res.data.data);
                })
            }
        },
        mapTabChange() {
            if (this.mapDataRank == "今日")
                this.dayss = 1;
            if (this.mapDataRank == "近7天")
                this.dayss = 7;
            if (this.mapDataRank == "近30天")
                this.dayss = 30;

            let that = this;
            setTimeout(() => {
                that.mapInit()
            }, 500);
        },
        lineEchart(data, chartName, name) {
            var myChart = this.$echarts.init(document.getElementById(chartName));
            let legendList = [];
            let yAxisList = data.series;
            yAxisList.forEach(item => {
                legendList.push(item.name);
                if (item.type == 'line') {
                    item.yAxisIndex = 1;
                }
            });

            let option = {
                title: {
                    text: name
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985"
                        }
                    }
                },
                legend: {
                    data: legendList,
                    bottom: 0
                },
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ["line", "bar"] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                xAxis: [
                    {
                        type: "category",
                        data: data.days,
                        axisLabel: { interval: 0, rotate: 30 }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: 'GMV',
                        axisLabel: {
                            formatter: '{value} 元'
                        }
                    }, {
                        type: "value",
                        name: '单量',
                        axisLabel: {
                            formatter: '{value} 单'
                        }
                    },


                ],
                series: yAxisList
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option, true);
            myChart.resize();
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },
    },
};
</script>

<style scoped>
.top {
    border-radius: 10px;
    background-color: #fff;
    padding: 10px
}

.top-title {
    font-weight: 600;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    text-align: left;
    color: #409EFF;
}

.items {
    display: flex;
}

.item {
    flex: 1
}

.content {
    margin: 10px 0;
    text-align: center;
    overflow: unset;
}


.detail {
    display: flex;
    justify-content: center;
}

.detail div {
    padding: 5px;
    margin: 0 5px;
    color: #666
}

.title {
    display: flex;
    flex-direction: column;
}

.sub-title {
    color: #5cb85c;
    text-align: center;
    font-size: 36px;
}

.border-right {
    border-right: 1px dotted #ccc
}

.amap-cluster {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
}
</style>
<style>
#container {
    height: 560px;
    width: 100%;
}

#lineChart {
    /* min-width: 900px; */
    height: 560px;
    margin: 0 auto;
    padding: 10px;
}
</style>
