<template>
  <view class="padding">
    <!-- 日期组件 -->
    <view></view>
    <!-- 健康上报组件 -->
    <view></view>
    <!-- 校园轨迹组件 -->
    <view class="card radius shadow-warp bg-white">
      <view class="card-head solid-bottom">
        <view class="card-head-avatar">
          <view class></view>
        </view>
        <view class="card-head-title">校园打卡</view>
        <view class="card-head-action">icon</view>
      </view>

      <view class="card-content">
        <view class="map-wrap">
          <map
            :latitude="latitude"
            :longitude="longitude"
            :markers="covers"
            style="width: 100%; height: 1000rpx;"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 37.87059,
      longitude: 112.55067,
      covers: [
        {
          latitude: 37.87059,
          longitude: 112.55067,
          iconPath: '../../static/location.png',
        },
        {
          latitude: 37.87,
          longitude: 112.5506,
          iconPath: '../../static/location.png',
        },
      ],
    };
  },

  onLoad() {
    this.getLocation();
  },

  methods: {
    getLocation() {
      uni.getLocation({
        type: 'wgs84',
        success: res => {
          this.longitude = res.longitude;
          this.latitude = res.latitude;
          console.log('当前位置的经度：' + res.longitude);
          console.log('当前位置的纬度：' + res.latitude);
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  .card-head {
    display: flex;
    align-items: center;
    height: 120rpx;
    padding: 0 32rpx;

    .card-head-avatar {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 56rpx;
      height: 56rpx;
      border-radius: 50%;
      background-color: $blue;
      color: $white;
    }

    .card-head-title {
      flex: 1;
      margin: 0 20rpx;
      font-size: 16px;
      color: $black;
    }
  }
}
</style>
