<template>
    <div class="chart-box">
        <div class="title-top">
            <span>平台店铺销售排行</span>
        </div>
        <el-row :gutter="20" style="background-color: #eee;padding:10px;">
            <el-col :span="4">
                <span style="font-weight: bold;">排名</span>
            </el-col>
            <el-col :span="14">
                <span style="font-weight: bold;">店铺/分销商</span>
            </el-col>
            <el-col :span="6">
                <span style="font-weight: bold;">销售单数</span>
            </el-col>
            <!-- <el-col :span="6">
                <span style="font-weight: bold;">销售件数</span>
            </el-col> -->
        </el-row>
        <el-row v-for="(item, index) in dataList" :key="index" :gutter="20" style="padding:3px">
            <el-col :span="4">
                {{ index + 1 }}
            </el-col>
            <el-col :span="14">
                <span v-if="item.shopSite === undefined">分销商</span>
                <span v-else>{{ item.shopSite }}</span>
            </el-col>
            <el-col :span="6">
                {{ item.total }}
            </el-col>
            <!-- <el-col :span="8">
                {{ item.sales }}
            </el-col> -->
        </el-row>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;

@Component
export default class Pie02 extends Vue {
    id = this.randomString();
    dataList = []
    mounted() {
        this.getData()
    }

    randomString() {
        const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
        let result = '';
        for (let i = 10; i > 0; --i)
            result += str[Math.floor(Math.random() * str.length)];
        return result;
    }
    dateChange() {
        this.getData()
    }
    getData() {
        (this as any).$request({
            url: '/omsOrder/orderReport/shopSale',
            method: 'GET',
        }).then((res: any) => {
            if (res.data) {
                this.dataList = res.data
            }
        }).catch(() => { })
    }

}
</script>

<style lang="scss" scoped>
.chart-box {
    height: 100%;
    width: 100%;
    padding: 10px;

    .title-top {
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 100%;

        >span {
            font-size: 16px;
            font-weight: 700;
        }

        .select {
            width: 100px;
            position: absolute;
            top: 6px;
            right: 0;
        }
    }
}

.chart {
    height: calc(100% - 40px);
    width: 100%;
}
</style>>