<template>
  <div class="bg-fff">
    <van-row>
      <van-col span="9"><div class="btn-left"><van-icon name="arrow-left" @click="prev" /></div></van-col>
      <van-col span="6"><icon name="YMPicker_item_icon" class="YMPicker_item_icon"></icon><div class="date-text" @click="show = true">{{currentDate_show}}</div></van-col>
      <van-col span="9"><div class="btn-right"><van-icon name="arrow" @click="next" /></div></van-col>
    </van-row>

    <van-popup
      v-model="show"
      position="bottom" :get-container="getContainer"
    >
      <van-datetime-picker @cancel="show=false"
        v-model="currentDate" @confirm="change"
        type="year-month"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
      />
    </van-popup>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { DatetimePicker } from 'vant';

  Vue.use(DatetimePicker);
  import moment from 'moment'
  export default {
    name: 'YearMonthPicker',
    model: {
      prop: 'date_value',
      event: 'value'
    },
    props: {
      date_value: {
        type: String,
        default: ''
      },
    },
    data() {
      let date_value = this.date_value
      return {
        currentDate_show: date_value,
        show: false,
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2050, 10, 1),
        currentDate: new Date()
      };
    },
    filters:{
      date(val){
        return moment(val).format('YYYY-MM')
      }
    },
    watch:{
      date_value(val){
        this.currentDate_show = val
        let date = new Date()
        date.setMonth(val.split('-')[1]*1 - 1)
        date.setFullYear(val.split('-')[0])
        this.currentDate = date
      }
    },
    methods: {
      getContainer() {
        return document.body
      },
      prev(){
        let value = this.currentDate_show.split('-')
        if(value[1]>=2){
          let m = (value[1]*1-1)
          if(m < 10){
            this.currentDate_show = value[0]+'-0'+m
          }else{
            this.currentDate_show = value[0]+'-'+m
          }
        }else{
          this.currentDate_show = (value[0]*1-1)+'-12'
        }

        this.$emit('value', this.currentDate_show)
      },
      next(){
        let value = this.currentDate_show.split('-')
        if(value[1]<=11){
          let m = (value[1]*1+1)
          if(m < 10){
            this.currentDate_show = value[0]+'-0'+m
          }else{
            this.currentDate_show = value[0]+'-'+m
          }
        }else{
          this.currentDate_show = (value[0]*1+1)+'-01'
        }
        this.$emit('value', this.currentDate_show)
      },
      change(data){
        this.currentDate_show = moment(data).format('YYYY-MM')
        this.show = false
        this.$emit('value', this.currentDate_show)
      },
      formatter(type, val) {
        if (type === 'year') {
          return `${val}年`;
        } else if (type === 'month') {
          return `${val}月`
        }
        return val;
      }
    }
  }
</script>

<style scoped>
  .date-text{display:inline-block;font-size:0.32rem; text-align: center; line-height: 1rem;color:#323233;}
  .date-text:active{color:#238dfa;}
  .btn-left{text-align: right; line-height: 1rem;}
  .btn-right{text-align: left; line-height: 1rem}
  .btn-right i{padding:0.16rem 0.32rem;color:#d7d7d7;margin-top: 0.15rem;}
  .btn-right i:active{color:#238dfa;}
  .btn-left i{padding:0.16rem 0.32rem;color:#d7d7d7;margin-top: 0.15rem;}
  .btn-left i:active{color:#238dfa;}
  .bg-fff{background-color: #fff;}
   /deep/ .van-picker__toolbar button:active{
     color:#fff;
     background:#238dfa;
   }
  /deep/ .van-picker__toolbar button:nth-child(1){
    color:#323233;
  }
  /deep/ .van-picker__toolbar button:nth-child(1):active{
     color:#fff;
     background:#238dfa;
   }
  .YMPicker_item_icon{
    width:0.23rem;
    height:auto;
    padding-right: 0.15rem;
    color:#323233;
  }

</style>
