<template>
    <div style="width: 100%; margin-top: 5px">
        <div class="tableTitle">
            <div>
                <span
                    style="
                        width: 10px;
                        height: 10px;
                        border-radius: 50%;
                        background-color: #3297ff;
                        display: inline-block;
                        vertical-align: middle;
                        margin-right: 8px;
                    "
                ></span>
                <span style="font-size: 18px">{{ componentName + '-' + chartName + '-' + '柱状图' + '-' + status }}</span>
            </div>
        </div>
        <div id="barChart" ref="barChart" style="width: 705px; height: 300px"></div>
    </div>
</template>

<script>
import { getNameFromTargetType } from '@/utils/targetType';
export default {
    name: 'barChart', //饼图组件
    props: {
        list: Array,
        default() {
            return [];
        },
        pageType: {
            type: String
        },
        title: {
            type: String
        },
        status: {
            type: String
        },
        componentName: {
            type: String
        },
        chartName: {
            type: String
        },
        typeValue: {
            type: Object
        }
    },
    data() {
        return {};
    },
    created() {},
    methods: {
        drawBar(newVal) {
            if (newVal && newVal.type_data && newVal.type_data.length > 0) {
                var xData = newVal.type_data.map((ele) => {
                    return getNameFromTargetType(ele.name);
                });
                var yData = newVal.type_data.map((ele) => {
                    return ele.quantity;
                });
            }
            let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
            if (myChart == null) {
                myChart = this.$echarts.init(this.$refs.barChart);
            }
            let option = {
                color: ['#7262FD', '#FC5A5A'],
                tooltip: {
                    confine: true
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '0%',
                    top: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: xData,
                    axisLine: {
                        lineStyle: {
                            color: '#000'
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        fontSize: 12,
                        color: '#000',
                        rotate: 30
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        minInterval: 1,
                        splitArea: {
                            show: false
                        },

                        axisLine: {
                            show: true
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#eeebeb',
                                type: 'dashed' // dotted 虚线
                            }
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#000',
                            fontFamily: 'Bebas'
                        }
                    }
                ],
                series: [
                    {
                        type: 'bar',
                        barWidth: 20,
                        itemStyle: { barBorderRadius: [5, 5, 0, 0] },
                        name: '时间',
                        data: yData
                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener('resize', function () {
                myChart.resize();
            });
            //  this.$nextTick(() => {
            //     myChart.setOption(option)
            //     myChart.resize();
            // })
        }
    },
    mounted() {},
    watch: {
        list: {
            handler: function (newval, oldVal) {
                if (newval && newval.length > 0) {
                    this.$nextTick(() => {
                        this.drawBar(newval[0]);
                    });
                }
            },
            deep: true
            // immediate: true
        }
    }
};
</script>
