<template>
    <div class="container">
        <div class="chart" ref="chart"></div>
        <div class="math-box">
            <div class="math-content">
                <div style="height: 25%;"> </div>
                <div class="key">最大值</div>
                <div class="key">最小值</div>
                <div class="key">平均值</div>
            </div>
            <div class="math-content" v-for="(item,index) in calc.math">
                <div :style="{color:color[index]}">{{ item.key }}</div>
                <div>{{ item.value.max }}</div>
                <div>{{ item.value.min }}</div>
                <div>{{ item.value.avg }}</div>
            </div>
        </div>
        
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, onUpdated, getCurrentInstance, watch } from "vue"
const prop = defineProps<{
    calc: {
        name: string,
        math: {
            key: string,
            value: {
                max: number,
                min: number,
                avg: number,
                data: any[]
            }
        }[],
        data: any
    }
}>()
const { proxy } = getCurrentInstance() as any
const chart = ref()
let myChart = null
let data = prop.calc.data
let color = ['#4281E5','#78F7AE','#FF6E40']
function init() {
    myChart = proxy.$echarts.init(chart.value, 'dark');
    const option = {
        title: {
            text: prop.calc.name,
            top: "5%",
            left: "5%"
        },
        color: color,
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            top: "15%",
            left: "5%",
            right: "5%",
            bottom: "5%",
            containLabel: true,
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
        },
        series: data
    };
    myChart.setOption(option);
}

watch(() => prop.calc.data, (newVal) => {
    data = newVal
    myChart.setOption({
        series: data
    })
})

onMounted(() => {
    init()
})

</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    font-size: 16px;
    color: #fff;
    box-shadow: rgb(2, 106, 181) 0px 8px 8px;
}
.container:hover {
    box-shadow: rgb(2, 106, 181) 0px 8px 16px;
}

.chart {
    height: calc(100% - 90px);
    width: 100%;
}
.math-box {
    height: 90px;
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
}
.math-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.key {
    color: #ff6e40;
}
</style>
