<template>
  <view class="calendar-area" :style="{background:calendarBg,borderRadius:calendarBorderRadius}">
    <!--    自定义日历头部   -->
    <view class="calendar-head flex space-between align-items">
      <!--  跳转上月的箭头  -->
      <view v-if="showArrow === true"
            class="flex align-items calendar-arrow"
            :style="{height: arrowHeight + 'px'}"
            @click="jumpToLastMonth">
        <view :style="{width: arrowSize +'px',height: arrowSize +'px',borderWidth: '1px 1px 0 0',borderColor:arrowColor}" :class="'arrow-style arrow-left-transform'"></view>
      </view>
      <!--  跳转上月的文字  -->
      <view v-else @click="jumpToLastMonth" class="pre-month" :style="{color: themeColor}">上月</view>
      <!--  日历头部显示当前展示月份  -->
      <view :style="{color: themeColor}">{{new Date(benchmark).getFullYear()}}年{{ new Date(benchmark).getMonth() + 1}}月</view>
      <!--  跳转下月的箭头  -->
      <view v-if="showArrow === true"
            class="flex align-items calendar-arrow"
            :style="{height: arrowHeight + 'px'}"
            @click="jumpToNextMonth">
        <view :style="{width: arrowSize +'px',height: arrowSize +'px',borderWidth: '1px 1px 0 0',borderColor:arrowColor}" :class="'arrow-style arrow-right-transform'"></view>
      </view>
      <!--  跳转下月的文字  -->
      <view v-else @click="jumpToNextMonth" class="next-month" :style="{color: themeColor}">下月</view>
    </view>
    <!--    自定义日历 周一...周日 抬头   -->
    <view class="flex flex-wrap">
      <view v-for="(i,index) in weekText" :key="index"  class="flex-class" :style="{width: 100/7 +'%',height:gridHeight+'px'}">
        <view :style="{color: themeColor}">{{ i }}</view>
      </view>
    </view>
    <!--    自定义日历日期格子 模式单选   -->
    <view class="flex flex-wrap" v-if="mode === 'date'" style="padding-bottom: 10px">
      <swiper :current="swiperCurrent" @change="swiperChange" class="swiper" :style="{width:'100%',height: gridHeight*6+'px'}" :circular="true" :indicator-dots="false" :autoplay="false" :duration="500">
        <swiper-item style="width: 100%">
          <view style="width: 100%" class="flex flex-wrap">
            <view v-for="(item,index) in month0" :key="index" :style="{ width: 100/7 +'%', height:gridHeight +'px' }" class="flex-class1">
              <!--    日期格子 模式单选 符合当月的格子  -->
              <view v-if="judgeShowType(0,item.date)" class="flex-class1 flex-wrap" style="width: 100%">
                <!--   judge(day) === true 选中单个日期 -->
                <view class="flex-class1 flex-wrap relative"
                      :style="{ width:'100%', height:gridHeight+'px' }"
                      v-if="judge(item.date)"
                      @click="clickDay(item.date)"
                >
                  <view class="flex-class">
                    <view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}">{{ new Date(item.date).getDate()}}</view>
                  </view>
                  <view class="bottom-dots absolute" v-if="item.type==='dot'">
                    <view style="width: 100%;padding-top: 2px" class="flex-class1">
                      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color}"></view>
                    </view>
                  </view>
                  <view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: item.color}">{{ item.info }}</view>
                </view>
                <!--   judge(day) === false 没选中的日期 -->
                <view :style="{ width:'100%',height:gridHeight + 'px'}"
                      class="flex-class1 flex-wrap day-normal-dark relative"
                      v-else
                      @click="clickDay(item.date)"
                >
                  <view class="flex-class">
                    <view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px', fontSize: fontSize +'px'}">{{ new Date(item.date).getDate()}}</view>
                  </view>
                  <view class="bottom-dots absolute" v-if="item.type==='dot'">
                    <view style="width: 100%;padding-top: 2px" class="flex-class1">
                      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color}"></view>
                    </view>
                  </view>
                  <view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: item.color}">{{ item.info }}</view>
                </view>
                <!--          -->
              </view>
              <!--    日期格子 模式单选 不符合当月的格子  -->
              <view v-else :style="{fontSize: fontSize +'px'}" class="flex-class" style="width: 100%">
                <view :style="{width:'100%',height:gridHeight+'px'}"
                      class="flex-class1 day-normal fontColor-normal relative"
                      @click="clickDayNotThisMonth(item.date)"
                >
                  <view class="flex-class">
                    <view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', fontSize: fontSize +'px'}">{{ new Date(item.date).getDate()}}</view>
                  </view>
                  <view class="bottom-dots absolute" v-if="item.type==='dot'">
                    <view style="width: 100%;padding-top: 2px" class="flex-class1">
                      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: '#bbb'}"></view>
                    </view>
                  </view>
                  <view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: '#bbb'}">{{ item.info }}</view>
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
        <swiper-item>
          <view style="width: 100%" class="flex flex-wrap">
            <view v-for="(item,index) in month1" :key="index" :style="{ width: 100/7 +'%', height:gridHeight +'px' }" class="flex-class1">
              <!--    日期格子 模式单选 符合当月的格子  -->
              <view v-if="judgeShowType(1,item.date)" class="flex-class1 flex-wrap" style="width: 100%">
                <!--   judge(day) === true 选中单个日期 -->
                <view class="flex-class1 flex-wrap relative"
                      :style="{ width:'100%', height:gridHeight+'px' }"
                      v-if="judge(item.date)"
                      @click="clickDay(item.date)"
                >
                  <view class="flex-class">
                    <view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}">
                      {{ new Date(item.date).getDate()}}
                    </view>
                  </view>
                  <view class="bottom-dots absolute" v-if="item.type==='dot'">
                    <view style="width: 100%;padding-top: 2px" class="flex-class1">
                      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color}"></view>
                    </view>
                  </view>
                  <view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: item.color}">{{ item.info }}</view>
                </view>
                <!--   judge(day) === false 没选中的日期 -->
                <view :style="{ width:'100%',height:gridHeight + 'px'}"
                      class="flex-class1 flex-wrap day-normal-dark relative"
                      v-else
                      @click="clickDay(item.date)"
                >
                  <view class="flex-class">
                    <view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px', fontSize: fontSize +'px'}">
                      {{ new Date(item.date).getDate()}}
                    </view>
                  </view>
                  <view class="bottom-dots absolute" v-if="item.type==='dot'">
                    <view style="width: 100%;padding-top: 2px" class="flex-class1">
                      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color}"></view>
                    </view>
                  </view>
                  <view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: item.color}">{{ item.info }}</view>
                </view>
                <!--          -->
              </view>
              <!--    日期格子 模式单选 不符合当月的格子  -->
              <view v-else :style="{fontSize: fontSize +'px'}" class="flex-class" style="width: 100%">
                <view :style="{width:'100%',height:gridHeight+'px'}"
                      class="flex-class1 day-normal fontColor-normal relative"
                      @click="clickDayNotThisMonth(item.date)"
                >
                  <view class="flex-class">
                    <view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', fontSize: fontSize +'px'}">
                      {{ new Date(item.date).getDate()}}
                    </view>
                  </view>
                  <view class="bottom-dots absolute" v-if="item.type==='dot'">
                    <view style="width: 100%;padding-top: 2px" class="flex-class1">
                      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: '#bbb'}"></view>
                    </view>
                  </view>
                  <view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: '#bbb'}">{{ item.info }}</view>
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
        <swiper-item>
          <view style="width: 100%" class="flex flex-wrap">
            <view v-for="(item,index) in month2" :key="index" :style="{ width: 100/7 +'%', height:gridHeight +'px' }" class="flex-class1">
              <!--    日期格子 模式单选 符合当月的格子  -->
              <view v-if="judgeShowType(2,item.date)" class="flex-class1 flex-wrap" style="width: 100%">
                <!--   judge(day) === true 选中单个日期 -->
                <view class="flex-class1 flex-wrap relative"
                      :style="{ width:'100%', height:gridHeight+'px' }"
                      v-if="judge(item.date)"
                      @click="clickDay(item.date)"
                >
                  <view class="flex-class">
                    <view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}">
                      {{ new Date(item.date).getDate()}}
                    </view>
                  </view>
                  <view class="bottom-dots absolute" v-if="item.type==='dot'">
                    <view style="width: 100%;padding-top: 2px" class="flex-class1">
                      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color}"></view>
                    </view>
                  </view>
                  <view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: item.color}">{{ item.info }}</view>
                </view>
                <!--   judge(day) === false 没选中的日期 -->
                <view :style="{ width:'100%',height:gridHeight + 'px'}"
                      class="flex-class1 flex-wrap day-normal-dark relative"
                      v-else
                      @click="clickDay(item.date)"
                >
                  <view class="flex-class">
                    <view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px', fontSize: fontSize +'px'}">
                      {{ new Date(item.date).getDate()}}
                    </view>
                  </view>
                  <view class="bottom-dots absolute" v-if="item.type==='dot'">
                    <view style="width: 100%;padding-top: 2px" class="flex-class1">
                      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color}"></view>
                    </view>
                  </view>
                  <view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: item.color}">{{ item.info }}</view>
                </view>
                <!--          -->
              </view>
              <!--    日期格子 模式单选 不符合当月的格子  -->
              <view v-else :style="{fontSize: fontSize +'px'}" class="flex-class" style="width: 100%">
                <view :style="{width:'100%',height:gridHeight+'px'}"
                      class="flex-class1 day-normal fontColor-normal relative"
                      @click="clickDayNotThisMonth(item.date)"
                >
                  <view class="flex-class">
                    <view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', fontSize: fontSize +'px'}">{{ new Date(item.date).getDate()}}</view>
                  </view>
                  <view class="bottom-dots absolute" v-if="item.type==='dot'">
                    <view style="width: 100%;padding-top: 2px" class="flex-class1">
                      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: '#bbb'}"></view>
                    </view>
                  </view>
                  <view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: '#bbb'}">{{ item.info }}</view>
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <!--    自定义日历日期格子 模式时间范围   -->
    <view class="flex flex-wrap" v-if="mode === 'dateRange'" style="padding-bottom: 10px">
      <swiper :current="swiperCurrent" @change="swiperChange" class="swiper" :style="{width:'100%',height: gridHeight*6+'px'}" :circular="true" :indicator-dots="false" :autoplay="false" :duration="500">
        <swiper-item style="width: 100%">
          <view style="width: 100%" class="flex flex-wrap">
            <view v-for="(item,index) in month0" :key="index" :style="{width: 100/7 +'%',height:gridHeight +'px'}" class="flex-class1">
              <!--    本月的展示日期 -->
              <view :class="'flex-class1 flex-wrap '" v-if="judgeShowType(0,item.date) " style="width: 100%">
                <!--   judge(day) === 1 选中日期范围开头 已选结尾-->
                <view class="flex-class flex-wrap relative"
                      :style="{width: '100%',height: gridHeight+'px',
                         background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
                      v-if="judge(item.date) === 1"
                      @click="clickDay(item.date)"
                >
                  <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
                  <view class="start-text absolute">
                    <view class="bottom-dots-else" v-if="item.type==='dot'">
                      <view style="width: 100%;padding-top: 2px" class="flex-class1">
                        <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
                      </view>
                    </view>
                    <view class="bottom-dots-else" v-if="item.type==='text'" :style="{color:  item.color,marginRight:'10rpx'}">{{ item.info }}</view>
                    开始
                  </view>
                </view>
                <!--   judge(day) === 3 选中日期范围中间区域-->
                <view class="flex-class"
                      :style="{width: '100%',height: gridHeight+'px',borderRadius:'0 0 0 0',
                         background:'#6161f921', color:dayBg,fontSize: fontSize +'px',position:'relative'}"
                      v-else-if="judge(item.date) === 3"
                      @click="clickDay(item.date)">
                  <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
                  <view class="bottom-dots absolute" v-if="item.type==='dot'">
                    <view style="width: 100%;padding-top: 0px" class="flex-class1">
                      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginTop:'-10rpx'}"></view>
                    </view>
                  </view>
                  <view class="bottom-dots absolute" v-if="item.type==='text'" :style="{color:  item.color,bottom:'0!important'}">{{ item.info }}</view>
                </view>
                <!--   judge(day) === 2 选中日期范围结尾-->
                <view class="flex-class flex-wrap relative"
                      :style="{width: '100%',height: gridHeight+'px',
                         background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
                      v-else-if="judge(item.date) === 2"
                      @click="clickDay(item.date)">
                  <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
                  <view class="start-text absolute">
                    <view class="bottom-dots-else" v-if="item.type==='dot'">
                      <view style="width: 100%;padding-top: 2px" class="flex-class1">
                        <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
                      </view>
                    </view>
                    <view class="bottom-dots-else" v-if="item.type==='text'" :style="{color:  item.color,marginRight:'10rpx'}">{{ item.info }}</view>
                    结束
                  </view>
                </view>
                <!--   judge(day) === 5 选中日期范围开头 未选结尾-->
                <view class="flex-class flex-wrap relative"
                      :style="{width: '100%',height:gridHeight+'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
                      v-else-if="judge(item.date) === 5"
                      @click="clickDay(item.date)">
                  <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
                  <view class="start-text absolute">
                    <view class="bottom-dots-else" v-if="item.type==='dot'">
                      <view style="width: 100%;padding-top: 2px" class="flex-class1">
                        <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
                      </view>
                    </view>
                    <view class="bottom-dots-else" v-if="item.type==='text'" :style="{color:  item.color,marginRight:'10rpx'}">{{ item.info }}</view>
                    开始
                  </view>
                </view>
                <view class="flex-class flex-wrap relative"
                      :style="{width: '100%',height:gridHeight+'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
                      v-else-if="judge(item.date) === 6"
                      @click="clickDay(item.date)">
                  <view class="grid-text" style="display: flex;align-items: center;justify-content: center">
                    {{ new Date(item.date).getDate()}}

                    <view class="bottom-dots-else" v-if="item.type==='text'" :style="{color:  item.color,marginLeft:'10rpx'}">{{ item.info }}</view>
                  </view>
                  <view class="start-text absolute">
                    <view class="bottom-dots-else" v-if="item.type==='dot'">
                      <view style="width: 100%;padding-top: 2px" class="flex-class1">
                        <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
                      </view>
                    </view>
                    开始/结束
                  </view>
                </view>
                <view :style="{ width:'100%',height:gridHeight+'px',fontSize: fontSize +'px',position: 'relative' }"
                      class="flex-class day-normal-dark"
                      v-else
                      @click="clickDay(item.date)"
                >
                  <view class="flex-class">
                    <view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px', fontSize: fontSize +'px'}">
                      {{ new Date(item.date).getDate()}}
                    </view>
                  </view>
                  <view class="bottom-dots absolute" v-if="item.type==='dot'">
                    <view style="width: 100%;padding-top: 0px" class="flex-class1">
                      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginTop: '-10rpx'}"></view>
                    </view>
                  </view>
                  <view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: item.color}">{{ item.info }}</view>
                </view>
              </view>
              <!--    它月的展示日期 -->
              <view v-else :style="{fontSize: fontSize +'px',position:'relative'}" :class="judge(item.date) === 3?'flex-class':'flex-class '" style="width: 100%">
                <view :style="{width:'100%',height:gridHeight+'px',borderRadius:dayWidth/2 +'px',fontSize: fontSize +'px'}"
                      :class="judge(item.date) === 3? 'flex-class day-normal fontColor-normal':'flex-class day-normal fontColor-normal'"
                      @click="clickDayNotThisMonth(item.date)"
                >
                  {{ new Date(item.date).getDate()}}
                </view>
                <view class="bottom-dots absolute " v-if="item.type==='dot'">
                  <view style="width: 100%;padding-top: 0px" class="flex-class1">
                    <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: 'rgb(187,187,187)',marginTop: '-10rpx'}"></view>
                  </view>
                </view>
                <view class="bottom-dots absolute" v-if="item.type==='text'" :style="{color: 'rgb(187,187,187)',bottom:'0!important'}">{{ item.info }}</view>
              </view>
            </view>
          </view>
        </swiper-item>
        <swiper-item style="width: 100%">
          <view style="width: 100%" class="flex flex-wrap">
            <view v-for="(item,index) in month1" :key="index" :style="{width: 100/7 +'%',height:gridHeight +'px'}" class="flex-class1">
              <!--    本月的展示日期 -->
              <view :class="'flex-class1 flex-wrap '" v-if="judgeShowType(1,item.date)" style="width: 100%">
                <!--   judge(day) === 1 选中日期范围开头 已选结尾-->
                <view class="flex-class flex-wrap relative"
                      :style="{width: '100%',height: gridHeight+'px',
                         background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
                      v-if="judge(item.date) === 1"
                      @click="clickDay(item.date)"
                >
                  <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
                  <view class="start-text absolute">
                    <view class="bottom-dots-else" v-if="item.type==='dot'">
                      <view style="width: 100%;padding-top: 2px" class="flex-class1">
                        <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
                      </view>
                    </view>
                    <view class="bottom-dots-else" v-if="item.type==='text'" :style="{color:  item.color,marginRight:'10rpx'}">{{ item.info }}</view>
                    开始
                  </view>
                </view>
                <!--   judge(day) === 3 选中日期范围中间区域-->
                <view class="flex-class"
                      :style="{width: '100%',height: gridHeight+'px',borderRadius:'0 0 0 0',
                         background:'#6161f921', color:dayBg,fontSize: fontSize +'px',position:'relative'}"
                      v-else-if="judge(item.date) === 3"
                      @click="clickDay(item.date)">
                  <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
                  <view class="bottom-dots absolute" v-if="item.type==='dot'">
                    <view style="width: 100%;padding-top: 0px" class="flex-class1">
                      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginTop:'-10rpx'}"></view>
                    </view>
                  </view>
                  <view class="bottom-dots absolute" v-if="item.type==='text'" :style="{color:  item.color,bottom:'0!important'}">{{ item.info }}</view>
                </view>
                <!--   judge(day) === 2 选中日期范围结尾-->
                <view class="flex-class flex-wrap relative"
                      :style="{width: '100%',height: gridHeight+'px',
                         background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
                      v-else-if="judge(item.date) === 2"
                      @click="clickDay(item.date)">
                  <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
                  <view class="start-text absolute">
                    <view class="bottom-dots-else" v-if="item.type==='dot'">
                      <view style="width: 100%;padding-top: 2px" class="flex-class1">
                        <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
                      </view>
                    </view>
                    <view class="bottom-dots-else" v-if="item.type==='text'" :style="{color:  item.color,marginRight:'10rpx'}">{{ item.info }}</view>
                    结束
                  </view>
                </view>
                <!--   judge(day) === 5 选中日期范围开头 未选结尾-->
                <view class="flex-class flex-wrap relative"
                      :style="{width: '100%',height:gridHeight+'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
                      v-else-if="judge(item.date) === 5"
                      @click="clickDay(item.date)">
                  <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
                  <view class="start-text absolute">
                    <view class="bottom-dots-else" v-if="item.type==='dot'">
                      <view style="width: 100%;padding-top: 2px" class="flex-class1">
                        <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
                      </view>
                    </view>
                    <view class="bottom-dots-else" v-if="item.type==='text'" :style="{color:  item.color,marginRight:'10rpx'}">{{ item.info }}</view>
                    开始
                  </view>
                </view>
                <view class="flex-class flex-wrap relative"
                      :style="{width: '100%',height:gridHeight+'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
                      v-else-if="judge(item.date) === 6"
                      @click="clickDay(item.date)">
                  <view class="grid-text" style="display: flex;align-items: center;justify-content: center">{{ new Date(item.date).getDate()}}
                    <view class="bottom-dots-else" v-if="item.type==='text'" :style="{color:  item.color,marginLeft:'10rpx'}">{{ item.info }}</view>
                  </view>
                  <view class="start-text absolute">
                    <view class="bottom-dots-else" v-if="item.type==='dot'">
                      <view style="width: 100%;padding-top: 2px" class="flex-class1">
                        <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
                      </view>
                    </view>
                    开始/结束
                  </view>
                </view>
                <view :style="{ width:'100%',height:gridHeight+'px',fontSize: fontSize +'px',position:'relative' }"
                      class="flex-class day-normal-dark"
                      v-else
                      @click="clickDay(item.date)"
                >
                  <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
                  <view class="bottom-dots absolute" v-if="item.type==='dot'">
                    <view style="width: 100%;padding-top: 0px" class="flex-class1">
                      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginTop:'-10rpx'}"></view>
                    </view>
                  </view>
                  <view class="bottom-dots absolute" v-if="item.type==='text'" :style="{color:  item.color,bottom:'0!important'}">{{ item.info }}</view>
                </view>
              </view>
              <!--    它月的展示日期 -->
              <view v-else :style="{fontSize: fontSize +'px',position:'relative'}" :class="judge(item.date) === 3?'flex-class':'flex-class '" style="width: 100%">
                <view :style="{width:'100%',height:gridHeight+'px',borderRadius:dayWidth/2 +'px',fontSize: fontSize +'px'}"
                      :class="judge(item.date) === 3? 'flex-class day-normal fontColor-normal':'flex-class day-normal fontColor-normal'"
                      @click="clickDayNotThisMonth(item.date)"
                >
                  {{ new Date(item.date).getDate()}}
                </view>
                <view class="bottom-dots absolute" v-if="item.type==='dot'">
                  <view style="width: 100%;padding-top: 0px" class="flex-class1">
                    <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: 'rgb(187,187,187)',marginTop:'-10rpx'}"></view>
                  </view>
                </view>
                <view class="bottom-dots absolute" v-if="item.type==='text'" :style="{color:  'rgb(187,187,187)',bottom:'0!important'}">{{ item.info }}</view>
              </view>
              <!--        <view v-else :style="{fontSize: fontSize +'px'}" :class="'flex-class '" style="width: 100%">
                        <view :style="{width:'100%',height:gridHeight+'px',borderRadius:dayWidth/2 +'px',fontSize: fontSize +'px'}"
                              :class="judge(item.date) === 3? 'flex-class day-normal fontColor bg':'flex-class day-normal fontColor-normal'"
                              @click="clickDayNotThisMonth(item.date)"
                        >
                                      {{ new Date(day).getDate()}}
                        </view>
                      </view>-->
            </view>
          </view>
        </swiper-item>
        <swiper-item style="width: 100%">
          <view style="width: 100%" class="flex flex-wrap">
            <view v-for="(item,index) in month2" :key="index" :style="{width: 100/7 +'%',height:gridHeight +'px'}" class="flex-class1">
              <!--    本月的展示日期 -->
              <view :class="'flex-class1 flex-wrap '" v-if="judgeShowType(2,item.date)" style="width: 100%">
                <!--   judge(day) === 1 选中日期范围开头 已选结尾-->
                <view class="flex-class flex-wrap relative"
                      :style="{width: '100%',height: gridHeight+'px',
                         background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
                      v-if="judge(item.date) === 1"
                      @click="clickDay(item.date)"
                >
                  <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
                  <view class="start-text absolute">
                    <view class="bottom-dots-else" v-if="item.type==='dot'">
                      <view style="width: 100%;padding-top: 2px" class="flex-class1">
                        <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
                      </view>
                    </view>
                    <view class="bottom-dots-else" v-if="item.type==='text'" :style="{color:  item.color,marginRight:'10rpx'}">{{ item.info }}</view>
                    开始
                  </view>
                </view>
                <!--   judge(day) === 3 选中日期范围中间区域-->
                <view class="flex-class"
                      :style="{width: '100%',height: gridHeight+'px',borderRadius:'0 0 0 0',
                         background:'#6161f921', color:dayBg,fontSize: fontSize +'px',position:'relative'}"
                      v-else-if="judge(item.date) === 3"
                      @click="clickDay(item.date)">
                  <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
                  <view class="bottom-dots absolute" v-if="item.type==='dot'">
                    <view style="width: 100%;padding-top: 0px" class="flex-class1">
                      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginTop:'-10rpx'}"></view>
                    </view>
                  </view>
                  <view class="bottom-dots absolute" v-if="item.type==='text'" :style="{color:  item.color,bottom:'0!important'}">{{ item.info }}</view>
                </view>
                <!--   judge(day) === 2 选中日期范围结尾-->
                <view class="flex-class flex-wrap relative"
                      :style="{width: '100%',height: gridHeight+'px',
                         background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
                      v-else-if="judge(item.date) === 2"
                      @click="clickDay(item.date)">
                  <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
                  <view class="start-text absolute">
                    <view class="bottom-dots-else" v-if="item.type==='dot'">
                      <view style="width: 100%;padding-top: 2px" class="flex-class1">
                        <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
                      </view>
                    </view>
                    <view class="bottom-dots-else" v-if="item.type==='text'" :style="{color:  item.color,marginRight:'10rpx'}">{{ item.info }}</view>
                    结束
                  </view>
                </view>
                <!--   judge(day) === 5 选中日期范围开头 未选结尾-->
                <view class="flex-class flex-wrap relative"
                      :style="{width: '100%',height:gridHeight+'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
                      v-else-if="judge(item.date) === 5"
                      @click="clickDay(item.date)">
                  <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
                  <view class="start-text absolute">
                    <view class="bottom-dots-else" v-if="item.type==='dot'">
                      <view style="width: 100%;padding-top: 2px" class="flex-class1">
                        <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
                      </view>
                    </view>
                    <view class="bottom-dots-else" v-if="item.type==='text'" :style="{color:  item.color,marginRight:'10rpx'}">{{ item.info }}</view>
                    开始
                  </view>
                </view>
                <view class="flex-class flex-wrap relative"
                      :style="{width: '100%',height:gridHeight+'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
                      v-else-if="judge(item.date) === 6"
                      @click="clickDay(item.date)">
                  <view class="grid-text" style="display: flex;align-items: center;justify-content: center">
                    {{ new Date(item.date).getDate()}}
                    <view class="bottom-dots-else" v-if="item.type==='text'" :style="{color:  item.color,marginLeft:'10rpx'}">{{ item.info }}</view></view>
                  <view class="start-text absolute">
                    <view class="bottom-dots-else" v-if="item.type==='dot'">
                      <view style="width: 100%;padding-top: 2px" class="flex-class1">
                        <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
                      </view>
                    </view>
                    开始/结束
                  </view>
                </view>
                <view :style="{ width:'100%',height:gridHeight+'px',fontSize: fontSize +'px',position:'relative' }"
                      class="flex-class day-normal-dark"
                      v-else
                      @click="clickDay(item.date)"
                >
                  <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
                  <view class="bottom-dots absolute" v-if="item.type==='dot'">
                    <view style="width: 100%;padding-top: 0px" class="flex-class1">
                      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginTop:'-10rpx'}"></view>
                    </view>
                  </view>
                  <view class="bottom-dots absolute" v-if="item.type==='text'" :style="{color:  item.color,bottom:'0!important'}">{{ item.info }}</view>
                </view>
              </view>
              <!--    它月的展示日期 -->
              <view v-else :style="{fontSize: fontSize +'px',position:'relative'}" :class="judge(item.date) === 3?'flex-class':'flex-class '" style="width: 100%">
                <view :style="{width:'100%',height:gridHeight+'px',borderRadius:dayWidth/2 +'px',fontSize: fontSize +'px'}"
                      :class="judge(item.date) === 3? 'flex-class day-normal fontColor-normal':'flex-class day-normal fontColor-normal'"
                      @click="clickDayNotThisMonth(item.date)"
                >
                  {{ new Date(item.date).getDate()}}
                </view>
                <view class="bottom-dots absolute" v-if="item.type==='dot'">
                  <view style="width: 100%;padding-top: 0px" class="flex-class1">
                    <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: 'rgb(187,187,187)',marginTop:'-10rpx'}"></view>
                  </view>
                </view>
                <view class="bottom-dots absolute" v-if="item.type==='text'" :style="{color:  'rgb(187,187,187)',bottom:'0!important'}">{{ item.info }}</view>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>

</template>

<script>
export default {
  name: "customCalendar",
  props:{
    date:{ // 父组件传值 选中的单个日期
      type: Number,
      default: null
    },
    dateRange:{ // 父组件传值 选中的日期范围数组
      type:Array,
      default: function () {
        return [];
      }
    },
    dateRangeMax:{ // 连选天数最大值
      type: Number,
      default: null
    },
    calendarBg:{ // 日历组件整体背景色，默认白色
      type:String,
      default:'#fff'
    },
    calendarBorderRadius:{
      type:String,
      default:'20rpx'
    },
    showArrow:{ // 是否展示上下月的跳转箭头,false时展示文字
      type:Boolean,
      default:true
    },
    arrowSize:{ // 上下月跳转箭头的尺寸大小
      type: Number,
      default: 8
    },
    arrowColor:{ // 上下月跳转箭头的颜色
      type:String,
      default:'#3a3a3a'
    },
    arrowHeight:{
      type: Number,
      default: 25
    },
    gridHeight:{ // 日期格子高度
      type: Number,
      default: 42
    },
    themeColor:{
      type: String,
      default:'rgb(100,124,203)'
    },
    dayWidth:{ // 选中日期的圆圈宽高
      type: Number,
      default: 30
    },
    dayBg:{ // 选中日期的圆背景色
      type: String,
      default: '#6161F9'
    },
    dayColor:{ // 选中日期的圆文字颜色
      type: String,
      default: '#fff'
    },
    fontSize:{ // 日期格子文字的大小
      type: Number,
      default: 13.5
    },
    mode:{
      type:String,
      default:'date'
    },
    selected:{
      type:Array,
      default: function () {
        return [];
      }
    }

  },
  data(){
    return{
      benchmark: new Date().getTime(), // 基准点 时间戳
      sonDate: new Date().getTime(), // 选中单个日期
      sonDateRange:[], // 选中日期范围
      dotsList:[], // 打点数组
      month: [], // 以基准点调整的月份日历展示数组（增加打点）
      month0: [], // 以基准点调整的月份日历展示数组（增加打点）
      month1: [], // 以基准点调整的月份日历展示数组（增加打点）
      month2: [], // 以基准点调整的月份日历展示数组（增加打点）
      // weekText: ['一','二','三','四','五','六','日'], // 周抬头
      weekText: ['一','二','三','四','五','六','日'], // 周抬头
      swiperCurrent:1,
    }
  },
  watch:{
    date:{ // 父组件绑定的单个日历值传给sonDate
      handler(val){
        // console.log('父组件绑定的单个日历值传给sonDate',val)
        if(this.mode === 'date'){
          if(val !== 0 && val !== ''){
            this.sonDate = new Date(val).getTime()
            this.benchmark = new Date(val).getTime() // 校准基准点
            // console.log('选中日期与显示保持一致：',this.formatDateTime(this.sonDate,2))
          }else{
            this.sonDate = new Date().getTime()
            this.benchmark = new Date().getTime() // 校准基准点
            // console.log('选中日期初始化：',this.formatDateTime(this.sonDate,2))
          }
          this.dotsList = this.selected
          this.adjustCalendarDate() // 根据该日期计算当月
        }
      },
      deep:true,
      immediate: true
    },
    dateRange:{
      handler(val) {
        if(this.mode === 'dateRange'){
          // console.log('父组件绑定的日期数值传给sonDateRange',this.dateRange)
          if(val !== undefined){
            this.sonDateRange = val
            this.benchmark = val[0] // 校准基准点
          }
          this.dotsList = this.selected
          this.adjustCalendarDate() // 根据该日期计算当月
        }
      },
      deep:true,
      immediate: true
    }
  },
  methods:{
    judgeShowType(current,date){
      // getMonth 0-11
      if(parseInt(current) === parseInt(this.swiperCurrent)){
        return new Date(this.benchmark).getMonth() === new Date(date).getMonth()
      }
      if(parseInt(this.swiperCurrent) - parseInt(current) === 1 || parseInt(this.swiperCurrent) - parseInt(current) === -2){
        if(new Date(this.benchmark).getMonth() === 0){
          return new Date(date).getMonth() === 11
        }else{
          return new Date(this.benchmark).getMonth() - 1 === new Date(date).getMonth()
        }
      }
      if(parseInt(current) - parseInt(this.swiperCurrent) === 1 || parseInt(this.swiperCurrent) - parseInt(current) === 2){
        if(new Date(this.benchmark).getMonth() === 11){
          return new Date(date).getMonth() === 0
        }else{
          return new Date(this.benchmark).getMonth() + 1 === new Date(date).getMonth()
        }
      }
    },
    /**
    * swiper 改变时会触发
    */
    swiperChange(e){
      if(parseInt(this.swiperCurrent) - parseInt(e.detail.current) === 1 || parseInt(this.swiperCurrent) - parseInt(e.detail.current) === -2 ){
        this.benchmark = new Date(this.getPreMonthBeginAndEnd(this.formatDateTime(this.benchmark,2),1)).getTime()
      }
      if(parseInt(e.detail.current) - parseInt(this.swiperCurrent) === 1 || parseInt(this.swiperCurrent) - parseInt(e.detail.current) === 2 ){
        this.benchmark = new Date(this.getMonthBeginAndEnd(this.benchmark,3)).getTime()
      }
      this.swiperCurrent = e.detail.current
      this.adjustCalendarDate()
    },
    /**
    * 获取0点 23:59:59时间戳
    */
    getDayZero(timeStamp,type){
      let temp = parseInt(timeStamp)
      let day = new Date(new Date(temp).toLocaleDateString()).getTime()
      if(type === 1){
          return this.formatDateTime(day,1)
      }
      if(type === 2){
          return this.formatDateTime(day + 86400000 - 1,1)
      }
      /*if(type == 1){
        console.log(this.formatDateTime(new Date(new Date(day).setHours(0, 0, 0, 0)).getTime(),2) )
        return this.formatDateTime(new Date(new Date(day).setHours(0, 0, 0, 0)).getTime(),2)  // 设置指定时间的时分秒字段
      }
      if(type == 2){
        return this.formatDateTime(new Date(new Date(day).setHours(23, 59, 59, 59)).getTime(),2) // 设置指定时间的时分秒字段
      }*/
    },
    /**
    * 判断日期是否为选中的日期
    */
    judge(day){
      if(this.mode === 'date'){ // 模式为单选日期
        if(new Date(this.getDayZero(new Date(this.formatDateTime(this.sonDate,2)).getTime(),1)).getTime() === new Date(this.getDayZero(new Date(day).getTime(),1)).getTime()){
          return true
        }else {
          return false
        }
      }
      if(this.mode === 'dateRange'){ // 模式为单选日期
        if(JSON.stringify(this.sonDateRange) !== '{}' ){
          if(this.sonDateRange.length === 1){
            if(  new Date(day).getTime() === this.sonDateRange[0]  ){
              return 5
            }
          }
          if(this.sonDateRange.length === 2){
            if(new Date(day).getTime() === this.sonDateRange[0] && this.sonDateRange[0] === this.sonDateRange[1]){
              return 6
            }else{
              if(  new Date(day).getTime() === this.sonDateRange[0]  ){
                return 1
              }else if(   new Date(day).getTime() === this.sonDateRange[1] ){
                return 2
              }else if(  new Date(day).getTime() > this.sonDateRange[0] && new Date(day).getTime() < this.sonDateRange[1] ){
                return 3
              } else {
                return 4
              }
            }
          }
        } else {
          return 4
        }

      }
    },
    dateRangeMaxDeal(){
      // console.log('超过连选天数',this.dateRangeMax)
      let t1 = this.getDayZero(this.sonDateRange[0],1)
      let t2 = this.getDayZero(this.sonDateRange[1],2)
      this.$emit('dateRangeMaxDeal',[t1,t2])
    },
    /**
    * 点击了单个日期
    */
    clickDay(day){
      // console.log('触发点击')
      if(this.mode === 'date'){
        this.sonDate = new Date(day).getTime()
        this.$emit("dateChange",this.sonDate)
        this.adjustCalendarDate()
      }
      if(this.mode === 'dateRange'){
        if(JSON.stringify(this.sonDateRange) === '{}'){
          this.sonDateRange = [new Date(day).getTime()]
        }else{
          if(this.sonDateRange.length === 1){
            let t = this.sonDateRange[0]
            // console.log(this.sonDateRange[0],new Date(day).getTime(),this.dateRangeMax,'最多连选')
            if(this.sonDateRange[0] > new Date(day).getTime()){ // 判断日期选择顺序
              if(!isNaN(parseInt(this.dateRangeMax))){
                if(parseInt(this.sonDateRange[0]) - parseInt(new Date(day).getTime()) > this.dateRangeMax * 24*60*60*1000){
                  this.sonDateRange[0] = t - (this.dateRangeMax - 1) * 24*60*60*1000
                  this.sonDateRange.push(t)
                  this.dateRangeMaxDeal()
                  return
                }
              }
              this.sonDateRange[0] = new Date(day).getTime()
              this.sonDateRange.push(t)
            } else {
              if(!isNaN(parseInt(this.dateRangeMax))){
                if(parseInt(new Date(day).getTime()) -parseInt(this.sonDateRange[0]) > this.dateRangeMax * 24*60*60*1000){
                  this.sonDateRange.push(t + (this.dateRangeMax - 1) * 24*60*60*1000)
                  this.dateRangeMaxDeal()
                  return
                }
              }
              this.sonDateRange.push(new Date(day).getTime())
            }
            let t1 = this.getDayZero(this.sonDateRange[0],1)
            let t2 = this.getDayZero(this.sonDateRange[1],2)
            this.$emit('confirm',[t1,t2])
          }else if(this.sonDateRange.length === 2){
            this.sonDateRange = [new Date(day).getTime()]
          }
        }

      }
    },
    /**
     * 点击了非本月的单个日期
     */
    clickDayNotThisMonth(day){
      if(this.mode === 'date'){ // 模式为单选日期
        this.sonDate = new Date(day).getTime()
        let m = new Date(day).getMonth() //点击日期的月份和基准月做对比，看是它的上月还是下月
        let mark = new Date(this.benchmark).getMonth()
        let next = true // 默认点了下月
        if(mark > 0 && mark < 11){
          if(m === mark + 1){next = true}
          if(m === mark - 1){next = false}
        }else{
          if(mark === 0){
            if(m === 11){next = false}
            if(m === 1){next = true}
          }
          if(mark === 11){
            if(m === 10){next = false}
            if(m === 0){next = true}
          }
        }
        if(next === true){
          this.jumpToNextMonth()
        }else{
          this.jumpToLastMonth()
        }
        this.$emit("dateChange",this.sonDate)
      }
      if(this.mode === 'dateRange'){

      }
    },
    /**
    * 校准日历
    */
    adjustCalendar(){
      // console.log('以this.benchmark为中心点 校准展示月份')
      let monthStart = this.getMonthBeginAndEnd(this.formatDateTime(this.benchmark,2) ,1)
      let monthEnd = this.getMonthBeginAndEnd(this.formatDateTime(this.benchmark,2) ,2)
      let lastMonday = monthStart
      let nextSunday = monthEnd
      if(new Date(monthStart).getDay() !== 1){ // 如果月初不是周一，补全
        lastMonday = this.getOneDay(new Date(monthStart).getTime(),1) //补全周一
      }
      if(new Date(monthEnd).getDay() !== 0){ // 如果月底不是周日，补全
        nextSunday = this.getOneDay(new Date(monthEnd).getTime(),7) // 补全周日
      }
      let month = this.getRangeOfDates(lastMonday, nextSunday)
      // console.log(monthStart,'monthStart',monthEnd,'monthEnd')
      // console.log(lastMonday,'lastMonday',nextSunday,'nextSunday')
      // console.log(month,'month')
      let list = []
      for(let i in month){ //  增加打点信息
        let obj = { date: month[i] }
        for(let j in this.dotsList){
          // console.log(this.getDayZero(new Date(this.dotsList[j].date.replaceAll('-','/')).getTime(),1))
          // console.log(this.getDayZero(new Date(month[i]).getTime(),1))
          if(this.getDayZero(new Date(this.dotsList[j].date.replaceAll('-','/')).getTime(),1) === this.getDayZero(new Date(month[i]).getTime(),1)){
            obj = Object.assign({}, obj, this.dotsList[j])
          }
        }
        list.push(obj)
      }
      this.month = list
      // console.log(this.month)
    },
    /**
    * mode='date' 校准展示日历
    */
    adjustCalendarDate(){
      // console.log('以this.benchmark为中心点 校准展示月份')
      let monthStart = this.getMonthBeginAndEnd(this.formatDateTime(this.benchmark,2) ,1)
      let monthEnd = this.getMonthBeginAndEnd(this.formatDateTime(this.benchmark,2) ,2)
      let lastMonday = monthStart
      let nextSunday = monthEnd
      if(new Date(monthStart).getDay() !== 1){ // 如果月初不是周一，补全
        lastMonday = this.getOneDay(new Date(monthStart).getTime(),1) //补全周一
      }
      if(new Date(monthEnd).getDay() !== 0){ // 如果月底不是周日，补全
        nextSunday = this.getOneDay(new Date(monthEnd).getTime(),7) // 补全周日
      }
      let monthStart1= this.getPreMonthBeginAndEnd(monthStart,1)
      let monthEnd1= this.getPreMonthBeginAndEnd(monthStart,2)
      let lastMonday1 = monthStart1
      let nextSunday1 = monthEnd1
      if(new Date(monthStart1).getDay() !== 1){ // 如果月初不是周一，补全
        lastMonday1 = this.getOneDay(new Date(monthStart1).getTime(),1) //补全周一
      }
      if(new Date(monthEnd1).getDay() !== 0){ // 如果月底不是周日，补全
        nextSunday1 = this.getOneDay(new Date(monthEnd1).getTime(),7) // 补全周日
      }
      let y = new Date(monthStart).getFullYear()
      let m1 = new Date(monthStart).getMonth() + 1 // 来月
      let two = new Date(y, m1, 1).getTime()
      let monthStart2= this.getMonthBeginAndEnd(two,1)
      let monthEnd2= this.getMonthBeginAndEnd(two,2)
      let lastMonday2 = monthStart2
      let nextSunday2 = monthEnd2
      if(new Date(monthStart2).getDay() !== 1){ // 如果月初不是周一，补全
        lastMonday2 = this.getOneDay(new Date(monthStart2).getTime(),1) //补全周一
      }
      if(new Date(monthEnd2).getDay() !== 0){ // 如果月底不是周日，补全
        nextSunday2 = this.getOneDay(new Date(monthEnd2).getTime(),7) // 补全周日
      }
      let month = this.getRangeOfDates(lastMonday, nextSunday)
      let month1 = this.getRangeOfDates(lastMonday1, nextSunday1)
      let month2 = this.getRangeOfDates(lastMonday2, nextSunday2)
      let list = [] // 当月
      let list1 = [] // 上月
      let list2 = [] // 下月
      for(let i in month){ //  增加打点信息
        let obj = { date: month[i] }
        for(let j in this.dotsList){
          if(this.getDayZero(new Date(this.dotsList[j].date.replaceAll('-','/')).getTime(),1) === this.getDayZero(new Date(month[i]).getTime(),1)){
            obj = Object.assign({}, obj, this.dotsList[j])
          }
        }
        list.push(obj)
      }
      for(let i in month1){ //  增加打点信息
        let obj = { date: month1[i] }
        for(let j in this.dotsList){
          if(this.getDayZero(new Date(this.dotsList[j].date.replaceAll('-','/')).getTime(),1) === this.getDayZero(new Date(month1[i]).getTime(),1)){
            obj = Object.assign({}, obj, this.dotsList[j])
          }
        }
        list1.push(obj)
      }
      for(let i in month2){ //  增加打点信息
        let obj = { date: month2[i] }
        for(let j in this.dotsList){
          if(this.getDayZero(new Date(this.dotsList[j].date.replaceAll('-','/')).getTime(),1) === this.getDayZero(new Date(month2[i]).getTime(),1)){
            obj = Object.assign({}, obj, this.dotsList[j])
          }
        }
        list2.push(obj)
      }
      if(this.swiperCurrent === 0){
        this.month1 = list2
        this.month2 = list1
        this.month0 = list
      }else if(this.swiperCurrent === 1){
        this.month1 = list
        this.month0 = list1
        this.month2 = list2
      }else{
        this.month2 = list
        this.month0 = list2
        this.month1 = list1
      }
      // console.log(this.month1)
    },
    /**
    * 当月的月初与月底
    */
    getMonthBeginAndEnd(d,type){
      let y = new Date(d).getFullYear()
      let m = new Date(d).getMonth()
      let m1 = new Date(d).getMonth() + 1 // 来月
      let one = new Date(y, m, 1).getTime()
      let two = new Date(y, m1, 1).getTime()
      if(type === 1){
        return this.formatDateTime(new Date(one).getTime(),1)
      }
      if(type === 2){
        return this.formatDateTime(new Date(two).getTime() - 1,1)
      }
      if(type === 3){
        return this.formatDateTime(new Date(two).getTime(),1)
      }
    },
    /**
    * 指定某日的上月月初和月底
    */
    getPreMonthBeginAndEnd(d,type){
      let y = new Date(d).getFullYear()
      let m = new Date(d).getMonth()
      let m1 = new Date(d).getMonth() - 1
      let one = new Date(y, m1, 1).getTime()
      let two = new Date(y, m, 1).getTime()
      if(type === 1){
        return this.formatDateTime(new Date(one).getTime(),1)
      }
      if(type === 2){
        return this.formatDateTime(new Date(two).getTime() - 1,1)
      }
    },
    /**
    * 时间戳格式化
    */
    formatDateTime (timeStamp,type) {
      timeStamp  =  parseInt(timeStamp)
      if (timeStamp == null) {
        return ''
      } else {
        const date = new Date(timeStamp)
        const y = date.getFullYear() // 年
        let MM = date.getMonth() + 1 // 月
        MM = MM < 10 ? ('0' + MM) : MM
        let d = date.getDate() // 日
        d = d < 10 ? ('0' + d) : d
        let h = date.getHours() // 时
        h = h < 10 ? ('0' + h) : h
        let m = date.getMinutes()// 分
        m = m < 10 ? ('0' + m) : m
        let s = date.getSeconds()// 秒
        s = s < 10 ? ('0' + s) : s
        if(type === 1){
          return y + '/' + MM + '/' + d + ' ' + h + ':' + m + ':' + s
        } else if (type === 2){
          return y + '/' + MM + '/' + d
        }  else if (type === 3){
          return y + '/' + MM + '/' + d + ' ' + h + ':' + m + ':' + s
        } else if (type === 4){
          return y + '/' + MM + '/' + d
        } else {
          return h + ':' + m + ':' + s
        }
      }
    },
    /**
     *  获取时间段内的所有日期/指定星期几的日期 (不传 week 就是所有日期)
     *  tupe:1 计算两个日期相差的天数
     */
    getRangeOfDates(startTime, endTime, week,type) {
      // 获取时间段内的所有日期/指定星期几的日期
      week = week == 7 ? 0 : week;
      let dateList = [];
      startTime = new Date(startTime);
      endTime = new Date(endTime);
      while ((endTime.getTime() - startTime.getTime()) >= 0) {
        let year = startTime.getFullYear();
        let month = startTime.getMonth() + 1 < 10 ? '0' + (startTime.getMonth() + 1) : startTime.getMonth() + 1;
        let day = startTime.getDate().toString().length == 1 ? '0' + startTime.getDate() : startTime.getDate();
        if(isNaN(week) || startTime.getDay() == week) {
          dateList.push(`${year}/${month}/${day}`);
        }
        startTime.setDate(startTime.getDate() + 1);
      }
      if(type === 1){
        return dateList.length;
      }else{
        return dateList
      }
    },
    /**
     * 获取指定日期所在周的周几 周n
     */
    getOneDay(timeStamp,n){
      let now = new Date(timeStamp);
      let nowTime = now.getTime();
      let day = now.getDay();
      if(now.getDay() === 0){
        day = 7;
      }
      let oneDayTime = 24 * 60 * 60 * 1000;
      let dayTime = nowTime
      if(n < day){
        dayTime = nowTime - (day-n) * oneDayTime
      }
      if(n > day){
        dayTime = nowTime + (n-day) * oneDayTime
      }
      return this.formatDateTime(new Date(dayTime).getTime(),1)
    },
    /**
    * 跳转上月
    */
    jumpToLastMonth(){
      this.benchmark = new Date(this.getPreMonthBeginAndEnd(this.formatDateTime(this.benchmark,2),1)).getTime() // 基准点改为 上个月的月初 时间戳
      if(this.swiperCurrent  !== 0){
        this.swiperCurrent -= 1
      }else{
        this.swiperCurrent = 2
      }
      this.adjustCalendarDate()
    },
    /**
     * 跳转下月
     */
    jumpToNextMonth(){
      this.benchmark = new Date(this.getMonthBeginAndEnd(this.benchmark,3)).getTime()// 基准点改为 下个月的月初 时间戳
      if(this.swiperCurrent  !== 2){
        this.swiperCurrent += 1
      }else{
        this.swiperCurrent = 0
      }
      this.adjustCalendarDate()
    }
  }
}
</script>

<style scoped lang="stylus">
.calendar-area
  width: 100%;
  max-width 500px
  .calendar-head // 日历头部
    padding-top 20rpx
    .calendar-arrow
      padding 0 40rpx
    .pre-month // 上月跳转文字
      margin-left: 5px
      padding: 0 10px
    .next-month // 下月跳转文字
      margin-right: 5px
      padding: 0 10px
  .day-normal-dark
    background: transparent;
    color: rgb(12,12,12);
  .day-normal
    background: transparent;
  .start-text
    width: 100%;
    font-size: 9px;
    text-align: center;
    bottom: 0;
    display flex
    align-items center
    justify-content center
    overflow hidden
  .bottom-dots
    width: 100%;
    font-size: 9px;
    text-align: center;
    bottom: 4rpx
  .bottom-dots-else
    font-size: 9px;
    text-align: center;
    bottom: 4rpx
  .bottom-texts
    width: 100%;
    font-size: 9px;
    text-align: center;
    //bottom: -4.5px
    bottom: 0px
  .grid-text
    width: 100%;
    text-align: center
.arrow-style
  background-color: transparent; /* 模块背景为透明 */
  border-style: solid;
.arrow-left-transform
  transform rotate(225deg)/*箭头方向可以自由切换角度*/
.arrow-right-transform
  transform rotate(45deg)/*箭头方向可以自由切换角度*/

.flex-class
  display flex
  align-items center
  justify-content center
.flex-class1
  display flex
  align-items flex-start
  justify-content center
.flex
  display flex
.justify-content1
  justify-content center
.space-between
  justify-content space-between
.align-items
  align-items center
.flex-wrap
  flex-wrap wrap
.flex-no-wrap
  flex-wrap nowrap
.relative
  position relative
.absolute
  position absolute
.bg
  background #6161f921
.fontColor-normal
  color: rgb(187,187,187);
.fontColor
  color #6161f9

</style>
