<template>
	<view :class="['u-theme-' + theme, 'u-dropdown-item']" v-if="active" @touchmove.stop.prevent="() => {}" @tap.stop.prevent="() => {}">
		<block v-if="!$slots.default && !$slots.$default">
			<scroll-view scroll-y="true" :style="{
				height: $u.addUnit(height)
			}">
				<view class="u-dropdown-item__options" @touchmove.stop.prevent>
					<view class="u-tips u-border-bottom" v-if="tips.text" :style="[tipsStyle]">
						{{tips.text}}
					</view>
						<scroll-view scroll-y="true" :class="[tips.text ? 'u-action-sheet-tips' : 'u-action-sheet']">
							<block v-for="(item, index) in options" :key="index" @touchmove.stop.prevent>
								<view
									@tap="itemClick(index, item[props.value])" 
									:style="[itemStyle(item[props.value])]" 
									class="u-action-sheet-item u-line-1" 
									:class="[(index < options.length - 1 || customProps.enable)? 'u-border-bottom' : '', options[index].disabled ? 'u-action-sheet-item__disabled': '',{ 'active' : getValue() == item[props.value]}]"
									:hover-stay-time="150"
								>
									<text class="u-action-sheet-item__text u-line-1">{{item[props.label]}}</text>
									<text class="u-action-sheet-item__subtext u-line-1" v-if="item[props.subText]">{{item[props.subText]}}</text>
								</view>
							</block>
							<block v-if="customProps.enable">
								<view
									@tap.self="itemClick(-1, customText)"
									class="u-action-sheet-item u-line-1"
									:hover-stay-time="150"
								>
									<input :class="[{ 'active' : getValue() == customText}]" class="u-action-sheet-item__text" style="width: 60%;height: 48rpx;" v-model="customText" @confirm="itemClick(-1, customText)" type="text" input-align="center"  :maxlength="customProps.length || 20" :placeholder="customProps.placeholder || '请输入'" />
								</view>
							</block>
							<block v-if="options.length === 0">
								<view
									@touchmove.stop.prevent
									class="u-action-sheet-item u-line-1 u-action-sheet-item__disabled"
									:hover-stay-time="150"
								>
									<text>{{emptyText}}</text>
								</view>
							</block>
						</scroll-view>
					<view @touchmove.stop.prevent class="u-actionsheet-cancel u-action-sheet-item" hover-class="u-hover-class"
						:hover-stay-time="150" v-if="cancelBtn" @tap="close">{{cancelText}}</view>
					<!-- <u-cell-group>
						<u-cell-item @click="cellClick(item[props.value])" :class="['u-cell__'+ isActive(item[props.value])]" :arrow="false" :title="item[props.label]" v-for="(item, index) in options"
						 :key="index" :title-style="activeColor ? {
							color: getValue() == item[props.value] ? activeColor : inactiveColor
						} : null">
							<u-icon v-if="getValue() == item[props.value]" name="checkbox-mark"  :color="activeColor ? activeColor : null" size="32"></u-icon>
						</u-cell-item>
					</u-cell-group> -->
				</view>
			</scroll-view>
		</block>
		<view  v-else style="border-radius:10px">
			<slot />
		</view>
	</view>
</template>

<script>
	/**
	 * dropdown-item 下拉菜单
	 * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
	 * @tutorial http://uviewui.com/components/dropdown.html
	 * @property {String | Number} v-model 双向绑定选项卡选择值
	 * @property {String} title 菜单项标题
	 * @property {Array[Object]} options 选项数据，如果传入了默认slot，此参数无效
	 * @property {Boolean} disabled 是否禁用此选项卡（默认false）
	 * @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
	 * @property {String | Number} height 弹窗下拉内容的高度(内容超出将会滚动)（默认auto）
	 * @example <u-dropdown-item title="标题"></u-dropdown-item>
	 */
	export default {
		name: 'u-dropdown-item',
    emits: ["update:modelValue", "input", "change"],
		props: {
			// 当前选中项的value值
			value: {
				type: [Number, String, Array],
				default: ''
			},
			modelValue: {
				type: [Number, String, Array],
				default: ''
			},
			// 菜单项标题
			title: {
				type: [String, Number],
				default: ''
			},
			// 选项数据，如果传入了默认slot，此参数无效
			options: {
				type: Array,
				default () {
					return []
				}
			},
			// 是否禁用此菜单项
			disabled: {
				type: Boolean,
				default: false
			},
			// 下拉弹窗的高度
			height: {
				type: [Number, String],
				default: 'auto'
			},
			activeIcon: {
				type: String,
				default: ''
			},
			inActiveIcon: {
				type: String,
				default: ''
			},
			iconWidth: {
				type: [Number, String],
				default: '40'
			},
			iconHeight: {
				type: [Number, String],
				default: '40'
			},
			iconStyle: {
				type: Object,
				default () {
					return {}
				}
			},
			iconMode: {
				type: String,
				default: 'scaleToFill'
			},
			customProps: {
				type: Object,
				default() {
					return {
						enable: false,
						length: 20,
					}
				}
			}
		},
		data() {
			return {
				active: false, // 当前项是否处于展开状态
				activeColor: '', // 激活时左边文字和右边对勾图标的颜色
				inactiveColor: '', // 未激活时左边文字和右边对勾图标的颜色
				theme: 'normal',
				props: {
					label: 'label', // 显示名称
					value: 'value', // 唯一标识
					subText: 'subText'
				}, //自定义节点名称和code
				tips: {},
				cancelBtn: true,
				cancelText: '取消',
				emptyText: '暂无数据',
				customText: '',
			}
		},
		computed: {
			// 监听props是否发生了变化，有些值需要传递给父组件u-dropdown，无法双向绑定
			propsChange() {
				return `${this.title}-${this.disabled}`;
			},
			// isActive() {
			// 	return (value)=>{
			// 		return this.getValue() == value ? 'active' : 'inactive';
			// 	}
			// },
			// 操作项目的样式
			itemStyle() {
				return (value) => {
					let style = {};
					if(this.activeColor && value === this.getValue()) style.color = this.activeColor
					return style;
				}
			},
		},
		watch: {
			propsChange(n) {
				// 当值变化时，通知父组件重新初始化，让父组件执行每个子组件的init()方法
				// 将所有子组件数据重新整理一遍
				if (this.parent) this.parent.init();
			}
		},
		created() {
			// 父组件的实例
			this.parent = false;
		},
		methods: {
			getValue(){
				// #ifndef VUE3
				return this.value;
				// #endif

				// #ifdef VUE3
				return this.modelValue;
				// #endif
			},
			init() {
				// 获取父组件u-dropdown
				let parent = this.$u.$parent.call(this, 'u-dropdown');
				if (parent) {
					this.parent = parent;
					// 将子组件的激活颜色配置为父组件设置的激活和未激活时的颜色
					if (parent.activeColor) this.activeColor = parent.activeColor;
					if (parent.inactiveColor) this.inactiveColor = parent.inactiveColor;
					if (parent.cTheme) this.theme = parent.cTheme;
					if (parent.props) Object.assign(this.props, parent.props);
					if (parent.tips) Object.assign(this.tips, parent.tips);
					if (parent.cancelBtn) this.cancelBtn = parent.cancelBtn;
					if (parent.cancelText) this.cancelText = parent.cancelText;
					if (parent.emptyText) this.emptyText = parent.emptyText;
					// 将本组件的this，放入到父组件的children数组中，让父组件可以操作本(子)组件的方法和属性
					// push进去前，显判断是否已经存在了本实例，因为在子组件内部数据变化时，会通过父组件重新初始化子组件
					let exist = parent.children.find(val => {
						return this === val;
					})
					if (!exist) parent.children.push(this);
					if (parent.children.length == 1) this.active = true;
					// 父组件无法监听children的变化，故将子组件的title，传入父组件的menuList数组中
					if (this.title) {
						// 如果有title,就是普通模式
						parent.menuList.push({
							title: this.title,
							disabled: this.disabled
						});
					} else {
						// 如果title是null的话，则为icon模式
						parent.menuList.push({
							title: this.title,
							disabled: this.disabled,
							activeIcon: this.activeIcon,
							inActiveIcon: this.inActiveIcon,
							iconWidth: this.iconWidth,
							iconHeight: this.iconHeight,
							iconStyle: this.iconStyle,
							iconMode: this.iconMode
						});
					}
				}
			},
			// cell被点击
			// cellClick(value) {
			// 	// 修改通过v-model绑定的值
			// 	this.$emit('input', value);
			// 	this.$emit("update:modelValue", value);
			// 	// 通知父组件(u-dropdown)收起菜单
			// 	this.parent.close();
			// 	// 发出事件，抛出当前勾选项的value
			// 	this.$emit('change', value);
			// },
			// 点击某一个item
			itemClick(index, value) {
				// disabled的项禁止点击
				if(index !== -1 && this.options[index].disabled) return;
				// 修改通过v-model绑定的值
				this.$emit('input', value);
				this.$emit("update:modelValue", value);
				// 通知父组件(u-dropdown)收起菜单
				this.parent.close();
				// 发出事件，抛出当前勾选项的value
				this.$emit('change', value);
			},
			// 点击取消按钮
			close() {
				this.parent.close();
			},
		},
		mounted() {
			this.init();
		}
	}
</script>

<style scoped lang="scss">
	@import "../../libs/css/style.components.scss";
@include themify($themes) {
	.u-dropdown-item__options {
		padding: 0 16rpx 24rpx;
		.u-tips {
				font-size: themed('font-size-14');
				text-align: center;
				padding: 34rpx 0;
				line-height: 1;
				color: themed('u-main-color');
				background-color: #ffffff;
				border-radius: themed('grid-size-12') themed('grid-size-12') 0 0;
			}
			.u-action-sheet{
				max-height: 880rpx;
				border-radius: themed('grid-size-12');
				background-color: #ffffff;
				::v-deep .uni-scroll-view {
					.uni-scroll-view {
						border-radius: themed('grid-size-12');
					}
				}
			}
			.u-action-sheet-tips{
				max-height: 880rpx;
				border-radius: 0 0 themed('grid-size-12') themed('grid-size-12');
				background-color: #ffffff;
				::v-deep .uni-scroll-view {
					.uni-scroll-view {
						border-radius: themed('grid-size-12');
					}
				}
			}

			.u-action-sheet-item {
				@include vue-flex;
				justify-content: center;
				align-items: center;
				color: themed('u-main-color');
				font-size: themed('font-size-14');
				padding: themed('grid-size-12') themed('grid-size-24');
				line-height: themed('font-size-24');
				flex-direction: column;
				&__disabled{
					color: themed('u-tips-color');
				}
				&.active {
					color: themed('u-type-primary');
				}
				&__text {
					width: 100%;
					// color: themed('u-main-color');
					font-size: themed('font-size-14');
					text-align: center;
					// overflow: hidden;
					// text-overflow: ellipsis;
					// white-space: nowrap;
					&.active {
						color: themed('u-type-primary');
					}
				}
				&__subtext {
					font-size: themed('font-size-12');
					color: themed('u-tips-color');
					margin-top: 20rpx;
					width: 100%;
					text-align: center;
					// overflow: hidden;
					// text-overflow: ellipsis;
					// white-space: nowrap;
				}
			}

			.u-gab {
				height: 12rpx;
				background-color: rgb(234, 234, 236);
			}

			.u-actionsheet-cancel {
				color: themed('u-main-color');
				margin-top: 24rpx;
				border-radius: 24rpx;
				background-color: #ffffff;
			}
			// 重置背景色样式
			::v-deep .u-drawer-bottom {
				background-color: initial;
			}
		}
	}
</style>
