<style scoped>
@import "../financial/css/cssReset.css";

.baseSet_Title {
    width: 120px !important;
    padding: 18px 0 0 16px;
    text-align: right;
}
.singeRowTable tr th {
    border: 1px solid #d2d2d2;
    background: #FFF;
     background-clip: padding-box;
}
.workutaTeaching td:first-child{position: sticky;left:0px;background-color: #FFF;}
.workutaTeaching th:first-child{position: sticky;left:0px;}
.workutaTeaching .finger{
    cursor: pointer;
}
.workutaTeaching .yuan{
        width: 16px;
        height: 16px;
        display: inline-block;
        border-radius: 50%;
        margin-right: 10px;
}
.onetext{
    width: 100px;
    white-space: nowrap; 
    overflow: hidden;text-overflow:ellipsis;
}
.onetext2{
     width: 64px;
    white-space: nowrap; 
    overflow: hidden;text-overflow:ellipsis;
}
</style>
<template>
    <div class="page-body workutaTeaching">
        <div >
            <shiftform :shiftList="shiftList" @getLists="getshift"></shiftform>
        </div>
        
        <div style="width: 100%;margin-top: 20px;border: 1px solid #d2d2d2;">
            <div style="width: 100%;height: 50px;display: flex;align-items: center;justify-content: center;color: #409EFF;">
                <i class="el-icon-d-arrow-left" @click="reduceMonth" style="font-size: 18px;"></i>
                <span style="margin: 0 10px;">{{month.split('-')[0]}}年{{month.split('-')[1]}}月</span>
                <i class="el-icon-d-arrow-right"  @click="addMonth" style="font-size: 18px;"></i>
            </div>
            <div style="width: 100%;overflow-x: auto;" >
                <table
                    class="po_content singeRowTable"
                    style="border:1px solid #E6E6E6;"
                    cellspacing="0"
                    cellpadding="0"
                    v-loading="loading"
                    >
                    <tr >
                        <th width="100" style="min-width: 100px;">
                                
                        </th>
                        <th width="50" style="min-width: 50px;" v-for="(item,index) in dayArry" :key="index">
                            <div>
                                <div>{{item.day}}</div>
                                <div>{{item.week}}</div>
                            </div>
                        </th>
                    </tr>
                    <tr v-for="(item,index) in dataList.TeacherList" :key="index" v-if="dataList.TeacherList && dataList.TeacherList.length>0">
                        <td >
                            <div class="onetext">
                                {{item.TeacherName}}
                            </div>
                            
                        </td>
                        <td v-for="(x,y) in item.RDateList" :key="y" class="finger" @click="choicedate(item,x,index,y)" :style="{background:getcolor(x).background,color:getcolor(x).color}">
                            {{x.ShiftName?x.ShiftName.substring(0,1):''}}
                            <q-popup-proxy>
                                <q-banner v-if="isShowpopup">
                                    <div style="width: 300px;" v-if="InfoMsg">
                                         <q-card-section style="padding:10px 0">
                                            <div class="text-h6">排课计划</div>
                                        </q-card-section>
                                       <div class="col-6">
                                            <q-select filled stack-label option-value="Id" option-label="Name"
                                                v-model="InfoMsg.row.ShiftId" ref="Id" :options="shiftList" label="关联班次"
                                                dense class="col-6 q-pb-lg" emit-value map-options />
                                        </div>
                                        <div class="col-6" v-if="InfoMsg.row.ShiftId>0">
                                            <q-select filled stack-label option-value="RoomId" option-label="RoomName"
                                                v-model="InfoMsg.row.RoomId" ref="RoomId" :options="ClassRoomList" label="关联教室"
                                                dense class="col-6 q-pb-lg" emit-value map-options />
                                        </div>
                                         <q-card-actions align="right" class="bg-white">
                                        <q-btn label="取消" flat color="grey-10" size="sm" @click="isShowpopup=false"
                                        style="font-weight:400 !important" />
                                        <q-btn label="确认" color="accent q-px-md" size="sm" style="font-weight:400 !important"
                                        @click="addRowList()" />
                                    </q-card-actions>
                                    </div>
                                   
                                </q-banner>
                            </q-popup-proxy>
                        </td>
                    </tr>
                </table>
                <table
                    class="po_content singeRowTable"
                    style="border:1px solid #E6E6E6;margin-top: 50px;"
                    cellspacing="0"
                    cellpadding="0"
                    v-if="dataList.ShiftList&& dataList.ShiftList.length>0"
                    >
                 
                    <tr v-for="(item,index) in dataList.ShiftList" :key="index" v-if="dataList.TeacherList && dataList.TeacherList.length>0">
                        <td width="100" style="min-width: 100px;">
                            <div  style="display: flex;align-items: center;justify-content: center;padding: 0 5px;">
                                <span class="yuan" :style="{ background: getcolor(item).background }" ></span>
                                <div class="onetext2">{{item.ShiftName}}</div>
                            </div>
                            
                            
                        </td>
                        <td width="50" style="min-width: 50px;" v-for="(x,y) in item.RDateList" :key="y" class="finger" >
                            <!-- <span v-if="x.Number==0">{{x.Number}}</span> -->
                            <span v-if="x.Number>0" style="color:#409EFF ;">{{x.Number}}</span>
                        </td>
                        <td width="50" style="min-width: 50px;" v-for="(x,y) in item.RDateList1" :key="y" class="finger" >
                            
                            <!-- <span v-if="x.Number==0">{{x.Number}}</span> -->
                            <span v-if="x.Number>0" style="color:#409EFF ;">{{x.Number}}</span>
                        </td>
                    </tr>
                </table>
            </div>
          
            <div v-if='!dataList.TeacherList||(dataList.TeacherList && dataList.TeacherList.length==0)'
                        style="width: 100%;border:1px solid #E6E6E6;display: flex;align-items: center;justify-content: center;height: 60px;">
                        暂无数据
            </div>
        </div>
        <div style="width:100%;height: 50px;"></div>

          
    </div>
</template>
<script>

import {
    getScrollPlanMonthList,
    setScrollPlanInfo
} from '../../api/course/roll'
  import {
    queryClassRoomList,
  } from '../../api/school/index';
import shiftform from '../../components/course/shift-form'
export default {
    meta: {
        title: "滚动排班"
    },
    props: {},
    components: {
      shiftform
    },

    data() {
        return {
            msg: {
                STime: '',
                ETime:'',
            },
            month:'',
            isShowpopup:false,
            loading: false,
            shiftList:[],//班次列表
            dataList:[],
            dayArry:[],//天数列表
            ClassRoomList:[],//教室列表
            InfoMsg:null
        }
    },
    created() { 
     
        this.month = ''
        let yy = new Date().getFullYear()
        let mm = new Date().getMonth() + 1
        mm = mm<10?'0'+mm:mm
        this.month = yy + '-' + mm 
        this.getday()
    },
    mounted() {
        this.getClassRoomList();
    },
    methods: {
        getday(){//获取月份天数
            let  arr = this.month.split("-");
            let year = parseInt(arr[0]);
	        let month = parseInt(arr[1]);
            let setDate = new Date(year,parseInt(month),0)
            let day = setDate.getDate()
            this.dayArry=[];
            this.msg.STime = this.month+'-01';//开始时间之间赋值
            for (var k = 1; k <= day; k++) {
                if(k==day){
                    this.msg.ETime = this.month+'-'+k;//开始时间之间赋值
                }
                let obj = {
                    day :k,
                    week:this.getWeek(this.month+'-'+k)
                }
                 this.dayArry.push(obj);
            }
            this.getList(); //获取规则

                
        },
        getWeek(dateString){//获取周几
            let dateArray = dateString.split("-");
            let date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
            return "日一二三四五六".charAt(date.getDay());
        },
        addMonth(){//加月份
            let  arr = this.month.split("-");
            let year = parseInt(arr[0]);
	        let month = parseInt(arr[1]);
            if (month == 12) {
                year = year + 1;
                month = 1;
            } else {
                month = month + 1;
            }
            month = month<10?'0'+month:month
            this.month = year + "-" + month;
            this.getday()
        },
        reduceMonth(){//月份减
            let  arr = this.month.split("-");
            let year = parseInt(arr[0]);
	        let month = parseInt(arr[1]);
            if (month == 1) {
                year = year - 1;
                month = 12;
            } else {
                month = month - 1;
            }
            month = month<10?'0'+month:month
            this.month = year + "-" + month;
            this.getday()

        },
        getshift(data){//从子组件获取班次的列表
            this.shiftList = JSON.parse(JSON.stringify(data));
            let obj = {
                Id: 0,
                Name: "休息"
            }
            this.shiftList.push(obj)

        },
        //获取教室下拉
        getClassRoomList() {
            queryClassRoomList({}).then(res => {
                if (res.Code == 1) {
                    this.ClassRoomList = res.Data;
                }
            })
        },
        getcolor(row){
            let obj ={
                background:'#FFF',
                color:'#111'
            }
            if(row.ShiftId>0){//判断下  节约性能
                for(let i = 0;i<this.shiftList.length;i++){
                    if(this.shiftList[i].Id == row.ShiftId){
                        obj.background = this.shiftList[i].Color
                        obj.color = '#FFF';
                        break
                    }
                }
            }
            if(row.ShiftId==0){
                obj.background = '#E1E1E1'
                obj.color = '#FFF';
            }
            return obj
        },
        choicedate(item,x,index,y){//点击某一个弹出
            this.InfoMsg = {
                index:index,
                y:y,
                row: JSON.parse(JSON.stringify(x)),
                AccountId:item.TeacherId
            };
            if(this.InfoMsg.row.ShiftId==-1){
                this.InfoMsg.row.ShiftId = '';
                this.InfoMsg.row.RoomId = ''
            }
            this.isShowpopup =true;

        },
        getList(type) {
            this.loading = true;
            getScrollPlanMonthList(this.msg).then(res => {
                this.loading = false;
                this.dataList = res.Data
            })
            .catch(() => {
                this.loading = false;
            });
          
        },
        addRowList(){
            let addMsg = {
                Id:this.InfoMsg.row.PlanId,
                Date:this.InfoMsg.row.Date,
                ShiftId:this.InfoMsg.row.ShiftId,
                RoomId:this.InfoMsg.row.RoomId,
                AccountId:this.InfoMsg.AccountId,
            }
            if(addMsg.ShiftId===''){
                this.$q.notify({
                        type: 'negative',
                        position: "top",
                        message: `请选择关联班次`
                })
                return
            }
            if(addMsg.ShiftId>0 && addMsg.RoomId==''){
                 this.$q.notify({
                        type: 'negative',
                        position: "top",
                        message: `请选择关联教室`
                })
                return
            }
            if(addMsg.ShiftId==0){
                addMsg.RoomId = 0
            }
            setScrollPlanInfo(addMsg).then(res => {
                 this.$q.notify({
                    icon: 'iconfont icon-chenggong',
                    color: 'accent',
                    timeout: 2000,
                    message: '操作成功',
                    position: 'top'
                })
                this.getList();
                this.isShowpopup =false;
            })
            .catch(() => {
                this.loading = false;
            });

        },
       
      

    },
}

</script>
<style lang="sass">

@import url('~assets/css/table.sass')

</style>
<style scoped>
  /deep/.el-input__inner,
  /deep/.el-range-input {
    background-color: transparent;
    border: none;
  }



 
</style>
