<template>
    <view class="xin-calendar-out">
    <view class="xin-calendar">
			<view class="calendar-control-custom flex">
				<view class="month-picker">
					<picker class="custom-picker" mode="date" fields="month" :value="currentYearMonth" @change="handleMonthChange">
						<text>{{currentYearMonthStr}}</text>
						<img :src="cssUrl+'date_open.png'" class="date-open-icon">
					</picker>
				</view>
				<view class="appointment-stats">
					<!-- 本月到诊{{appointments.visited_count}}人，预约{{appointments.visit_count}}人 -->
          本月利润 {{ totalProfit }}元
				</view>
			</view>

      <view class="calendar-header">
        <view
          class="calendar-week"
          v-for="(item, index) in weeks"
          :key="index"
        >{{ item }}</view>
      </view>
      <view class="calendar-body">
        <swiper
          class="swiper"
          :current="current"
          circular
          adjust-height="highest"
          :autoplay="false"
          :indicator-dots="false"
          :interval="3000"
          :duration="500"
          @change="swiperChange"
          @animationfinish1="swiperChange"
        >
          <swiper-item
            class="swiper-item"
            v-for="(calendar, calendarIndex) in calendarList"
            :key="calendarIndex"
          >
            <view
              class="calendar-line"
              v-for="(line, lineIndex) in calendar.dateList"
              :key="lineIndex"
            >
            <!--⬇️这个的click 不需要操作天 @click="clickEvent(item, index)" -->
              <view
                class="calendar-day"
                v-for="(item, index) in line"
                :key="index"

              >
              <!--暂且不需要对当天有特殊样式  active: activeDay === item.date -->
                <view
                  :class="['day-item', {
                    can: item.type === 'day',
                    pre: item.type === 'pre',
                    next: item.type === 'next',
                    today: today === item.date,
                  }]"
                >
                  <view :class="['label flex',(!appointments || !appointments[item.date])?'gray':'']">{{item.day}}<view v-if="today === item.date" class="totay-desc">今</view></view>
                  <!-- <view class="desc blue rest" v-if="appointments && appointments[item.date] && (appointments[item.date].visited==0 && appointments[item.date].total==0) && appointments[item.date].plan=='0'">休息</view> -->

                  <view :class="'desc green blue'+(appointments && appointments[item.date] )" v-if="appointments && appointments[item.date]">{{appointments[item.date]}}</view>

                  <view v-if="(!appointments || !appointments[item.date])" :class="'desc blue rest'">
                    无
                  </view>

                  <view class="desc blue" v-if="festival && item.lunarInfo.festival && item.type === 'day'">{{item.lunarInfo.festival}}</view>
                  <view class="desc" v-else-if="lunar">{{item.lunarInfo.IDayCn === '初一' ? item.lunarInfo.IMonthCn : item.lunarInfo.IDayCn}}</view>
                  <text class="dot" v-if="dots.indexOf(item.date) > -1"></text>
                </view>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>

    <view class="notification-bar flex" v-if="chooseItem && (chooseItem.visited>0 || chooseItem.total>0)">
      <img :src="cssUrl+'notification.svg'">
      <text>{{activeDay.replace('-','年').replace('-','月')+'日'}}就诊详情：{{chooseItem.visited>0?'到诊'+chooseItem.visited+'人':''}}{{chooseItem.total>0?' 预约'+chooseItem.total+'人':''}}</text>
    </view>
  </view>
</template>

<script>
import moment from 'moment'
import XinTagBtn from './xin-tag-btn.vue'
import lunar from './lunar'
export default {
  components: {
    XinTagBtn,
  },
  props: {
    value: {
      type: String,
      default: moment().format('YYYY-MM-DD'),
    },
    background: {
      type: String,
      default: '#ffffff'
    },
    showHeader: {
      type: Boolean,
      default: false
    },
    dots: {
      type: Array,
      default: () => [],
    },
    lunar: {
      type: Boolean,
      default: true,
    },
    festival: {
      type: Boolean,
      default: true,
    },
    totalVisits: {
      type: Number,
      default: 100
    },
    appointments:{
      type: Object,
      default: {}
    }
  },
  data() {
    return {
			cssUrl:this.cssUrl1,
      weeks: [ '日', '一', '二', '三', '四', '五', '六', ],
      dateList: [],
      today: moment().format('YYYY-MM-DD'),
      activeDay: moment().format('YYYY-MM-DD'),
      current: 1,
      calendarList: [
        {
          date: moment().add(-1, 'months').startOf('month').format('YYYY-MM'),
          dateList: [],
        },
        {
          date: moment().startOf('month').format('YYYY-MM'),
          dateList: [],
        },
        {
          date: moment().add(1, 'months').startOf('month').format('YYYY-MM'),
          dateList: [],
        },
      ],
			currentYearMonth:'',
			currentYearMonthStr:'',
      chooseItem:false,
    }
  },
  computed: {
    totalProfit(){
      const sum = Object.values(this.appointments).reduce((acc, val) => acc + parseFloat(Number(val)), 0);
      console.log(this.appointments,sum,'this.appointments==');
      return sum
    }
  },
  filters: {},
  watch: {
    value (n, o) {
      this.activeDay = n
    },
    activeDay (n, o) {
      this.$emit('input', n)
      this.$emit('change', n)
      this.init()
    },
  },
  mounted() {
    if (this.value) this.activeDay = this.value
    var dateList = this.activeDay.split('-')
		var currentYearMonth = dateList[0]+'-'+dateList[1]
    this.jumpMonth(currentYearMonth, false)
    this.init()
  },
  methods: {
    init () {
      this.calendarList.forEach((item, index) => {
        item.dateList = this.createMonthDays(item.date)
      })
			let dateList = this.activeDay.split('-')
			this.currentYearMonth = dateList[0]+'-'+dateList[1]
      this.currentYearMonthStr = dateList[0]+'年'+dateList[1]+'月'

      var timer = setInterval(function(){
        if(this.appointments.list && this.appointments.list[this.activeDay]) {
          this.chooseItem = this.appointments.list[this.activeDay]
          clearInterval(timer)
        }
      }.bind(this), 10)
      let searchData = this.getMonthStartEnd(this.currentYearMonth)
      this.$emit('changeDate',searchData)
      console.log(this.activeDay,'activeDay==init');
      // let data = this.calendarList.find(item => item.date == this.currentYearMonth)
      // console.log(this.calendarList,this.currentYearMonth,data,'tcalendarList===');
    },
    pre () {
      this.current = this.current - 1 < 0 ? 2 : this.current - 1
    },
    next () {
      this.current = this.current + 1 > 2 ? 0 : this.current + 1
    },
		setActiveDay(date) {
			this.activeDay = date;
		},
    changeHosipital() {
      this.current = 1
      this.init()
    },
    jumpMonth(chooseYearMonth, isRequestData = true) {
      var choosePreMonth = moment(chooseYearMonth).add(-1, 'months').startOf('month').format('YYYY-MM')
      var chooseNextMonth = moment(chooseYearMonth).add(1, 'months').startOf('month').format('YYYY-MM')
      this.calendarList = [
        {
          date: choosePreMonth,
          dateList: [],
        },
        {
          date: chooseYearMonth,
          dateList: [],
        },
        {
          date: chooseNextMonth,
          dateList: [],
        },
      ]
      this.current = 1
      if(isRequestData) this.init()
    },
    clickEvent (item, index) {
      this.chooseItem = this.appointments.list[item.date]
      // if(this.appointments.list && this.appointments.list[item.date] && this.appointments.list[item.date].plan=='0'){
      //   return;
      // }
      if (item.type !== 'day') return
      this.activeDay = item.date
    },
    
    getMonthStartEnd(date){
      let m = moment(date)
      let searchData= {
        start_date: moment(m).startOf('month').format('YYYY-MM-DD'),
        end_date: moment(m).startOf('month').add(m.daysInMonth() - 1, 'days').format('YYYY-MM-DD'),
      }
      return searchData
    },
		createMonthDays(date) {
			let list = [];
      let monthInfo = this.getMomentInfo(date + '-01')
			for (let i = 0; i < monthInfo.daysInMonth; i++) {
        let dd = moment(monthInfo.firstDayInMonth).add(i, 'days')
        let dayInfo = this.getMomentInfo(dd)
				let day = {
					type: 'day',
					...dayInfo,
				};
				list.push(day);
			}
			let pre = [];
			for (let i = 0; i < monthInfo.weekday; i++) {
        let dd = moment(monthInfo.firstDayInMonth).add(-(monthInfo.weekday - i), 'days')
        let dayInfo = this.getMomentInfo(dd)
				pre.push({
					type: 'pre',
					...dayInfo,
				});
			}
			let next = [];
			let length = 42 - monthInfo.weekday - monthInfo.daysInMonth;
			for (let i = 0; i < length; i++) {
        let dd = moment(monthInfo.lastDayInMonth).add(i + 1, 'days')
        let dayInfo = this.getMomentInfo(dd)
				next.push({
					type: 'next',
					...dayInfo,
				});
			}
			list = [...pre, ...list, ...next];
			let result = [];
			for (let i = 0; i < list.length; i += 7) {
				result.push(list.slice(i, i + 7));
			}
			return result;
		},
    swiperChange (e) {
      let current = e.detail.current
      let preIndex = current - 1 > -1 ? current - 1 : 2
      let nextIndex = current + 1 > 2 ? 0 : current + 1
      let preMoment = moment(this.calendarList[current].date + '-01').add(-1, 'months')
      if (preMoment.format('YYYY-MM') != moment().format('YYYY-MM')) {
        preMoment = preMoment.startOf('month')
      } else {
        preMoment = moment()
      }
      this.calendarList[preIndex].date = preMoment.format('YYYY-MM')
      let nextMoment = moment(this.calendarList[current].date + '-01').add(1, 'months')
      if (nextMoment.format('YYYY-MM') != moment().format('YYYY-MM')) {
        nextMoment = nextMoment.startOf('month')
      } else {
        nextMoment = moment()
      }
      this.calendarList[nextIndex].date = nextMoment.format('YYYY-MM')
      if (moment().format('YYYY-MM') === this.calendarList[current].date) {
        this.activeDay = moment().format('YYYY-MM-DD')
      } else {
        this.activeDay = this.calendarList[current].date + '-01'
      }
      this.$nextTick(() => {
        // this.$emit('monthChange', this.activeDay)
      })
    },
    getMomentInfo (date) {
      let m = moment(date)
      return {
        moment: m,
        firstDayInMonth: moment(m).startOf('month').format('YYYY-MM-DD'),
        lastDayInMonth: moment(m).startOf('month').add(m.daysInMonth() - 1, 'days').format('YYYY-MM-DD'),
        date: m.format('YYYY-MM-DD'),
        year: m.format('YYYY'),
        month: m.format('MM'),
        day: m.format('DD'),
        weekday: m.weekday(),
        daysInMonth: m.daysInMonth(),
        stamp: Number(m.format('x')),
        lunarInfo: lunar.solar2lunar(Number(m.format('YYYY')), Number(m.format('MM')), Number(m.format('DD')))
      }
    },
    handleMonthChange(e) {
      const date = e.detail.value
      this.currentYearMonth = moment(date).format('YYYY-MM')
      this.currentYearMonthStr = moment(date).format('YYYY年MM月')
			this.setActiveDay(this.currentYearMonth+'-01')
      this.jumpMonth(this.currentYearMonth)
      console.log(this.activeDay,this.currentYearMonth,'currentYearMonth==')
      this.$nextTick(() => {
        // this.$emit('monthChange', this.activeDay)
      })
    }
  }
}
</script>

<style>
.custom-picker{
  /* font-size: 36rpx;
  color: red; */
}
.xin-calendar  .calendar-control {
  display: flex;
  margin-bottom: 18rpx;
}
.xin-calendar .calendar-control .calendar-control-left {
  flex: 1;
}
.xin-calendar .calendar-control .calendar-control-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.xin-calendar .calendar-control .calendar-control-right {
  flex: 1;
  text-align: right;
}
.xin-calendar .calendar-header {
  display: flex;
}
.xin-calendar .calendar-header .calendar-week {
  flex: 1;
  text-align: center;
  line-height: 60rpx;
}
.xin-calendar .calendar-body .swiper {
  height: 750rpx;
  min-height: 750rpx;
}
.xin-calendar .calendar-body .swiper .swiper-item {
  height: 750rpx;
  min-height: 750rpx;
}
.xin-calendar .calendar-body .swiper .swiper-item .calendar-line {
  display: flex;
}
.xin-calendar .calendar-body .swiper .swiper-item .calendar-line .calendar-day {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  max-width: 96rpx;
  max-height: 128rpx;
  flex-shrink: 0;
  border-radius: 10rpx;
}
.xin-calendar .calendar-body .swiper .swiper-item .calendar-line .calendar-day .day-item {
  width: 96rpx;
  height: 96rpx;
  display: flex;
  flex-direction: column;
  transition: all 0.15s;
  position: relative;
  border-radius: 10rpx;
}
.xin-calendar .calendar-body .swiper .swiper-item .calendar-line .calendar-day .day-item .label {
  font-size: 32rpx;
  line-height: 32rpx;
}
.xin-calendar .calendar-body .swiper .swiper-item .calendar-line .calendar-day .day-item .desc {
  line-height: 32rpx;
  font-size: 24rpx;
}
.xin-calendar .calendar-body .swiper .swiper-item .calendar-line .calendar-day .day-item .desc.blue {
  color: #39D067;
}
.xin-calendar .calendar-body .swiper .swiper-item .calendar-line .calendar-day .day-item.can.today {
  background: #ffffff;
  color: #39D067;
  /* font-weight: bold; */
}
.xin-calendar .calendar-body .swiper .swiper-item .calendar-line .calendar-day .day-item.can.today .dot {
  display: none;
}
.xin-calendar .calendar-body .swiper .swiper-item .calendar-line .calendar-day .day-item.can.active {
  background: #39D067;
  color: #ffffff;
  font-weight: bold;
}
.xin-calendar .calendar-body .swiper .swiper-item .calendar-line .calendar-day .day-item.can.active .dot {
  display: none;
}
.xin-calendar .calendar-body .swiper .swiper-item .calendar-line .calendar-day .day-item.can.active .desc.blue {
  color: #ffffff;
}
.xin-calendar .calendar-body .swiper .swiper-item .calendar-line .calendar-day .day-item.can .dot {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8rpx;
  height: 8rpx;
  border-radius: 100%;
  background: #39D067;
}
.xin-calendar .calendar-body .swiper .swiper-item .calendar-line .calendar-day .day-item.pre,
.xin-calendar .calendar-body .swiper .swiper-item .calendar-line .calendar-day .day-item.next {
}

</style>

<style lang="less">
  // 源码修改可以在这里
  // 尺寸
  @font-size: 26rpx;
  @space-width: 18rpx;
  @radius-width: 18rpx;
  // 颜色
  @color-gray: #222222;
  @color-blue: #39D067;
  @color-green: #15bf81;
  @color-yellow: #f7ab42;
  @color-red: #ff6666;
  @color-background: white;
  // 方法
  .shadow (@color: @color-gray, @x: 5rpx, @y: 5rpx, @r: 15rpx, @o: 3) {
  }

  .xin-calendar {
    background-color: #fff;
    border-radius: 8px;
    padding: 36rpx 0rpx 36rpx 24rpx;
    margin-top: 20rpx;
    .calendar-control {
      display: flex;
      margin-bottom: @space-width;
      .calendar-control-left {
        flex: 1;
      }
      .calendar-control-center {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .calendar-control-right {
        flex: 1;
        text-align: right;
      }
    }
    .calendar-control-custom{
      align-items: center;
      justify-content: space-between;
      height: 50rpx;
      ::v-deep .date-open-icon{
        width: 32rpx;
        height: 20rpx;
        margin-left: 12rpx;
        position: relative;
        top: -2rpx;
      }
      .month-picker{
        font-size: 36rpx;
        font-weight: 600;
        line-height: 50rpx;
        color: #000000;
        letter-spacing: 2rpx;
      }
      @supports (-webkit-touch-callout: none) {
        .month-picker{
          font-weight: 500;
        }
      }
      .appointment-stats{
        font-size: 26rpx;
        line-height: 26rpx;
        letter-spacing: normal;
        color: #9E9E9E;
        padding-right: 24rpx;
        box-sizing: border-box;
      }
    }
    .calendar-header {
      margin-top: 36rpx;
      display: flex;
      .calendar-week {
        flex: 1;
        text-align: center;
        width: 96rpx;
        height: 48rpx;
        line-height: 48rpx;
        box-sizing: border-box;
        font-size: 24rpx;
        color: #333333;
      }
    }
    .calendar-body {
      .swiper {
        height: 750rpx;
        min-height: 750rpx;
        .swiper-item {
          height: 750rpx;
          min-height: 750rpx;
          display: flex;
          flex-direction: column;
          gap: 36rpx;
          .calendar-line {
            display: flex;
            .calendar-day {
              flex: 1;
              display: flex;
              justify-content: center;
              align-items: baseline;
              .day-item {
                width: 96rpx;
                height: auto;
                max-width: 96rpx;
                max-height: 128rpx;
                flex-shrink: 0;
                box-sizing: border-box;
                padding: 6rpx 10rpx;

                background: @color-background;
                display: flex;
                flex-direction: column;
                align-items: center;
                transition: all 0.15s;
                position: relative;
                .gray{
                  color: #C1C1C1 !important;
                }
                .label {
                  font-size: 34rpx;
                  line-height: 34rpx;
                  color: #333333;
                  height: 48rpx;
                  display: flex;
                  align-items: center;
                  font-weight: 500;
                  &.rest{
                    color:#C1C1C1 !important;
                  }
                  &.expire{
                    color:#999999;
                  }
                  .totay-desc{
                    width: 30rpx;
                    height: 30rpx;
                    line-height: 30rpx;
                    text-align: center;
                    border-radius: 2rpx;
                    background: #FF7D17;
                    font-size: 20rpx;
                    font-weight: 600;
                    color: #FFFFFF;
                    margin-left: 4rpx;
                  }
                  @supports (-webkit-touch-callout: none) {
                    .totay-desc{
                      font-weight: 500;
                    }
                  }
                }

                @supports (-webkit-touch-callout: none) {
                  .label{
                    font-weight: 500;
                  }
                }
                .desc {
                  line-height: 32rpx;
                  font-size: 24rpx;
                  max-width: 100%;
                  word-break: break-all;
                  text-align: center;

                  &.green{
                    color: @color-blue;
                  }
                  &.blue {
                    color: @color-blue;
                    &.rest{
                      color: #C1C1C1;
                    }
                    &.expire{
                      color: #999999;
                    }
                  }
                }
                &.can {
                  &.today {
                    background: #ffffff;
                    color: @color-blue;
                    // 字重正常
                    // font-weight: bold;
                    .shadow(@color: @color-gray, @o: 8);
                    .dot {
                      display: none;
                    }

                    &.active {
                      .label {
                        color: white;
                        font-weight: 600;
                        &.rest{
                          color:white !important;
                        }
                      }

                      @supports (-webkit-touch-callout: none) {
                        .label {
                          font-weight: 500;
                        }
                      }
                    }
                  }
                  &.active {
                    background: @color-blue;
                    color: #ffffff;
                    font-weight: bold;
                    .label {
                      color: white;
                      font-weight: 700;
                      &.rest{
                        color:white !important;
                      }
                      &.exprie{
                        color:white !important;
                      }
                    }
                    @supports (-webkit-touch-callout: none) {
                      .label{
                        font-weight: 600;
                      }
                    }
                    .shadow(@color: @color-blue, @o: 50);
                    .dot {
                      display: none;
                    }
                    .desc {
                      font-weight: normal;
                      &.blue {
                        color: #ffffff;
                        font-size: 24rpx;
                        line-height: 32rpx;
                        color: #FFFFFF;
                      }
                      &.expire{
                        color:white;
                      }
                    }
                  }
                  .dot {
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 8rpx;
                    height: 8rpx;
                    border-radius: 100%;
                    background: @color-blue;
                  }
                }
                &.pre, &.next {
                  opacity: 0;
                }
              }
            }
          }
        }
      }
    }
  }

  .xin-calendar-out{
    .notification-bar{
      width: 714rpx;
      height: 68rpx;
      align-items: center;
      padding: 12rpx 24rpx;
      box-sizing: border-box;
      border-radius: 6rpx;
      background: #75DF95;
      font-size: 26rpx;
      line-height: 68rpx;
      color: #FFFFFF;
      margin-top: 20rpx;
      img{
        width: 34rpx;
        height: 34rpx;
        margin-right: 12rpx;
        position: relative;
        top: -2rpx;
      }
    }
  }
</style>