<template>
  <div class="remind">
    <div class="header">
      <div class="header-date">
        <div>2021年9月16日</div>
        <div>星期一</div>
      </div>
      <div class="header-temp">27°</div>
      <div class="header-weater">
        小雨
        <img src="../img/weather_rain.png" alt="" srcset="">
      </div>
    </div>
   <el-row>
     <el-col :span="24">
       <el-calendar v-model="value">
         <template
            slot="dateCell"
            slot-scope="{date, data}">
            <el-popover
              placement="bottom"
              title="日程安排"
              width="400"
              trigger="click">
                <el-input
                  type="textarea"
                  :rows="6"
                  placeholder="请输入日程"
                  v-model="textarea">
                </el-input>
                <div slot="reference" class="unit">
                  <p class="num" :class="data.isSelected ? 'is-selected' : ''">
                    {{ $dayjs(date).format('D') }}
                    <img v-if="isActive(data)" class="calendar" src="../img/calendar.png" alt="" srcset="">
                  </p>
                </div>
            </el-popover>
          </template>
       </el-calendar>
     </el-col>
   </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: new Date(),
      mounth: ['1', '3', '4', '12', '23', '24', '30'],
      textarea: '1、下午2点会议'
    }
  },
  methods: {
    isActive({ day, type }) {
      return type === 'current-month' && this.mounth.indexOf(this.$dayjs(day).format('D')) !== -1
    }
  }
}
</script>

<style lang="scss" scoped>
.header{
  height: 56px;
  background-image: url(../img/remind_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  &-date {
    padding: 5px 20px;
    line-height: 24px;
    font-size: 16px;
    color: #515E78;
  }
  &-temp {
    font-size: 48px;
    font-weight: 600;
    color: #515E78;
    margin-left: 20px;
    font-family: Arial;
  }
  &-weater {
    color: #8996AF;
    font-size: 16px;
    margin-left: 20px;
    margin-top: 10px;
    font-weight: 600;
    img {
      width: 40px;
      vertical-align: middle;
      margin-left: 10px;
    }
  }
}
.el-calendar {
  .unit {
    width: 100%;
    height: 100%;
  }
  ::v-deep.el-calendar__header {
    display: none;
  }
  ::v-deep.el-calendar-table thead th{
    padding: 0 0 15px 0;
  }
  ::v-deep.el-calendar-table .el-calendar-day{
    position: relative;
    height: 60px;
  }
  ::v-deep.el-calendar__body{
    padding: 10px;
  }
  .calendar {
    position: absolute;
    right: 8px;
    top: 0;
    width: 13px;
  }
  .num {
    font-size: 18px;
    color: #8996AF;
    font-family: Arial;
  }
  ::v-deep.next .num {
    color: #C0C7D4;
  }
  .is-selected {
    color: #4A86FF;
  }
}
</style>
