<template>
  <div class="van-hairline--bottom">
    <van-field 
        :label="proofSubItem.label" 
        readonly
        :value="value.value"
        placeholder="点击选择" @click="showPicker = true"/>
    <van-popup v-model="showPicker" position="bottom" round >
      <van-picker
        show-toolbar
        :columns="proofSubItem.options"
        @cancel="showPicker = false"
        @change="onChange"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Field, Picker, Popup} from 'vant';
@Component({
  name: 'TypeFive',
  components: {
    [Field.name]: Field,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
  },
})
export default class TypeFive extends Vue {
  @Prop()
  private proofSubItem: any;
  @Prop()
  private value!: any;
  private showPicker: boolean = false;
  private onChange(picker: any, value: string , index: number) {
    // this.$emit('update:value',value);
  }
  private onConfirm(value: string , index: number) {
    this.showPicker = false;
    this.$emit('update:value', {...this.value, value});

  }

}
</script>
