<template>
	<uv-picker
		ref="picker"
		:closeOnClickOverlay="closeOnClickOverlay"
		:closeOnClickConfirm="closeOnClickConfirm"
		:columns="columns"
		:title="title"
		:itemHeight="itemHeight"
		:showToolbar="showToolbar"
		:visibleItemCount="visibleItemCount"
		:defaultIndex="innerDefaultIndex"
		:cancelText="cancelText"
		:confirmText="confirmText"
		:cancelColor="cancelColor"
		:confirmColor="confirmColor"
		:round="round"
		@close="close"
		@cancel="cancel"
		@confirm="confirm"
		@change="change"
	>
	</uv-picker>
</template>
<script>
	function times(n, iteratee) {
		let index = -1
		const result = Array(n < 0 ? 0 : n)
		while (++index < n) {
			result[index] = iteratee(index)
		}
		return result
	}
	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
	import props from './props.js';
	import dayjs from '@/uni_modules/uv-ui-tools/libs/util/dayjs.js'
	/**
	 * DatetimePicker 時間日期選擇器
	 * @description 此選擇器用於時間日期
	 * @tutorial https://www.uvui.cn/components/datetimePicker.html
	 * @property {Boolean}			showToolbar			是否顯示頂部的操作欄  ( 默認 true )
	 * @property {String | Number}	value				綁定值
	 * @property {String}			title				頂部標題
	 * @property {String}			mode				展示格式 mode=date為日期選擇，mode=time為時間選擇，mode=year-month為年月選擇，mode=datetime為日期時間選擇  ( 默認 ‘datetime )
	 * @property {Number}			maxDate				可選的最大時間  默認值為後10年
	 * @property {Number}			minDate				可選的最小時間  默認值為前10年
	 * @property {Number}			minHour				可選的最小小時，僅mode=time有效   ( 默認 0 )
	 * @property {Number}			maxHour				可選的最大小時，僅mode=time有效	  ( 默認 23 )
	 * @property {Number}			minMinute			可選的最小分鐘，僅mode=time有效	  ( 默認 0 )
	 * @property {Number}			maxMinute			可選的最大分鐘，僅mode=time有效   ( 默認 59 )
	 * @property {Function}			filter				選項過濾函數
	 * @property {Function}			formatter			選項格式化函數
	 * @property {Boolean}			loading				是否顯示加載中狀態   ( 默認 false )
	 * @property {String | Number}	itemHeight			各列中，單個選項的高度   ( 默認 44 )
	 * @property {String}			cancelText			取消按鈕的文字  ( 默認 '取消' )
	 * @property {String}			confirmText			確認按鈕的文字  ( 默認 '確認' )
	 * @property {String}			cancelColor			取消按鈕的顏色  ( 默認 '#909193' )
	 * @property {String}			confirmColor		確認按鈕的顏色  ( 默認 '#3c9cff' )
	 * @property {String | Number}	visibleItemCount	每列中可見選項的數量  ( 默認 5 )
	 * @property {Boolean}			closeOnClickOverlay	是否允許點擊遮罩關閉選擇器  ( 默認 true )
	 * @property {String | Number}	round	圓角  ( 默認 0 )
	 * @event {Function} close 關閉選擇器時觸發
	 * @event {Function} confirm 點擊確定按鈕，返回當前選擇的值
	 * @event {Function} change 當選擇值變化時觸發
	 * @event {Function} cancel 點擊取消按鈕
	 * @example  <uv-datetime-picker ref="datetimepicker" :value="value1"  mode="datetime" ></uv-datetime-picker>
	 */
	export default {
		name: 'uv-datetime-picker',
		emits: ['close', 'cancel', 'confirm', 'input', 'change', 'update:modelValue'],
		mixins: [mpMixin, mixin, props],
		data() {
			return {
				columns: [],
				innerDefaultIndex: [],
				innerFormatter: (type, value) => value
			}
		},
		watch: {
			propsChange() {
				this.$uv.sleep(100).then(res=>{
					this.init()
				})
			}
		},
		computed: {
			// 如果以下這些變量發生了變化，意味著需要重新初始化各列的值
			propsChange() {
				const propsValue = this.value || this.modelValue;
				return [this.mode, this.maxDate, this.minDate, this.minHour, this.maxHour, this.minMinute, this.maxMinute, this.filter, propsValue]
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.getValue();
				this.updateColumnValue(this.innerValue)
			},
			getValue() {
				const propsValue = this.value || this.modelValue;
				this.innerValue = this.correctValue(propsValue)
			},
			// 在微信小程序中，不支持將函數當做props參數，故只能通過ref形式調用
			setFormatter(e) {
				this.innerFormatter = e
			},
			open() {
				this.$refs.picker.open();
				// 解決打開的前壹次和當前日期錯亂的BUG
				setTimeout(()=>{
					this.getValue();
					this.updateColumnValue(this.innerValue);
				},10)
			},
			close() {
				this.$emit('close');
			},
			// 點擊工具欄的取消按鈕
			cancel() {
				this.$emit('cancel')
			},
			// 點擊工具欄的確定按鈕
			confirm() {
				this.$emit('confirm', {
					value: this.innerValue,
					mode: this.mode
				})
				if(!this.clearDate) {
					this.$emit('input', this.innerValue)
					this.$emit('update:modelValue', this.innerValue)
				}
			},
			//用正則截取輸出值,當出現多組數字時,拋出錯誤
			intercept(e, type) {
				let judge = e.match(/\d+/g)
				//判斷是否摻雜數字
				if (judge.length > 1) {
					this.$uv.error("請勿在過濾或格式化函數時添加數字")
					return 0
				} else if (type && judge[0].length == 4) { //判斷是否是年份
					return judge[0]
				} else if (judge[0].length > 2) {
					this.$uv.error("請勿在過濾或格式化函數時添加數字")
					return 0
				} else {
					return judge[0]
				}
			},
			// 列發生變化時觸發
			change(e) {
				const { indexs, values } = e
				let selectValue = ''
				if (this.mode === 'time') {
					// 根據value各列索引，從各列數組中，取出當前時間的選中值
					selectValue = `${this.intercept(values[0][indexs[0]])}:${this.intercept(values[1][indexs[1]])}`
				} else if (this.mode === 'year') {
					const year = parseInt(this.intercept(values[0][indexs[0]], 'year'));
					selectValue = Number(new Date(year, 0));
				} else {
					// 將選擇的值轉為數值，比如'03'轉為數值的3，'2019'轉為數值的2019
					const year = parseInt(this.intercept(values[0][indexs[0]], 'year'))
					const month = parseInt(this.intercept(values[1][indexs[1]]))
					let date = parseInt(values[2] ? this.intercept(values[2][indexs[2]]) : 1)
					let hour = 0,
						minute = 0
					// 此月份的最大天數
					const maxDate = dayjs(`${year}-${month}`).daysInMonth()
					// year-month模式下，date不會出現在列中，設置為1，為了符合後邊需要減1的需求
					if (this.mode === 'year-month') {
						date = 1
					}
					// 不允許超過maxDate值
					date = Math.min(maxDate, date)
					if (this.mode === 'datetime') {
						hour = parseInt(this.intercept(values[3][indexs[3]]))
						minute = parseInt(this.intercept(values[4][indexs[4]]))
					}
					// 轉為時間模式
					selectValue = Number(new Date(year, month - 1, date, hour, minute))
				}
				// 取出準確的合法值，防止超越邊界的情況
				selectValue = this.correctValue(selectValue)
				this.innerValue = selectValue
				this.updateColumnValue(selectValue)
				// 發出change時間，value為當前選中的時間戳
				this.$emit('change', {
					value: selectValue,
					mode: this.mode
				})
			},
			// 更新各列的值，進行補0、格式化等操作
			updateColumnValue(value) {
				this.innerValue = value
				this.updateColumns()
				this.updateIndexs(value)
			},
			// 更新索引
			updateIndexs(value) {
				let values = []
				const formatter = this.formatter || this.innerFormatter;
				if (this.mode === 'time') {
					// 將time模式的時間用:分隔成數組
					const timeArr = value.split(':')
					// 使用formatter格式化方法進行管道處理
					values = [formatter('hour', timeArr[0]), formatter('minute', timeArr[1])]
				} else {
					const date = new Date(value)
					values = [
						formatter('year', `${dayjs(value).year()}`),
						// 月份補0
						formatter('month', this.$uv.padZero(dayjs(value).month() + 1))
					]
					if (this.mode === 'date') {
						// date模式，需要添加天列
						values.push(formatter('day', this.$uv.padZero(dayjs(value).date())))
					}
					if (this.mode === 'datetime') {
						// 數組的push方法，可以寫入多個參數
						values.push(formatter('day', this.$uv.padZero(dayjs(value).date())), formatter('hour', this.$uv.padZero(dayjs(value).hour())), formatter('minute', this.$uv.padZero(dayjs(value).minute())))
					}
				}
				// 根據當前各列的所有值，從各列默認值中找到默認值在各列中的索引
				const indexs = this.columns.map((column, index) => {
					// 通過取大值，可以保證不會出現找不到索引的-1情況
					return Math.max(0, column.findIndex(item => item === values[index]))
				})
				this.$nextTick(()=>{
					this.$uv.sleep(100).then(res=>{
						this.$refs.picker.setIndexs(indexs,true);
					})
				})
			},
			// 更新各列的值
			updateColumns() {
				const formatter = this.formatter || this.innerFormatter
				// 獲取各列的值，並且map後，對各列的具體值進行補0操作
				const results = this.getOriginColumns().map((column) => column.values.map((value) => formatter(column.type, value)))
				this.columns = results
			},
			getOriginColumns() {
				// 生成各列的值
				const results = this.getRanges().map(({ type, range }) => {
					let values = times(range[1] - range[0] + 1, (index) => {
						let value = range[0] + index
						value = type === 'year' ? `${value}` : this.$uv.padZero(value)
						return value
					})
					// 進行過濾
					if (this.filter) {
						values = this.filter(type, values)
					}
					return { type, values }
				})
				return results
			},
			// 通過最大值和最小值生成數組
			generateArray(start, end) {
				return Array.from(new Array(end + 1).keys()).slice(start)
			},
			// 得出合法的時間
			correctValue(value) {
				const isDateMode = this.mode !== 'time'
				if (isDateMode && !this.$uv.test.date(value)) {
					// 如果是日期類型，但是又沒有設置合法的當前時間的話，使用最小時間為當前時間
					value = this.minDate
				} else if (!isDateMode && !value) {
					// 如果是時間類型，而又沒有默認值的話，就用最小時間
					value = `${this.$uv.padZero(this.minHour)}:${this.$uv.padZero(this.minMinute)}`
				}
				// 時間類型
				if (!isDateMode) {
					if (String(value).indexOf(':') === -1) return this.$uv.error('時間錯誤，請傳遞如12:24的格式')
					let [hour, minute] = value.split(':')
					// 對時間補零，同時控制在最小值和最大值之間
					hour = this.$uv.padZero(this.$uv.range(this.minHour, this.maxHour, Number(hour)))
					minute = this.$uv.padZero(this.$uv.range(this.minMinute, this.maxMinute, Number(minute)))
					return `${ hour }:${ minute }`
				} else {
					// 如果是日期格式，控制在最小日期和最大日期之間
					value = dayjs(value).isBefore(dayjs(this.minDate)) ? this.minDate : value
					value = dayjs(value).isAfter(dayjs(this.maxDate)) ? this.maxDate : value
					return value
				}
			},
			// 獲取每列的最大和最小值
			getRanges() {
				if (this.mode === 'time') {
					return [{
						type: 'hour',
						range: [this.minHour, this.maxHour],
					}, {
						type: 'minute',
						range: [this.minMinute, this.maxMinute],
					}, ];
				}
				const { maxYear, maxDate, maxMonth, maxHour, maxMinute, } = this.getBoundary('max', this.innerValue);
				const { minYear, minDate, minMonth, minHour, minMinute, } = this.getBoundary('min', this.innerValue);
				const result = [{
					type: 'year',
					range: [minYear, maxYear],
				}, {
					type: 'month',
					range: [minMonth, maxMonth],
				}, {
					type: 'day',
					range: [minDate, maxDate],
				}, {
					type: 'hour',
					range: [minHour, maxHour],
				}, {
					type: 'minute',
					range: [minMinute, maxMinute],
				}, ];
				if (this.mode === 'date') result.splice(3, 2);
				if (this.mode === 'year-month') result.splice(2, 3);
				if (this.mode === 'year') result.splice(1, 4);
				return result;
			},
			// 根據minDate、maxDate、minHour、maxHour等邊界值，判斷各列的開始和結束邊界值
			getBoundary(type, innerValue) {
				const value = new Date(innerValue)
				const boundary = new Date(this[`${type}Date`])
				const year = dayjs(boundary).year()
				let month = 1
				let date = 1
				let hour = 0
				let minute = 0
				if (type === 'max') {
					month = 12
					// 月份的天數
					date = dayjs(value).daysInMonth()
					hour = 23
					minute = 59
				}
				// 獲取邊界值，邏輯是：當年達到了邊界值(最大或最小年)，就檢查月允許的最大和最小值，以此類推
				if (dayjs(value).year() === year) {
					month = dayjs(boundary).month() + 1
					if (dayjs(value).month() + 1 === month) {
						date = dayjs(boundary).date()
						if (dayjs(value).date() === date) {
							hour = dayjs(boundary).hour()
							if (dayjs(value).hour() === hour) {
								minute = dayjs(boundary).minute()
							}
						}
					}
				}
				return {
					[`${type}Year`]: year,
					[`${type}Month`]: month,
					[`${type}Date`]: date,
					[`${type}Hour`]: hour,
					[`${type}Minute`]: minute
				}
			},
		},
	}
</script>