<template>
  <!-- 校园轨迹组件 -->
  <view class="card radius shadow-warp bg-white">
    <view class="card-head solid-bottom">
      <view class="card-head-avatar bg-purple">
        <view class="cuIcon-circle"></view>
      </view>
      <view class="card-head-title">校园打卡</view>
      <!-- <view class="card-head-action">icon</view> -->
    </view>

    <view class="card-content">
      <view class="map-wrap">
        <history-map :markers="markers" />
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'LocationMap',

  computed: {
    ...mapState('statistics', ['schoolSigns']),

    // 坐标标注点
    markers() {
      if (!this.schoolSigns) return null;
      const result = [];
      this.schoolSigns.forEach(item => {
        const content = `${item.siteName}\n${item.number}人`;
        const obj = {
          id: Math.random(),
          latitude: item.latitude,
          longitude: item.longitude,
          iconPath: '/static/location.png',
          callout: {
            content,
            display: 'ALWAYS',
            color: '#fff',
            padding: 4,
            bgColor: '#0A97C6',
            borderRadius: 2,
            textAlign: 'center',
          },
        };
        result.push(obj);
      });

      return result;
    },
  },
};
</script>
