<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>
        <el-table :data="tableData">
            <el-table-column prop="createTime" align="center" label="测量时间">
            </el-table-column>
            <el-table-column prop="val" align="center" label="测量结果">
            </el-table-column>
        </el-table>

    </div>
</template>

<script>
import * as echarts from "echarts";
import { queryBkData } 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,
        }  
    },
    
    methods: {
        datePickerchange() {
            this.currentDate = this.currentDatePicker || this.parseTime(new Date(), "{y}-{m}-{d}");
            this.getDetailsData()
        },
        // 获取血酮
        getDetailsData() {
            queryBkData({date:this.currentDate, deviceId:this.deviceId})
                .then((response) => {
                    if (response && response.data) {
                        // console.log("------------------" + JSON.stringify(response.data, null, 2))
                        this.tableData = response.data;
                    } 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>