<style>
    .zanTotalTop{
        padding:18px 20px;
        background: #fff;
        border-bottom:1px solid #EBEEF5;
    }
    .zanIndex_Second{
        background-color: #fff;
        position: relative;
        padding-bottom: 50px;
        margin: 10px 0;
        border: 1px solid #EBEEF5;
    }
    .searchDiv{
        display:flex;
        flex-direction: row;
        padding:15px;
        overflow: hidden;
    }
    .searchDiv .el-date-editor .el-range-separator{
        width:6%;
    }
    .zanIndex .el-input__inner{
        height:32px;
        line-height: 32px;
        padding:0 10px;
    }
    .zanIndex .el-input__icon {
        line-height: 32px;
    }
    .searchDiv>div{
        margin-right:5px;
    }
    .zanIndex .zanIndex_Second .el-tabs__nav-scroll{
        width:120px;
        margin-left:30px;
    }
    .zanIndex .zanIndex_Second .el-tabs__nav-wrap::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background-color: #E4E7ED;
        z-index: 1;
        height:1px;
    }
    .zanIndex .el-tabs__item{
        height:32px;
        line-height: 32px;
    }
    .zanIndex .clean{
        color: #92959B;
        margin-left: 30px;
        cursor: pointer;
        font-size: 15px;
    }
    .searchDiv>div:last-child{
        height:32px;
        line-height: 32px;
    }
    .num-info{
        display: flex;
        width: 100%;
        height: 60px;
        font-size: 28px;
        color: #303133;
    }
    .num-info .num-info-item:first-of-type {
        border-left: 0;
    }
    .num-info .num-info-item:first-of-type {
        border-left: 0;
    }
    .info-item-name {
        font-size: 16px;
        color: #92959B;
    }
    .num-info .num-info-item {
        text-align: center;
        width: 20%;
        border-left: 1px dashed #EFF1F7;
    }
    .zanIndexThrid{
        border: 1px solid #EBEEF5;
        background-color: #FFF;
        color: #303133;
        -webkit-transition: .3s;
        transition: .3s;   
        border-radius:4px;
        overflow: hidden;
    }
    .el-card_header{
        position: relative;
        padding: 18px 20px;
        border-bottom: 1px solid #EBEEF5;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .tab-pay {
        position: absolute;
        bottom: -15px;
        right: 50px;
    }
    .tab-pay .el-tabs__item {
        height: 56px;
        line-height: 56px;
    }
    .el-tabs__nav-wrap::after{
        background-color: transparent;
    }
    .zanIndex .el-card__body{
        padding:20px;
    }
    .pay-info {
        padding: 40px 0;
        display: flex;
        justify-content: space-between;
    }
    .pay-info .pay-info-item.active {
        border: 1px solid #3399FF;
    }
    .info-item-name {
        font-size: 16px;
        color: #92959B;
    }
    .pay-info .pay-info-item {
        padding-top: 45px;
        width: 22%;
        margin: 0 1.5%;
        text-align: center;
        font-size: 26px;
        border: 1px solid #EBEEF5;
        border-radius: 10px;
        height: 150px;
        position: relative;
        cursor: pointer;
    }
    .pay-info .pay-info-item.active img {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
    }
    .pay-info .pay-info-item img {
        display: none;
    }
    .zantable-area{
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
    }
    .zantable-area .el-card {
        width: 49.5%;
        color: #303133;
        border: 1px solid #EBEEF5;
        background-color: #FFF;
        color: #303133;
        -webkit-transition: .3s;
        transition: .3s;
        border-radius: 4px;
        overflow: hidden;
    }
    .el-zanIndex_btmheader{
        padding: 14px 20px;
    }
    .el-zanIndex_btmheader span{
        /* float:left; */
        height: 32px;
        line-height: 32px;
    }
    .ZexportBtn{
        padding:0 10px;
        float:right;
    }
    .table_Inner{
        padding:20px;
    }
    .rankIng{
        padding:0 10px;
        text-align: center;
    }
    .table_Inner table th{
        background: rgb(243, 245, 246);
        color:rgb(48, 49, 51);
        padding-left:10px;
        border-bottom:1px solid #EBEEF5;
    }
    .text-omit {
        width: 380px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .table_Inner .el-table .cell {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        white-space: normal;
        word-break: break-all;
        line-height: 23px;
    }
    .table_Inner .el-table_1_column_1{
        text-align: center;
    }
    .table_Inner .el-table_1_column_2{
        padding-left:0;
    }
    .table2 .is-leaf:first-child{
        text-align: center;
    }
    .Zheader_image{
        width: 32px;
        height: 32px;
        margin-right: 10px;
        float: left;
    }
    .Zheader_image img{
        width:100%;
        height:100%;
    }
    .nameList{
        height: 32px;
        line-height: 32px;
        display: inline-block;
        width: 280px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .zantable-area  .el-table__row{
        height:63px;
    }
    .echarts-title {
        color: #92959B;
        display: flex;
        font-size: 16px;
        margin-left: 45px;
    }
    .echarts-title-item {
        margin-right: 45px;
        display: flex;
        align-items: center;
    }
    .echarts-title-item .echarts-title-icon {
        height: 16px;
        width: 16px;
        margin-right: 10px;
        background-color: #3399ff;
    }
</style>
<template>
    <div class="zanIndex">
        <div class="zanTotalTop">数据概况</div>
        <div class="zanIndex_Second">
            <div class="searchDiv">
                <div>
                    <el-select v-model="searchMsg.plat" class="w120">
                        <el-option label="全部平台" :value='0'></el-option>
                        <el-option label="微信" :value='1'></el-option>
                        <el-option label="支付宝" :value='2'></el-option>
                        <el-option label="抖音/头条" :value='3'></el-option>
                        <el-option label="百度" :value='4'></el-option>
                    </el-select>
                </div>
                <div>
                    <el-select v-model="searchMsg.plat2" filterable class="w160">
                        <el-option label="全部" :value='0'></el-option>
                    </el-select>
                </div>
                <div style="margin-right:50px;">
                     <el-date-picker
                        class="indataPicker"
                        type="daterange"
                        v-model="searchMsg.dateArr"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <div>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="7日" name="first"></el-tab-pane>
                        <el-tab-pane label="30日" name="second"></el-tab-pane>
                    </el-tabs>
                </div>
                <div>
                    <span class="clean">清空筛选</span>
                </div>
            </div>
            <div class="num-info">
                <div class="num-info-item">
                    <div>1094</div>
                    <div class="info-item-name">
                        <span>用户数</span>
                        <el-tooltip class="item" effect="dark" content="统计全平台用户数，不随店铺的更改而更改" placement="bottom">
                            <i class="el-icon-question"></i>
                        </el-tooltip>
                    </div>
                </div>
                <div class="num-info-item">
                    <div>103</div>
                    <div class="info-item-name">商品数</div>
                </div>
                <div class="num-info-item">
                    <div>477</div>
                    <div class="info-item-name">订单数</div>
                </div>
                <div class="num-info-item">
                    <div>41</div>
                    <div class="info-item-name">待发货订单数</div>
                </div>
                <div class="num-info-item">
                    <div>0</div>
                    <div class="info-item-name">维权订单数</div>
                </div>
            </div>
        </div>
        <div class="zanIndexThrid">
            <div class="el-card_header">
                <div>
                    <span>销售情况</span>
                </div>
                <div class="tab-pay">
                    <el-tabs v-model="activeSell">
                        <el-tab-pane label="昨日" name="first"></el-tab-pane>
                        <el-tab-pane label="7日" name="second"></el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <div class="el-card__body">
                <div class="pay-info">
                    <div class="pay-info-item" :class="{'active':isShowOrder}" @click="filterOrder()">
                        <img src="../assets/img/active.png" alt=""/>
                        <div>24</div>
                        <div class="info-item-name">支付订单数</div>
                    </div>
                    <div class="pay-info-item" :class="{'active':isShowMoney}" @click="filterMoney()">
                        <img src="../assets/img/active.png" alt=""/>
                        <div>5456.00</div>
                        <div class="info-item-name">支付金额</div>
                    </div>
                    <div class="pay-info-item" :class="{'active':isShowPay}" @click="filterPay()">
                        <img src="../assets/img/active.png" alt=""/>
                        <div>24</div>
                        <div class="info-item-name">支付人数</div>
                    </div>
                    <div class="pay-info-item" :class="{'active':isShowPayNum}" @click="filterPayNum()">
                        <img src="../assets/img/active.png" alt=""/>
                        <div>24</div>
                        <div class="info-item-name">支付件数</div>
                    </div>
                </div>
                <div class="echarts-title">
                    <div class="echarts-title-item" v-if="isShowOrder">
                        <div class="echarts-title-icon"></div>
                        <div>支付订单数</div>
                    </div>
                    <div class="echarts-title-item" v-if="isShowMoney">
                        <div class="echarts-title-icon" style="background-color: rgb(255, 163, 96);"></div>
                        <div>支付金额</div>
                    </div>
                    <div class="echarts-title-item" v-if="isShowPay">
                        <div class="echarts-title-icon" style="background-color: rgb(75, 194, 130);"></div>
                        <div>支付人数</div>
                    </div>
                    <div class="echarts-title-item" v-if="isShowPayNum">
                        <div class="echarts-title-icon" style="background-color: rgb(255, 133, 133);"></div>
                        <div>支付件数</div>
                    </div>
                </div>
                <div class="myecharts" ref="myecharts" style="height:300px;">
                    
                </div>
            </div>
        </div>
        <div class="zantable-area">
            <div class="el-card">
                <div class="el-zanIndex_btmheader">
                    <span>商品购买力TOP排行</span>
                    <el-button type="primary" class="ZexportBtn" size="mini">导出TOP100</el-button>
                </div>
                <div class="table_Inner">
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column
                            label="排名"
                            width="120">
                            <template slot-scope="scope">
                                <div class="rankIng">
                                    <template v-if="scope.$index+1<4">
                                        <img v-if="scope.$index==0" src="../assets/img/first.png"/>
                                        <img v-if="scope.$index==1" src="../assets/img/sec.png"/>
                                        <img v-if="scope.$index==2" src="../assets/img/third.png"/>
                                    </template>
                                    <template v-else>
                                        <span>{{getNumber(scope.$index+1)}}</span>
                                    </template>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="商品"
                            width="400">
                            <template slot-scope="scope">
                                <div class="text-omit">
                                    {{scope.row.name}}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="sales"
                            label="销售额"
                            sortable
                            width="150">
                            <template slot-scope="scope">
                                <div style="padding-left:10px;">
                                    {{scope.row.sales}}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="Numer"
                            sortable
                            label="销量"
                            width="150">
                            <template slot-scope="scope">
                                <div style="padding-left:10px;">
                                    {{scope.row.Numer}}
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="el-card">
                <div class="el-zanIndex_btmheader">
                    <span>用户购买力TOP排行</span>
                    <el-button type="primary" class="ZexportBtn" size="mini">导出TOP100</el-button>
                </div>
                <div class="table_Inner table2">
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column
                            label="排名"
                            width="120">
                            <template slot-scope="scope">
                                <div class="rankIng">
                                    <template v-if="scope.$index+1<4">
                                        <img v-if="scope.$index==0" src="../assets/img/first.png"/>
                                        <img v-if="scope.$index==1" src="../assets/img/sec.png"/>
                                        <img v-if="scope.$index==2" src="../assets/img/third.png"/>
                                    </template>
                                    <template v-else>
                                        <span>{{getNumber(scope.$index+1)}}</span>
                                    </template>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="用户"
                            width="400">
                            <template slot-scope="scope">
                                <div class="Zheader_image">
                                    <img src="../assets/img/id-card.png" alt=""/>
                                </div>
                                <span class="nameList">印象日本地接～谢军</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="sales"
                            label="支付金额"
                            sortable
                            width="150">
                            <template slot-scope="scope">
                                <div style="padding-left:10px;">
                                    {{scope.row.sales}}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="Numer"
                            sortable
                            label="支付件数"
                            width="150">
                            <template slot-scope="scope">
                                <div style="padding-left:10px;">
                                    {{scope.row.Numer}}
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
  export default {
    data() {
      return {
        activeName:'first',
        activeSell:'first',
        //过滤支付订单数
        isShowOrder:true,
        //过滤支付金额
        isShowMoney:true,
        //过滤支付人数
        isShowPay:true,
        //过滤支付件数
        isShowPayNum:true,
        searchMsg: {
            plat:0,
            plat2:0,
            dateArr:[]
        },
        //商品购买力data
        tableData:[{
            name: '1KG新鲜羊肚菌  顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
            sales: '23450.00',
            Numer:'109',
          }, {
            name: '1KG新鲜羊肚菌  顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
            sales: '23440.00',
            Numer:'108',
          }, {
            name: '1KG新鲜羊肚菌  顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
            sales: '23430.00',
            Numer:'107',
          }, {
            name: '1KG新鲜羊肚菌  顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
            sales: '23420.00',
            Numer:'105',
          },{
            name: '1KG新鲜羊肚菌  顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
            sales: '23430.00',
            Numer:'107',
          },{
            name: '1KG新鲜羊肚菌  顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
            sales: '23430.00',
            Numer:'107',
          }, {
            name: '1KG新鲜羊肚菌  顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
            sales: '23430.00',
            Numer:'107',
          }, {
            name: '1KG新鲜羊肚菌  顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
            sales: '23430.00',
            Numer:'107',
          }, {
            name: '1KG新鲜羊肚菌  顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
            sales: '23430.00',
            Numer:'107',
          }, {
            name: '1KG新鲜羊肚菌  顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
            sales: '23430.00',
            Numer:'107',
        }]
      };
    },
    created() {

    },
    methods: {
        handleClick(){

        },
        //数字加0
        getNumber(num){
            let str='';
            if(num<10){
                str = '0'+num
            }else{
                str=num;
            }
            return str;
        },
        //过滤支付订单数
        filterOrder(){
            this.isShowOrder=!this.isShowOrder;
        },
        //过滤支付金额
        filterMoney(){
            this.isShowMoney=!this.isShowMoney
        },
        //过滤支付人数
        filterPay(){
            this.isShowPay=!this.isShowPay
        },
        //过滤支付件数
        filterPayNum(){
            this.isShowPayNum=!this.isShowPayNum
        },

        //初始化图标
        initMap(){
            var myChart = this.$echarts.init(this.$refs.myecharts);
            var option = {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '0',
                    right: '1%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    axisLine:{       //y轴
                        show:false,
                    },
                    axisLabel : {
                        formatter: function(){
                            return "";
                        }
                    },
                    type: 'value',
                    splitLine :{    //网格线
                        lineStyle:{
                            type:'dashed'    //设置网格线类型 dotted：虚线   solid:实线
                        },
                        show:true //隐藏或显示
                    }
                },
                series: [
                    {
                        name: '支付订单数',
                        type: 'line',
                        stack: '总量',
                        color: '#3399ff',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '支付金额',
                        type: 'line',
                        stack: '总量',
                        color: 'rgb(255, 163, 96)',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: '支付人数',
                        type: 'line',
                        stack: '总量',
                        color: 'rgb(75, 194, 130)',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: '支付件数',
                        type: 'line',
                        stack: '总量',
                        color:'rgb(255, 133, 133)',
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                ]
            };
            myChart.setOption(option, true);
        }
    },
    mounted() {
        this.initMap();
    }
  };

</script>