import { defineComponent, ref, computed, type PropType, useModel } from "vue";
import { useConfig, useCore } from "../../hooks";
import { parsePx } from "../../utils";
import { debounce } from "lodash-es";

export default defineComponent({
	name: "cl-search-key",

	props: {
		// 绑定值
		modelValue: String,
		// 选中字段
		field: {
			type: String,
			default: "keyWord"
		},
		// 字段列表
		fieldList: {
			type: Array as PropType<Array<{ label: string; value: string }>>,
			default: () => []
		},
		// 搜索时的钩子
		onSearch: Function,
		// 输入框占位内容
		placeholder: String,
		// 宽度
		width: {
			type: [String, Number],
			default: 280
		},
		// 是否实时刷新
		refreshOnInput: Boolean
	},

	emits: ["update:modelValue", "change", "field-change"],

	setup(props, { emit, expose }) {
		const { crud } = useCore();
		const { style } = useConfig();

		// 选中字段
		const selectField = ref(props.field);

		// 加载状态
		const loading = ref(false);

		// 文字提示
		const placeholder = computed(() => {
			if (props.placeholder) {
				return props.placeholder;
			} else {
				const item = props.fieldList.find((e) => e.value == selectField.value);

				if (item) {
					return crud.dict.label.placeholder + item.label;
				} else {
					return crud.dict.label.searchKey;
				}
			}
		});

		// 搜索内容
		const value = useModel(props, "modelValue");

		// 锁
		let lock = false;

		// 搜索
		function search() {
			if (!lock) {
				const params: obj = {};

				props.fieldList.forEach((e) => {
					params[e.value] = undefined;
				});

				async function next(newParams?: obj) {
					loading.value = true;

					await crud.refresh({
						page: 1,
						...params,
						[selectField.value]: value.value || undefined,
						...newParams
					})
						.catch(err => {
							console.error(err);
						})

					loading.value = false;
				}

				if (props.onSearch) {
					props.onSearch(params, { next });
				} else {
					next();
				}
			}
		}

		// 回车搜索
		function onKeydown({ key }: KeyboardEvent) {
			if (key === "Enter") {
				search();
			}
		}

		// 监听变化
		function onChange(val: string) {
			if (!props.refreshOnInput) {
				search();
				lock = true;

				setTimeout(() => {
					lock = false;
				}, 300);

				emit("change", val);
			}
		}

		// 监听输入
		const onInput = debounce((val: string) => {
			emit("change", val);

			if (props.refreshOnInput) {
				search();
			}
		}, 300);

		// 监听字段选择
		function onFieldChange() {
			emit("field-change", selectField.value);
			value.value = undefined;
		}

		expose({
			search
		});

		return () => {
			return (
				<div class="cl-search-key">
					<el-select
						class="cl-search-key__select"
						size={style.size}
						v-model={selectField.value}
						v-show={props.fieldList.length > 0}
						onChange={onFieldChange}>
						{props.fieldList.map((e, i) => (
							<el-option key={i} label={e.label} value={e.value} />
						))}
					</el-select>

					<div class="cl-search-key__wrap" style={{ width: parsePx(props.width) }}>
						<el-input
							v-model={value.value}
							size={style.size}
							placeholder={placeholder.value}
							onKeydown={onKeydown}
							onChange={onChange}
							onInput={onInput}
							clearable
						/>

						<el-button
							size={style.size}
							type="primary"
							loading={loading.value}
							onClick={search}>
							{crud.dict.label.search}
						</el-button>
					</div>
				</div>
			);
		};
	}
});