<template>
  <div >
    <Card dis-hover>
      <div class="calendar">
        <div class="chose_sd star">
          年<DatePicker v-model="year"  size="small" type="year" placeholder="选择年" class="choseYear"  @on-change="changeYear" @on-blur="changeYear" :editable="false" :clearable="false" />
          <RadioGroup v-model="choseWorkDay" @on-change="changeWorkDay" style="margin-left: 2%;">
              <Radio label="工作日" ref="workDay"></Radio>
              <Radio label="非工作日" ref="noWorkDay"></Radio>
          </RadioGroup>
           <Checkbox v-model="choseCheckAll" @on-change="changeCheckAll">全选</Checkbox>
        </div>
        <div class="row">
          <calendar
            v-for="(mouth,index) in mouths"
            :key="index"
            :ref="mouth"
            :mouth="mouth"
            :calendar-optiond-day="calendarOptiondDay"
            @checkedDate="checkedDate"
            @checkedAll="checkedAll"
            @selectDay="onClick"
          />
        </div>
      </div>
    </Card>
  </div>
</template>
<script>
    /**
   * dateList数据格式：["2019-01-05", "2019-01-06", "2019-01-12"]
   * 日期组件数据回填，需要的格式，为数组对象，如：
   * [{date: "2019-01-05",day: 6,isToday: false,row: 0,select: true,week: 6},{date: "2019-01-06",day: 6,isToday: false,row: 0,select: true,week: 6}]
   */
import Calendar from './components/calendar'
import moment from 'moment'
export default {
  name: 'CalendarDemo',
  components: { Calendar },
  data() {
    return {
      year: moment().format('YYYY'),
      choseWorkDay:'',
      choseCheckAll:false,
      mouths: [],
      checkedDates: [], // 最终选中的全部日期
      calendarOptiondDay: [],//选中日期数组
      allCheckDay: [],
      allSelectedDay: [],
      dayObj: {
        date: '',
        day: 6,
        isToday: false,
        row: 0,
        select: true,
        week: 6
      },
    }
  },
  watch: {

  },
  mounted() {
    this.$nextTick(() => {
      this.changeYear(this.year)
    })
  },
  methods: {
    checkedAll(checkDayObj){
      this.mouths.forEach(moth=>{
        if(moth===checkDayObj.mouth) {
          if(checkDayObj.checkedAll===false){
            this.choseCheckAll = false
          }
        }
      })
    },
    formatDate(time) {
      var date = new Date(time);
      var time1=moment(date).format("YYYY");
      return time1; //年月日 格式自己定义 'yyyy : MM : dd' 例 2018年12月5日的格式
    },
    changeYear(val) {
      this.year = moment(val + '').format('YYYY')
      this.choseWorkDay = ''
      this.choseCheckAll = false
      this.mouths = []
      for (let i = 1; i <= 12; i++) {
        if (i < 10) {
          this.mouths.push(this.year + '-' + '0' + i)
        } else {
          this.mouths.push(this.year + '-' + i)
        }
      }
    },
    onClick(day) {
      if (day.select) day.select = false
      else day.select = true
    },
    check(work, noWork) {
      // 选择工作日、非工作日、全选、全不选后，先清空选中项，再添加选中数据
      this.checkedDates = []
      this.mouths.forEach(mouth => {
        this.$refs[mouth][0].checkWork(true, work)
        this.$refs[mouth][0].checkWork(false, noWork)
      })
    },
    // 获取--最终--全部选中的数据
    checkedDate(checkDayObj) {
      if (this.allCheckDay && this.allCheckDay.length > 0) {
        const mouthObj = this.allCheckDay.findIndex((mouthDay) => mouthDay.mouth === checkDayObj.mouth)
        if (mouthObj !== -1) {
          this.allCheckDay[mouthObj].checkedDay = checkDayObj.checkedDay
        } else this.allCheckDay.push(checkDayObj)
      } else this.allCheckDay.push(checkDayObj)
      this.checkedDates = []
      this.allCheckDay.forEach(mouth => {
        this.checkedDates = [...this.checkedDates, ...mouth.checkedDay]
      })
      /** 
       * 日期列表转化字符串
       * cDatelist为最终list，按需要转化
       * 例：["2019-01-01", "2019-01-02", "2019-01-03", "2019-01-04", "2019-01-05"]
       */
      const checkedDates = [...this.checkedDates]
      const cDatelist = []
      checkedDates.forEach(val => {
        cDatelist.push(val.date)
      })
    },
    changeWorkDay(value){
      this.choseCheckAll = false
      if(value){
        if(value === '工作日'){
          this.check(true,false)
        }else if(value === '非工作日'){
          this.check(false,true)
        }
      }
    },
    changeCheckAll(value){
      this.choseWorkDay = ''
      if(value){
        this.check(true,true)
      }else{
        this.check(false,false)
      }
    }

  }
}
</script>
<style lang="scss" scoped>
.calendar{
  .chose_sd{
    margin: 5px 5%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  .choseYear {
     width: 80px;margin-top: -2px;
     
    /deep/ .ivu-input{
      height: 25px;
      margin-left: 3px;
    }
   }
    .chose_detail{
      margin-right:5px;
      margin-left: 20px;
    }
  }
  .row{
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      justify-content: flex-start;
      margin: 5px 5% 20px 5%;
  }
}

</style>