<template>
    <widget-card :bodyStyle="bodyStyle" ref="container">
        <div style="width:100%;min-height:80px;" :loading="loading">
            <div style="margin-bottom:5px;display:flex;align-content:center;justify-content: space-between;">
                <div class="title">供给侧新增数据统计</div>
                <el-radio-group v-model="recentDays" size="mini" @change="getData">
                    <el-radio-button label="0">周</el-radio-button>
                    <el-radio-button label="1">月</el-radio-button>
                    <el-radio-button label="2">年</el-radio-button>
                </el-radio-group>
            </div>
            <bar-chart :chart-data="chartData" v-if="chartData" :options="options"> </bar-chart>
        </div>
    </widget-card>
</template>
<script>
import WidgetCard from './WidgetCard';
import BarChart from '../components/BarChart';

export default {
    data() {
        return {
            bodyStyle: {
                alignItems: 'center'
            },
            chartData: null,
            recentDays: '2',
            loading: false,
            options: {
                scales: {
                    yAxes: [
                        {
                            min: 0,
                            ticks: {
                                beginAtZero: true
                            }
                        }
                    ]
                }
            }
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            this.loading = true;
            this.$http
                .post('/statistic/getSupply', { type: this.recentDays })
                .then(res => {
                    this.loading = false;
                    this.chartData = {
                        labels: ['脱密专利', '普通专利', '商标', '版权', '软著', '技术', '产品', '服务', '技术经理人'],
                        datasets: [
                            {
                                label: '供给侧统计',
                                data: [
                                    res.DECLASSIFICATION,
                                    res.GENERAL,
                                    res.LOGO,
                                    res.COPY,
                                    res.SOFT,
                                    res.TECHNOLOGY,
                                    res.PRODUCT,
                                    res.SERVICE,
                                    res.MANAGER
                                ],
                                backgroundColor: [
                                    '#5B8FF9',
                                    '#5B8FF9',
                                    '#5B8FF9',
                                    '#5B8FF9',
                                    '#5B8FF9',
                                    '#5B8FF9',
                                    '#5B8FF9',
                                    '#5B8FF9',
                                    '#5B8FF9'
                                ],
                                borderWidth: 1
                            }
                        ],
                        options: {
                            scales: {
                                xAxes: [
                                    {
                                        ticks: {
                                            min: 0
                                        }
                                    }
                                ]
                            }
                        }
                    };
                })
                .catch(e => {
                    this.loading = false;
                    this.$message.error(e.error);
                });
        }
    },
    components: {
        WidgetCard,
        BarChart
    }
};
</script>
<style lang="less" scoped>
.title {
    font-size: 14px;
    font-weight: 600;
    color: #000000;
    line-height: 28px;
}
</style>
