<template>
  <view>
    <h2>风险日历</h2>
    <view class="check-btn">
      <button
        v-for="(item, index) in btnList"
        :key="index"
        class="button"
        :type="activeIndex === index ? 'primary' : ''"
        @tap="onTimeCheck(index)"
      >
        {{ item.btn_title }}
      </button>
    </view>

    <view>
      <!-- 插入模式 -->
      <uni-calendar
        class="uni-calendar--hook"
        startDate="2024-10-15"
        endDate="2024-10-20"
        :range="true"
        :showMonth="false"
        @change="change"
        @monthSwitch="monthSwitch"
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      primary: '',
      activeIndex: 0,
      btnList: [{ btn_title: '月' }, { btn_title: '周' }, { btn_title: '日' }]
    }
  },
  methods: {
    change() {
      console.log('日期变化---')
    },
    monthSwitch() {
      console.log('切换月份时触发--')
    },
    onTimeCheck(i) {
      this.activeIndex = i
    }
  }
}
</script>

<style lang="scss" scoped>
.check-btn {
  display: flex;
  align-items: center;
}
</style>
