<template>
	<hg-popup :show="isShow" @close="cancel()" :customStyle="_customStyle">
		<view class="hg-picker">
			<view class="hg-picker-head">
				<view class="hg-picker-head-t1" @click="cancel()">取消</view>
				<view class="hg-picker-head-t2">
					<text>{{title}}</text>
				</view>
				<view :class="['hg-picker-head-t3',{'hg-picker-head-t3-disabled':disabled}]" @click="confirm">确定</view>
			</view>
			<picker-view :value="listSelect" class="hg-picker-info" indicator-class="hg-picker-info-indicator"
				:mask-style="maskStyle" @change="change" @pickstart="disabled=true" @pickend="disabled=false">

				<picker-view-column v-if="!_isColumnList">
					<view v-for="(item,index) in range" :key="index"
						:class="['hg-picker-info-col',{'hg-picker-info-col-run':isRun(item,index)}]">{{getText(item)}}
					</view>
				</picker-view-column>
				<template v-else>
					<picker-view-column v-for="(list,i) in range" :key="i">
						<view v-for="(item,index) in list" :key="index"
							:class="['hg-picker-info-col',{'hg-picker-info-col-run':isRun(item,index,i)}]">
							{{getText(item)}}
						</view>
					</picker-view-column>
				</template>
			</picker-view>
		</view>
	</hg-popup>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: "",
			},
			range: {
				type: Array,
				default: () => {
					return []
				}
			},
			rangeKey: {
				type: String,
				default: "label"
			}
		},
		data() {
			return {
				disabled: false,
				isShow: false,
				maskStyle: "background: rgba(51, 51, 51, 0.0);",
				resolve: null,
				// modelSelect: null,
				listSelect: []
			};
		},
		created: function() {},
		mounted() {},
		computed: {
			_customStyle() {
				return {
					background: 'transparent'
				}
			},
			_isColumnList() {
				const firstObj = this.range[0]
				if (Array.isArray(firstObj)) {
					return true
				}
				return false
			},
			_modelSelect() {
				let modelSelect
				if (this._isColumnList) {
					const list = []
					this.range.forEach((item, index) => {
						list.push(item[(this.listSelect[index] || 0)])
					})
					modelSelect = list
				} else {
					modelSelect = this.range[(this.listSelect[0] || 0)]
				}
				return modelSelect
			}
		},
		methods: {
			change(e) {
				const value = e?.detail?.value
				if (!value) {
					return
				}
				const list = []
				for (let i = 0; i < value.length; i++) {
					const val = value[i]
					list.push(val || 0)
				}
				this.listSelect = list
				this.$emit('columnchange', {
					index: value,
					value: this._modelSelect
				})
			},
			isRun(item, index, i) {
				if (this._isColumnList) {
					return (this.listSelect[i] || 0) == index
				}
				return (this.listSelect[0] || 0) == index
			},
			getText(item) {
				if (typeof item == "string") {
					return item
				}
				return item[this.rangeKey]
			},
			getColumnText(item) {
				console.log(item)
				return '999'
			},
			show() {
				this.isShow = true
				let _this = this
				return new Promise(function(resolve, reject) {
					_this.resolve = resolve
				})
			},
			cancel() {
				this.isShow = false
				if (this.resolve) {
					this.resolve()
				}
			},
			confirm(e) {
				this.isShow = false
				if (this.disabled) {
					return
				}
				// if (!this.modelSelect) {
				// 	return
				// }
				this.$emit('input', this._modelSelect)
				if (this.resolve) {
					this.resolve(this._modelSelect)
				}
			},
		}
	}
</script>

<style lang="scss">
	.hg-picker {
		display: flex;
		flex-direction: column;
		height: 660rpx;
		background: linear-gradient(180deg, #C3E2FF 0%, #FFFFFF 51%, #FFFFFF 100%);
		border-radius: 16rpx 16rpx 0px 0px;

		&-head {
			padding: 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1rpx solid rgba(51, 51, 51, 0.10);

			&-t1 {
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(51, 51, 51, 0.5);
			}

			&-t2 {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;

				>text {
					font-size: 34rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
				}
			}

			&-t3 {
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #1A8FFF;

			}

			&-t3-disabled {
				color: rgba(51, 51, 51, 0.5) !important;
			}
		}

		&-info {
			flex: 1;
			margin: 30rpx;
			// padding: 30rpx;

			&-indicator {
				// background: red;
				height: 110rpx;
				// font-size: 42rpx;
				// font-family: PingFangSC-Medium, PingFang SC;
				// font-weight: 500;
				// color: #333333;
			}

			// background: rgba(51, 51, 51, 0.10);
			&-col {
				font-size: 36rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(51, 51, 51, 0.4);
				// background: rgba(51, 51, 51, 0.10);
				display: flex;
				align-items: center;
				justify-content: center;
				// background: red;
			}

			&-col-run {
				font-size: 42rpx !important;
				font-weight: 500 !important;
				color: rgba(51, 51, 51, 1) !important;
			}

			&-mask {
				background: rgba(51, 51, 51, 0.0);
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>