<template>
  <div id="vselect">
    <van-field :value="display" :label="label" :placeholder="`请选择${label}`" readonly @click="show = true" />
    <van-popup v-model="show" show-toolbar position="bottom">
      <van-picker :title="label" show-toolbar :value-key="labelKey" :columns="list" @confirm="onConfirm" @cancel="show = false" />
    </van-popup>
  </div>
</template>

<script>
const _ = require('lodash');
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'vselect',
  props: {
    label: { type: String }, //字段中文
    mval: { type: String }, //v-model
    list: { type: Array }, //选择的列表
    labelKey: { type: String, default: 'name' }, //如果选项为object,选择哪个字段作为显示的选项
    prop: { type: String }, // 如果选项为object,选择哪个字段作为v-model的值,没有的话就把该项作为值给v-model
  },
  model: {
    prop: 'mval',
    event: 'change',
  },
  components: {},
  data: function () {
    return {
      show: false,
    };
  },
  created() {},
  methods: {
    onConfirm(value) {
      if (this.prop) this.$emit('change', _.get(value, this.prop));
      else this.$emit('change', value);
      this.show = false;
    },
  },
  computed: {
    ...mapState(['user', 'menuParams']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
    display() {
      let value = '';
      if (this.mval) value = this.mval;
      if (this.prop) {
        const r = this.list.find((f) => f[this.prop] === value);
        if (r) value = r[this.labelKey];
      }
      return value;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped></style>
