<template>
  <view>
    <view class="scrollViewBox">
      <!-- 日期滑动 -->
      <scroll-view scroll-x>
        <view class="flexA">
          <view v-for="(item, index) in dateList" class="delCol flexA" @click="clickDateHandler(item.date, index)">
            <view class="dateSty">{{ item.date.slice(5) }}</view>
            <view class="zhouSty flexC" :class="curDateS == index && 'yellow'">
              {{
                item.zhou == 0
                  ? '日'
                  : item.zhou == 1
                  ? '一'
                  : item.zhou == 2
                  ? '二'
                  : item.zhou == 3
                  ? '三'
                  : item.zhou == 4
                  ? '四'
                  : item.zhou == 5
                  ? '五'
                  : '六'
              }}
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 日历 -->
    <view class="contentBox">
      <ren-calendar ref="ren" :markDays="markDays" :selectDateList="selectDateList" :headerBar="true" @onDayClick="onDayClick"></ren-calendar>
      <view class="change">选中日期：{{ curDate }}</view>
    </view>

    <button @click="toPosterHandler" style="margin-top: 100rpx;">跳转海报</button>
  </view>
</template>

<script>
import dayjs from 'dayjs'
import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
export default {
  components: {
    RenCalendar,
  },
  data() {
    return {
      dateList: [],
      // zhouList: []
      curDateS: 0,
      curDate: '',
      markDays: [],

      // 选中制定的日期加黄色点点
      selectDateList: ['2022-12-09','2022-12-10', '2022-12-11', '2022-12-21']
    }
  },
  onReady() {
    let today = this.$refs.ren.getToday().date
    this.curDate = today
    this.markDays.push(today)
  },
  onLoad(options) {
    // let afterDate = []
    for (let i = 0; i <= 14; i++) {
      this.dateList.push({
        date: dayjs().add(i, 'day').format('YYYY.MM.D'),
        zhou: dayjs().add(i, 'day').day(),
      })
    }
    // console.log(this.dateList)
  },
  methods: {
    clickDateHandler(date, index) {
      this.curDateS = index
      console.log(dayjs(date).format('YYYY-MM-DD'))
    },
    onDayClick(data) {
      this.curDate = data.date
    },
    toPosterHandler(){
      uni.navigateTo({ url: '/pages/index/poster' })
    }
  },
}
</script>

<style lang="scss">
page {
  background: #ffcc47;
}
.scrollViewBox {
  width: 100%;
  padding: 16rpx 32rpx 24rpx;
  box-sizing: border-box;
  background: #fff;
  border-radius: 0 0 40rpx 40rpx;
}
.delCol {
  flex-direction: column;
  margin-right: 32rpx;
}
.dateSty {
  color: rgba(50, 50, 51, 1);
  font-size: 28rpx;
  margin-bottom: 16rpx;
}
.zhouSty {
  width: 80rpx;
  height: 80rpx;
  color: rgba(50, 50, 51, 1);
  font-size: 28rpx;
  font-weight: 700;
}
.yellow {
  width: 80rpx;
  height: 80rpx;
  border-radius: 24rpx;
  background: rgba(255, 192, 27, 1);
}
.contentBox{
  margin-top: 160rpx;
}
</style>