<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" :loading="listLoading">
            <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="抖音" 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-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;">
                                <span class="m-marker">￥</span>
                                <span class="gmv">{{ salesToday.gmv }}</span>
                                <span v-if="salesToday.increase" style="color: red;font-size:11px;margin-top: 2px;">
                                    <i class="el-icon-caret-top" style="font-size:14px;"></i>
                                    {{ salesToday.increaseGMV }}
                                </span>
                                <span style="color: green;font-size:11px;margin-top: 2px;" v-else>
                                    <i class="el-icon-caret-bottom" style="font-size:14px;"></i>
                                    {{ salesToday.increaseGMV }}
                                </span>
                                <div class="order-cnt">{{ salesToday.orders }}单</div>
                            </div>
                        </div>
                        <div class="detail">
                            <div class="border-right">保洁:￥{{ salesToday.bjGmv }}
                                <span class="order-cnt2">{{ salesToday.bjOrders }}单</span>
                                <span class="order-cnt2">￥{{ salesToday.bjPrice }}/单</span>
                            </div>
                            <div class="border-right hide-border">品类:￥{{ salesToday.plGmv }}
                                <span class="order-cnt2">{{ salesToday.plOrders }}单</span>
                                <span class="order-cnt2">￥{{ salesToday.plPrice }}/单</span>
                            </div>
                            <!-- <div>其他:￥{{ salesToday.otherGmv }}<span class="order-cnt2">/{{ salesToday.otherOrders }}单</span>
                            </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;">
                                <span class="m-marker">￥</span>
                                <span class="gmv">{{ salesMonth.gmv }}</span>
                                <span v-if="salesMonth.increase" style="color: red;font-size:11px;margin-top: 2px;">
                                    <i class="el-icon-caret-top" style="font-size:14px;"></i>
                                    {{ salesMonth.increaseGMV }}
                                </span>
                                <span style="color: green;font-size:11px;margin-top: 2px;" v-else>
                                    <i class="el-icon-caret-bottom" style="font-size:14px;"></i>
                                    {{ salesMonth.increaseGMV }}
                                </span>
                                <div class="order-cnt">{{ salesMonth.orders }}单</div>
                            </div>
                        </div>
                        <div class="detail">
                            <div class="border-right">保洁:￥{{ salesMonth.bjGmv }}
                                <span class="order-cnt2">{{ salesMonth.bjOrders }}单</span>
                                <span class="order-cnt2">￥{{ salesMonth.bjPrice }}/单</span>
                            </div>
                            <div class="border-right hide-border">品类:￥{{ salesMonth.plGmv }}
                                <span class="order-cnt2">{{ salesMonth.plOrders }}单</span>
                                <span class="order-cnt2">￥{{ salesMonth.plPrice }}/单</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div>每日直营或加盟商的已完成（核销）服务工单量</div> -->
        <div style="padding:10px;margin:10px 0;border-radius: 10px;">
            <div style="text-align:center;">
                <el-radio-group v-model="bookLineDataRank" @change="getServiceGmvLine">
                    <el-radio-button label="日维度" value="日维度" key="日维度"></el-radio-button>
                    <el-radio-button label="月维度" value="月维度" key="月维度"></el-radio-button>
                </el-radio-group>
            </div>
            <div id="bookChart" style="height: 560px;min-width:600px;"></div>
        </div>
    </div>
</template>


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

var map;

export default {
    name: "serviceGmv",
    data() {
        return {
            bookLineDataRank: '日维度',
            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();
    },
    methods: { 
        getData() {
            this.dayss = 1;
            this.activeName = "line";  
            this.getServiceGmv();
        },
        tabChannelChange() {
            this.getData();
        },
        getServiceGmv() { 
            //先获取今日销售
            service.$axiosGetServiceGmvTotal({ channel: this.activeChannel }).then(res => { 
                //日服务gmv
                this.salesToday = res.data.data.day;
                this.salesToday.increase = (this.salesToday.gmv > this.salesToday.gmvY);
                this.salesToday.increaseGMV = ((this.salesToday.gmv - this.salesToday.gmvY) / 10000).toFixed(1) + 'w';
                this.salesToday.gmv = util.formatMoney(this.salesToday.gmv);
                this.refreshTime = moment(res.data.data.refreshTime).format("YYYY-MM-DD HH:mm:ss"); 
                 
                //月服务gmv
                this.salesMonth = res.data.data.month;
                this.salesMonth.increase = (this.salesMonth.gmv > this.salesMonth.gmvY);
                this.salesMonth.increaseGMV = ((this.salesMonth.gmv - this.salesMonth.gmvY) / 10000).toFixed(1) + 'w';
                this.salesMonth.gmv = util.formatMoney(this.salesMonth.gmv);  

                //获取柱状图 
                this.getServiceGmvLine();
            })
        },
       
        getServiceGmvLine(e) {
            service.$axiosGetServiceGmvLineData({ channel: this.activeChannel, type: this.bookLineDataRank }).then(
                res => { 
                    this.bookData = res.data.data;
                    this.lineEchart(this.bookData, "bookChart", "服务工单已核销曲线图"); 
                }

            )
        },
        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
}

.order-cnt {
    color: #e91313;
    font-size: 10px;
    margin-left: 2px;
    margin-top: 24px;
    color: #999;
    margin-left: -40px
}

.order-cnt2 {
    font-size: 11px;
    margin-top: 10px;
    color: #999;
}

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

.m-marker {
    font-size: 26px;
    color: gold;
    margin-top: 5px
}

.detail {
    display: flex;
    justify-content: center;
    margin-top: 5px;
}

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

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

.sub-title {
    color: #666;
    text-align: center;
    font-size: 30px;
    /* font-weight: 600;  */
    margin-left: -20px;
    letter-spacing: 5px;
}

.gmv {
    color: gold;
    font-weight: bold;
    font-size: 36px;
    letter-spacing: 3px;
}

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

.hide-border {
    border-right: unset !important;
}

.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>
