<template>
  <view class="uni-calendar-item__weeks-box" :class="{
    'uni-calendar-item--disable': weeks.disable,
    'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay && highlightToday,
    'uni-calendar-item--checked': (calendar.fullDate === weeks.fullDate && !weeks.isDay),
    'uni-calendar-item--before-checked': weeks.beforeMultiple,
    'uni-calendar-item--multiple': weeks.multiple,
    'uni-calendar-item--after-checked': weeks.afterMultiple,
    'uni-calendar-item--week-mode-disabled': weeks.isWeekModeDisabled,
  }" @click="choiceDate(weeks)">
    <view class="uni-calendar-item__weeks-box-item"
      :class="[{ 'uni-calendar-item--disable-after': weeks.disableAfter != false && weeks.disableAfter != true }]">
      <text class="uni-calendar-item__weeks-box-text" :class="{
        'uni-calendar-item--isDay-text': weeks.isDay && highlightToday,
        'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay && highlightToday,
        'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && !weeks.isDay,
        'uni-calendar-item--before-checked': weeks.beforeMultiple,
        'uni-calendar-item--multiple': weeks.multiple,
        'uni-calendar-item--after-checked': weeks.afterMultiple,
        'uni-calendar-item--disable': weeks.disable,
        'uni-calendar-item--week-mode-disabled': weeks.isWeekModeDisabled,
        'uni-calendar-item--not-current-month': !weeks.isCurrentMonth,
      }">{{ weeks.date }}</text>
      <view v-if="showExtraInfo" class="uni-calendar-item__weeks-info-text-box">
        <view v-if="weeks.extraInfo && weeks.extraInfo.info" class="uni-calendar-item__weeks-info-text-box-content"
          :class="[weeks.extraInfo.info.isFinish ? 'uni-calendar-item__weeks-info-text-box--active' : 'uni-calendar-item__weeks-info-text-box--inactive']">
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { initVueI18n } from '@dcloudio/uni-i18n'
import i18nMessages from './i18n/index.js'
const { t } = initVueI18n(i18nMessages)

export default {
  emits: ['change'],
  props: {
    weeks: {
      type: Object,
      default() {
        return {}
      }
    },
    calendar: {
      type: Object,
      default: () => {
        return {}
      }
    },
    selected: {
      type: Array,
      default: () => {
        return []
      }
    },
    lunar: {
      type: Boolean,
      default: false
    },
    highlightToday: {
      type: Boolean,
      default: true
    },
    showExtraInfo: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    todayText() {
      return t("uni-calender.today")
    },
  },
  methods: {
    choiceDate(weeks) {
      this.$emit('change', weeks)
    }
  }
}
</script>

<style lang="scss" scoped>
$uni-font-size-base: 14px;
$uni-text-color: #333;
$uni-font-size-sm: 12px;
$uni-color-error: #e43d33;
$uni-opacity-disabled: 0.3;
$uni-text-color-disable: #c0c0c0;
$uni-primary: #2979ff !default;

.uni-calendar-item__weeks-box {
  // flex: 1;
  width: fit-content;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin: 0 auto;
  background-color: #F6F8FA;
}

.uni-calendar-item__weeks-box-text {
  // font-size: $uni-font-size-base;
  color: $uni-text-color;
  font-size: 30rpx;
  font-weight: bold;
}

.uni-calendar-item__weeks-lunar-text {
  font-size: $uni-font-size-sm;
  color: $uni-text-color;
}

.uni-calendar-item__weeks-box-item {
  position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 76rpx;
  height: 76rpx;
}

.uni-calendar-item__weeks-info-text-box {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.uni-calendar-item__weeks-info-text-box-content {
  height: 100%;
  border-radius: 50%;
}

.uni-calendar-item__weeks-info-text-box--active {
  background-color: #22C55E;
}

.uni-calendar-item__weeks-info-text-box--inactive {
  background-color: #FF5A5F;
}

.uni-calendar-item__weeks-box-circle {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: $uni-color-error;

}

.uni-calendar-item--disable {
  background-color: rgba(249, 249, 249, $uni-opacity-disabled);
  color: $uni-text-color-disable;
  // opacity: 0;
  // display: none;
}

.uni-calendar-item--disable-after {
  background-color: rgba(249, 249, 249, $uni-opacity-disabled);
  color: $uni-text-color-disable;
  opacity: 0;
  display: none;
}

.uni-calendar-item--isDay-text {
  color: $uni-primary;
}

.uni-calendar-item--isDay {
  background-color: $uni-primary;
  opacity: 0.8;
  color: #fff;
}

.uni-calendar-item--extra {
  color: $uni-color-error;
  opacity: 0.8;
}

.uni-calendar-item--checked {
  background-color: $uni-primary;
  color: #fff;
  opacity: 0.8;
}

.uni-calendar-item--multiple {
  background-color: $uni-primary;
  color: #fff;
  opacity: 0.8;
}

.uni-calendar-item--before-checked {
  background-color: #ff5a5f;
  color: #fff;
}

.uni-calendar-item--after-checked {
  background-color: #ff5a5f;
  color: #fff;
}

.uni-calendar-item--week-mode-disabled {
  background-color: rgba(249, 249, 249, $uni-opacity-disabled);
  color: $uni-text-color-disable;
  // color: #ccc;
}

.uni-calendar-item--not-current-month {
  opacity: 0.5;
  color: #999;
}
</style>
