<template>
    <view>
		<view v-if="isShow" class="time_mask" @click="close" :class="{'uni-timer-mask-show':timeMaskShow}"></view>
		<view v-if="isShow" class="yx_time_slot" :class="{'fadelogIn1':timeMaskShow}">
			<view class="time_top_box">
				<view class="time_close" @click="close">取消</view>
				<view class="time_text">{{title}}</view>
				<view class="time_comfirm" @click="confirm">确认</view>
			</view>
			<!-- 时间选择 -->
			<view class="yx_timer_sel">
        <picker-view :value="startValue" :indicator-style="indicatorStyle" @change="bindStartChange" class="sel_swiper-item">
          <picker-view-column>
            <view class="item FontS_24rpx" v-for="(item,index) in years" :key="index">{{item}}年</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item FontS_24rpx" v-for="(item,index) in months" :key="index">{{item}}月</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item FontS_24rpx" v-for="(item,index) in days" :key="index">{{item}}日</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item FontS_24rpx" v-for="(item,index) in timeHour" :key="index">{{item}}时</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item FontS_24rpx" v-for="(item,index) in timeMin" :key="index">{{item}}分</view>
          </picker-view-column>
        </picker-view>
			</view>

		</view>
	</view>
</template>

<script>
export default {
	name:"one-date-choose-y-m-d-h-m",
	props: {
		title: {
		    type: String,
		    default: () => {
		       return "选择时间";
		    }
		},
    nowTime:{
      type: String,
      default: () => {
        return "";
      }
    },
    num:{
      type: Number,
      default: () => {
        return 0;
      }
    }
	},
  data() {
    return {
      $:this.$,
      timeMaskShow:false,//遮罩
      isShow:false,//显示
      typeIndex:0,//下标
      startValue:[0,0,0,0,0],//
      forNowStartValue:[],//
      forNowEndValue:[],//
      indicatorStyle: 'height: 50px;',
      // timeList:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
      timeHour:[],
      timeMin:[],//分钟可选项
      // 日期数组
      years:[],
      months:[],
      days:[],
      // 当前选中
      currYear:'',
      currMonth:'',
      currDay:'',
      currHour:'',
      currMin:'',
      // 改变选择时
      year:'',
      month:'',
      day:'',
      hour:'',
      min:'',
      // 星期几
      type:'', // 类型
      courtyardData:'',
    };
  },
  mounted() {
  },
  methods: {
    // 处理选中
    dealChoose(year,month,day,hour,min){
      let daysNum = 31
      let monthNumArr = [1,3,5,7,8,10,12]
      let date = new Date()
      let years = []
      let currYear = Number(year)
      let months = []
      let currMonth = Number(month)
      if(currMonth != 2 && monthNumArr.indexOf(currMonth) != -1){
        daysNum = 31
      }
      if(currMonth != 2 && monthNumArr.indexOf(currMonth) == -1){
        daysNum = 30
      }
      let days = []
      let currDay = day
      for (let i = 1990; i <= date.getFullYear(); i++) {
        years.push(i)
      }
      for (let i = 1; i <= 12; i++) {
        months.push(i)
      }
      if(currMonth == 2){
        if(currYear%4 == 0){
          daysNum = 29
          this.day = 29
        }else{
          daysNum = 28
          this.day = 28
        }
      }
      for (let i = 1; i <= daysNum; i++) {
        days.push(i)
      }
      //获取时分
      let timeHour = []
      let timeMin = []
      for (let i = 0; i < 24; i++) {
        timeHour.push(this.formatNumber(i))
      }
      for (let i = 0; i < 60; i++) {
        timeMin.push(this.formatNumber(i))
      }
      let currHour = hour
      let currMin = min
      this.currYear = currYear
      this.currMonth = currMonth
      this.currDay = currDay
      this.currHour = Number(currHour)
      this.currMin = Number(currMin)
      this.years = years
      this.months = months
      this.days = days
      this.timeHour = timeHour
      this.timeMin = timeMin
      console.log('this.years.indexOf(this.currYear)',this.years.indexOf(this.currYear))
      console.log('this.years.indexOf(this.currYear)',this.currYear)
      this.startValue = [this.years.indexOf(this.currYear), this.currMonth - 1, this.currDay - 1,this.currHour, this.currMin]
    },
    // 获取时间
    getDateData () {
      let daysNum = 31
      let monthNumArr = [1,3,5,7,8,10,12]
      let date = new Date()
      let years = []
      let currYear = date.getFullYear()
      let months = []
      let currMonth = date.getMonth() + 1
      if(currMonth != 2 && monthNumArr.indexOf(currMonth) != -1){
        daysNum = 31
      }
      if(currMonth != 2 && monthNumArr.indexOf(currMonth) == -1){
        daysNum = 30
      }
      let days = []
      let currDay = date.getDate()
      for (let i = 1990; i <= date.getFullYear(); i++) {
        years.push(i)
      }
      for (let i = 1; i <= 12; i++) {
        months.push(i)
      }
      if(currMonth == 2){
        if(currYear%4 == 0){
          daysNum = 29
          this.day = 29
        }else{
          daysNum = 28
          this.day = 28
        }
      }
      for (let i = 1; i <= daysNum; i++) {
        days.push(i)
      }
      //获取时分
      let timeHour = []
      let timeMin = []
      for (let i = 0; i < 24; i++) {
        timeHour.push(this.formatNumber(i))
      }
      for (let i = 0; i < 60; i++) {
        timeMin.push(this.formatNumber(i))
      }
      let currHour = date.getHours()
      let currMin = date.getMinutes()
      this.currYear = currYear
      this.currMonth = currMonth
      this.currDay = currDay
      this.currHour = Number(currHour)
      this.currMin = Number(currMin)
      this.years = years
      this.months = months
      this.days = days
      this.timeHour = timeHour
      this.timeMin = timeMin
      this.startValue = [this.years.indexOf(this.currYear), this.currMonth - 1, this.currDay - 1,this.currHour, this.currMin]
    },
    // 重新处理天数
    getDayAgain(dateArr){
      if((this.years[dateArr[0]] == this.currYear) && (this.months[dateArr[1]] == this.currMonth) && (this.days[dateArr[2]] == this.currDay) && (this.timeHour[dateArr[3]] == this.currHour) && (this.timeMin[dateArr[4]] == this.currMin)){
        return
      }
      this.year = this.years[dateArr[0]]
      this.month = this.months[dateArr[1]]
      this.day = this.days[dateArr[2]]
      this.hour = this.days[dateArr[3]]
      this.min = this.days[dateArr[4]]
      let daysNum = 31
      let monthNumArr = [1,3,5,7,8,10,12]
      const days = []
      if(this.month == 2){
        if(this.year%4 == 0){
          daysNum = 29
          this.day = 29
        }else{
          daysNum = 28
          this.day = 28
        }
      }
      if(this.month != 2 && monthNumArr.indexOf(this.month) != -1){
        daysNum = 31
      }
      if(this.month != 2 && monthNumArr.indexOf(this.month) == -1){
        daysNum = 30
        if(this.day > 30){
          this.day = 30
        }
      }
      //获取时分
      let timeHour = []
      let timeMin = []
      for (let i = 0; i < 24; i++) {
        timeHour.push(this.formatNumber(i))
      }
      for (let i = 0; i < 60; i++) {
        timeMin.push(this.formatNumber(i))
      }
      for (let i = 1; i <= daysNum; i++) {
        days.push(i)
      }
      this.timeHour = timeHour
      this.timeMin = timeMin
      this.days = days
    },
    // 判断开始时间是否小于结束时间
    checkTime(time1,time2){
      let timeNew1 = new Date(time1)
      let timeNew2 = new Date(time2)
      if(timeNew1 > timeNew2){
        return false
      }
      return true
    },
    //看看是不是有两位数
    formatNumber(n) {
      n = n.toString()
      return n[1] ? n : '0' + n
    },
    //开始选择
    bindStartChange(e){
      this.forNowStartValue = e.detail.value
      this.getDayAgain(e.detail.value)
      console.log('开始时间',this.forNowStartValue)
    },
    /**
     * 关闭弹窗
     */
    close() {
      this.timeMaskShow = false
      this.$nextTick(() => {
        setTimeout(() => {
          this.isShow = false
          this.$emit('close')
        }, 300)
      })
    },
    /**
     * 确认按钮
     */
    confirm() {
      if(this.forNowStartValue.length != 0){
        this.startValue = this.forNowStartValue
      }
      let startTime = this.years[this.startValue[0]] + '-' + this.$.dealTimeLength(this.months[this.startValue[1]]) + '-' + this.$.dealTimeLength(this.days[this.startValue[2]]) + ' ' + this.$.dealTimeLength(this.timeHour[this.startValue[3]]) + ':' + this.$.dealTimeLength(this.timeMin[this.startValue[4]])
      this.$emit('confirm',startTime)
      this.close()
    },
    /**
     * 打开日历弹窗
     */
    open() {
      // this.getDateData()
      this.typeIndex = 0
      this.isShow = true
      this.$nextTick(() => {
        setTimeout(() => {
          this.timeMaskShow = true
        }, 50)
      })
    },
    //栏目选择
    handleType(index){
      if(this.typeIndex == 0 && index == 1){
        if(this.$.getData('endTimeTZ')){
          this.endValue = this.$.getData('endTimeTZ')
        }else {
          this.endValue = [this.years.indexOf(this.currYear),this.currMonth - 1,this.currDay - 1,this.currHour + 1,this.currMin]
        }
      }
      this.typeIndex = index
    }
  },
  watch:{
    num(){
      // 默认选中时间
      if(this.nowTime){
        let timeArr = this.nowTime.split(' ')
        console.log('timeArr',timeArr)
        let date = timeArr[0]
        let time = timeArr[1]
        let year = date.split('-')[0]
        let month = date.split('-')[1]
        let day = date.split('-')[2]
        let hour = time.split(':')[0]
        let min = time.split(':')[1]
        this.dealChoose(year,month,day,hour,min)
      }else{
        this.getDateData()
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.time_mask {
	position: fixed;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	background-color: $uni-bg-color-mask;
	transition-property: opacity;
	transition-duration: 0.3s;
	opacity: 0;
	/* #ifndef APP-NVUE */
	z-index: 99;
	/* #endif */
}
.yx_time_slot{
	background-color: #FFFFFF;
	width: 100%;
	height: 750rpx;
	position: fixed;
	bottom: calc(var(--window-bottom));
	left: 0;
	right: 0;
	z-index: 99;
	transition-property: transform;
	transition-duration: 0.3s;
	transform: translateY(460px);
	.time_top_box{
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.time_close,.time_comfirm{
			width: 100rpx;
			color: #999999;
			font-size: 28rpx;
			font-weight: 400;
			text-align: center;
		}
		.time_comfirm{
			color: #4360F7;
		}
		.time_text{
			flex: 1;
			font-size: 30rpx;
			font-weight: 800;
			text-align: center;
		}
	}
}
.uni-timer-mask-show{
	opacity: 1;
}
/* 从下往上弹窗动画 */
.fadelogIn1 {
	// -webkit-animation: fadelogIn 0.5s;
	// animation: fadelogIn 0.5s;
	transform: translateY(0);
}
.typelist{
	width: 100%;
	height: 70rpx;
	display: flex;
	align-items: center;
	.typeobj{
		width: 158rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.text{
			height: 65rpx;
			line-height: 65rpx;
			font-size: 28rpx;
			color: #333333;
		}
		.line{
			width: 1rpx;
			height: 5rpx;
		}
	}
	.typeobj_hover{
		.text{
			font-weight: 600;
		}
		.line{
			width: 88rpx;
			transition: width .5s;
			background-color: #4360F7;
		}
	}
}
.yx_timer_sel{
	width: 100%;
	margin-top: 38rpx;
	.sel_swiper{
		// width: 80%;
		// margin: 0 auto;
		height: 500rpx;
	}
	.sel_swiper-item{
		height: 500rpx;
		.item {
		    height: 50px;
			display: flex;
		    align-items: center;
		    justify-content: center;
		    text-align: center;
		}
	}
}
</style>
