<template>
	<u-picker ref="picker" :show="show" :columns="columns" @confirm="onConfirm" @cancel="onClose"
		keyName="valueName" :defaultIndex="defaultIndex" immediate-change>
	</u-picker>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		props: {
			value: [String, Number, Boolean],
			dict: String,
			visible: {
				type: Boolean,
				default: false
			},
			options: {
				type: Array,
				default: () => [],
			},
			excludes: Array,
		},
		data() {
			return {
				show: this.visible,
				defaultIndex: []
			}
		},
		computed: {
			...mapGetters(['dictInfo', 'dictList']),
			columns({
				dictOptions
			}) {
				return [dictOptions.map(item => item.valueName)];
			},
			dictOptions({
				dict,
				dictList,
				excludes = [],
				options = []
			}) {
				let hash = {};
				const matchDictList = dictList(dict) || [];
				return [...matchDictList, ...options]
					.reduce((result, item) => {
						if (!hash[`${item.valueCode}`]) {
							hash[`${item.valueCode}`] = true;
							if (`${item.valueCode || ''}` && `${item.valueName || ''}` && !excludes.includes(item
									.valueCode)) {
								result.push(item);
							}
						}
						return result; // 返回结果数组
					}, [])
					.sort((a, b) => a.sort - b.sort);
			},
		},
		watch: {
			value: {
				handler(val) {
					this.$nextTick(() => {
						this.refresh(this.value);
					})
				},
				immediate: true,
			},
			visible(val) {
				this.show = val
			}
		},

		methods: {
			refresh(value) {
				const matchIndex = this.dictOptions.findIndex(item => item.valueCode === value);
				const defaultIndex = matchIndex > -1 ? matchIndex : 0;
				this.defaultIndex = [defaultIndex]
			},
			onClose() {
				this.show = false
				this.$emit('update:visible', false)
			},
			onConfirm(item) {
				const {
					indexs
				} = item || {}
				const target = this.dictOptions || []
				const valueMap = target[indexs] || {}
				this.$emit('change', valueMap.valueCode)
				this.onClose()
			}
		}
	}
</script>

<style lang="scss">
	.u-popup__content {
		border-top-left-radius: 4% !important;
		border-top-right-radius: 4% !important;
	}
</style>
