<template>
  <div>
    <b-datepicker
      v-if="monthPicker"
      v-model="selectDate"
      placeholder="월을 선택하세요"
      type="month"
      :month-names="monthList"
      :day-names="dayList"
      :min-date="minDate"
      :max-date="maxDate"
      size="is-small"
      :date-formatter="setDateFormat"
    >
      <span v-if="todayBtnShow">
        <button
          class="button is-primary"
          @click="selectDate = new Date()"
        >
          <span>Today</span>
        </button>
      </span>
      <span v-if="clearButtonShow">
        <button
          class="button is-danger"
          @click="selectDate = null"
        >
          <span>Clear</span>
        </button>
      </span>
    </b-datepicker>
    <b-datepicker
      v-else
      v-model="selectDate"
      placeholder="날짜를 선택하세요"
      :month-names="monthList"
      :day-names="dayList"
      :min-date="minDate"
      :max-date="maxDate"
      size="is-small"
      :date-formatter="setDateFormat"
    >
      <span v-if="todayBtnShow">
        <button
          class="button is-primary"
          @click="selectDate = new Date()"
        >
          <span>Today</span>
        </button>
      </span>
      <span v-if="clearButtonShow">
        <button
          class="button is-danger"
          @click="selectDate = null"
        >
          <span>Clear</span>
        </button>
      </span>
    </b-datepicker>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true,
    },
    dateValue: {
      type: Date,
    },
    monthList: {
      type: Array,
      default: () => [
        '1월',
        '2월',
        '3월',
        '4월',
        '5월',
        '6월',
        '7월',
        '8월',
        '9월',
        '10월',
        '11월',
        '12월',
      ],
    },
    dayList: {
      type: Array,
      default: () => ['일', '월', '화', '수', '목', '금', '토'],
    },
    minDate: {
      type: Date,
      default: null,
    },
    maxDate: {
      type: Date,
      default: null,
    },
    todayBtnShow: {
      type: Boolean,
      default: false,
    },
    clearButtonShow: {
      type: Boolean,
      default: false,
    },
    initDate: {
      type: Date,
    },
    monthPicker: Boolean,
  },
  data: () => ({
    selected: {},
    selectDate: new Date(),
  }),
  watch: {
    dateValue() {
      this.selectDate = this.dateValue == null ? null : this.dateValue;
    },
    selectDate() {
      const param = { id: this.name, value: this.selectDate };
      this.$emit('selectedDate', param);
    },
  },
  mounted() {
    this.setInitDate();
  },
  methods: {
    setInitDate() {
      this.selectDate = this._props.initDate == null ? new Date() : this._props.initDate;
    },
    setDateFormat(date) {
      const year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (month < 10) {
        month = `0${month}`;
      }
      if (day < 10) {
        day = `0${day}`;
      }
      return `${year}-${month}-${day}`;
    },
  },
};
</script>

<style>
.datepicker-cell {
  text-decoration: none !important;
}
</style>
