<template>
    <widget-card :bodyStyle="bodyStyle" ref="container">
        <div style="width:100%;min-height:80px;" :loading="loading">
            <div style="margin-bottom:5px">
                <el-radio-group v-model="recentDays" size="mini" @change="getData">
                    <el-radio-button label="7">近7天</el-radio-button>
                    <el-radio-button label="30">近30天</el-radio-button>
                </el-radio-group>
            </div>
            <line-chart :chart-data="chartData" v-if="chartData"> </line-chart>
        </div>
    </widget-card>
</template>
<script>
import WidgetCard from './WidgetCard';
import LineChart from '../components/LineChart';

export default {
    data() {
        return {
            bodyStyle: {
                display: 'flex',
                alignItems: 'center'
            },
            recentDays: 7,
            chartData: null,
            loading: false
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            this.loading = true;
            this.$http
                .get('/statistic/dayAdd', {
                    day: this.recentDays
                })
                .then(res => {
                    this.loading = false;
                    this.chartData = {
                        labels: res.map(i => i.date),
                        datasets: [
                            {
                                label: '销售额',
                                data: res.map(i => i.dayFee),
                                backgroundColor: ['rgba(54, 162, 235, 0.2)'],
                                borderColor: ['rgba(54, 162, 235, 1)'],
                                borderWidth: 1
                            }
                        ]
                    };
                })
                .catch(e => {
                    this.loading = false;
                    this.$message.error(e.error);
                });
        }
    },
    components: {
        WidgetCard,
        LineChart
    }
};
</script>
<style lang="less" scoped></style>
