<template>
	<view
    class="xd-calendar-item__weeks-box"
    v-if="uiWeeks"
    :class="{
      'xd-calendar-item--disable':uiWeeks.disable,
      'xd-calendar-item--isDay':calendar.fullDate === uiWeeks.fullDate && uiWeeks.isDay,
      'xd-calendar-item--checked':(calendar.fullDate === uiWeeks.fullDate && !uiWeeks.isDay) ,
      'xd-calendar-item--before-checked':uiWeeks.beforeMultiple,
      'xd-calendar-item--multiple': uiWeeks.multiple,
      'xd-calendar-item--after-checked':uiWeeks.afterMultiple,
      'xd-calendar-item__ext': isExt
		}"
    :style="{
      borderRadius: borderRadius + 'rpx',
      background: (
        (calendar.fullDate === uiWeeks.fullDate  && uiWeeks.isDay) ||
        (calendar.fullDate === uiWeeks.fullDate && !uiWeeks.isDay) ||
        uiWeeks.multiple
       )
       ? $mainColor: 'none'

    }"
	  @click="choiceDate(uiWeeks)"
    @dblclick="dblChoiceDate(uiWeeks)"
  >
		<view
      class="xd-calendar-item__weeks-box-item"
      :class="{
        'xd-calendar-item__ext-item': isExt
      }"
    >
			<text v-if="selectedCircle && selected && uiWeeks.extraInfo" class="xd-calendar-item__weeks-box-circle"></text>
      <!--日历-->
      <view
        class="xd-calendar-item__weeks-box-text"
        :class="{
          'xd-calendar-item--isDay-text': uiWeeks.isDay,
          'xd-calendar-item--isDay':calendar.fullDate === uiWeeks.fullDate && uiWeeks.isDay,
          'xd-calendar-item--checked':calendar.fullDate === uiWeeks.fullDate && !uiWeeks.isDay,
          'xd-calendar-item--before-checked':uiWeeks.beforeMultiple,
          'xd-calendar-item--multiple': uiWeeks.multiple,
          'xd-calendar-item--after-checked':uiWeeks.afterMultiple,
          'xd-calendar-item--disable':uiWeeks.disable,
          'xd-calendar-item__ext-item-text': isExt
				}"
      >
        <template v-if="currentIsShowOtherMonth">
          {{uiWeeks.date}}
        </template>
        <template v-else>
          {{nd.month === uiWeeks.month ? uiWeeks.date: ''}}
        </template>
      </view>
      <!--日历 结束-->

      <!--扩展信息-->
      <template>
        <!--无扩展信息-->
        <view
          v-if="!lunar&&!uiWeeks.extraInfo && uiWeeks.isDay"
          class="xd-calendar-item__weeks-lunar-text"
          :class="{
            'xd-calendar-item--isDay-text':uiWeeks.isDay,
            'xd-calendar-item--isDay':calendar.fullDate === uiWeeks.fullDate && uiWeeks.isDay,
            'xd-calendar-item--checked':calendar.fullDate === uiWeeks.fullDate && !uiWeeks.isDay,
            'xd-calendar-item--before-checked':uiWeeks.beforeMultiple,
            'xd-calendar-item--multiple': uiWeeks.multiple,
            'xd-calendar-item--after-checked':uiWeeks.afterMultiple,
          }"
        >今天</view>
        <!--无扩展信息 结束-->
        <!--显示农历-->
        <view
          v-if="lunar && !uiWeeks.extraInfo"
          class="xd-calendar-item__weeks-lunar-text"
          :class="{
            'xd-calendar-item--isDay-text':uiWeeks.isDay,
            'xd-calendar-item--isDay':calendar.fullDate === uiWeeks.fullDate && uiWeeks.isDay,
            'xd-calendar-item--checked':calendar.fullDate === uiWeeks.fullDate && !uiWeeks.isDay,
            'xd-calendar-item--before-checked':uiWeeks.beforeMultiple,
            'xd-calendar-item--multiple': uiWeeks.multiple,
            'xd-calendar-item--after-checked':uiWeeks.afterMultiple,
            'xd-calendar-item--disable':uiWeeks.disable,
           }"
        >{{uiWeeks.isDay?'今天': (uiWeeks.lunar.IDayCn === '初一'?uiWeeks.lunar.IMonthCn:uiWeeks.lunar.IDayCn)}}
        </view>
        <!--显示农历 结束-->
        <!--有扩展信息-->
        <view
          v-if="uiWeeks.extraInfo&&uiWeeks.extraInfo.info"
          class="xd-calendar-item__weeks-lunar-text"
          :class="{
            'xd-calendar-item--extra':uiWeeks.extraInfo.info,
            'xd-calendar-item--isDay-text':uiWeeks.isDay,
            'xd-calendar-item--isDay':calendar.fullDate === uiWeeks.fullDate && uiWeeks.isDay,
            'xd-calendar-item--checked':calendar.fullDate === uiWeeks.fullDate && !uiWeeks.isDay,
            'xd-calendar-item--before-checked':uiWeeks.beforeMultiple,
            'xd-calendar-item--multiple': uiWeeks.multiple,
            'xd-calendar-item--after-checked':uiWeeks.afterMultiple,
            'xd-calendar-item--disable':uiWeeks.disable,
				  }"
        >
          <template v-if="uiWeeks.extraInfo.showType=== 'unit'">
            <xd-unit
              :price="uiWeeks.extraInfo.info"
              :font-size="26"
              :font-weight="(calendar.fullDate === uiWeeks.fullDate) ? 'bold': 'normal'"
              :icon-size=".25"
              :color="
              (calendar.fullDate === uiWeeks.fullDate && !uiWeeks.isDay
              || calendar.fullDate === uiWeeks.fullDate && uiWeeks.isDay)
               ? '#fff': 'red'"
            ></xd-unit>
          </template>
          <template v-else>{{uiWeeks.extraInfo.info}}</template>
         </view>
        <!--有扩展信息 结束-->
      </template>
      <!--扩展信息 结束-->
		</view>
	</view>
</template>

<script>
  import XdUnit from "@/components/XdUnit/XdUnit";
	export default {
	  name: 'XdDateItem',
    components:{
	    XdUnit
    },
		props: {
			weeks: {
				type: Object,
				default () {
					return {}
				}
			},
      borderRadius:{
			  type: Number|String,
        default: 15, //rpx
      },

			calendar: {
				type: Object,
				default: () => {
					return {}
				}
			},
      selectedCircle: {
        ype: Boolean,
        default: true
      },
			selected: {
				type: Array,
				default: () => {
					return []
				}
			},
			lunar: {
				type: Boolean,
				default: false
			},
      nowDate: {
        type: Object | String | null,
        default: ''
      },
      //是否补全当月以外的其他月时间
      currentIsShowOtherMonth: {
        type: Boolean,
        default: true
      },

		},
    data(){
	    return {
	      uiWeeks: null,
        isExt: false,
        nd: {},
      }
    },
    created(){
      if (this.nowDate) this.nd = this.nowDate;
      this.initDate();
    },
    watch:{
      weeks(value){
        this.initDate();
      },
      nowDate(val) {
        if (val) this.nd = val;
        console.log('nowDate', val, this.uiWeeks);
      }
    },
		methods: {
	    initDate(){
	      if(this.weeks.extraInfo)console.log('extraInfo',this.weeks)
	      if(!this.weeks.extraInfo) this.uiWeeks = this.$xdUniHelper.cloneDeep(this.weeks);
	      else {
	        let weeks = this.$xdUniHelper.cloneDeep(this.weeks);
          if(weeks.extraInfo.disable) {
            weeks.disable = true;
          }
          this.uiWeeks = weeks;
        }
      },

			choiceDate(weeks) {
				this.$emit('change', weeks, false)
			},

      dblChoiceDate(weeks){
	      console.log('dblChoiceDate')
        this.$emit('dblchange', weeks, true)
      }
		},
	}
</script>

<style lang="less">
  @xd-calendar-item : xd-calendar-item;

	.@{xd-calendar-item}__weeks-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
    width: 100%;
    height: unit(100, rpx);
	}

	.@{xd-calendar-item}__weeks-box-text {
		font-size: @xd-font-size-base;
    color: #111;
	}


	.@{xd-calendar-item}__weeks-lunar-text {
		font-size: @xd-font-size-sm;
		color: #111;
	}

	.@{xd-calendar-item}__weeks-box-item {
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
    justify-content: center;
		align-items: center;
    height: 100%;

	}

	.@{xd-calendar-item}__weeks-box-circle {
		position: absolute;
		top: unit(10, rpx);
		right: unit(10, rpx);
		width: unit(16, rpx);
		height: unit(16, rpx);
		border-radius: unit(16, rpx);
	}

	.@{xd-calendar-item}--disable {
		background-color: rgba(249, 249, 249, @xd-opacity-disabled);
		color: @xd-text-color-disable;
	}

	.@{xd-calendar-item}--isDay-text {
		color: @xd-color-primary;
	}

	.@{xd-calendar-item}--isDay {
		opacity: 0.8;
		color: #fff;
	}

	.@{xd-calendar-item}--extra {
		opacity: 0.8;
	}

	.@{xd-calendar-item}--checked {
		color: #fff;
		opacity: 0.8;
    border-radius: unit(15,rpx);
	}

	.@{xd-calendar-item}--multiple {
		color: #fff;
		opacity: 0.8;
	}
	.@{xd-calendar-item}--before-checked {
		background-color: #ff5a5f;
		color: #fff;
	}
	.@{xd-calendar-item}--after-checked {
		background-color: #ff5a5f;
		color: #fff;
	}

  .xd-calendar-item {
    &__ext {
      justify-content: flex-start;
      &-item {
        justify-content: flex-start;
        &-text {
          padding-top: unit(10,rpx);
        }
      }
    }
  }

</style>
