<template>
    <div>
        <div class="tab-content-title">
            <img class="tab-content-title-icon" src="@/assets/images/watchApi/title-icon.png" />
            <span>数据概况</span>
            <div class="tab-content-title-date">{{ currentDate }}</div>
        </div>
        <el-row>
            <el-col :span="5" style="padding: 10px">
                <div class="tab-content-navitem">
                    <div class="tab-content-navitem-title">心率</div>
                    <div class="tab-content-navitem-con">
                        <div><span class="bold-text">{{ hr || "--" }}</span>bpm</div>
                        <img class="tab-content-navitem-icon" src="@/assets/images/watchApi/xl.png" />
                    </div>
                </div>
            </el-col>
            <el-col :span="5" style="padding: 10px">
                <div class="tab-content-navitem">
                    <div class="tab-content-navitem-title">房颤</div>
                    <div class="tab-content-navitem-con">
                        <div>{{ af || "--" }}</div>
                        <img class="tab-content-navitem-icon" src="@/assets/images/watchApi/xl.png" />
                    </div>
                </div>
            </el-col>
            <el-col :span="5" style="padding: 10px">
                <div class="tab-content-navitem">
                    <div class="tab-content-navitem-title">步数</div>
                    <div class="tab-content-navitem-con">
                        <div class="bold-text">{{ basicInfo.steps || 0 }}</div>
                        <img class="tab-content-navitem-icon" src="@/assets/images/watchApi/xl.png" />
                    </div>
                </div>
            </el-col>
            <el-col :span="5" style="padding: 10px">
                <div class="tab-content-navitem">
                    <div class="tab-content-navitem-title">睡眠</div>
                    <div class="tab-content-navitem-con">
                        <div>
                            <span class="bold-text">{{ sleepHour || "--" }}</span>小时
                            <span class="bold-text">{{ sleepMinute || "--" }}</span>小时
                        </div>
                        <img class="tab-content-navitem-icon" src="@/assets/images/watchApi/xl.png" />
                    </div>
                </div>
            </el-col>
            <!-- <el-col :span="4" style="padding: 10px">
            <div class="tab-content-navitem">
              <div class="tab-content-navitem-title">心电</div>
              <div class="tab-content-navitem-con">
                <div class="bold-text">{{ deviceDetails.battery }}</div>
                <img
                  class="tab-content-navitem-icon"
                  src="@/assets/images/watchApi/xl.png"
                />
              </div>
            </div>
          </el-col> -->
        </el-row>

        <!-- 地图部分 -->
        <div class="tab-content-title">
            <img class="tab-content-title-icon" src="@/assets/images/watchApi/title-icon.png" />
            <span>位置</span>
        </div>
        <div class="tab-content-map">
            <div id="mapContainer" style="width: 100%; height: 500px;"></div>
        </div>


    </div>
</template>

<script>
import { queryOverview } from "@/api/watch/deviceInfo";
import { create } from "sortablejs";

import '@/mapJs/index.js'
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
    name: "Overview",
    props: {
        deviceId: {
            type: String || Number,
            default: "",
        },
        basicInfo: {
            type: Object,
            required: true,
        }
    },
    data() {
        return {
            center: [116.397428, 39.90923], // 北京天安门的经纬度
            sleepHour: '',
            sleepMinute: '',
            currentDate: this.parseTime(new Date(), "{y}-{m}-{d}"),
            hr: '',
            af: '',
            steps: '',
            battery: ''
        }
    },
    mounted() {
        this.initializeMap(); // 初始化地图
        this.updateMarkerPosition(); // 更新标记位置
    },
    watch: {
        basicInfo: {
            handler() {
                this.updateMarkerPosition(); // 当 basicInfo 更新时，更新标记位置
            },
            deep: true,
            immediate: true
        }
    },


    methods: {
        initializeMap() {
            AMapLoader.load({
                key: '71a29e186f52c9adc69964ce38d22237',
                version: '2.0',
                plugins: [] // 根据需要添加插件
            })
                .then(AMap => {
                    // 初始化地图
                    this.map = new AMap.Map('mapContainer', {
                        center: this.center,
                        zoom: 14
                    });

                    // 创建并添加标记
                    this.marker = new AMap.Marker({
                        position: this.center
                    });
                    this.map.add(this.marker);

                    // 更新标记位置
                    this.updateMarkerPosition();
                })
                .catch(e => {
                    console.error('AMap API 加载失败:', e);
                });
        },

        updateMarkerPosition() {
            if (this.basicInfo && this.basicInfo.gnssLon && this.basicInfo.gnssLat) {
                const latestIndex = this.basicInfo.gnssTime.length - 1;
                const lng = this.basicInfo.gnssLon[latestIndex];
                const lat = this.basicInfo.gnssLat[latestIndex];
                const position = [lng, lat];

                // 更新标记位置
                if (this.marker) {
                    this.marker.setPosition(position);
                }

                // 更新地图中心
                if (this.map) {
                    this.map.setCenter(position);
                }
            }
        },
        // 分钟转换成小时分
        convertMinutes(val) {
            if (val) {
                const seconds = val * 60
                const hours = Math.floor(seconds / 3600); // 3600秒等于1小时
                const minutes = Math.floor((seconds % 3600) / 60); // 余数部分除以60秒得到分钟数
                return [hours, minutes];
            } else {
                return [0, 0];
            }
        },
        getDetailsData() {
            queryOverview(this.currentDate, this.deviceId).then((response) => {
                if (response && response.data) {
                    this.hr = response.data.hr;
                    this.af = response.data.af;
                    const time = this.convertMinutes(response.data.sleepTime)
                    this.sleepHour = time[0];
                    this.sleepMinute = time[1];
                }
            })
        }

    }
}
</script>

<style scoped lang="scss">
#mapContainer {
    width: 100% !important;
    height: 500px !important;
}

@mixin u-flex($flexD, $alignI, $justifyC) {
    display: flex;
    flex-direction: $flexD;
    align-items: $alignI;
    justify-content: $justifyC;
}

::v-deep {
    .tabs .el-tabs__item {
        padding: 0 20px !important;
    }

    .el-tabs__nav-wrap::after {
        height: 1px;
    }

    .el-tabs__item {
        height: 45px;
        line-height: 45px;
    }
}

.app-container {
    min-height: calc(100vh - 110px);
    padding: 0 20px;
}

.aside-box {
    background: #fff;
    padding: 0 20px 0 0;
    color: #5b5e65;
    font-size: 12px;
    border-right: 1px solid #f0f2f5;
    margin-bottom: 0;

    &-user {
        @include u-flex(row, flex-start, flex-start);
        border-bottom: 1px dashed #e5e5e5;
        padding-bottom: 20px;
        margin-bottom: 12px;

        &-avatar {
            flex-shrink: 0;
            margin-top: 10px;
        }

        &-right {
            flex: 1;
            padding-left: 10px;
            color: #343434;
            font-size: 14px;

            i {
                margin-left: 4px;
            }
        }

        &-phone {
            color: #727272;
            font-size: 12px;
        }
    }

    &-bodyinfo {
        height: 40px;
        @include u-flex(row, center, space-between);
    }

    &-equipment {
        border-top: 1px dashed #e5e5e5;
        border-bottom: 1px dashed #e5e5e5;
        padding-bottom: 20px;

        &-title {
            color: #999;
            line-height: 12px;
        }

        &-num {
            font-size: 14px;
            color: #343434;
            line-height: 14px;
            margin-top: 15px;
        }
    }

    .equipment {
        &-box {
            padding: 20px 0;
        }

        &-body {
            padding: 10px;
            @include u-flex(row, center, flex-start);
            border-radius: 4px;
            background: #ebeeee;

            &-img {
                height: 52px;
                width: 52px;
                margin-right: 7px;
                flex-shrink: 0;

                img {
                    height: 100%;
                    width: none;
                    object-fit: contain;
                }
            }

            &-name {
                color: #2284ff;
                font-size: 14px;
            }

            &-other img {
                width: 16px;
                height: 10px;
            }
        }

        &-day {
            margin: 15px 0;

            span {
                color: #2284ff;
            }
        }

        &-btn {
            @include u-flex(row, center, space-between);
        }
    }
}

.el-main {
    background-color: #fff;
    color: #333;
    // line-height: 160px;
    padding: 0;
}

body>.el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}

.device-details {
    padding: 20px;
}

.main-container {
    display: flex;
}

.basic-info {
    padding-right: 20px;
}

.details {
    flex: 1;
}

.bold-text {
    font-family: Anton-Regular;
    font-size: 20px;
}

.tab-content {
    margin-top: 20px;

    &-navitem {
        border-radius: 4px;
        min-height: 70px;
        box-shadow: 0 0 10px rgba(1, 24, 54, 0.1);
        font-size: 14px;
        color: #606165;
        padding: 6px 10px 5px 10px;

        &-title {
            line-height: 16px;
            margin-right: 10px;
            padding-left: 15px;
            border-left: 4px solid #2284ff;
            margin-bottom: 13px;
        }

        &-con {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }

        &-icon {
            width: 40px;
            height: 40px;
        }
    }

    &-map {
        width: calc(100% - 20px);
        height: 500px;
    }
}

.overview-content {
    text-align: left;
    /* 左对齐 */
    margin-left: 20px;
    /* 为了不紧贴左边缘，添加一些内边距 */
}

/* .chart-container { */
/* width: 100%; */
/* 设置宽度为 100% */
/* height: 400px; */
/* 设置高度为 400px，您可以根据需要调整 */
/* margin-top: 20px; */
/* } */

.chart-container {
    width: 100%;
    height: 400px;
    /* 确保足够空间显示标签 */
}

.data-summary-label {
    margin-right: 10px;
    /* 适当调整右边距以创建所需的空间 */
}

.tab-content-title {
    height: 50px;
    font-size: 16px;
    color: #2284ff;
    letter-spacing: 0;
    line-height: 50px;
    font-weight: 700;
    background-color: #fff;
    padding-left: 15px;
    display: flex;
    align-items: center;

    &-date {
        margin-left: 20px;
    }

    &-icon {
        width: 13px;
        height: 20px;
        margin-right: 10px;
    }

    &-left {
        display: flex;
        align-items: center;
    }

    &-right {
        font-size: 14px;
        color: #999;
        width: 28px;
        height: 28px;
        text-align: center;
        line-height: 28px;
        cursor: pointer;
    }
}
</style>
