<template>
  <div>
    <van-cell is-link @click="showPopup">{{ currentValue }}</van-cell>
    <van-popup v-model="show" position="bottom" :close-on-click-overlay="false">
      <van-picker
        :title="title"
        show-toolbar
        :columns="columns"
        :default-index="defaultIndex"
        @confirm="confirm"
        @cancel="cancel"
      />
    </van-popup>
  </div>
</template>

<script>
import { Cell, Popup, Picker } from 'vant';
export default {
  components: {
    vanCell: Cell,
    vanPopup: Popup,
    vanPicker: Picker
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    columns: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      show: false,
      currentValue: '',
      defaultIndex: '0'
    }
  },
  created() {
    if(!this.value) {
      this.currentValue = "请选择"
    } else {
      this.currentValue = this.value
      this.columns.find((item, index) => {
        if (item === this.currentValue) {
          this.defaultIndex = index
        }
      })
    }
  },
  watch: {
    value(val) {
      this.currentValue = val
      this.columns.find((item, index) => {
        if (item === this.currentValue) {
          this.defaultIndex = index
        }
      })
    },
  },
  methods: {
    showPopup() {
      this.show = true
    },
    change() {
    },
    confirm(value) {
      this.show = false
      this.currentValue = value
      this.$emit('input', this.currentValue)
    },
    cancel() {
      this.show = false
    },
  }
}
</script>
