<template>
  <!-- timingFrame -->
  <div class="same_row_in time_select">
    <div class="same_row_in" style="margin-right: 10px;" v-if="whetherChoose">
      <div class="time_day_title text_prohibition" :class="yearsType ? 'active_ym' : ''" @click="getMonth(true)">按月
      </div>
      <div class="time_day_title text_prohibition" :class="!yearsType ? 'active_ym' : ''" @click="getMonth(false)">
        按年</div>
    </div>
    <div v-show="yearsType">
      <el-date-picker style="width: 100px;" v-model="timeValue" value-format="yyyy-MM" type="month" placeholder="选择月"
        size="small" :picker-options="setDisabled" @change="changeTime">
      </el-date-picker>
    </div>
    <div v-show="!yearsType">
      <el-date-picker style="width: 100px;" v-model="timeValue1" value-format="yyyy" type="year" placeholder="选择年"
        size="small" :picker-options="setDisabled" @change="changeTime1">
      </el-date-picker>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'timingFrame',
    props: {
      whetherChoose: {
        type: Boolean,
        default: () => true,
      },
      monthFlag: {
        type: Boolean,
        default: () => false,
      },
    },
    data() {
      return {
        setDisabled: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
        yearsType: false,
        timeValue: '',
        timeValue1: '',
      }
    },
    watch: {
      monthFlag: {
        handler(newUser, oldUser) {
          this.yearsType = newUser
        },
        immediate: true,
        deep: true // 设置 deep 选项为 true，实现深度监听
      }
    },
    mounted() {
      function formatDate(date, type) {
        const year = date.getFullYear();
        const month = ('0' + (date.getMonth() + 1)).slice(-2);
        const day = ('0' + date.getDate()).slice(-2);
        const hours = ('0' + date.getHours()).slice(-2);
        const minutes = ('0' + date.getMinutes()).slice(-2);
        const seconds = ('0' + date.getSeconds()).slice(-2);
        if (type == 'month') {
          return `${year}-${month}`;
        } else if (type == 'year') {
          return `${year}`;
        }
      }
      const monthTime = formatDate(new Date(), 'month')
      const yearTime = formatDate(new Date(), 'year')
      this.timeValue = monthTime
      this.timeValue1 = yearTime
    },
    methods: {
      // 切换选择日期
      getMonth(event) {
        this.yearsType = event
        let timeType = ''
        if (event) {
          timeType = 'month'
        } else {
          timeType = 'year'
        }
        this.$emit('changeTimeType', timeType)
      },
      // 选择月
      changeTime(value) {
        this.timeValue = value
        this.$emit('changeMonthTime', value)
      },
      // 选择年
      changeTime1(value) {
        this.timeValue1 = value
        this.$emit('changeYearTime', value)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .time_select {
    position: absolute;
    right: 5px;
    bottom: 4px;
  }

  .time_day_title {
    cursor: pointer;
    font-size: 15px;
    margin-right: 6px;
    color: #fff;
  }

  .active_ym {
    color: #67c23a;
  }

  .time_select ::v-deep .el-input--suffix .el-input__inner {
    padding-right: 20px;
  }
</style>
