<template>
    <widget-card :bodyStyle="bodyStyle" ref="container">
        <div style="width:100%;min-height:80px;" :loading="loading">
            <div style="margin: 0 0 1px 15px">
                <!-- <van-dropdown-menu class="van-width">
                    <van-dropdown-item v-model="chooseDate" @change="changeDate" :options="dateList" />
                </van-dropdown-menu> -->
                <el-date-picker
                    v-model="chooseDate"
                    @change="changeDate"
                    type="month"
                    placeholder="选择月"
                    value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
            </div>
            <bar-chart :chart-data="chartData" v-if="chartData"> </bar-chart>
        </div>
    </widget-card>
</template>
<script>
import WidgetCard from './WidgetCard';
import BarChart from '../components/BarChart';
import { parse, addYears, format, addMonths, addDays } from 'date-fns';

export default {
    data() {
        return {
            bodyStyle: {
                alignItems: 'center'
            },
            chartData: null,
            loading: false,
            chooseDate: ''
        };
    },
    // created() {
    //     this.getData();
    // },
    computed: {
        dateList() {
            var list = [];
            for (var i = 0; i < 6; i++) {
                let time = parse(format(addMonths(new Date(), 0 - i), 'yyyy-MM') + '-01', 'yyyy-MM-dd', new Date());
                list.push({
                    text: format(time, 'yyyy年MM月'),
                    value: format(time, 'yyyy-MM') + '-01 00:00:00'
                    // '-01 00:00:00,' +
                    // format(addDays(addMonths(time, 1), 0 - 1), 'yyyy-MM-dd') +
                    // ' 23:59:59'
                });
            }
            return list;
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.chooseDate = this.dateList[0].value;
            this.getData();
        });
    },
    methods: {
        changeDate() {
            this.page = 0;
            this.last = false;
            this.getData();
        },
        getData() {
            this.loading = true;
            this.$http
                .get('/statistic/dayAddEmployee', {
                    start: this.chooseDate,
                    userId: this.$route.query.id
                })
                .then(res => {
                    this.loading = false;
                    this.chartData = {
                        labels: res.map(i => format(parse(i.date, 'yyyy-MM-dd', new Date()), 'dd')),
                        datasets: [
                            {
                                label: '订单数',
                                data: res.map(i => i.dayOrder),
                                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,
        BarChart
    }
};
</script>
<style lang="less" scoped>
.van-width {
    width: 200px;
}
</style>
