<template>
  <div class="app-container">
<el-calendar v-model="value" id="calendar">
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template
       slot="dateCell"
       slot-scope="{date, data}">
        <!--自定义内容-->
          <div>
             <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}<el-button plain class="xsmini" size="mini" type="primary" icon="el-icon-edit"  @click="schedule = true"></el-button></div>
                <div v-for="item in calendarData">
                   <div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0])!=-1">
                     <div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
                          <el-tooltip class="item" effect="dark" :content="item.things" placement="right">
                            <div class="is-selected">{{item.things}}</div>
                          </el-tooltip>
                      </div>
                    <div v-else></div>
                   </div>
               <div v-else></div>
             </div>
          </div>
      </template>
</el-calendar>
<el-dialog  :visible.sync="schedule"  title="添加日程" append-to-body width="40%" @click="close">
         <el-row :gutter="12">
           <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
             <el-col :span="12">
               <el-form-item label="开始日期" prop="field101">
                 <el-date-picker v-model="formData.field101" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                   :style="{width: '100%'}" placeholder="请选择开始日期" clearable></el-date-picker>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="时间" prop="field105">
                 <el-time-picker v-model="formData.field105" format="HH:mm:ss" value-format="HH:mm:ss"
                   :picker-options='{"selectableRange":"00:00:00-23:59:59"}' :style="{width: '100%'}"
                   placeholder="请选择时间" clearable></el-time-picker>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="结束日期" prop="field106">
                 <el-date-picker v-model="formData.field106" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                   :style="{width: '100%'}" placeholder="请选择结束日期" clearable></el-date-picker>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="时间" prop="field107">
                 <el-time-picker v-model="formData.field107" format="HH:mm:ss" value-format="HH:mm:ss"
                   :picker-options='{"selectableRange":"00:00:00-23:59:59"}' :style="{width: '100%'}"
                   placeholder="请选择时间" clearable></el-time-picker>
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="提前提醒" prop="field108">
                 <el-input v-model="formData.field108" placeholder="小时提醒我" clearable :style="{width: '100%'}">
                 </el-input>
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="提前提醒" prop="field109">
                 <el-input v-model="formData.field109" type="textarea" placeholder="记录你将要做的一件事"
                   :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
               </el-form-item>
             </el-col>
           </el-form>
         </el-row>
         <div slot="footer">
           <el-button @click="schedule = false">取消</el-button>
           <el-button type="primary"  @click="schedule = false">确定</el-button>
         </div>
       </el-dialog>
</div>
</template>
<script>
    export default {
        name: "calendar",
        data(){
            return {
              schedule: false,
                formData: {
                  field101: null,
                  field105: null,
                  field106: null,
                  field107: null,
                  field108: undefined,
                  field109: undefined,
                },
                rules: {
                  field101: [{
                    required: true,
                    message: '请选择开始日期',
                    trigger: 'change'
                  }],
                  field105: [],
                  field106: [{
                    required: true,
                    message: '请选择结束日期',
                    trigger: 'change'
                  }],
                  field107: [],
                  field108: [{
                    required: true,
                    message: '小时提醒我',
                    trigger: 'blur'
                  }],
                  field109: [{
                    required: true,
                    message: '记录你将要做的一件事',
                    trigger: 'blur'
                  }],
                },
                calendarData: [
                    { months: ['09', '11'],days: ['15'],things: '看电影' },
                    { months: ['10', '11'], days: ['02'],things: '去公园野炊' },
                    { months: ['11'], days: ['02'],things: '看星星' },
                    { months: ['11'], days: ['02'],things: '看月亮' }
                ],
                value: new Date()
            }
        },
        inheritAttrs: false,
        components: {},
        props: [],
        computed: {},
        watch: {},
        created() {},
        mounted() {},
        // methods: {
        //   onOpen() {},
          // onClose() {
          //   this.$refs['elForm'].resetFields()
          // },
          // close() {
          //   this.$emit('update:visible', false)
          // },
          // handelConfirm() {
          //   this.$refs['elForm'].validate(valid => {
          //     if (!valid) return
          //     this.close()
          //   })
          // },
        // }
    }
</script>
<style>
  .el-calendar__title{font-size: 22px;}
    .calendar-day{
        text-align: center;
        color: #202535;
        line-height: 30px;
        font-size: 12px;
    }
    .is-selected{
        color: #F8A535;
        font-size: 10px;
        margin-top: 5px;
    }
    #calendar .el-button-group>.el-button:not(:first-child):not(:last-child):after{
        content: '当月';
    }
    .prev,.next{background: #efefef;}
    .prev .calendar-day,.next .calendar-day{color: #999;}
    .el-calendar-table td.is-selected {
        background-color:#d6ebff !important;
        }
     .el-calendar-table .el-calendar-day:hover{background-color:#d6ebff !important;}
      .xsmini{width:20;float: right;}
</style>
