<template>
	<!-- v-model -->

	<!-- 使用组件 -->
	<!-- <vvSelect placeholder="请选择所属类别" :list="categorys" label="name" valueKey="id" @change="pickerChange"></vvSelect> -->

	<picker :ref="refName" @change="bindPickerChange" :value="index" :range="list" :disabled="disabled" :range-key="label"
		class="vv-selectbox">
		<slot />
		<view v-if="isText" class="text-ellipsis" >{{checkLabel ? checkLabel : placeholder}}</view>
		<view v-else class="vv-input__body text-right" :class="{'disabled': disabled}">
			<view class="vv-input__control">
				<text v-if="checkLabel" :class="{'disabled': disabled}">{{checkLabel}}</text>
				<text class="vv-input__placeholder" v-else style="color: #999;font-size: 12px;">{{placeholder}}</text>
			</view>
			<uni-icons type="bottom" size="14" color="#808080"></uni-icons>
		</view>
	</picker>
</template>

<script>
	/**
	 * vv-select 选择
	 * @description picker再封装
	 * @property {String} valueKey 绑定的key
	 * @property {String} label 绑定的label
	 * @property {Array} list 数据
	 * @property {Boolean} disabled 是否禁用
	 * @event {Function} change 
	 */

	export default {
		name: 'vv-select',
		props: {
			refName: {
				type: String,
				default: 'vvSelect'
			},
			value: {
				type: [String, Number]
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			valueKey: {
				type: String,
				default: 'id'
			},
			label: {
				type: String,
				default: 'name'
			},
			list: {
				type: Array,
				default () {
					return []
				}
			},
			isText: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				index: 0,
				checkLabel: ''
			}
		},
		watch: {
			value: {
				handler: function(newVal, oldVal) {
					let _self = this;
				// debugger
					//if (newVal == oldVal) return;
					setTimeout(function() {
						// 在这里写要执行的代码
						_self.checkItemByKey(_self.value)
					}, 300);

					//debugger
					// if (this.value) {
					// 	this.checkItemByKey(this.value)
					// } else {
					// 	this.$emit('change', '')
					// }

				},
				immediate: true,
				deep: true //对象内部的属性监听，也叫深度监听
			}
		},
		created() {
			// 首次选中
		},
		methods: {
			checkItemByKey: function(key) {

				var index = this.list.findIndex((item, i) => { return item[this.valueKey] == key });
				// 首次找索引
			//	index >= 0 && this.checkItemByIndex(index); // 回显时暂时不需要赋值
			index >= 0 ;
				var checkItem = this.list.find((item, i) => { return item[this.valueKey] == key });
				console.log(checkItem)
				//	if (!checkItem) return;
				//debugger
				if (!checkItem) {
					this.checkLabel = '';
					//this.$emit('change', '', this.checkLabel)// 回显时暂时不需要赋值
					return false;
				}

				this.checkLabel = checkItem[this.label]; // 值
				//this.$emit('change', checkItem[this.valueKey], this.checkLabel)// 回显时暂时不需要赋值

			},
			checkItemByIndex: function(index) {
				//	if (this.index == index) return;
				//debugger
				this.index = index;
				var checkItem = this.list.find((item, i) => { return i == this.index });
				this.checkLabel = checkItem[this.label]; // 值
				//	if(checkItem[this.valueKey]==)

				// 返回这个值到父级
				//	this.$emit('change', checkItem[this.valueKey])
				this.$emit('input', checkItem[this.valueKey]);
				this.$emit('value', checkItem[this.valueKey])
				this.$emit('on-change', checkItem[this.valueKey], this.checkLabel)
			},
			bindPickerChange: function(e) {

				this.checkItemByIndex(e.target.value);
			}
		}
	}
</script>
<style lang="scss" scoped>
	.disabled {
	   //color: #808080;
	   background: #d8d8d8;
	 }

	.vv-selectbox {
		line-height: 60rpx;

		.vv-input__control {}

		.text-right {
			padding: 0 10px 0 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			line-height: 70rpx;

		}
	}
</style>