<template>
    <section class="homeCalendarBox">
        <div class="topTitle">
            <span class="month">
                <ul>
                    <li class="prev" @click="pickPre(currentYear,currentMonth)">❮</li>
                    <li class="datecolumn">
                        <span>{{ currentYear }}年</span>
                        <span>{{ currentMonth }}月</span>
                    </li>
                    <li class="next"  @click="pickNext(currentYear,currentMonth)">❯</li>
                </ul>
            </span>
            <span class="newbtn"><em @click="enterSchedule">进入日程>></em><el-button type='primary' size='mini' @click="addCalendar">+</el-button></span>
        </div>
        <div class="CalendarList">
            <ul class="weekdays">
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li>六</li>
                <li>日</li>
            </ul>
            <ul class="days">
                <li v-for="(dayobject,index) in days" :key="index" @click='dayClick(dayobject,index)' :class='index==activeIndex?"activeli":""'>
                   
                    <span v-if="dayobject.day.getMonth()+1 != currentMonth" class="other-month" >{{dayobject.day.getDate()}}</span>
                    <span v-else>
                         <span v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()" class="active">今</span>
                         <span v-else>{{dayobject.day.getDate()}}</span>
                     </span>
                     <!-- {{dayobject.startTime}} -->
                    <p><em v-if='dayobject.count'>{{dayobject.itemstatecount}}/{{dayobject.count}}</em></p>
                </li>                
            </ul>
        </div>
        <div class="linebottom"></div>
        <div class="calendarCheckbox">
            <ul>
                <li v-for="(item,index) in calendarDataItems" :key='index' @click="calendarDetail(item)">
                    <el-checkbox v-model="item.item_stateFlag" @change='itemState(item)' disabled></el-checkbox>
                    <em >{{item.item_title}}</em>
                </li>       
                <!-- <li><el-checkbox v-model="form.value11"></el-checkbox><em @click="calendarDetail">日程测试日程测试日程测试日程测试</em></li>  -->
            </ul>
        </div>

        <!-- 新建，编辑日程 -->
        <el-drawer
            :title="title"
            :before-close="handleClose"
            :visible.sync="dialog"
            direction="rtl"
            custom-class="demo-drawer"
            ref="drawer"
            >
            <div class="demo-drawer__content">
                <el-form ref="ruleForm" :model="formList" label-width='200' :rules="rules">
                    <el-form-item label="日程类型:" prop='thescheduleofTheType'>
                        <el-radio-group v-model="formList.thescheduleofTheType" @change='typechange'>
                            <el-radio label="工作安排">工作安排</el-radio>
                            <el-radio label="私人安排">私人安排</el-radio>
                         </el-radio-group>
                    </el-form-item>
                    <el-form-item label="标题:" prop='title'>
                        <el-input v-model="formList.title" ></el-input>
                    </el-form-item>
                    <el-form-item label="内容:" prop='Content'>
                        <el-input v-model="formList.Content" autocomplete="off" type='textarea'></el-input>
                    </el-form-item>
                    <el-form-item label="执行人：" prop='executor'>
                        <!-- <span class="personSpan">
                            <ul class="personul">
                                <li><em>名</em><strong>姓名</strong><i><img src="~@/assets/images/other/closeicon.png"/></i></li>  
                            </ul>
                            <i class="el-icon-plus avatar-uploader-icon borderpadding"></i>
                        </span> -->
                        <span v-if='formList.thescheduleofTheType=="私人安排"'>{{formList.executorName}}</span>
                        <el-select v-model="formList.executor" filterable :filter-method="filterMethod"  clearable @change="selectUser" @clear="cleartag"    placeholder="请搜索执行人" style="width:100%" v-if='formList.thescheduleofTheType=="工作安排"'>
                          <el-option
                                v-for="item in tableDataEmployee"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="参与人：" prop='participant'>
                        <!-- <span class="personSpan">
                            <ul class="personul">
                                <li><em>名</em><strong>姓名</strong><i><img src="~@/assets/images/other/closeicon.png"/></i></li>                              
                            </ul>
                            <i class="el-icon-plus avatar-uploader-icon borderpadding"></i>
                        </span> -->
                        <el-select v-model="formList.participant"  filterable :filter-method="filterMethodParty"  clearable  @change="selectUserParty" @remove-tag="removetagParty"   multiple collapse-tags   placeholder="请搜索参与人"  style="width:100%">
                          <el-option
                                v-for="item in tableDataEmployeeParty"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="开始时间:" prop='startTime'>
                        <el-date-picker
                        v-model="formList.startTime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        :picker-options='pickerOptions'
                        type="datetime"
                        placeholder="选择日期时间"
                         style="width:100%"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间:" prop='endTime'>
                        <el-date-picker
                        v-model="formList.endTime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        :picker-options='pickerOptions'
                        type="datetime"
                        placeholder="选择日期时间"
                         style="width:100%"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="附件:" prop='file'>
                        <el-upload
                        class="upload-demo"
                        action="#"
                        :http-request='uploadImg'
                        :on-remove="handleRemove"
                        :file-list="fileList">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip"></div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="提醒时间:" prop='pushTime'>
                        <el-select v-model="formList.pushTime" style="width:100%">
                            <el-option v-for='(item,index) in pushTimeOptions' :key='index' :label='item.lable' :value='item.value'></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button type="primary" @click="submit">确 认</el-button>
                </div>
            </div>
        </el-drawer>

         <!-- 日程详情 -->
        <el-drawer
            :title="titledetail"
            :before-close="handleClosedetail"
            :visible.sync="dialogdetail"
            direction="rtl"
            custom-class="demo-drawer"
            ref="drawerdetail"
            >
            <div class="demo-drawer__content">
                <el-form :model="form" label-width='200'>
                    <el-form-item label="日程类型:">
                        <span>{{form.item_thescheduleofthetype}}</span>
                        <!-- <el-radio-group v-model="form.radio">
                            <el-radio :label="3">工作安排</el-radio>
                            <el-radio :label="6">私人安排</el-radio>
                         </el-radio-group> -->
                    </el-form-item>
                    <el-form-item label="标题:">
                         <span>{{form.item_title}}</span>
                         <span v-if="form.item_source==2" @click="viewplan" class="viewplancss">查看计划</span>
                    </el-form-item>
                    <el-form-item label="内容:">
                        <span>{{form.item_content}}</span>
                    </el-form-item>
                    <el-form-item label="执行人：">
                        <span>{{form.item_executorname}}</span>
                        <!-- <el-select v-model="form.region"  multiple collapse-tags  placeholder="请搜索执行人" style="width:100%">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                        </el-select> -->
                    </el-form-item>
                    <el-form-item label="参与人：">
                        <span>{{form.item_participantname}}</span>
                        <!-- <el-select v-model="form.region2"   placeholder="请搜索参与人"  style="width:100%">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                        </el-select> -->
                    </el-form-item>
                    <el-form-item label="开始时间:">
                        <span>{{form.starTime}}</span>
                        <!-- <el-date-picker
                        v-model="form.value1"
                        type="datetime"
                        placeholder="选择日期时间"
                         style="width:100%"
                        >
                        </el-date-picker> -->
                    </el-form-item>
                    <el-form-item label="结束时间:">
                        <span>{{form.endTime}}</span>
                        <!-- <el-date-picker
                        v-model="form.value2"
                        type="datetime"
                        placeholder="选择日期时间"
                         style="width:100%"
                        >
                        </el-date-picker> -->
                    </el-form-item>
                    <el-form-item label="附件:">
                        <!-- <span></span> -->
                        <el-upload
                        class="upload-demo"
                        action="#"
                        :file-list="fileList"
                        disabled
                        :on-preview='onpreview'
                        >                           
                        </el-upload>
                    </el-form-item>
                     <el-form-item label="提醒时间:">
                        <span>
                            {{form.item_pushtime=='无提醒'?'无提醒':''}}
                            {{form.item_pushtime=='0'?'开始时':''}}
                            {{form.item_pushtime=='15'?'开始15分钟前':''}}
                            {{form.item_pushtime=='30'?'开始30分钟前':''}}
                            {{form.item_pushtime=='60'?'开始一个小时前':''}}
                            {{form.item_pushtime=='1440'?'开始一天前':''}}
                        </span>                        
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer">
                 <el-button @click="cancelFormDetail" v-if='form.item_state=="未完成"'>取 消</el-button>
                 <el-button type="danger" @click="delDetail" v-if='form.item_state=="未完成"'>删 除</el-button>
                 <el-button type="success" @click="submitDetail" v-if='form.item_state=="未完成"'>完 成</el-button>
                 <el-button type="primary" @click="updateDetail" v-if='form.item_state=="未完成"'>修 改</el-button>
                </div>
            </div>
        </el-drawer>
    </section>
</template>
<script>
import {currDateTime} from '@/utils/global.js'
export default {
    data(){
        return{
            currentYear: 1970,
            currentMonth: 1,
            currentDay: 1,   
            currentWeek: 1,
            days: [],
            value:'',
            dialog:false,
            title:'',
            formList:{},
            form:{},
            fileList: [
            //     {
            //     name: 'food.jpeg',
            //     url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
            //     }, {
            //     name: 'food2.jpeg',
            //     url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
            //    }
            ],
            dialogdetail:false,
            titledetail:'日程详情',
            rules: {
                 thescheduleofTheType: [{required: true, message: "请选择日程类型", trigger: "blur" }],        
                 title: [{required: true, message: "请输入标题", trigger: "blur" }],   
                 Content: [{required: true, message: "请输入内容", trigger: "blur" }],   
                 executor: [{required: true, message: "请选择执行人", trigger: "blur" }],
                 startTime: [{required: true, message: "请选择开始时间", trigger: "blur" }],
                 pushTime: [{required: true, message: "请选择提醒时间", trigger: "blur" }],     
     
            },           
            params:{//搜索条件
                pageIndex:1,
                pageSize:10,
                keyword:'',             
                total:0
            },
            params2:{//搜索条件
                pageIndex:1,
                pageSize:10,
                keyword:'',             
                total:0
            },
            tableDataEmployee:[],
            tableDataEmployeeParty:[],
            resultArr:[],
            calendarDataItems:[],//日历项点击当天的数据
            calendarAllItem:[],//当月每一天数量
            pushTimeOptions:[
                {lable:'无提醒',value:'无提醒'},
                {lable:'开始时',value:'0'},
                {lable:'开始15分钟前',value:'15'},
                {lable:'开始30分钟前',value:'30'},
                {lable:'开始一个小时前',value:'60'},
                {lable:'开始一天前',value:'1440'},
            ],
            pickerOptions:{
                disabledDate(date){//禁用今天之前的日期
                    return date.getTime()<Date.now()-24*60*60*1000
                }
            },
            activeIndex:-1
        }
    },
    created() {
        let d=new Date()   
        this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
    },
    mounted() {
        this.searchCalendarList() 
        this.searchCalendarListDay() 
    },
    methods: {
        dayClick(dayobject,index){    
            this.activeIndex=index 
           var dayobjectStr=new Date(dayobject.day)
           console.log(dayobjectStr.getFullYear())
           console.log(dayobjectStr.getMonth()+1)
           console.log(dayobjectStr.getDate())
           let year=dayobjectStr.getFullYear()
           let month=(dayobjectStr.getMonth()+1)<10?'0'+(dayobjectStr.getMonth()+1):(dayobjectStr.getMonth()+1)
           let day=dayobjectStr.getDate()<10?'0'+dayobjectStr.getDate():dayobjectStr.getDate()
           this.searchCalendarListDay(year,month,day)
        },
        searchCalendarList(){   
            this.days.forEach(item=>{
                this.$nextTick(()=>{
                  this.$set(item,'count',0)//查询--重置当月每一天的数量为0
                  this.$set(item,'itemstatecount',0)//查询--重置当月每一天完成的数量为0
                })
            })
            let currentMonthStr=this.currentMonth  
            if(this.currentMonth<10){
                currentMonthStr='0'+this.currentMonth 
            }
            let str=this.currentYear+'-'+currentMonthStr     
            let obj={startTime:str}
            console.log(obj)
           this.$api.v3searchCalendarListApi(obj,{
                onSucess: response => {
                    console.log(response.data)
                    if(response.data.code){
                        this.calendarAllItem=response.data.datas  
                        console.log(this.calendarAllItem)
                        if(this.calendarAllItem.length){
                            this.calendarAllItem.forEach(item=>{
                               let date=new Date(item.item_starttime.time)
                               let yearStr=date.getFullYear()
                               let monthStr=(date.getMonth()+1)<10?'0'+(date.getMonth()+1):(date.getMonth()+1)
                               let dayStr=date.getDate()<10?'0'+date.getDate():date.getDate()
                               let dateStr=yearStr+'-'+monthStr+'-'+dayStr
                               this.$set(item,'itemStartTimeAllTime',dateStr) 
                            })
                            console.log(this.calendarAllItem)
                            
                            //同一天                           
                            this.days.forEach(item=>{
                                this.calendarAllItem.forEach(its=>{
                                      if(item.startTime==its.itemStartTimeAllTime){
                                          this.$nextTick(()=>{
                                           this.$set(item,'count',item.count+1)
                                           console.log(its.item_state)
                                            if(its.item_state=='已完成'){
                                                this.$set(item,'itemstatecount',item.itemstatecount+1)
                                            }
                                          })
                                      }
                                })
                            })

                            console.log(this.days)
                        }
                    }
                }
            })
        },
        searchCalendarListDay(year,month,day){  
            let str='' 
            if(year){
              str=year+'-'+month+'-'+day 
            }else{
                let currentMonthStr=this.currentMonth 
                let currentDayStr=this.currentDay 
                if(this.currentMonth<10){
                    currentMonthStr='0'+this.currentMonth 
                }
                if(this.currentDay<10){
                    currentDayStr='0'+this.currentDay 
                }
                str=this.currentYear+'-'+currentMonthStr+'-'+currentDayStr   
            }   
            let obj={startTime:str}
            console.log(obj)
           this.$api.v3searchCalendarListApi(obj,{
                onSucess: response => {
                    console.log(response.data)
                    if(response.data.code){
                          this.calendarDataItems=response.data.datas  
                          if(this.calendarDataItems.length){
                             this.calendarDataItems.forEach(item=>{
                                 if(item.item_state=='未完成'){
                                    this.$set(item,'item_stateFlag',false)
                                 }else{
                                    this.$set(item,'item_stateFlag',true)
                                 }
                             }) 
                          }
                         console.log(this.calendarDataItems) 
                    }
                }
            })
        },
        itemState(item){
            console.log(item)            
           let obj={
               id:item.id,
               state:item.item_stateFlag?'已完成':'未完成'
           }
           this.$api.v3CanlendarFinishStatusApi(obj,{
                onSucess: response => {
                    console.log(response.data)
                    if(response.data.code){
                          this.searchCalendarList() 
                          this.searchCalendarListDay() 
                    }
                }
            })

        },
        addCalendar(){
           this.formList={}
           this.$set(this.formList,'thescheduleofTheType','工作安排')
           this.$set(this.formList,'id','')
           this.$set(this.form,'id','')
           this.$set(this.formList,'pushTime','15')
           this.fileList=[]
           this.dialog=true
           this.title='新建日程'           
           this.employeeTableList()
           this.employeeTableListParty()
        },
        typechange(){
          if(this.formList.thescheduleofTheType=='私人安排'){
              this.$set(this.formList,'executor',localStorage.getItem('employeeId'))
              this.$set(this.formList,'executorName',this.$store.state.myProfile.name)
          }else{
              this.$set(this.formList,'executor','')
              this.$set(this.formList,'executorName','')
          }
        },
        handleClose(done){
           done()
           this.dialog = false;
        },
        cancelForm(){
          this.dialog = false;
        },
        submit(){
            console.log(this.formList.startTime)
            console.log(typeof this.formList.startTime)
            console.log(this.formList)
            console.log(this.resultArr)
            if(this.formList.endTime){
               if(this.formList.endTime<this.formList.startTime) {
                   this.$message({type:'warning',message:'结束时间不能小于开始时间'})
                   return
               }
            }
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    let participant=''
                    let ParticipantName=''
                    if(this.resultArr.length){
                        this.resultArr.forEach(item=>{
                            participant+=item.id+';'
                            ParticipantName+=item.name+';'
                        })   
                        participant=participant.substring(0,participant.length-1)   
                        ParticipantName=ParticipantName.substring(0,ParticipantName.length-1)                  
                    }
                     console.log(participant) 
                    let obj={  
                          items:{           
                            thescheduleofTheType:this.formList.thescheduleofTheType,
                            title:this.formList.title,
                            Content:this.formList.Content,
                            executor:this.formList.executor,
                            executorName:this.formList.executorName,
                            participant:participant,
                            ParticipantName:ParticipantName,
                            startTime:this.formList.startTime,
                            endTime:this.formList.endTime,
                            file:this.fileList.length?JSON.stringify(this.fileList):'',
                            pushTime:this.formList.pushTime,
                          },
                          id:this.form.id
                    }
                   if(this.form.id){
                        this.$api.v3CalendarOkUpdateApi(obj,{
                            onSucess: response => {
                                console.log(response.data)
                            if(response.data.code==0){                            
                                this.dialog=false
                                this.$nextTick(function () {
                                    this.$refs.ruleForm.resetFields(); //重置输入框提示
                                });
                                this.searchCalendarList() 
                                this.searchCalendarListDay() 
                            }
                            }
                        }) 

                   }else{  
                    this.$api.v3CalendarOkApi(obj,{
                            onSucess: response => {
                                console.log(response.data)
                            if(response.data.code==0){                            
                                this.dialog=false
                                this.$nextTick(function () {
                                    this.$refs.ruleForm.resetFields(); //重置输入框提示
                                });
                                this.searchCalendarList() 
                                this.searchCalendarListDay() 
                            }
                            }
                        })   
                   }             
                }
            })          
        },
        employeeTableList(){//列表表格-查询结果
            let obj2={domainId:localStorage.getItem("domainId")||''}
            this.$api.v3employeeTableListApi(this.params,obj2,{
                onSucess: response => {
                   if(response.data.data){
                        this.tableDataEmployee=response.data.data.data
                        this.params.total=response.data.data.total
                   }
                }
            })
        }, 
        filterMethod(val){//输入框过滤搜索
            console.log(val)//输入框关键词名称
            this.params.keyword=val
            let obj2={domainId:localStorage.getItem("domainId")||''}
            this.$api.v3employeeTableListApi(this.params,obj2,{
                onSucess: response => {
                   if(response.data.data){
                        this.tableDataEmployee=response.data.data.data
                        this.params.total=response.data.data.total
                   }
                }
            })   
        },  
        selectUser(val){//查询下拉框id对应的名称数组
          const items=this.tableDataEmployee.find(item=>{
             return item.id==val
          })
          if(items){
            this.$set(this.formList,'executor',items.id)
            this.$set(this.formList,'executorName',items.name)  
          }     
        },
        cleartag(val){
           this.$set(this.params,'keyword','') 
           this.employeeTableList()
        },
        employeeTableListParty(){//列表表格-查询结果
            let obj2={domainId:localStorage.getItem("domainId")||''}
            this.$api.v3employeeTableListApi(this.params2,obj2,{
                onSucess: response => {
                   if(response.data.data){
                        this.tableDataEmployeeParty=response.data.data.data
                        this.params2.total=response.data.data.total
                   }
                }
            })
        }, 
        filterMethodParty(val){//输入框过滤搜索
            console.log(val)//输入框关键词名称
            this.params2.keyword=val
            let obj2={domainId:localStorage.getItem("domainId")||''}
            this.$api.v3employeeTableListApi(this.params2,obj2,{
                onSucess: response => {
                   if(response.data.data){
                        this.tableDataEmployeeParty=response.data.data.data
                        this.params2.total=response.data.data.total
                   }
                }
            })   
        },
        selectUserParty(val){//查询下拉框id对应的名称数组
           let resultArr=[]
            resultArr=this.tableDataEmployeeParty.filter(item=>{
            return val.indexOf(item.id)>-1
            })
            resultArr.forEach(its=>{
            this.resultArr.push(its)
            })
            let resultArr2=this.resultArr.filter(item=>{
            return val.indexOf(item.id)>-1
            })
            this.resultArr=resultArr2
            this.resultArr=[...new Set(this.resultArr)]
            console.log(this.resultArr)   
        },
        removetagParty(val){
            console.log(val)
            this.resultArr.forEach(item=>{
                if(item.id==val){
                this.resultArr.splice(item,1)
                }
            })
            console.log(this.resultArr)
        },
        uploadImg(e) {
            // alert(this.fileList.length)
            // if(this.fileList.length>0){
            //     this.$message({type:'warning',message:'最多只能上传5个文件'})
            //     return false
            // }
            console.log(e.file)     
            let fd=new FormData()
            fd.append("file",e.file)   
            console.log(fd)
            this.$api.v3commonFileUploadApi(fd,{
                onSucess: response => {
                    console.log(response.data.data) 
                    let obj={
                        name:e.file.name,
                        path:response.data.data,
                        url:'obpm'+response.data.data,
                        fileType:e.file.type,
                        uploader:this.$store.state.myProfile.name,
                        uploadTime:currDateTime(),
                        userName:this.$store.state.myProfile.name,
                        time:currDateTime(),
                        size:e.file.size,
                        uid:e.file.uid,
                        status:'success'
                    }
                    this.fileList.push(obj) 
                   
                }
            })            
        },
        handleRemove(file, fileList){
           console.log(file)
           this.fileList.forEach((item,index)=>{
               if(item==file){
                 this.fileList.splice(index,1)
               }
           })
        },
        calendarDetail(item){
           this.dialogdetail = true;
           let obj={id:item.id}
           this.$api.v3CanlendarDetailApi(obj,{
                onSucess: response => {
                   if(response.data.code==0){
                        this.form=response.data.datas[0]
                        if(this.form.item_starttime){
                            let date=new Date(this.form.item_starttime.time)
                            let year=date.getFullYear()
                            let month=(date.getMonth()+1)<10?'0'+(date.getMonth()+1):(date.getMonth()+1)
                            let dates=date.getDate()
                            let HH=date.getHours()<10?'0'+date.getHours():date.getHours()
                            let mm=date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes()
                            let startTime=year+'-'+month+'-'+dates+' '+HH+':'+mm
                            this.$set(this.form,'starTime',startTime)
                        }
                        if(this.form.item_endtime){
                            let date=new Date(this.form.item_endtime.time)
                            let year=date.getFullYear()
                            let month=(date.getMonth()+1)<10?'0'+(date.getMonth()+1):(date.getMonth()+1)
                            let dates=date.getDate()<10?'0'+date.getDate():date.getDate()
                            let HH=date.getHours()<10?'0'+date.getHours():date.getHours()
                            let mm=date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes()
                            let endTime=year+'-'+month+'-'+dates+'  '+HH+':'+mm
                            this.$set(this.form,'endTime',endTime)
                        }
                        this.fileList=this.form.item_file?JSON.parse(this.form.item_file):[]
                   }
                }
           }) 
        },   
        viewplan(){
           let url=`/static/portal/vue/index.html#/open?appId=__K9C0HmAjnqJZgTI2sjd&actionContent=__OfViG2ekPlRujgkIDHR&opentarget=detail&linkType=00&realformId=__OfViG2ekPlRujgkIDHR&docid=${this.form.item_planid}`
           window.open(url)
        },   
        onpreview(file){
          console.log(file)
          if(file.path.indexOf('http')==-1){
              if(location.origin.indexOf('test')>-1){
                  window.open('/v3/shared'+file.path)
              }else{
                  window.open('/obpm'+file.path)
              }
          }else{
              window.open(file.path)
          }
        },
        handleClosedetail(done){
            done()
           this.dialogdetail = false;
        },
        cancelFormDetail(){
           this.dialogdetail = false;
        },
        delDetail(){
            this.$confirm('即将删除该日程数据！删除后无法恢复，是否继续？')
            .then(_ => {                
               this.dialogdetail = false;
               let obj={
                    id:this.form.id,
                }
                this.$api.v3CanlendarDelApi(obj,{
                        onSucess: response => {
                            console.log(response.data)
                            if(response.data.code){
                                this.searchCalendarList() 
                                this.searchCalendarListDay() 
                            }
                        }
                    })

            }).catch(_ => {});                       
        },
        submitDetail(){
           this.dialogdetail = false;
           let obj={
               id:this.form.id,
               state:'已完成'
           }
           this.$api.v3CanlendarFinishStatusApi(obj,{
                onSucess: response => {
                    console.log(response.data)
                    if(response.data.code){
                          this.searchCalendarList() 
                          this.searchCalendarListDay() 
                    }
                }
            })
        },
        updateDetail(){
           this.dialogdetail = false;
           this.dialog = true;
           this.title='编辑日程'
           this.$set(this.params,'pageSize',999999)
           this.$set(this.params2,'pageSize',999999)
           this.employeeTableList()
           this.employeeTableListParty()
           let obj={id:this.form.id}
           this.$api.v3CanlendarDetailApi(obj,{
                onSucess: response => {
                   if(response.data.code==0){
                        this.formList=response.data.datas[0]
                        console.log(this.formList)
                        if(this.formList.item_starttime){
                            let date=new Date(this.formList.item_starttime.time)
                            let year=date.getFullYear()
                            let month=(date.getMonth()+1)<10?'0'+(date.getMonth()+1):(date.getMonth()+1)
                            let dates=date.getDate()
                            let HH=date.getHours()<10?'0'+date.getHours():date.getHours()
                            let mm=date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes()
                            let startTime=year+'-'+month+'-'+dates+'  '+HH+':'+mm
                            console.log(startTime)
                            console.log(typeof startTime)
                            this.$set(this.formList,'startTime',startTime)
                        }
                        if(this.formList.item_endtime){
                            let date=new Date(this.formList.item_endtime.time)
                            let year=date.getFullYear()
                            let month=(date.getMonth()+1)<10?'0'+(date.getMonth()+1):(date.getMonth()+1)
                            let dates=date.getDate()
                            let HH=date.getHours()<10?'0'+date.getHours():date.getHours()
                            let mm=date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes()
                            let endTime=year+'-'+month+'-'+dates+'  '+HH+':'+mm
                            this.$set(this.formList,'endTime',endTime)
                        }
                        this.fileList=this.formList.item_file?JSON.parse(this.formList.item_file):[]
                        this.$set(this.formList,'thescheduleofTheType',this.formList.item_thescheduleofthetype)
                        this.$set(this.formList,'title',this.formList.item_title)
                        this.$set(this.formList,'Content',this.formList.item_content)
                        this.$set(this.formList,'executor',this.formList.item_executor)
                        this.$set(this.formList,'executorName',this.formList.item_executorname)
                        if(this.formList.item_participant){
                            console.log(this.formList.item_participant)
                         let  participantStr=this.formList.item_participant.split(";")  
                        this.$set(this.formList,'participant',participantStr)
                        this.$set(this.formList,'ParticipantName',this.formList.item_participantname)
                        }
                        this.$set(this.formList,'pushTime',this.formList.item_pushtime)

                   }
                }
           }) 
        },
        initData(cur){
            var date;
            if(cur){            
              date=new Date(cur)
            }else{
                date=new Date()
                // var d=new Date();
                // var d=new Date(this.formatDate(now.getFullYear(),now.getMonth(),1))
                // d.setDate(42);
                // date=new Date(this.formatDate(d.getFullYear(),d.getMonth()+1,1))
            }    
            this.currentYear=date.getFullYear();
            this.currentMonth=date.getMonth()+1;
            this.currentDay=date.getDate();

            this.currentWeek=date.getDay();//1,6...0
            if(this.currentWeek==0){
                this.currentWeek=7;
            }
            var str=this.formatDate(this.currentYear,this.currentMonth,1)
            this.days.length=0;
            // 今天是周日，放在第一行第7个位置，前面6个
            //初始化本周
            for(var i=this.currentWeek-1;i>=0;i--){
                var d=new Date(str);
                d.setDate(d.getDate()-i);
                var dayobject={};
                dayobject.day=d;
                var now=new Date();
                //  if(d.getDate()===(now.getDate())&&d.getMonth()===now.getMonth()&&d.getFullYear()===now.getFullYear()){
                //       dayobject.index=index++;//从今天开始显示数量
                //  }else if(index!=0&&index<3){
                //      dayobject.index=index++;//从今天开始3天内显示的数量
                //  }
                 this.days.push(dayobject)
            }
            //其他周
            for (var i = 1; i <= 42 - this.currentWeek; i++) {
                var d = new Date(str);
                d.setDate(d.getDate() + i);
                var dayobject={};
                dayobject.day=d;
                var now=new Date();
                // if(d.getDate()===(now.getDate())&&d.getMonth()===now.getMonth()&&d.getFullYear()===now.getFullYear())
                // {
                //     dayobject.index=index++;
                // }

                // else if(index!=0&&index<3)
                //     dayobject.index=index++;
                this.days.push(dayobject);
            }
            
            this.days.forEach(item=>{
                let date=new Date(item.day)
                let year=date.getFullYear()
                let month=(date.getMonth()+1)<10?'0'+(date.getMonth()+1):(date.getMonth()+1)
                let dates=date.getDate()<10?'0'+date.getDate():date.getDate()
                let startTime=year+'-'+month+'-'+dates
                this.$set(item,'startTime',startTime)
                this.$set(item,'count',0)
            })
            console.log(this.days)
        },
        pickPre(year, month){
            // setDate(0); 上月最后一天
            // setDate(-1); 上月倒数第二天
            // setDate(dx) 参数dx为 上月最后一天的前后dx天
            var d = new Date(this.formatDate(year , month , 1));
            d.setDate(0);
            this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
            this.searchCalendarList() 
        },
        pickNext(year, month){
            var d = new Date(this.formatDate(year , month , 1));
            d.setDate(42);
            this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
            this.searchCalendarList() 
        },
        formatDate(year,month,day){
            var y=year;
            var m=month;
            if(m<10) m="0"+m;
            var d=day;
            if(d<10) d="0"+d;
            return y+"-"+m+"-"+d;
        },
        enterSchedule(){
            // console.log('进入日程管理应用')
            let appId='__Z9Q7OLCk3xcm8EcAy22'
            let name='日程管理'
            let flag=1
            this.$store.dispatch("loadMenus", {appId, name,flag});
        }
    },
}
</script>
<style lang="scss">
.homeCalendarBox{
    display: flex; 
    flex-direction: column;
    .topTitle{
        padding: 14px 16px;
        color: rgba(0, 0, 0, 0.85);
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .month{
            ul{
                display: flex;
                li{
                    cursor: pointer;
                    &.prev{padding: 0 5px;}
                    &.next{padding: 0 5px;}
                }
                .datecolumn{
                    margin: 0 20px;
                    font-size: 14px;
                    font-weight: bold;
                    cursor:default;
                }
            }
        }  
        .newbtn{
            em{
                cursor: pointer;
                margin-right:25px;
              }
        }      
    }

    .CalendarList{
        display: flex;
        flex-direction: column;
        .weekdays{
            display: flex;
            li{
                color: rgba(0, 0, 0, 0.85);
                font-size: 14px;
                width: 14.2%;
                display: flex;
                justify-content: center;
                padding: 15px 0;               
                font-weight: bold;
                cursor: pointer;
            }
        }
        .days{
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
         
            li{
                display: inline-table;
                width: 14.2%;
                height:16px;
                text-align: center;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.65); 
                flex-direction: column;
                cursor: pointer;
                padding: 2px 0;
                span{
                    font-size: 14px;
                    padding:0 5px;
                    &.active{
                    background: #e0f1ff;
                    color: #0089ff;
                    border-radius: 4px;
                    }
                }   
                .other-month{
                    color: gainsboro;
                } 
                p{
                   height: 20px;
                   em{
                    //    border: 1px solid #0F71FF;
                       color: #0F71FF;
                       font-size: 8px;
                       padding: 0 5px;
                   } 
                }           
                &.active{
                    background: #0F71FF;
                    color: #fff;
                    border-radius: 4px;
                    p{
                        em{
                            // border: 1px solid #fff;
                            color: #fff;
                            font-size: 8px;
                            padding: 0 5px;
                        }
                    }
                }

            }

            li{
              &.activeli{
                display: inline-table;
                width: 14.2%;
                height:16px;
                text-align: center;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.65); 
                flex-direction: column;
                cursor: pointer;
                background: #0F71FF;
                border-radius: 4px;
                span{
                    font-size: 14px;
                    padding:0 5px;
                    background: #0F71FF;
                    color:#fff;
                    border-radius: 4px;
                    &.active{
                    // background: #fff;
                    color: #fff;
                    border-radius: 2px;
                    }
                }   
                .other-month{
                    color: gainsboro;
                } 
                p{
                   height: 20px;
                   em{
                    //    border: 1px solid #fff;
                       color: #fff;
                       font-size: 8px;
                       padding: 0 5px;
                   } 
                }           
                &.active{
                    background: #0F71FF;
                    color: #fff;
                    border-radius: 4px;
                    p{
                        em{
                            // border: 1px solid #fff;
                            color: #fff;
                            font-size: 8px;
                            padding: 0 5px;
                        }
                    }
                }
              } 

            }
        }        
    }
    .linebottom{
        width: 100%;
        height: 1px;
        background: rgba(0, 0, 0, 0.06);
        margin:16px 0 12px 0;
    }
    .calendarCheckbox{
        display: flex;
        padding: 16px;
        ul{
            width: 100%;
            li{
                cursor: pointer;
                margin-bottom: 12px;
                em{cursor: pointer;margin-left:10px;}
            }
        }
    }
    .el-drawer__header{
        border-bottom:1px solid #eee;
        padding: 20px;
        font-weight: bold;
        color: #000;
        margin-bottom: 15px;
    }
    .el-drawer__body{
        .el-form{padding: 0 20px;}
        .el-form-item{display: flex; flex-direction: column;}
        .el-form-item__label{text-align: left;}
        .demo-drawer__footer{text-align: center;margin-bottom: 20px;}
    }
    .personSpan{display: flex;flex-direction: column;}
    .personul{
        display: flex;
        flex-wrap: wrap;
        li{
            display: flex;
            position: relative;
            flex-direction: column;
            align-items: center;
            width: 40px;
            margin-right:10px;
            flex-wrap: wrap;
            em{background: #0F71FF;color: #fff;padding:0 5px;border-radius:4px;}
            strong{color: #000;font-size: 12px;}
            i{position: absolute;top:-5px;right:-5px;cursor: pointer; display: flex;}
        }
    }
    .borderpadding{
        padding: 10px;
        border: 1px dashed #ccc;
        cursor: pointer;
        width: 40px;
        height:40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .el-checkbox__input.is-disabled .el-checkbox__inner{display: inherit;}
    .viewplancss{
        cursor: pointer;
        margin-left:20px;
        color: #0F71FF;
        text-decoration: underline;
    }
}
</style>