<template>
  <div class="module">
    <div :class="className">
      <span class="spanTitle1">{{ title }}</span>
      <van-cell :value="internalValue" @click="focus" />
      <van-calendar
        color="#1c4990"
        v-model="show"
        @confirm="onConfirm"
        @close="blur"
      />
      <b v-if="verify" class="verify">*</b>
    </div>
    <p class="reminder" v-if="reminder">当前项为必填项</p>
  </div>
</template>

<script>
export default {
  props: ['title', 'value', 'verify'],
  name: 'Date',

  data () {
    return {
      className: 'el_input_focus',
      internalValue: this.value,
      show: false,
      cascaderValue: '',
      reminder: false
    }
  },
  watch: {
    value (cur, old) {
      if (!cur) {
        this.reminder = true
        this.className = 'el_input_focusTrue'
        this.internalValue = ''
      }
    }
  },
  mounted () {},

  methods: {
    formatDate (date) {
      return `${new Date(date).getFullYear()}/${date.getMonth() +
        1}/${date.getDate()}`
    },
    onConfirm (date) {
      this.show = false
      this.internalValue = this.formatDate(date)
      if (this.verify) {
        if (this.internalValue) {
          this.className = 'el_input_focus1'
          this.reminder = false
        } else {
          this.reminder = true
          this.className = 'el_input_focusTrue'
        }
      } else {
        if (this.internalValue) {
          this.className = 'el_input_focus1'
        } else {
          this.className = 'el_input_focus'
        }
      }
      this.$emit('input', this.internalValue)
    },
    focus () {
      this.show = true
      if (this.internalValue) {
        this.className = 'el_input_focus1'
      } else {
        this.className = 'el_input_blur'
      }
    },
    blur () {
      this.show = false
      if (this.verify) {
        if (this.internalValue) {
          this.className = 'el_input_focus1'
          this.reminder = false
        } else {
          this.reminder = true
          this.className = 'el_input_focusTrue'
        }
      } else {
        if (this.internalValue) {
          this.className = 'el_input_focus1'
        } else {
          this.className = 'el_input_focus'
        }
      }
    }
  }
}
</script>

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