<template>
    <widget-card :bodyStyle="bodyStyle" ref="container">
        <div slot="header" class="clearfix">
            <span>销量统计</span>
            <el-radio-group v-model="radio1" size="mini" @change="getTable">
                <el-radio-button label="DATE">当日</el-radio-button>
                <el-radio-button label="WEEK">本周</el-radio-button>
                <el-radio-button label="MONTH">本月</el-radio-button>
            </el-radio-group>
        </div>
        <el-table
            :data="tableData"
            height="100%"
            style="width: 100%;"
            size="mini"
            border
        >
            <el-table-column prop="name" label="商品名称" align="center">
            </el-table-column>
            <el-table-column prop="num" label="销量" align="center">
            </el-table-column>
        </el-table>
    </widget-card>
</template>
<script>
import WidgetCard from "./WidgetCard";

export default {
    data() {
        return {
            bodyStyle: {
                display: "flex",
                alignItems: "center"
            },
            height: 200,
            radio1: "DATE",
            data: {}
        };
    },
    computed: {
        tableData() {
            var info = { ...this.data };
            return Object.keys(info).map(item => {
                return {
                    name: item,
                    num: info[item]
                };
            });
        }
    },
    mounted() {
        this.getTable();
    },
    methods: {
        getTable() {
            this.$http
                .get("/summary/getGoods", {
                    type: this.radio1
                })
                .then(res => {
                    this.data = res;
                });
        }
    },
    components: {
        WidgetCard
    }
};
</script>
<style lang="less" scoped>
.clearfix {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 20px;
    box-sizing: border-box;
    padding: 0 !important;
}
</style>
