<template>
    <div>
        <div class="box-header">
            <div class="box-title boldtext">
                血糖 <span style="margin-left: 14px">{{ currentDate }}</span>
            </div>
            <div>

                <el-date-picker size="small" v-model="currentDatePicker" type="date" placeholder="选择日期"
                    value-format="yyyy-MM-dd" @change="datePickerchange">
                </el-date-picker>
            </div>
        </div>
        <!-- <div ref="heartrateChart" style="width: 841px; height: 320px"></div> -->
        <el-table :data="tableData">
            <el-table-column prop="createTime" align="center" label="测量时间">
            </el-table-column>
            <el-table-column prop="bloodGlucose" align="center" label="测量结果">
            </el-table-column>
            <template #empty>
                <div>
                    今日暂无数据，请选择其他日期
                </div>
            </template>
        </el-table>

    </div>
</template>

<script>
import * as echarts from "echarts";
import { queryGlucoseDate } from "@/api/watch/deviceInfo";
export default {
    props: {
        deviceId: {
            type: String || Number,
            default: "",
        },
    },
    data() {
        return {
            tableData:[],
            currentDate: this.parseTime(new Date(), "{y}-{m}-{d}"),
            currentDatePicker: "",
            exportLoading: false,
            chart: null,
            chartOptions: {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "line",
                    },
                },
                grid: {
                    top: "5%",
                    left: "7%",
                    bottom: "10%",
                    right: "7%"
                },
                xAxis: {
                    type: "time",
                    // min: new Date(this.currentDate + " 00:00:00").getTime(),
                    // max: new Date(this.currentDate + " 23:59:59").getTime(),
                    splitNumber: 6,
                    // interval: 1000 * 60 * 60 * 4, // 每4小时一个标签
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        fontWeight: "bold",
                        color: "#999999",
                        formatter: (value) => {
                            return this.parseTime(value, "{h}:{i}");
                        },
                    },
                },
                yAxis: {
                    type: "value",
                    min: 0,
                    max: 200,
                    interval: 20,
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#999999",
                        fontWeight: "bold",
                    },
                },
                series: [
                    {
                        data: [],
                        type: "line",
                        smooth: true,
                        symbol: "none",
                        lineStyle: {
                            color: "#de5d36", //改变折线颜色
                        },
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: "#ffd2c3",
                                },
                                {
                                    offset: 1,
                                    color: "#fff",
                                },
                            ]),
                        },
                    },
                ],
            },
            sportChart: null,
            sportChartOption: {
                tooltip: {
                    trigger: "item",
                },
                series: [
                    {
                        name: "运动心率",
                        type: "pie",
                        radius: ["40%", "60%"],
                        avoidLabelOverlap: false,
                        padAngle: 2,
                        label: {
                            show: false,
                            position: "center",
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 20,
                                fontWeight: "bold",
                                color: ""
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: [
                            { value: 1048, name: "常规", itemStyle: { color: "#00bc98" } },
                            { value: 735, name: "热身", itemStyle: { color: "#0286ff" } },
                            { value: 580, name: "燃脂", itemStyle: { color: "#20fef5" } },
                            { value: 484, name: "有氧", itemStyle: { color: "#8e80f2" } },
                            { value: 300, name: "无氧", itemStyle: { color: "#fe9b52" } },
                        ],
                    },
                ],
            },
        };
    },
    mounted() {
        this.initChart();
    },
    methods: {
        datePickerchange() {
            this.currentDate = this.currentDatePicker || this.parseTime(new Date(), "{y}-{m}-{d}");
            this.getDetailsData()
        },
        initChart() {
            const chartElement = this.$refs.heartrateChart;
            const sportChartElement = this.$refs.sportHeartrate;
            if (chartElement) {
                this.chart = echarts.init(chartElement);
                this.seChartOptions()
            }
            if (sportChartElement) {
                this.sportChart = echarts.init(sportChartElement);
                this.sportChart.setOption(this.sportChartOption);
            }
        },
        seChartOptions() {
            this.chartOptions.xAxis.min = this.currentDate + ' 00:00:00'
            this.chartOptions.xAxis.max = this.currentDate + ' 23:59:59'
            this.chart.setOption(this.chartOptions);
        },
        // 获取脉搏
        getDetailsData() {
            queryGlucoseDate(this.currentDate, this.deviceId)
                .then((response) => {
                    if (response && response.data) {
                        // console.log("------------------" + JSON.stringify(response.data, null, 2))
                        this.tableData = response.data;

                        // // 更新 chartOptions.series 数据
                        // this.chartOptions.series[0].data = data;
                        // // 更新图表
                        // if (this.chart) {
                        //     this.seChartOptions()
                        // }
                    } else {
                        console.warn("脉搏数据返回为空或格式不正确:", response);
                    }
                })
                .catch((error) => {
                    console.error("获取脉搏数据失败:", error);
                });
        },
    },
};
</script>

<style lang="scss" scoped>
@mixin u-flex($flexD, $alignI, $justifyC) {
    display: flex;
    flex-direction: $flexD;
    align-items: $alignI;
    justify-content: $justifyC;
}

.fz15 {
    font-size: 15px !important;
}

.boldtext {
    font-size: 16px;
    color: #292929;
    line-height: 30px;
    font-weight: 700;
}

.box-header {
    padding: 0 15px;
    @include u-flex(row, center, space-between);
    height: 50px;
}

.box-title {
    color: #292929;
    font-size: 16px;
    font-family: PingFang SC-Medium;
    padding-left: 10px;
    border-left: 4px solid #2284ff;
    line-height: 13px;
}

.heartrate-data {
    @include u-flex(row, center, space-around);
    margin-top: 30px;

    &-item {
        height: 60px;
        width: 196px;
        border-radius: 4px;
        box-shadow: 0 0 10px rgba(1, 24, 54, 0.1);
        overflow: hidden;
        @include u-flex(row, center, flex-start);

        img {
            height: 41px;
            width: 41px;
        }
    }

    &-imgbox {
        flex-shrink: 0;
        height: 60px;
        width: 60px;
        @include u-flex(row, center, center);
    }

    &-right {
        flex: 1;
        text-align: center;
        font-size: 13px;
        color: #606165;
        font-family: PingFang SC-Medium;
        background: #fff;
        height: 60px;
    }

    &-num {
        font-size: 22px;
        color: #2c2c3b;
        line-height: 38px;
    }
}

.heartrate-sport {
    @include u-flex(row, flex-start, flex-start);
    margin-top: 20px;

    &-l {
        width: 490px;
        flex-shrink: 0;
    }

    &-r {
        flex: 1;
    }

    &-lechart {
        width: 490px;
        height: 300px;
    }

    &-rechart {
        width: 100%;
        @include u-flex(row, center, center);
    }
}
</style>