<template>
  <div>
    <cell
      :title="title"
      primary="content"
      is-link
      @click.native="onClick"
    >
      {{ currentValue }}
    </cell>
    <popup v-model="show">
      <inline-calendar
        v-model="currentValue"
        :render-month="renderMonth"
        :start-date="startDate"
        :end-date="endDate"
        :show-last-month="showLastMonth"
        :show-next-month="showNextMonth"
        :highlight-weekend="highlightWeekend"
        :return-six-rows="returnSixRows"
        :hide-header="hideHeader"
        :hide-week-list="hideWeekList"
        :replace-text-list="replaceTextList"
        :weeks-list="weeksList"
        :custom-slot-fn="customSlotFn"
        :render-on-value-change="renderOnValueChange"
        :disable-past="disablePast"
        :disable-future="disableFuture"
        @on-change="onSelect"
      />
    </popup>
  </div>
</template>

<script>
import InlineCalendar from '../inline-calendar'
import Popup from '../popup'
import Cell from '../cell'
import props from '../inline-calendar/props'

const Props = props()
Props.title = {
  type: String,
  required: true
}

export default {
  components: {
    InlineCalendar,
    Popup,
    Cell
  },
  props: Props,
  data () {
    return {
      show: false,
      currentValue: ''
    }
  },
  watch: {
    value (val) {
      this.currentValue = val
    },
    currentValue (val) {
      this.$emit('input', val)
    }
  },
  created () {
    this.currentValue = this.value
  },
  methods: {
    onClick () {
      this.show = true
    },
    onSelect () {
      this.show = false
    }
  }
}
</script>
