<template>
		<u-popup
			:class="['u-theme-' + cTheme]"
			mode="bottom"
			:custom-style="customStyle"
			:border-radius="0"
			v-model="popupValue"
			:popup="false"
			:maskCloseAble="maskCloseAble"
			length="100%"
			:safeAreaInsetBottom="true"
			@close="popupClose"
			:z-index="uZIndex"
		>
			<view class="sign-box">
				<image
					class="sign"
					src="../../assets/sign.svg"
					mode="widthFix"
				></image>
			</view>
			<u-search
				v-model="keyword"
				:gaussian-blur="true"
				:theme="cTheme"
				style="padding: 24rpx 32rpx"
				@custom="custom"
				@search="search"
				shape="round"
				:clearabled="true"
				:show-action="true"
				:action-text="keyword ? '搜索' : '取消'"
			></u-search>
			<scroll-view class="u-list" :style="[listStyle]" scroll-y>
				<view
					class="u-list-item"
					v-for="(item, index) in listTemp"
					:key="index"
					@tap="itemClick(item)"
				>
					<view class="u-list-item-padding">
						<view class="u-list-item-label" :style="[labelStyle]">{{
							item[labelName]
						}}</view>
					</view>
				</view>
				<view class="tips" v-if="isSearch"
					>共搜索到 {{ searchNum }} 条数据</view
				>
			</scroll-view>
		</u-popup>
</template>

<script>
/**
 * List 列表
 * @description 该组件为列表组件
 * @tutorial https://www.uviewui.com/components/list.html
 * @property {String ｜ Number}	scrollTop			设置竖向滚动条位置（默认 0 ）
 * @property {String ｜ Number}	height				列表的高度 （默认 0 ）
 * @property {String ｜ Number}	width				列表宽度 （默认 0 ）
 * @property {Object}			customStyle			定义需要用到的外部样式
 *
 * @example <u-select-list @scrolltolower="scrolltolower"></u-select-list>
 */
export default {
	name: "u-select-list",
	emits: ["update:modelValue", "input", "click"],
	props: {
		// visible: {
		// 	// 组件是否可见
		// 	type: Boolean,
		// 	default: false
		// },
		// 通过双向绑定控制组件的弹出与收起
		value: {
			type: Boolean,
			default: false
		},
		modelValue: {
			type: Boolean,
			default: false
		},
		// 列表的高度
		height: {
			type: [String, Number],
			default: 0
		},
		// 列表宽度
		width: {
			type: [String, Number],
			default: 0
		},
		// 弹出的z-index值
		zIndex: {
			type: [String, Number],
			default: 0
		},
		// 点击遮罩是否可以关闭actionsheet
		maskCloseAble: {
			type: Boolean,
			default: true
		},
		customStyle: {
			type: Object,
			default() {
				return {};
			}
		},
		list: {
			type: Array,
			default() {
				return [];
			}
		},
		labelStyle: {
			type: Object,
			default: () => {}
		},
		// 自定义label属性名
		labelName: {
			type: String,
			default: "name"
		},
		// 关怀模式: normal, care(fpi新增)
		theme: {
			type: String,
			default: ""
		}
	},
	watch: {
		value(v1, v2) {
			this.popupValue = v1;
		},
		modelValue(v1, v2) {
			this.popupValue = v1;
		},
		keyword(newVal, oldVal) {
			// 当搜索值是从有到空时, 调用搜索接口
			if (newVal === "" && oldVal !== "") {
				this.search("");
			}
		},
		list: {
			handler() {
				this.init();
			},
			deep: true
		}
	},
	data() {
		return {
			sys: uni.$u.sys(),
			index: 0,
			show: true,
			keyword: "",
			actionText: "取消",
			listTemp: [], // 列表数据
			popupValue: false,
			isSearch: false, //是否是搜索状态
			searchNum: 0 //搜索的数量
		};
	},
	computed: {
		listStyle() {
			const style = {},
				addUnit = uni.$u.addUnit;
			if (this.width != 0) style.width = addUnit(this.width);
			if (this.height != 0) style.height = addUnit(this.height);
			// 如果没有定义列表高度，则默认使用屏幕高度
			console.log(this.sys);
			if (!style.height)
				style.height = addUnit(this.sys.windowHeight - 64, "px");
			return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
		},
		uZIndex() {
			// 如果用户有传递z-index值，优先使用
			return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
		},
		cTheme() {
			return this.theme || (uni.$u || {}).theme;
		}
	},
	created() {
		this.init();
	},
	mounted() {},
	methods: {
		init() {
			this.listTemp = this.$u.deepClone(this.list);
		},
		// 弹窗关闭
		popupClose() {
			// console.log("关闭了");
			// this.$emit("update:visible", false);
			this.$emit("input", false);
			this.$emit("update:modelValue", false);
			this.isSearch = false;
			this.searchNum = 0;
		},
		// 点击某一个item
		itemClick(item) {
			this.$emit("click", item);
			// this.$emit("update:visible", false);
			this.$emit("input", false);
			this.$emit("update:modelValue", false);
		},
		custom(value) {
			// console.log("取消了");
			if (this.keyword) {
				this.search(value);
			} else {
				this.init();
				// this.$emit("update:visible", false);
				this.$emit("input", false);
				this.$emit("update:modelValue", false);
				this.isSearch = false;
				this.searchNum = 0;
			}
		},
		search(value) {
			if (value) {
				let data = [];
				let list = this.$u.deepClone(this.list);
				list.forEach(item => {
					if (item[this.labelName].indexOf(value) !== -1) {
						data.push(item);
					}
				});
				this.listTemp = data;
				this.isSearch = true;
				this.searchNum = data.length || 0;
			} else {
				this.init();
				this.isSearch = false;
				this.searchNum = 0;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";

@include themify($themes) {
	.sign-box {
		display: flex;
		align-content: center;
		justify-content: center;
		padding-top: themed("grid-size-8");
		.sign {
			width: themed("grid-size-28");
			height: themed("grid-size-4");
		}
	}
	.u-list {
		&-item {
			padding-left: themed("grid-size-20");
			&-padding {
				padding: themed("grid-size-14") themed("grid-size-20")
					themed("grid-size-14") 0;
				@include vue-flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid
					rgba($color: themed("u-border-color"), $alpha: 0.5);
			}
			&-label {
				font-family: PingFangSC-Regular;
				color: themed("u-main-color");
				font-size: themed("font-size-14");
				line-height: normal;
				font-weight: 400;
			}
		}
		.tips {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: themed("font-size-12");
			color: themed("u-tips-color");
			padding: themed("grid-size-12") 0;
			text-align: center;
		}
	}
}
</style>
