<style>
    .eventsCalendar_Form .el-calendar__body .el-calendar-table>thead>th{
        border-top: 1px solid #EBEEF5;
        border-right: 1px solid #EBEEF5;
        border-bottom: 0;
    }
    .eventsCalendar_Form .el-calendar__body .el-calendar-table>thead>th:first-child{
        border-left: 1px solid #EBEEF5;
    }
    .eventsCalendar_Form{
        padding: 20px 0;
        background-color: #fff;
    }
    .eventsCalendar_Form .calendar-day {
    text-align: center;
    /* color: #202535; */
    line-height: 30px;
    font-size: 12px;
  }

  .eventsCalendar_Form .is-selected {
    color: #F8A535;
    font-size: 10px;
    margin-top: 5px;
  }

  #calendar .el-button-group>.el-button:not(:first-child):not(:last-child):after {
    content: '';
  }

  .eventsCalendar_Form .el-calendar-day {
    position: relative;
  }

  .eventsCalendar_Form .calendar-day {
    position: absolute;
    bottom: -5px;
    left: 5px;
  }

  .eventsCalendar_Form .calenderHeader {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
  }

  .eventsCalendar_Form .calendarTop {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-left: -7px;
    align-items: center;
    transform: scale(0.9);
    height: 24px;
  }

  .eventsCalendar_Form .calendarInner {
    font-size: 12px;
    margin: -4px 0 0 -7px;
    transform: scale(0.9);
  }

  .eventsCalendar_Form .el-calendar-table .el-calendar-day {
    padding: 5px;
    height: 120px;
  }

  .eventsCalendar_Form .el-calendar-table:not(.is-range) td.next,
  .eventsCalendar_Form .el-calendar-table:not(.is-range) td.prev {
    pointer-events: none;
  }

  .eventsCalendar_Form .caldendarTeacher {
    display: flex;
    font-size: 12px;
    right: 3px;
    justify-content: space-between;
    align-items: center;
    margin-top: -2px;
    transform: scale(0.9);
    position: absolute;
    bottom: 2px;
  }

  .calenderDialog {
    width: 450px;
    height: auto;
  }

  .calenderClassDate {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
  }

  .delBtnStyle {
    position: absolute;
    right: 6px;
    top: -9px;
    width: 20px;
    height: 20px;
    border: 1px solid red;
    background-color: red;
    color: #fff;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
  }

  .StudentInfo_List {
    display: flex;
    width: 100%;
    margin: 0 20px;
    padding: 0 40px 0 20px;
    justify-content: space-between;
    border-bottom: 1px solid #d1d1d1;
  }

  .Show_SignBack {
    margin: 20px;
    color: #2961FE;
  }

  .Lessicon_Edit:hover {
    color: red;
  }

  .Less_Close:hover {
    color: red;
  }

  .lessStudentList {
    margin-top: 10px;
  }

  .lessStuTitle {
    margin: 20px;
    padding-left: 20px;
    font-size: 12px;
    color: #000;
  }

  .lessStuInnerList {
    display: flex;
    margin: 0 40px;
    min-height: 130px;
  }

  .lessList {
    width: 90px;
    height: 110px;
    border: 1px solid #d1d1d1;
    border-radius: 5px;
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
    box-shadow: 4px 4px 5px #d1d1d1;
  }

  .less_Isout {
    font-size: 12px;
    color: #2961FE;
  }

  .classQue {
    background-color: rgb(63, 196, 255);
  }

  .classChu {
    background-color: #f2f2f2;
  }

  .classChu .commonLessName {
    color: #000;
  }

  .classQue .commonLessName {
    color: #fff;
  }

  .el-select-dropdown,
  .el-picker-panel {
    z-index: 9999 !important;
  }

  .eventsCalendar_Form .el-calendar__header {
    display: none;
  }

  .eventsCalendar_Form .on-left {
    margin-right: 5px;
  }

  .eventsCalendar_Form .lessForm_Class {
    border-bottom: 1px dashed #EEE;
  }

  .eventsCalendar_Form .q-btn__wrapper {
    padding: 4px 5px;
  }
  .eventsCalendar_box{
      
  }
  .eventsCalendar{
    margin-bottom: 3px;
  }
  .hover_Suspended{
      position: relative;
      padding: 0 8px;
      border-radius: 10px;
      font-size: 15px;
      color: white;
  }
  .hover_Suspended.started{
    background-color: #eee;
    color: #3f4254;
  }
  .hover_Suspended.progress{
    background-color: #21BA45;
  }
  .hover_Suspended.over{
    background-color: #1976D2;
  }
  .hover_Suspended:hover{
      color: #F8A535;
      background-color: #fff;
  }
  .hover_Suspended:hover .Suspended{
      display: block;
  }
  .Suspended{
      position: absolute;
      bottom: 25px;
      left: 0;
      right: 0;
      z-index: 95;
      display: none;
      padding: 10px;
      border-radius: 3px;
      background-color: #fff;
      box-shadow: 2px 5px 10px 0px rgba(36, 36, 36, 0.2);
      font-size: 14px;
  }
  .Suspended .Suspended-b{
        position: absolute;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 10px solid #FFF;
        transform:rotate(180deg);
        -ms-transform:rotate(180deg); /* Internet Explorer */
        -moz-transform:rotate(180deg); /* Firefox */
        -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
        -o-transform:rotate(180deg); /* Opera */
        bottom: -9px;
        left: 20px;
  }
  .Suspended_text{
      padding:2px 0;
      margin: 0;
      color: #3f4254;
  }
  .Suspended_text span{
    width: 80px;
    text-align: right;
    margin-right: 5px;
  }
  .Suspended_text p{
    color: #fff;
    border-radius: 10px;
    display: inline-block;
    padding: 0 5px;
  }
  .Suspended_text p.started{
    background-color: #eee;
    color: #3f4254;
  }
  .Suspended_text p.progress{
    background-color: #21BA45;
  }
  .Suspended_text p.over{
    background-color: #1976D2;
  }
</style>
<template>
  <div>
      <div class="eventsCalendar_Form">
        <div style="text-align:right;margin:12px 20px 8px 0">
            <el-date-picker
            style="width:190px"
              v-model="date"
              type="month"
              :clearable="false"
              placeholder="选择日期"
              @change="getList"
            >
            </el-date-picker>
            
        </div>
        <template>
            <el-calendar v-model="date" id="calendar" style="margin-bottom:40px;">
            <template slot="dateCell" slot-scope="{date, data}">
                <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
                <div v-for="(item,index) in calendarData" :key="index">
                    <div v-if="item.Date==data.day">
                        <div class="eventsCalendar_box">
                            <div class="eventsCalendar" v-for="(items,indexs) in item.ActivityList" :key="indexs"
                            @click="eventName(items.ActivityName)">
                                <div class="hover_Suspended" :class="items.ActivityStatus==1?'progress':(items.ActivityStatus==2?'over':'started')">
                                    {{items.ActivityName}}
                                    <div class="Suspended">
                                        <div class="Suspended-b"></div>
                                        <div class="Suspended_text"><span>标题 :</span>{{items.ActivityName}}</div>
                                        <div class="Suspended_text"><span>老师 :</span>{{items.TeacherName}}</div>
                                        <div class="Suspended_text"><span>时间 :</span>{{items.StartTime}}~{{items.EndTime}}</div>
                                        <div class="Suspended_text"><span>类型 :</span>{{items.ActivityTypeName}}</div>
                                        <div class="Suspended_text"><span>价格 :</span>{{items.IsFree==1?'免费':items.Price+' 元'}}</div>
                                        <div class="Suspended_text" v-show="items.LocationName"><span>地址 :</span> {{items.LocationName}}</div>
                                        <div class="Suspended_text"><span>状态 :</span> 
                                          <p :class="items.ActivityStatus==1?'progress':(items.ActivityStatus==2?'over':'started')">
                                          {{items.ActivityStatus==1?'进行中':(items.ActivityStatus==2?'已结束':'未开始')}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                    </div>
                    <div v-else></div>
                </div>
            </template>
            </el-calendar>
        </template>
      </div>
  </div>
</template>

<script>
export default {
  components: {

  },
  data() {
    return {
        pickerOptions: {
          disabledDate: time => {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        date:'',
        value: new Date(),
        calendarData:[],
        msg:{
            SelectStartTimeStr:'',
            SelectEndTimeStr:''
        }
      }
  },
  created() {
    
  },
  watch: {
      date: {
        handler(val) {
          if (val) {
            var d = new Date(val);
            var currentY = d.getFullYear();
            var currentM = d.getMonth()+1;
            var MonthDayNum = new Date(currentY,currentM,0).getDate();  //计算当月的天数
            var datetime = d.getFullYear() + '-' + (d.getMonth() + 1 + '-' + 1);
            this.msg.SelectStartTimeStr = datetime
            this.msg.SelectEndTimeStr = d.getFullYear() + '-' + (d.getMonth() + 1 + '-' + MonthDayNum)
            this.date = val
          }
        },
        deep: true
      }
  },
  computed: {

  },
  mounted() {
    this.date = this.value
    var d = new Date();
    var currentY = d.getFullYear();
    var currentM = d.getMonth()+1;
    var MonthDayNum = new Date(currentY,currentM,0).getDate();  //计算当月的天数
    var datetime = d.getFullYear() + '-' + (d.getMonth() + 1 + '-' + 1);
    this.msg.SelectStartTimeStr = datetime
    this.msg.SelectEndTimeStr = d.getFullYear() + '-' + (d.getMonth() + 1 + '-' + MonthDayNum)
    this.getList()
  },
  methods: {
    eventName(item){
        const { href } = this.$router.resolve({path:'/sale/activityList',
          query:{'ActivityName':item}
        })
        window.open(href, '_blank');
    },
    // 获取活动日历
    getList() {
        this.apipostDS("/api/Education/GetEduActivityCalendar", this.msg, (res) => {
            if (res.data.resultCode=== 1) {
                this.calendarData = res.data.data
                this.$forceUpdate()
            }
        })
    },
  }
};
</script>
