<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"
        @change="change"
        @monthSwitch="monthSwitch"
      >
        <template v-slot:day="{ date, lunar, extraInfo }">
          <view class="custom-day">
            <text class="day-number">{{ date.day }}</text>
            <text v-if="extraInfo" class="custom-info" :class="getInfoClass(extraInfo)">
              {{ extraInfo }}
            </text>
            <!-- <view v-if="hasEvent(date)" class="event-dot"></view> -->
          </view>
        </template>
      </uni-calendar>
    </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: []
      },
      customInfo: {
        '2024-10-01': '重要',
        '2024-10-15': '假期'
      },
      events: {
        '2024-10-01': { type: 'important', text: '重要' },
        '2024-10-15': { type: 'holiday', text: '假期' },
        '2024-10-20': { type: 'birthday', text: '生日' }
      }
    }
  },
  methods: {
    onChange(e) {
      console.log('选择的日期变化：', e)
    },
    onMonthSwitch(e) {
      console.log('月份切换：', e)
    },
    hasEvent(date) {
      const dateString = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`
      return !!this.events[dateString]
    },
    getInfoClass(info) {
      if (info === '重要') return 'info-important'
      if (info === '假期') return 'info-holiday'
      if (info === '生日') return 'info-birthday'
      return ''
    },
    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;
}

.custom-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}

.day-number {
  font-size: 14px;
}

.custom-info {
  font-size: 10px;
  margin-top: 2px;
}

.info-important {
  color: #ff4d4f;
}

.info-holiday {
  color: #52c41a;
}

.info-birthday {
  color: #1890ff;
}

.event-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #1890ff;
  position: absolute;
  bottom: 2px;
}
</style>
