<template>
    <div ref="chartRef" :style="{ height: height, width: width }" />
</template>

<script setup>
import { getCurrentInstance, watch, onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import theme from '../theme/qc.json'
echarts.registerTheme('theme', theme)
import { CanvasRenderer } from 'echarts/renderers'
echarts.use([CanvasRenderer])
const { proxy } = getCurrentInstance()
const chartRef = ref(null)
const props = defineProps({
    width: {
        type: String,
        default: '100%'
    },
    height: {
        type: String,
        default: '350px'
    }
})
let options = {
    title: {
        text: '前7日IPQC缺陷数量直方图',
        left: 'left'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        boundaryGap: true,
        axisTick: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        axisTick: {
            show: false
        }
    },
    // 图例
    legend: {
        type: 'scroll',
        top: 'top',
        width: '60%',
        right: '0%'
    },
    series: [
        {
            name: '',
            type: '',
            data: []
        }
    ]
}
import { listQcDefectConfig } from '@/api/qualityManagement/FQC/qcdefectconfig.js'
const chart = ref(null)
function initChart() {
    chart.value = echarts.init(proxy.$refs.chartRef, 'theme')
    chart.value.setOption(options)
    listQcDefectConfig({ pageNum: 1, pageSize: 100 }).then((res) => {
        const { code, data } = res
        if (code == 200) {
            options.legend.data = data.result.map((item) => item.name)
            chart.value.setOption(options)
        }
    })
}
onMounted(() => {
    initChart()
    window.addEventListener('resize', () => {
        chart.value?.resize()
    })
})
/// ============ 修改数据 ===========
import { getMoudle10 } from '@/api/smartScreen/QualityScreen/index.js'
function updateData() {
    getMoudle10().then((res) => {
        if (res.code === 200) {
            options.title = res.data.title
            options.xAxis.data = res.data.xAxis.data
            let _series = res.data.series
            _series.forEach((item) => {
                item.stack = 'group'
                item.label = {
                    show: true,
                    position: 'inside',
                    textBorderColor: '#fff',
                    textBorderWidth: 0,
                    formatter: '{c}',
                    color: '#fff'
                }
            })
            options.series = _series
            chart.value.setOption(options)
        }
    })
}
function handleQuery() {
    updateData()
}
handleQuery()
let timer1 = null
const clearSearchTimer = () => {
    clearInterval(timer1)
    timer1 = null
}
const createSearchTimer = () => {
    clearSearchTimer()
    timer1 = setInterval(() => {
        handleQuery()
    }, 1000 * 60 * 5)
}
onMounted(() => {
    createSearchTimer()
})
onUnmounted(() => {
    clearSearchTimer()
})
/// ==========================================
</script>
