<style lang="less">
.day-selecotr {
  text-align: center;
  margin-top: 32rpx;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  white-space: nowrap;
}

.day-selecotr .day-selecotr-item {
  width: 96rpx;
  margin-right: 4rpx;
  text-align: center;
  padding-top: 20rpx;
  padding-bottom: 16rpx;
  display: inline-block;
  &.cross-month {
    .weekday {
      color: #140050;
      font-weight: 600;
    }
  }
}

.day-selecotr .day-selecotr-item.selected {
  background: rgba(150, 242, 227, 0.4);
  border-radius: 30rpx;
//   color: #140050;
//   font-weight: 600px;
//   .weekday {
//     color: #140050;
//     font-weight: 600;
//   }
//   .date {
//     font-weight: 500;
//     color: #140050;
//   }
}

.day-selecotr .day-selecotr-item .weekday {
  font-size: 10px;
  line-height: 14px;
  color: #8B949E;
  margin-bottom: 2rpx;
}

.day-selecotr .day-selecotr-item .date {
  color: #000000;
  font-family: Montserrat;
  font-size: 22px;
  line-height: 27px;
}
</style>

<template>
  <scroll-view scroll-x="true" class="day-selecotr">
    <div
      class="{{'day-selecotr-item ' + (selectDaySelectorsIndex==index?'selected': '') + (item.selectorIscrossMonth? ' cross-month': '')}}"
      v-for="(item, index) in daySelectors"
      :key="index"
      v-on:click.stop="selectDaySelectors(index)"
      data-index="{{index}}"
    >
      <div class="weekday">{{item.weekday}}</div>
      <div class="date">{{item.date}}</div>
    </div>
  </scroll-view>
</template>

<script>
import wepy from '@wepy/core'

import {
  getNowDate,
  getDate,
  getWeekDay,
  getMonthText
} from '@/service/meetingTimes'
// import {
//     getNowDate,
//    getDate
//   } from '@/packagesEnv/pages/common.js'
const selectorsNumber = 7 // 总共展示多个选择项;
wepy.component({
  data: {
    daySelectors: [],
    selectDaySelectorsIndex: 0
  },
  props: {
    selectValue: {
      type: String,
      default: getNowDate()
    }
  },
  created() {
    this.daySelectors = getDaysSelctors()
  },
  ready() {
    let { selectValue } = this
    if (selectValue) {
      let selectDaySelectorsIndex = this.daySelectors.findIndex(
        selecotr => selecotr.value == selectValue
      )
      this.selectDaySelectorsIndex = selectDaySelectorsIndex
    }
  },
  watch: {
    selectValue: function(newSelectValue, oldSelectValue) {
      if (newSelectValue !== oldSelectValue) {
        let selectDaySelectorsIndex = this.daySelectors.findIndex(
          selecotr => selecotr.value == newSelectValue
        )
        this.selectDaySelectorsIndex = selectDaySelectorsIndex
      }
    }
  },
  methods: {
    selectDaySelectors(index) {
      this.selectDaySelectorsIndex = index
      this.emmitSelect(index)
    },
    emmitSelect(index) {
      let selector = this.daySelectors[index]
      this.$emit('component-date-selector-select', selector.value)
    }
  }
})

function getDaysSelctors() {
  let now = new Date()
  let nowDate = now.getDate()
  let selectors = [
    {
      weekday: '今天',
      date: nowDate,
      value: getNowDate()
    }
  ]
  let newTime = now.getTime()
  for (let i = 0; i < selectorsNumber - 1; i++) {
    newTime = newTime + 24 * 60 * 60 * 1000
    let date = new Date(newTime)
    let weekday = getWeekDay(date)
    let selectorIscrossMonth = false
    if (now.getMonth() !== date.getMonth() && date.getDate() == '1') {
      weekday = getMonthText(date)
      selectorIscrossMonth = true
    }

    selectors.push({
      weekday,
      date: date.getDate(),
      value: getDate(date),
      selectorIscrossMonth
    })
  }
  return selectors
}
</script>
