<template>
	<view class="">
		<view class="" @click="show = true; hideKeyboard()">
			<s-input v-model="showValue" disabled disabledColor="#ffffff" :placeholder="placeholder">
				<s-icon slot="suffix" name="arrow-right"></s-icon>
			</s-input>

		</view>
		<s-picker :show="show" :defaultIndex="defaultIndex" :columns="columns" @confirm="confirm" closeOnClickOverlay @cancel="cancel" @close="close"
			:keyName="options.label">
		</s-picker>
	</view>
</template>
<script>
	import props from "./props.js";
	/**
	 * select 选择器
	 * description 此组件是一个下拉选择器，默认有边框和样式，是根据s-input进行优化得来的
	 * @property {String | Number}	value 默认选中的值
	 * @property {Array} list 下拉选择数据
	 * @property {Object} options   label下拉选择器显示的值，value下拉选择绑定的值
	 * @event {Function}  confirm 点击确定回调事件
	 * @event {Function} cancel 点击取消回调事件
	 * @event {Function}  close 点击遮罩层关闭回调事件
	 */
	export default {
		name: "s-select",
		mixins: [uni.$s.mpMixin, uni.$s.mixin, props],
		data() {
			return {
				sex: '',
				show: false,
				defaultIndex: []
			}
		},
		computed: {
			columns() {
				return [this.list]
			},
			showValue: {
				get() {
					if (this.value || this.value === '0' || this.value === 0) {

						let defaults = this.list.find(item => item[this.options.value] == this.value)
						let indexDefault = this.list.findIndex(item=>item[this.options.value] == this.value)
						// console.log(indexDefault)
						this.defaultIndex = [indexDefault]
						return defaults[this.options.label]
						// console.log(defaults)
					}
					// console.log(this.value)
				},
				set(val) {
					
					// this.showValue = val
					// return val
				}
			}
		},
		methods: {
			sexSelect(e) {
				this.sex = e.name
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			cancel() {
				this.show = false
			},
			close() {
				// console.log('cancel', uni.$s,this.list);
				this.show = false
			},
			confirm(val) {
				this.showValue = val.value[0][this.options.label]
				let indexDefault = this.list.findIndex(item=>item[this.options.value] == val.value[0][this.options.value])
				// console.log(indexDefault)
				this.defaultIndex = [indexDefault]
				this.$emit("input", val.value[0][this.options.value])
				this.$emit("confirm", val)
				this.show = false
			}
		},
	}
</script>
<style lang='scss' scoped>

</style>
