<template>
    <widget-card :bodyStyle="bodyStyle" ref="container">
        <div slot="header" class="clearfix">
            <span>收支趋势</span>
            <el-radio-group v-model="radio1" size="mini" @change="getStart">
                <el-radio-button label="MONTH">按月显示</el-radio-button>
                <el-radio-button label="DATE">按天显示</el-radio-button>=
            </el-radio-group>
        </div>
        <canvas ref="chart" class="chart"></canvas>
    </widget-card>
</template>
<script>
import WidgetCard from "./WidgetCard";
import VueCharts from "vue-chartjs";
import { format } from "date-fns";

export default {
    props: ["value"],
    data() {
        return {
            myChart: null,
            bodyStyle: {
                display: "flex",
                alignItems: "center"
            },
            radio1: "MONTH",
            dataMap: new Map(),
            labels: [],
            colorMap: new Map([
                [
                    "收入",
                    {
                        mainColor: "#E4B100",
                        startColor: "rgba(228,177,0,0.7)",
                        stopColor: "rgba(228,177,0,0)"
                    }
                ],
                [
                    "提现",
                    {
                        mainColor: "#20a0ff",
                        startColor: "rgba(32,160,255,0.7)",
                        stopColor: "rgba(32,160,255,0)"
                    }
                ]
            ])
        };
    },
    mounted() {
        this.$refs.chart.width = this.$refs.container.$el.offsetWidth - 20;
        this.$refs.chart.height = this.$refs.container.$el.offsetHeight - 90;
        this.getStart();
    },
    methods: {
        labelFormat(value) {
            if (this.radio1 === "MONTH") {
                return value + "月";
            } else {
                return format(new Date(value), "MM-dd");
            }
        },
        getStart() {
            this.getLineInfo().then(() => {
                this.drawChart();
            });
        },
        getLineInfo() {
            return this.$http
                .get("/platformFlow/statistics", {
                    type: this.radio1,
                    flowType: "INCOME"
                    // isShare: true
                })
                .then(res => {
                    let map = new Map();
                    Object.keys(res).forEach(item => {
                        map.set(this.labelFormat(item), res[item]);
                    });
                    let list = Array.from(map);
                    list.sort((a, b) => {
                        return a[0].localeCompare(b[0]);
                    });
                    map = new Map(list);
                    this.labels = Array.from(map.keys());
                    this.dataMap.set("收入", Array.from(map.values()));

                    return this.$http.get("/platformFlow/statistics", {
                        type: this.radio1,
                        flowType: "WITHDRAW"
                        // isShare: false
                    });
                })
                .then(res => {
                    let map = new Map();
                    Object.keys(res).forEach(item => {
                        map.set(this.labelFormat(item), res[item]);
                    });
                    let list = Array.from(map);
                    list.sort((a, b) => {
                        return a[0].localeCompare(b[0]);
                    });
                    map = new Map(list);
                    this.labels = Array.from(map.keys());
                    this.dataMap.set("提现", Array.from(map.values()));
                });
        },
        drawChart() {
            let datasets = [];
            this.dataMap.forEach((value, key) => {
                let color = this.colorMap.get(key);
                let data = Array.from(value.values());
                let gradient = this.$refs.chart
                    .getContext("2d")
                    .createLinearGradient(0, 0, 0, 500);

                gradient.addColorStop(0, color.startColor);
                gradient.addColorStop(1, color.stopColor);
                datasets.push({
                    label: key,
                    backgroundColor: gradient,
                    borderColor: color.mainColor,
                    borderWidth: "1px",
                    data: data
                });
            });

            if (this.myChart) {
                this.myChart.destroy();
            }

            this.myChart = new Chart(this.$refs.chart.getContext("2d"), {
                type: "line",
                data: {
                    labels: this.labels,
                    datasets: datasets
                },
                options: { responsive: true, maintainAspectRatio: false }
            });
        }
    },
    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>
