<template>
  <div class="select">
    <van-field
		class="fieldVan"
      v-model="result"
      v-bind="$attrs"
      :disabled="disabled"
	  ref="picker"
      readonly
      is-link
      @click="onShow"
    />
    <van-popup v-model="show" position="bottom" >
      <van-picker
			  show-toolbar
		value-key="text"
		class="pickerVan"
        :columns="columns"
		:default-index="defaultIndex"
        :title="$attrs.label"
        @cancel="show = !show"
		@confirm = "onConfirm"
        @change="onChange"
      />
    </van-popup>
  </div>
</template>

<script>
  export default {
    model: {
      prop: 'selectValue'
    },
    props: {
      columns: {
        type: Array
      },
      selectValue: {
        type: String
      },
      disabled: {
        type: Boolean
      },
		defaultIndex:{
      	  type:Number
		}
    },
    data() {
      return {
        show: false,
        result: this.selectValue,
      }
    },
    methods: {
      onShow() {
        if (!this.disabled) {
          this.show = !this.show
        }
      },
		onConfirm(item,index){
			if(Array.isArray(item)){
				this.result = item[1];
			}else{
				this.result = item;
			}
			this.show = !this.show
		},
      onChange(picker, item) {

      },
		changeValue(value){
			this.result = value;
		}
    },
    watch: {
      selectValue: function (newVal) {
        this.value = newVal
      },
      result(newVal) {
        this.$emit('input', newVal)
      }
    },
	  mounted(){
    	this.defaultIndex = this.defaultIndex;
	  }
  }
</script>
<style>
  .select .van-field .van-cell__right-icon {
    transform: rotate(90deg);
    position: absolute;
    right: 22px;
    line-height: 30px;
    height: 30px;
  }

  .select .van-cell {
    display: flex;
    align-items: center;
  }
 .van-picker .van-picker-column{
		overflow: unset !important;
		width: calc(100% - 64px) !important;
	}
  .van-datetime-picker .van-picker-column{
		overflow: hidden !important;
	}
	.select .van-field__control{
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>
