<template>
    <div class="list-view">
        <div class="filters-container">
            <el-select v-model="type" class="filter-item">
                <el-option
                    v-for="item in typeOptions"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value"
                ></el-option>
            </el-select>
            <el-date-picker
                style="position:relative;top:1px;"
                class="filter-item"
                type="monthrange"
                value-format="yyyy-MM"
                v-model="date"
            ></el-date-picker>
        </div>
        <div style="width:100%;">
            <chart
                :chart-data="chartData"
                :options="{ responsive: true, aspectRatio: 1, maintainAspectRatio: false }"
                :height="null"
                :width="null"
                v-if="chartData"
            ></chart>
        </div>
    </div>
</template>
<script>
import chart from '../components/chart';
import { addMonths, format } from 'date-fns';
export default {
    components: { chart },
    data() {
        return {
            typeOptions: [
                { label: '企业数量', value: 'org' },
                { label: '项目数量', value: 'project' },
                { label: '产品数量', value: 'product' },
                { label: '技术数量', value: 'tech' },
                { label: '新闻数量', value: 'news' }
            ],
            type: 'org',
            date: null,
            chartData: null
        };
    },
    created() {
        this.date = [format(addMonths(new Date(), -7), 'yyyy-MM'), format(addMonths(new Date(), -1), 'yyyy-MM')];
        this.getData();
    },
    methods: {
        getData() {
            if (this.type && this.date && this.date.length === 2) {
                this.$http
                    .get('/statDataCenter/numStat', {
                        type: this.type,
                        start: this.date[0],
                        end: this.date[1]
                    })
                    .then(res => {
                        this.chartData = {
                            labels: res.labels,
                            datasets: [
                                {
                                    label: (this.typeOptions.find(i => i.value === this.type) || {}).label || 'data',
                                    backgroundColor: 'rgba(255, 99, 132, 0.5)',
                                    borderColor: 'rgb(255, 99, 132)',
                                    borderWidth: 2,
                                    fill: false,
                                    data: res.data
                                }
                            ]
                        };
                    });
            }
        }
    },
    watch: {
        type() {
            this.getData();
        },
        date() {
            this.getData();
        }
    }
};
</script>
<style lang="less" scoped></style>
