<template>
  <view class="wrap">
    <!-- 头部菜单 -->
    <view class="nav-wrap slide-bottom">
      <uni-segmented-control
        :active-color="activeColor"
        :current="current"
        :values="values"
        @clickItem="handleClickNav"
        class="nav"
      />
    </view>
    <!-- 内容区 -->
    <view class="content">
      <!-- 今日打卡地图显示 -->
      <history-map v-if="current === 0" />
      <!-- 打卡记录 时间轴显示 -->
      <timeline v-else />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      values: ['今日打卡', '打卡记录'],
      activeColor: '#0897C7',
    };
  },
  methods: {
    handleClickNav({ currentIndex }) {
      this.current = currentIndex;
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  padding-top: 88rpx;
  min-height: 100vh;
  background-color: $white;

  .nav-wrap {
    z-index: 999;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;

    display: flex;
    justify-content: center;
    align-items: center;
    height: 88rpx;
    background-color: $white;
    .nav {
      width: 540rpx;
    }
  }
}
</style>
