<template>
    <div class="container">
        <div class="chart" ref="chart"></div>
        <ul>
            <li><text class="key">最大值</text><text>{{ calc.max }}</text></li>
            <li><text class="key">最小值</text><text>{{ calc.min }}</text></li>
            <li><text class="key">平均值</text><text>{{ calc.avg }}</text></li>
        </ul>
    </div>
</template>

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

watch(() => prop.calc.data, (newVal) => {
    data = newVal
    myChart.setOption({
        series: [
            {
                data: 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% - 60px);
    width: 100%;
}

ul {
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

ul li {
    height: 100%;
    width: 33%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

ul>li:nth-child(2) {

    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
}

.key {
    color: #ff6e40;
}
</style>
