<template>
  <div class="m-container">
    <el-calendar style="minWidth:810px">
      <template slot="dateCell"
                slot-scope="scope">
        <div @click="showDate(scope)"
             style="height:100%">
          <p>
            {{scope.data.day.substring(8)}}
          </p>
          <div>
            <span v-for="(item,index) in newList"
                  class='newDot'
                  :key="item.id"
                  v-if="item.classDate.substring(0,10) === scope.data.day&&item.groupType==='PRACTICE'">
              网
            </span>
            <span v-for="(item,index) in vipList"
                  class='vipDot'
                  :key="item.id"
                  v-if="item.classDate.substring(0,10) === scope.data.day&&item.groupType==='VIP'">
              vip
            </span>
            <span v-for="(item,index) in teamList"
                  class='teamDot'
                  :key="item.id"
                  v-if="item.classDate.substring(0,10) === scope.data.day&&item.groupType==='MUSIC'">
              乐
            </span>

          </div>
        </div>

      </template>
    </el-calendar>
    <resetList :startTimes="startTime"
               @getCalendatList='getCalendatList' />
  </div>
</template>
<script>
import { superFindCourseSchedules } from "@/api/buildTeam";
import { setDate, getCurrentMonthFirst, getCurrentMonthLast } from "@/utils/date"
import { getTeachSchool } from "@/api/teacherManager";
import resetList from './resetComponent'
import { permission } from "@/utils/directivePage";
export default {
  components: { resetList },
  data () {
    return {
      dataList: [],
      value: new Date(),
      teacherIdList: '',
      vipList: [],
      teamList: [],
      newList: [],
      startTime: ''
    }
  },
  mounted () {
    this.teacherIdList = this.$route.query.teacherId
    this.getCalendatList()
    this.$nextTick(() => {
      // 点击上个月
      let prevBtn1 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');
      prevBtn1.addEventListener('click', () => {
        this.value = new Date(this.value.setMonth(this.value.getMonth() + -1, 1))
        this.setCourseList(this.value)
      })
      // 点击今天
      let prevBtn2 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');
      prevBtn2.addEventListener('click', () => {
        this.value = new Date()
        this.setCourseList(this.value)
      })
      // 点击下个月
      let prevBtn3 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)');
      prevBtn3.addEventListener('click', () => {

        this.value = new Date(this.value.setMonth(this.value.getMonth() + 1, 1))
        this.setCourseList(this.value)
      })
    })

  },
  activated () {

  },
  methods: {

    getCalendatList () {
      this.teacherIdList = this.$route.query.teacherId
      // 获取当前月第一天和最后一天
      let startTime = setDate(getCurrentMonthFirst(this.value))
      let endTime = setDate(getCurrentMonthLast(this.value))
      superFindCourseSchedules({ teacherIdList: this.teacherIdList, rows: 9999, page: 1, startTime, endTime }).then(res => {
        if (res.code === 200) {
          this.dataList = res.data.rows
          // 过滤数据
          this.vipList = []
          this.teamList = []
          this.newList = []
          for (let i in this.dataList) {
            if (this.dataList[i].groupType === 'VIP') {
              this.vipList.push(this.dataList[i])
            }
            if (this.dataList[i].groupType === 'MUSIC') {
              this.teamList.push(this.dataList[i])
            }
            if (this.dataList[i].groupType === 'PRACTICE') {
              this.newList.push(this.dataList[i])
            }
          }

          this.vipList = this.reduceArray(this.vipList, 'classDate')
          this.teamList = this.reduceArray(this.teamList, 'classDate')
          this.newList = this.reduceArray(this.newList, 'classDate')
        }
      })
    },
    showDate (scope) {

      this.startTime = scope.data.day
      this.endTime = scope.data.day
      this.value = scope.date
      if (scope.data.type === 'next-month' || scope.data.type === 'prev-month') {
        this.getCalendatList()
      }
    },
    reduceArray (array, str) {
      let hash = {}
      array = array.reduce(function (arr, current) {
        hash[current[str]] ? '' : hash[current[str]] = true && arr.push(current);
        return arr
      }, [])
      return array
    },
    setCourseList (val) {
      this.startTime = setDate(val)
      this.endTime = setDate(val)
      this.getCalendatList()
    },
    permission (str, parent) {
      return permission(str, parent);
    },
  }
}
</script>
<style lang="scss" scoped>
// /deep/.el-input__inner {
//   width: 220px !important;
// }
/deep/ .el-calendar-day {
  box-sizing: border-box;
  height: 80px !important;
  min-width: 118px;
}
/deep/.current.is-selected {
  border: 2px solid #137f79;

  .el-calendar-day {
    height: 76px !important;
  }
}
// /deep/.current {
//   border-bottom: 2px solid #ebeef5;
//   border-right: 2px solid #ebeef5;
// }

.vipDot {
  width: 30px;
  height: 30px;
  margin-top: 10px;
  background-color: #2aaea6;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-size: 14px;
}
.teamDot {
  width: 30px;
  height: 30px;
  margin-top: 10px;
  background-color: #5a79f6;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-size: 14px;
}
.newDot {
  width: 30px;
  height: 30px;
  margin-top: 10px;
  background-color: #34b1f6;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-size: 14px;
}
</style>