<template>
	<uv-popup
		ref="pickerPopup"
		mode="bottom"
		:round="round"
		:close-on-click-overlay="closeOnClickOverlay"
		@change="popupChange"
	>
		<view class="uv-picker">
			<uv-toolbar
				v-if="showToolbar"
				:cancelColor="cancelColor"
				:confirmColor="confirmColor"
				:cancelText="cancelText"
				:confirmText="confirmText"
				:title="title"
				@cancel="cancel"
				@confirm="confirm"
			></uv-toolbar>
			<!-- #ifdef MP-TOUTIAO -->
			<picker-view
				class="uv-picker__view"
				:indicatorStyle="`height: ${$uv.addUnit(itemHeight)}`"
				:value="innerIndex"
				:immediateChange="immediateChange"
				:style="{
					height: `${$uv.addUnit(visibleItemCount * itemHeight)}`
				}"
				@pickend="changeHandler"
			>
			<!-- #endif -->
			<!-- #ifndef MP-TOUTIAO -->
			<picker-view
				class="uv-picker__view"
				:indicatorStyle="`height: ${$uv.addUnit(itemHeight)}`"
				:value="innerIndex"
				:immediateChange="immediateChange"
				:style="{
					height: `${$uv.addUnit(visibleItemCount * itemHeight)}`
				}"
				@change="changeHandler"
			>
			<!-- #endif -->
			<!-- @pickend在這裏為了解決抖音等滾到底不觸發change兼容性問題 -->
				<picker-view-column
					v-for="(item, index) in innerColumns"
					:key="index"
					class="uv-picker__view__column"
				>
					<text
						v-if="$uv.test.array(item)"
						class="uv-picker__view__column__item uv-line-1"
						v-for="(item1, index1) in item"
						:key="index1"
						:style="[{
								height: $uv.addUnit(itemHeight),
								lineHeight: $uv.addUnit(itemHeight),
								fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal'
							},textStyle(index,index1)]"
					>{{ getItemText(item1) }}</text>
				</picker-view-column>
			</picker-view>
			<view
				v-if="loading"
				class="uv-picker--loading"
			>
				<uv-loading-icon mode="circle"></uv-loading-icon>
			</view>
		</view>
	</uv-popup>
</template>

<script>
/**
 * uv-picker
 * @description 選擇器
 * @property {Boolean}			showToolbar			是否顯示頂部的操作欄（默認 true ）
 * @property {String}			title				頂部標題
 * @property {Array}			columns				對象數組，設置每壹列的數據
 * @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}			color		文字顏色（默認 '' ）
 * @property {String}			activeColor		選中文字的顏色（默認 '' ）
 * @property {String | Number}	visibleItemCount	每列中可見選項的數量（默認 5 ）
 * @property {String}			keyName				選項對象中，需要展示的屬性鍵名（默認 'text' ）
 * @property {Boolean}			closeOnClickOverlay	是否允許點擊遮罩關閉選擇器（默認 false ）
 * @property {Array}			defaultIndex		各列的默認索引
 * @property {Boolean}			immediateChange		是否在手指松開時立即觸發change事件（默認 false ）
 * @event {Function} close		關閉選擇器時觸發
 * @event {Function} cancel		點擊取消按鈕觸發
 * @event {Function} change		當選擇值變化時觸發
 * @event {Function} confirm	點擊確定按鈕，返回當前選擇的值
 */
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';
export default {
	name: 'uv-picker',
	emits: ['confirm','cancel','close','change'],
	mixins: [mpMixin, mixin, props],
	computed: {
		// 為了解決支付寶不生效
		textStyle(){
			return (index,index1) => {
				const style = {};
				// #ifndef APP-NVUE 
				style.display = 'block';
				// #endif
				if(this.color) {
					style.color = this.color;
				}
				if(this.activeColor && index1 === this.innerIndex[index]) {
					style.color = this.activeColor;
				}
				return style;
			}
		}
	},
	data() {
		return {
			// 上壹次選擇的列索引
			lastIndex: [],
			// 索引值 ，對應picker-view的value
			innerIndex: [],
			// 各列的值
			innerColumns: [],
			// 上壹次的變化列索引
			columnIndex: 0,
		}
	},
	watch: {
		// 監聽默認索引的變化，重新設置對應的值
		defaultIndex: {
			immediate: true,
			handler(n) {
				this.setIndexs(n, true)
			}
		},
		// 監聽columns參數的變化
		columns: {
			deep: true,
			immediate: true,
			handler(n) {
				this.setColumns(n)
			}
		},
	},
	methods: {
		open() {
			this.$refs.pickerPopup.open();
		},
		close() {
			this.$refs.pickerPopup.close();
		},
		popupChange(e) {
			if(!e.show) this.$emit('close');
		},
		// 獲取item需要顯示的文字，判別為對象還是文本
		getItemText(item) {
			if (this.$uv.test.object(item)) {
				return item[this.keyName]
			} else {
				return item
			}
		},
		// 點擊工具欄的取消按鈕
		cancel() {
			this.$emit('cancel');
			this.close();
		},
		// 點擊工具欄的確定按鈕
		confirm() {
			// 在這裏使用deepClone拷貝後，vue3會自動轉換成原始對象，這樣處理是因為cli項目可能出現不返回值的情況
			this.$emit('confirm', this.$uv.deepClone({
				indexs: this.innerIndex,
				value: this.innerColumns.map((item, index) => item[this.innerIndex[index]]),
				values: this.innerColumns
			}));
			if(this.closeOnClickConfirm) {
				this.close();
			}
		},
		// 選擇器某壹列的數據發生變化時觸發
		changeHandler(e) {
			const {
				value
			} = e.detail
			let index = 0,
				columnIndex = 0
			// 通過對比前後兩次的列索引，得出當前變化的是哪壹列
			for (let i = 0; i < value.length; i++) {
				let item = value[i]
				if (item !== (this.lastIndex[i] || 0)) { // 把undefined轉為合法假值0
					// 設置columnIndex為當前變化列的索引
					columnIndex = i
					// index則為變化列中的變化項的索引
					index = item
					break // 終止循環，即使少壹次循環，也是性能的提升
				}
			}
			this.columnIndex = columnIndex
			const values = this.innerColumns
			// 將當前的各項變化索引，設置為"上壹次"的索引變化值
			this.setLastIndex(value)
			this.setIndexs(value)

			this.$emit('change', {
				value: this.innerColumns.map((item, index) => item[value[index]]),
				index,
				indexs: value,
				// values為當前變化列的數組內容
				values,
				columnIndex
			})
		},
		// 設置index索引，此方法可被外部調用設置
		setIndexs(index, setLastIndex) {
			this.innerIndex = this.$uv.deepClone(index)
			if (setLastIndex) {
				this.setLastIndex(index)
			}
		},
		// 記錄上壹次的各列索引位置
		setLastIndex(index) {
			// 當能進入此方法，意味著當前設置的各列默認索引，即為“上壹次”的選中值，需要記錄，是因為changeHandler中
			// 需要拿前後的變化值進行對比，得出當前發生改變的是哪壹列
			this.lastIndex = this.$uv.deepClone(index)
		},
		// 設置對應列選項的所有值
		setColumnValues(columnIndex, values) {
			// 替換innerColumns數組中columnIndex索引的值為values，使用的是數組的splice方法
			this.innerColumns.splice(columnIndex, 1, values)
			// 拷貝壹份原有的innerIndex做臨時變量，將大於當前變化列的所有的列的默認索引設置為0
			let tmpIndex = this.$uv.deepClone(this.innerIndex)
			for (let i = 0; i < this.innerColumns.length; i++) {
				if (i > this.columnIndex) {
					tmpIndex[i] = 0
				}
			}
			// 壹次性賦值，不能單個修改，否則無效
			this.setIndexs(tmpIndex)
		},
		// 獲取對應列的所有選項
		getColumnValues(columnIndex) {
			// 進行同步阻塞，因為外部得到change事件之後，可能需要執行setColumnValues更新列的值
			// 索引如果在外部change的回調中調用getColumnValues的話，可能無法得到變更後的列值，這裏進行壹定延時，保證值的準確性
			(async () => {
				await this.$uv.sleep()
			})()
			return this.innerColumns[columnIndex]
		},
		// 設置整體各列的columns的值
		setColumns(columns) {
			this.innerColumns = this.$uv.deepClone(columns)
			// 如果在設置各列數據時，沒有被設置默認的各列索引defaultIndex，那麼用0去填充它，數組長度為列的數量
			if (this.innerIndex.length === 0) {
				this.innerIndex = new Array(columns.length).fill(0)
			}
		},
		// 獲取各列選中值對應的索引
		getIndexs() {
			return this.innerIndex
		},
		// 獲取各列選中的值
		getValues() {
			// 進行同步阻塞，因為外部得到change事件之後，可能需要執行setColumnValues更新列的值
			// 索引如果在外部change的回調中調用getValues的話，可能無法得到變更後的列值，這裏進行壹定延時，保證值的準確性
			(async () => {
				await this.$uv.sleep()
			})()
			return this.innerColumns.map((item, index) => item[this.innerIndex[index]])
		}
	},
}
</script>

<style lang="scss" scoped>
	$show-lines: 1;
	@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
	@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
	@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
	.uv-picker {
		position: relative;

		&__view {

			&__column {
				@include flex;
				flex: 1;
				justify-content: center;

				&__item {
					@include flex;
					justify-content: center;
					align-items: center;
					font-size: 16px;
					text-align: center;
					/* #ifndef APP-NVUE */
					display: block;
					/* #endif */
					color: $uv-main-color;

					&--disabled {
						/* #ifndef APP-NVUE */
						cursor: not-allowed;
						/* #endif */
						opacity: 0.35;
					}
				}
			}
		}

		&--loading {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			@include flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(255, 255, 255, 0.87);
			z-index: 1000;
		}
	}
</style>
