<template>
    <div style="margin-left: 45%">
        <span style="background: rgb(176,234,232); width: 18px; height: 10px; margin-top: 8px; display: inline-block; border-radius: 3px;"></span>
        <TextSelector :modelValue="modelValue" :options="options" style="margin-top: 5px; margin-left: 8px;"/>
        <span style="background: rgb(234,207,135); width: 18px; height: 10px; margin-top: 8px; margin-left: 20px; display: inline-block; border-radius: 3px;"></span>
        <TextSelector :modelValue="modelValue" :options="options" style="margin-top: 5px; margin-left: 8px;"/>
    </div>
    <div ref="barRef" style="height: 400px;"></div>
</template>

<script lang="ts" setup>
import {ref, onMounted, onBeforeUnmount} from 'vue'
import * as echarts from 'echarts'
import TextSelector from '/@/components/TextSelector/index.vue'

// defineOptions({
//     name: 'DataTendencyChart'
// })

let chartObj: any
const barRef = ref()

function resizeChart() {
    chartObj.resize()
}

function addResize() {
    window.addEventListener('resize', resizeChart)
}

function removeResize() {
    window.removeEventListener('resize', resizeChart)
}

onMounted(() => {
    initLine()
    addResize()
})
onBeforeUnmount(() => {
    if (chartObj) {
        chartObj.dispose()
        chartObj = null
    }
    removeResize()
})

function initLine() {
    chartObj = echarts.init(barRef.value)
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        toolbox: {
            feature: {
                saveAsImage: {yAxisIndex: 'none'}
            }
        },
        grid: {
            top: 70, right: 60, bottom: 30, left: 55,

        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                data: ['商品', '品类', '关键词-精准', '关键词-广泛', '关键词-词组'],
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '数据1',
                axisLabel: {
                    formatter: '{value} 单位1'
                },
                axisLine: {
                    show: true
                }
            },
            {
                type: 'value',
                name: '数据2',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    formatter: '{value} 单位2'
                },
                axisLine: {
                    show: true
                }
            }
        ],
        series: [
            {
                name: '数据1',
                type: 'bar',
                // tooltip: {
                //   valueFormatter: function (value) {
                //     return value + ' ml';
                //   }
                // },
                barWidth: '30%',
                data: [15, 24, 21, 26, 34],
                yAxisIndex: 0,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: 'rgba(111, 209, 206, 0.8)'},
                        {offset: 1, color: 'rgba(111, 209, 206, 0.1)'},
                    ]),
                    //柱状图圆角
                    borderRadius: [15, 15, 0, 0],
                },
            },
            {
                name: '数据2',
                type: 'bar',
                barWidth: '30%',
                data: [10, 16, 28, 21, 30],
                yAxisIndex: 1,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: '#ebb14d'},
                        {offset: 1, color: 'rgba(111, 209, 206, 0.1)'},
                    ]),
                    //柱状图圆角
                    borderRadius: [15, 15, 0, 0],
                },
            },
        ],
    }
    chartObj.setOption(option)
}

defineExpose({resizeChart})

// 下拉框相关
const options = [
    {
        value: '花费',
        label: '花费',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    }
]
const modelValue = ref(options[0].value)

</script>

<style scoped>

</style>
