<template>
  <scroll-view scroll-x class="date-bar">
    <view
      v-for="item in days"
      :key="item.date"
      class="date-item"
      :class="{selected: item.date===modelValue, holiday: item.isHoliday, weekend: item.isWeekend}"
      @click="$emit('update:modelValue', item.date)"
    >
      <view class="week">{{ item.weekStr }}</view>
      <view class="date">{{ item.day }}</view>
      <view class="tips" v-if="item.tip">{{ item.tip }}</view>
    </view>
  </scroll-view>
</template>

<script setup>
const props = defineProps({
  days: {
    type: Array,
    required: true
  },
  modelValue: {
    type: String,
    required: true
  }
});
const emit = defineEmits(['update:modelValue']);
</script>

<style scoped lang="scss">
.date-bar {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  padding: 0 8rpx 0 8rpx;
  width: 100%;
  white-space: nowrap;
}
.date-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 68rpx;
  min-width: 68rpx;
  margin-right: 8rpx;
  margin-top: 12rpx;
  cursor: pointer;
  height: 76rpx;
  border-radius: 14rpx;
  transition: background .18s;
}
.week {
  font-size: 13px;
  color: #b1b1b1;
  margin-bottom: 4rpx;
}
.date {
  font-size: 21px;
  font-weight: 500;
  color: #333;
}
.tips {
  font-size: 10px;
  color: #fa5e5e;
  margin-top: 2rpx;
}
.selected {
  background: linear-gradient(180deg, #eaf5ff 70%, #c0eaff 100%);
  color: #2885ff;
  border-bottom: 4rpx solid #2885ff;
}
.holiday .date {
  color: #fa5e5e;
}
.weekend .week {
  color: #179c29;
}
</style>
