<template>

  <div class="right_main">
    <div class="title">
      <i></i>
      <p>{{title || '任务日期'}}</p>
    </div>

    <div class="time_main">
      <span class="sanjiao-top" @click="addDate"></span>
      <p @click = "selectionRange">{{iyear}}</p>
      <el-date-picker
        v-model="iyear"
        type="year"
        class="pickerTime"
        ref = "datePicker"
        value-format="yyyy"
        placeholder="选择年">
      </el-date-picker>
      <span class="sanjiao-bottom" @click="reduceDate"></span>
    </div>

    <div class="month_main">
      <p v-for="(item, index) in 12" @click="chooseMonth(index + 1)" :class="{'active': isCurrentMonth(index + 1)}">{{index+1}}月<i v-if="isCurrentMonth(index + 1)"></i></p>
    </div>

  </div>

</template>

<script>
import {date_format} from "@/utils/date";

export default {
  name: 'RightYearMonthSelector',
  props: {
    year: String,
    month: String,
    title: String,
  },
  data() {
    return {
      iyear: this.year || date_format('%Y'),
      imonth: this.month || date_format('%m'),
    };
  },
  methods: {
    addDate(){
      this.iyear = '' + (Number(this.iyear) + 1);
      this.imonth = '01';
      this.emitUpdate(1 | 2);
    },
    reduceDate(){
      this.iyear = '' + (Number(this.iyear) - 1);
      this.imonth = '01';
      this.emitUpdate(1 | 2);
    },
    isCurrentMonth(m) {
      return parseInt(this.imonth) === m;
    },
    selectionRange(){
      this.$refs.datePicker.focus();
    },
    emitUpdate(w) {
      if(w & 1)
        this.$emit('update:year', this.iyear);
      if(w & 2)
        this.$emit('update:month', this.imonth);
      this.$emit('dateChanged', this.iyear, this.imonth, w);
    },
    chooseMonth(month) {
      this.imonth = month >= 10 ? '' + month : ('0' + month);
      this.emitUpdate(2);
    },
  },
  watch: {
    year(newVal) {
      if(this.iyear != newVal)
      {
        this.iyear = newVal;
        this.emitUpdate(1);
      }
    },
    month(newVal) {
      if(this.imonth != newVal)
      {
        this.imonth = newVal;
        this.emitUpdate(2);
      }
    },
    iyear(newVal) {
      if(this.year != newVal)
      {
        this.emitUpdate(1);
      }
    },
    imonth(newVal) {
      if(this.month != newVal)
      {
        this.emitUpdate(2);
      }
    },
  },
}
</script>

<style scoped lang="scss">
.right_main{
  margin-top: 15px;
  border-radius: 8px;
  box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.13);
  background: #fff;
  padding: 15px 20px;

  p{margin: 0;line-height: 1;}
}

.sanjiao-top {
  display: inline-block;
  border-bottom: 8px solid #414141;
  border-bottom-color: initial;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  cursor: pointer;
}

.sanjiao-bottom {
  display: inline-block;
  border-top: 8px solid #414141;
  border-top-color: initial;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  cursor: pointer;
}

.time_main{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f5f6f8;
  color: #414141;
  width: 75%;
  margin: 0 auto;
  margin-top: 15px;
  padding: 15px 0;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  p{
    margin: 10px 0;
  }
}

.month_main{
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #414141;
  p{
    margin-top: 3vh;
    position: relative;
    &.active{
      color: #3976ff;
    }
    &:hover{
      color: #3976ff;
      cursor: pointer;
    }
    i{
      display: block;
      width: 5px;
      height: 5px;
      background-color: #fc5659;
      position: absolute;
      top: -5px;
      right: -5px;
      border-radius: 100%;
    }
  }

}
.pickerTime{
  opacity: 0;
  position: absolute;
  left: 0px;
  top: 30px;
  width: 5px;
  height: 5px;
  z-index: -1;
}
</style>
