<template>
  <div class="month-day" :data-result="monthDay">
    <el-col :span="11">
      <el-select
        placeholder="月份"
        v-model="month"
        style="width: 100%;">
        <el-option
          v-for="item in yearItems"
          :key="item.month"
          :label="item.month + '月'"
          :value="item.month">
        </el-option>
      </el-select>
    </el-col>
    <el-col class="line" :span="2" style="text-align: center;">-</el-col>
    <el-col :span="11">
      <el-select
        placeholder="日期"
        v-model="day"
        style="width: 100%;">
        <el-option
          v-for="item in days"
          :key="item.value"
          :label="item + '日'"
          :value="item + ''">
        </el-option>
      </el-select>
    </el-col>
 </div>
</template>

<script type="text/javascript">
export default {
  name: 'monthDay',
  props: {
    value: String,
    format: {
      type: String,
      default: 'MM-dd',
    },
  },
  data() {
    const yearItems = Array.from({ length: 12})
      .map((v, i) => ({
        month:  (i + 1).toString(),
        day: (i % 2 === 0 && i < 6) || (i % 2 !== 0 && i >= 6)  ? 31 : 30
      }));
      // 2 7月
      yearItems[1].day = 28;
      yearItems[6].day = 31;
    return {
      yearItems,
      month: this.value.split('-')[0] || '',
      day: this.value.split('-')[1] || '',
    };
  },
  computed: {
    days() {
      let days = 0;
      if (this.month) {
        const month = this.yearItems.filter(item => item.month === this.month)[0];
        days = month.day;
      }
      return days;
    },
    monthDay() {
      if (!this.month || !this.day) return '';

      const monthDay = `${this.month}-${this.day}`;
      this.$emit('input', monthDay);
      return monthDay;
    },
  },
  watch: {
    value(val) {
      this.month = val.split('-')[0] || '';
      this.day = val.split('-')[1] || '';
    },
  },
};
</script>
