<!--
 * @Author: PoJun
 * @Date: 2023-12-19 14:57:48
 * @LastEditors: XuanJi
 * @LastEditTime: 2024-05-25 23:20:58
 * @Message: 柱形图
-->
<template>
    <view class="data-charts">
        <view class="uv-font-md uv-weight-700 uv-m-25">产品-供应商数量</view>
        <view class="charts-content">
            <view v-show="showChart" class="charts-box">
                <qiun-data-charts
                    type="column"
                    :ontouch="true"
                    :opts="opts"
                    :chartData="chartData"
                    :reshow="showChart"
                    @complete="chartComplete = true"
                />
            </view>
            <!-- 由于组件的bug，x轴滚动时，x轴标题显示有问题，自行模拟实现 -->
            <!-- <view v-if="chartComplete" class="imitate-xAxis-title">产品</view> -->
        </view>
    </view>
</template>

<script>
import { getHomeChartData } from "@/config/http.js";
export default {
    props: {
        times: {
            type: Number,
            default: 0,
        },
        showChart: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            chartComplete: false,
            chartData: {},
            opts: {
                padding: [15, 30, 10, 15],
                fontSize: 12,
                touchMoveLimit: 24,
                enableScroll: true,
                legend: {
                    show: false,
                },
                xAxis: {
                    disableGrid: true,
                    scrollShow: false,
                    itemCount: 5, //单屏幕数据点数量
                    rotateLabel: true,
                    marginTop: 4,
                    title: "产品",
                    titleOffsetY: -8,
                    titleOffsetX: 0,
                },
                yAxis: {
                    showTitle: true,
                    data: [
                        {
                            min: 0,
                            title: "数量",
                            titleOffsetY: -7,
                            titleOffsetX: -8,
                        },
                    ],
                    splitNumber: 5,
                    disableGrid: true,
                },
                extra: {
                    column: {
                        type: "group",
                        activeBgColor: "#000000",
                        activeBgOpacity: 0.08,
                        width: 20,
                    },
                    tooltip: {
                        showBox: true,
                        showArrow: true,
                        showCategory: false,
                        legendShow: false,
                        legendShape: "auto",
                        splitLine: false,
                        horizentalLine: false,
                        xAxisLabel: true,
                        yAxisLabel: false,
                    },
                },
            },
        };
    },
    methods: {
        async init() {
            try {
                const data = await getHomeChartData();
                const categories = data.map(item => item.name);
                const series = [
                    {
                        name: "数量",
                        data: data.map(item => item.c),
                    },
                ];

                this.$nextTick(() => {
                    if (categories.length > 5) {
                        this.opts.xAxis.scrollShow = true;
                    } else {
                        this.opts.xAxis.scrollShow = false;
                    }
                    this.chartData = JSON.parse(JSON.stringify({ categories, series }));
                });
            } catch (error) {
                console.log(error);
            }
        },
    },
    watch: {
        times: {
            immediate: true,
            handler: function () {
                this.init();
            },
        },
    },
    onLoad() {
        console.log(this.showChart);
    },
};
</script>

<style lang="scss" scoped>
.data-charts {
    width: 100%;
    height: 340px;
    .charts-content {
        display: flex;
        align-items: flex-end;
        .charts-box {
            width: 710rpx;
            height: 300px;
        }
        .imitate-xAxis-title {
            font-size: 13px;
            color: #666666;
            position: relative;
            top: -11px;
            transform: scale(0.9);
        }
    }
}
</style>
