<style lang="scss" scoped>
.layout_title {
    font-size: 18px;
    font-weight: bold;
}
</style>

<template>
    <div>
        <div style="display: flex; justify-content: space-between;">
            <span class="layout_title">人员健康数据趋势</span>
            <el-button type="primary" @click="handleBack">返回</el-button>
        </div>
        <div
            style="display: flex; width: 100%; height: 72vh; flex-wrap: wrap; justify-content: space-between; padding-top: 20px;">
            <el-card style="width: 49%; height: 34vh;" body-style="height: 100%;">
                <div ref="chart1" style="width: 100%; height: 100%;"></div>
            </el-card>
            <el-card style="width: 49%; height: 34vh;" body-style="height: 100%;">
                <div ref="chart2" style="width: 100%; height: 100%;"></div>
            </el-card>
            <el-card style="width: 49%; height: 34vh;" body-style="height: 100%;">
                <div ref="chart3" style="width: 100%; height: 100%;"></div>
            </el-card>
            <el-card style="width: 49%; height: 34vh;" body-style="height: 100%;">
                <div ref="chart4" style="width: 100%; height: 100%;"></div>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
const emit = defineEmits(['close'])

const handleBack = () => {
    emit('close')
}
const chart1 = ref(null)
const initChart1 = () => {
    if (!chart1.value) return false
    const myChart = echarts.init(chart1.value);
    const option = {
        title: {
            text: '血压趋势',
            top: 'top',
            left: 'center'
        },
        legend: {
            data: ['收缩压', '舒张压'],
            bottom: 'bottom'
        },
        grid: {
            top: '24%',
            left: '5%',
            right: '5%',
            bottom: '20%'
        },
        xAxis: {
            type: 'category',
            data: ['08:00', '12:00', '16:00', '20:00', '00:00', '04:00', '08:00'],
            boundaryGap: false
        },
        yAxis: {
            type: 'value',
            name: 'mmHg',
        },
        series: [
            {
                name: '收缩压',
                data: [120, 122, 130, 126, 121, 122, 123],
                type: 'line',
                smooth: true
            },
            {
                name: '舒张压',
                data: [80, 82, 83, 84, 83, 85, 83],
                type: 'line',
                smooth: true
            }
        ]
    };
    myChart.setOption(option);
    window.addEventListener('resize', () => {
        myChart.resize()
    })
}

const chart2 = ref(null)
const initChart2 = () => {
    if (!chart2.value) return false
    const myChart = echarts.init(chart2.value);
    const option = {
        title: {
            text: '血氧趋势',
            top: 'top',
            left: 'center'
        },
        legend: {
            data: ['血氧饱和度'],
            bottom: 'bottom'
        },
        grid: {
            top: '24%',
            left: '5%',
            right: '5%',
            bottom: '20%'
        },
        xAxis: {
            type: 'category',
            data: ['08:00', '12:00', '16:00', '20:00', '00:00', '04:00', '08:00'],
            boundaryGap: false
        },
        yAxis: {
            type: 'value',
            name: '%',
        },
        series: [
            {
                name: '血氧饱和度',
                data: [98, 96, 96, 95, 96, 96, 97],
                type: 'line',
                smooth: true
            }
        ]
    };
    myChart.setOption(option);
    window.addEventListener('resize', () => {
        myChart.resize()
    })
}

const chart3 = ref(null)
const initChart3 = () => {
    if (!chart3.value) return false
    const myChart = echarts.init(chart3.value);
    const option = {
        title: {
            text: '心率趋势',
            top: 'top',
            left: 'center'
        },
        legend: {
            data: ['心率'],
            bottom: 'bottom'
        },
        grid: {
            top: '24%',
            left: '5%',
            right: '5%',
            bottom: '20%'
        },
        xAxis: {
            type: 'category',
            data: ['08:00', '12:00', '16:00', '20:00', '00:00', '04:00', '08:00'],
            boundaryGap: false
        },
        yAxis: {
            type: 'value',
            name: 'bpm',
        },
        series: [
            {
                name: '心率',
                data: [75, 78, 79, 81, 79, 76, 77],
                type: 'line',
                smooth: true
            }
        ]
    };
    myChart.setOption(option);
    window.addEventListener('resize', () => {
        myChart.resize()
    })
}

const chart4 = ref(null)
const initChart4 = () => {
    if (!chart4.value) return false
    const myChart = echarts.init(chart4.value);
    const option = {
        title: {
            text: '体温趋势',
            top: 'top',
            left: 'center'
        },
        legend: {
            data: ['体温'],
            bottom: 'bottom'
        },
        grid: {
            top: '24%',
            left: '5%',
            right: '5%',
            bottom: '20%'
        },
        xAxis: {
            type: 'category',
            data: ['08:00', '12:00', '16:00', '20:00', '00:00', '04:00', '08:00'],
            boundaryGap: false
        },
        yAxis: {
            type: 'value',
            name: '℃',
        },
        series: [
            {
                name: '体温',
                data: [36.1, 36.1, 36.3, 36.2, 36.1, 36.1, 36.2],
                type: 'line',
                smooth: true
            }
        ]
    };
    myChart.setOption(option);
    window.addEventListener('resize', () => {
        myChart.resize()
    })
}

onMounted(() => {
    initChart1()
    initChart2()
    initChart3()
    initChart4()
})
</script>
