<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"
        :range="true"
        :showMonth="false"
        :selected="info.selected"
        @change="change"
        @monthSwitch="monthSwitch"
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      primary: '',
      activeIndex: 0,
      btnList: [{ btn_title: '月' }, { btn_title: '周' }, { btn_title: '日' }],
      info: {
        lunar: true,
        range: true,
        insert: false,
        selected: []
      }
    }
  },
  methods: {
    change() {
      console.log('日期变化---')
    },
    monthSwitch() {
      console.log('切换月份时触发--')
    },
    onTimeCheck(i) {
      this.activeIndex = i
    }
  },
  created() {
    this.$nextTick(() => {
      // this.showCalendar = true
    })
    // TODO 模拟请求异步同步数据
    setTimeout(() => {
      this.info.date = getDate(new Date(), -30).fullDate
      this.info.startDate = getDate(new Date(), -60).fullDate
      this.info.endDate = getDate(new Date(), 30).fullDate
      this.info.selected = [
        {
          date: getDate(new Date(), -3).fullDate,
          info: '打卡'
        },
        {
          date: getDate(new Date(), -2).fullDate,
          info: '签到',
          data: {
            custom: '自定义信息',
            name: '自定义消息头'
          }
        },
        {
          date: getDate(new Date(), -1).fullDate,
          info: '已打卡'
        }
      ]
    }, 2000)
  }
}
</script>

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