<template>
  <div id="vdate">
    <van-field :value="mval" :label="label" :placeholder="`请选择${label}`" readonly @click="show = true" :required="required" />
    <van-popup v-model="show" show-toolbar position="bottom">
      <van-datetime-picker
        :value="cdate"
        type="date"
        :title="`请选择${label}`"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="show = false"
        @confirm="toConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
const _ = require('lodash');
const moment = require('moment');
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'vdate',
  props: {
    label: { type: String }, //字段中文
    mval: { type: String }, //v-model
    required: { type: Boolean, default: false },
  },
  model: {
    prop: 'mval',
    event: 'change',
  },
  components: {},
  data: function () {
    return {
      show: false,
      minDate: new Date(1990, 0, 1),
      maxDate: new Date(),
    };
  },
  created() {},
  methods: {
    toConfirm(val) {
      this.$emit('change', moment(val).format('YYYY-MM-DD'));
      this.show = false;
    },
  },
  computed: {
    ...mapState(['user', 'menuParams']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
    cdate() {
      let date = '';
      if (this.mval) {
        date = new Date(this.mval);
      }
      return date;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

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