<template>
    <a-modal title="点名" :visible="childShow"  @ok="callRollOk " @cancel="callRollCancel" :width=1200>
        <a-row style="display: flex; align-items: center; margin-bottom: 15px;">
            <a-col span="2" style="text-align: right; font-weight: 600;color: #3E3E43;font-size: 14px;">课程名称:</a-col>
            <a-col span="5" style="text-align: left; margin-left: 8px;font-weight: 600;color: #3E3E43;font-size: 14px;">
                {{this.addPara.courseId_dictText}}
            </a-col>
            <a-col span="2" style="text-align: right; font-weight: 600;color: #3E3E43;font-size: 14px;">班级名称:</a-col>
            <a-col span="12" style="text-align: left; margin-left: 8px; font-weight: 600;color: #3E3E43;font-size: 14px;">
               <template v-if="this.addPara.type == '2'">{{this.addPara.courseId_dictText}}&nbsp;试听班</template>
               <template v-if="this.addPara.type == '1'"> {{this.addPara.classId_dictText}}</template>
            </a-col>
        </a-row>
        <a-row style="display: flex; align-items: center; margin-bottom: 15px;"> 
            <a-col span="2" style="text-align: right; "><span style="color:tomato;">*</span>上课日期:</a-col>
            <a-col span="5" style="text-align: left; margin-left: 8px;">
                <j-date  date-format="YYYY-MM-DD" v-model="this.addPara.curriculaDate" style="margin-left: 10px; width: 90%;" >
                </j-date>
            </a-col>
            <a-col span="2" style="text-align: right; "><span style="color:tomato;">*</span>上课时间:</a-col>
            <a-col span="12" style="text-align: left; margin-left: 8px;">
                <a-select style="width: 60px;margin-left: 10px;" v-model="time1" @change="timeChange">
                <a-select-option v-for="(val,index) in 23" :key="index" :value="index">{{ convertToBinary(index) }}
                </a-select-option>
                </a-select>
                &nbsp;:&nbsp;
                <a-select style="width: 60px" v-model="time2" @change="timeChange">
                <template v-for="(val,index) in 60">
                    <a-select-option v-if="Number(index)%5===0" :value="index">{{ convertToBinary(index)}}</a-select-option>
                </template>
                </a-select>
                &nbsp;&nbsp;~&nbsp;&nbsp;
                <a-select style="width: 60px" v-model="time3" @change="timeChange">
                <a-select-option v-for="(val,index) in 23" :key="index" :value="index">{{ convertToBinary(index) }}
                </a-select-option>
                </a-select>
                &nbsp;:&nbsp;
                <a-select style="width: 60px" v-model="time4" @change="timeChange">
                <template v-for="(val,index) in 60">
                    <a-select-option v-if="Number(index)%5===0" :value="index">{{ convertToBinary(index)}}</a-select-option>
                </template>
                </a-select>
                (上课时长:{{duration}}分钟)<a-button style="margin-left: 4px;"  @click="handlerTimeShow" type="link">使用预设时间</a-button>
            </a-col>
        </a-row>
        <a-row style="display: flex; align-items: center; margin-bottom: 15px;"> 
            <a-col span="2" style="text-align: right; "><span style="color:tomato;">*</span>上课教室:</a-col>
            <a-col span="5" style="text-align: left; margin-left: 8px;">
                <j-dict-select-tag placeholder="请选择课程" v-model="addPara.classRoomId" dictCode="education_classroom,name,id" style="margin-left: 10px; width: 90%;"/>
            </a-col>
            <a-col span="2" style="text-align: right; "><span style="color:tomato;">*</span>授课课时:</a-col>
            <a-col span="12" style="text-align: left; margin-left: 8px;">
                <a-input-number v-model="addPara.period" :max="99" type="number" style="margin-left: 8px; width: 54.5%;"/>
            </a-col>
        </a-row>
        <a-row style="display: flex; align-items: center; margin-bottom: 15px;"> 
            <a-col span="2" style="text-align: right; "><span style="color:tomato;">*</span>主教老师:</a-col>
            <a-col span="5" style="text-align: left; margin-left: 8px;">
                <j-dict-select-tag placeholder="请选择课程" v-model="addPara.lecturerId" dictCode="sys_user,realname,id" style="margin-left: 10px; width: 90%;"/>
            </a-col>
            <a-col span="2" style="text-align: right; ">上课主题:</a-col>
            <a-col span="12" style="text-align: left; margin-left: 8px;">
                <j-dict-select-tag placeholder="请选择课程" v-model="addPara.themeId" dictCode="education_theme,name,id" style="margin-left: 10px; width: 54%;"/>
            </a-col>
        </a-row>
        <a-row style="display: flex; align-items: center; "> 
            <a-col span="2" style="text-align: right; ">备注:</a-col>
            <a-col span="18" style="text-align: left; margin-left: 8px;">
                <a-textarea type="textarea" v-model="addPara.remark"   :rows="2" style="margin-left: 10px; width: 76%;"/>
            </a-col>
        </a-row>
        <a-divider dashed />
        <a-row style="display: flex; align-items: center; margin-top: -10px;"> 
            <a-col span="12" style="text-align: left; ">
                <a-input-search v-model="namePara" placeholder="请输入姓名" enter-button @search="nameSearch" style="width:38%;"/>
            </a-col>
            <a-col span="12" style="text-align: right; ">
                <a-button danger @click="handlerSelect" icon="plus">添加试听学员</a-button>
            </a-col>
        </a-row>
        <a-row>
            <a-col span="24">
                <a-table 
                :columns="columns" 
                :data-source="dataSource" 
                rowKey="id"
                style="margin-top:10px;">
                <span slot="status" slot-scope="text, record">
                    <a-radio-group v-model:value="record.status" button-style="solid" 
                     @change="handleStatusChange()" size="small" >
                        <a-radio-button value="1">到课</a-radio-button>
                        <a-radio-button value="2">缺席</a-radio-button>
                        <a-radio-button value="3">请假</a-radio-button>
                    </a-radio-group>
                    <span v-if="record.status == '1'" style="margin-left: 5px;">
                        <a-checkbox v-model:value="record.late" @change="handleStatusChange()">迟到</a-checkbox>
                    </span>
                </span>
                <span slot="course" slot-scope="text, record">
                   <span>{{addPara.courseId_dictText}}</span>
                </span>
                <span slot="remainingremaining" slot-scope="text, record">
                   <span v-if="addPara.type == '1'" >{{record.remainingremaining}}</span>
                   <span v-else>-</span>
                </span>
                <span slot="consume" slot-scope="text, record">
                    <span v-if="addPara.type == '1'" >{{record.consume}}</span>
                   <span v-else>-</span>
                </span>
                <span slot="fcheck" slot-scope="text, record">
                    <span v-if="addPara.type == '1'" >{{record.fcheck}}</span>
                   <span v-else>-</span>
                </span>
                <span slot="name" slot-scope="text, record">
                   <span v-if="record.search" class = "highlight">{{text}}</span>
                   <span v-else>{{text}}</span>
                </span>
                <span slot="action" slot-scope="text, record">
                    <a-popconfirm title="确定删除吗?"
                        ok-text="是"
                        cancel-text="否"
                        placement="leftTop"
                        @confirm="delConfirm(record)"
                        @cancel="delCancel">
                            <a-icon type="delete" style="font-size: 20px"/>
                    </a-popconfirm>
                </span>
                </a-table>
            </a-col>
        </a-row>
        <PrefabricationTime @child-event='timeReturn' :timeShow="timeShow"></PrefabricationTime>
        <studentSelect @child-event='selectReturn' :childShow="selectShow" :dataPara="selectPara"></studentSelect>
        <template slot="footer">
            <a-row>
                <a-col span="12" style="text-align: left;">
                    总人数:
                    <span style="color:tomato">{{student_total}}人</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;到课人数:
                    <span style="color:tomato">{{check_total}}人(含迟到{{late_total}}人)</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;缺席人数:
                    <span style="color:tomato">{{miss_total}}人</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;请假人数:
                    <span style="color:tomato">{{leave_total}}人</span>
                </a-col>
                <a-col span="12" style="text-align: right;">
                    <a-button @click="callRollCancel">关闭</a-button>
                    <a-button @click="callRollOk" type="primary">确定</a-button>
                </a-col>
            </a-row>
            
        </template>
    </a-modal>
</template>
<script>

import { getAction,postAction } from '@/api/manage'
import studentSelect from '../../education/modules/studentSelect.vue'
import moment from 'moment'
import store from '@/store'
import { Empty } from 'ant-design-vue';
import PrefabricationTime from '../../modules/PrefabricationTime.vue'
export default {
    name: 'CallRoll',
    components: {
        PrefabricationTime,studentSelect
    },
    data() {
        return {
            namePara: undefined,
            addPara: {},
            selectPara: [],
            time1: undefined,
            time2: undefined,
            time3: undefined,
            time4: undefined,
            timeShow: false,
            student_total: 0,
            check_total: 0,
            late_total: 0,
            miss_total: 0,
            leave_total: 0,
            duration: 0,
            dataSource: [],
            simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
            selectShow: false,
            columns: [
                {
                    title:'姓名',
                    align:"center",
                    dataIndex: 'name',
                    scopedSlots: { customRender: 'name' }
                },
                {
                    title:'课程',
                    align:"center",
                    scopedSlots: { customRender: 'course' }
                },
                {
                    title:'当前剩余',
                    align:"center",
                    scopedSlots: { customRender: 'remainingremaining' }
                },
                {
                    title:'本节消课课时',
                    align:"center",
                    scopedSlots: { customRender: 'consume' }
                },
                {
                    title:'人脸签到',
                    align:"center",
                    scopedSlots: { customRender: 'fcheck' }
                },
                {
                    title:'对内备注',
                    align:"center",
                    dataIndex: 'mark'
                },
                {
                    title:'点名状态',
                    align:"center",
                    scopedSlots: { customRender: 'status' }
                },
                {
                    title:'操作',
                    align:"center",
                    scopedSlots: { customRender: 'action' }
                },
            ]
        }
    },
    props: ['childShow', 'para','update'],
    watch: {
        immediate: true,
        childShow: {
            handler() {
                console.log(this.para)
                this.addPara = JSON.parse(JSON.stringify(this.para));
                if(this.para.curriculaTime === null || this.para.curriculaTime === '' || this.para.curriculaTime === undefined) {
                    var date = new Date();
                    var hour = date.getHours();
                    if(hour === Number(0)) {
                        this.time1 = Number(hour);
                        this.time2 = Number(0);
                        this.time3 = Number(hour)+1;
                        this.time4 = Number(0);
                        this.timeChange();
                    } else {
                        this.time1 = Number(hour)-1;
                        this.time2 = Number(0);
                        this.time3 = Number(hour);
                        this.time4 = Number(0);
                        this.timeChange();
                    }
                } else {
                    this.getTime(this.para.curriculaTime);
                }
                let params = {
                    schedule_id :this.addPara.id
                }
                getAction("/education/educationCallRoll/getCPsByScheduleId", params).then((res) => {
                    this.dataSource = res;
                    this.getTotal();
                });
            },
        }
    },
    methods: {
        disabledDate(current) {
            return current < moment().subtract(1,'day');// 当前时间之前的所有日期都禁用
        },
        callRollOk() {
            let params = {
                id: this.addPara.id,
                type: this.addPara.type,
                themeId: this.addPara.themeId,
                curriculaDate: this.addPara.curriculaDate,
                curriculaTime: this.addPara.curriculaTime,
                classRoomId: this.addPara.classRoomId,
                period: this.addPara.period,
                lecturerId: this.addPara.lecturerId,
                remark: this.addPara.remark,
                createBy: store.getters.userInfo.id,
                courseId_dictText: this.addPara.courseId_dictText,
                classId_dictText: this.addPara.classId_dictText,
                lecturerId_dictText: this.addPara.lecturerId_dictText,
                remark: this.addPara.remark,
                schoolDistrictId: this.addPara.schoolDistrictId,
                callRoll: this.dataSource,
            }
            if (this.update) {
                postAction("/education/educationSchedule/callRollEdit", params).then((res) => {
                    if(res.success) {
                        this.$message.success('编辑成功');
                        this.$emit('child-event', false);
                    } else {
                        this.$message.warn(res.message);
                    }
                });
            } else {
                postAction("/education/educationSchedule/callRoll", params).then((res) => {
                    if(res.success) {
                        this.$message.success('编辑成功');
                        this.$emit('child-event', false);
                    } else {
                        this.$message.warn(res.message);
                    }
                });
            }
            
        },
        callRollCancel() {
            this.$emit('child-event',false);
            this.student_total= 0;
            this.check_total= 0;
            this.late_total= 0;
            this.miss_total= 0;
            this.leave_total= 0;
            this.duration= 0;
        },
        timeChange(){
            var time2temp = Number(this.time3)*60 + Number(this.time4);
            var time1temp = Number(this.time1)*60 + Number(this.time2);
            if (time2temp - time1temp > 0) {
                this.duration = time2temp - time1temp ;
            } else {
                this.duration = 0 ;
            }
            this.addPara.curriculaTime = this.convertToBinary(this.time1)+":"+this.convertToBinary(this.time2)
            +"-"+this.convertToBinary(this.time3)+":"+this.convertToBinary(this.time4);
        },
        convertToBinary(num) {
            var str = num.toString();
            while (str.length < 2) {
                str = "0" + str;
            }
            return str;
        },
        handlerTimeShow() {
            this.timeShow = true;
            this.addPara = {};
        },
        timeReturn(data) {
            this.timeShow = false;
            if(data !== null) {
                let timeTemp = data[0].value.split('-');
                let timeTemp1 = timeTemp[0].split(':');
                let timeTemp2 = timeTemp[1].split(':');
                this.time1 = this.convertToBinary(timeTemp1[0]);
                this.time2 = timeTemp1[1];
                this.time3 = this.convertToBinary(timeTemp2[0]);
                this.time4 = timeTemp2[1];
                this.duration = data[0].text;
                this.addPara.curriculaTime = this.convertToBinary(this.time1)+":"+this.convertToBinary(this.time2)
            +"-"+this.convertToBinary(this.time3)+":"+this.convertToBinary(this.time4);
            }
        },
        getTime(data) {
            let timeTemp = data.split('-');
            let timeTemp1 = timeTemp[0].split(':');
            let timeTemp2 = timeTemp[1].split(':');
            this.time1 = this.convertToBinary(timeTemp1[0]);
            this.time2 = timeTemp1[1];
            this.time3 = this.convertToBinary(timeTemp2[0]);
            this.time4 = timeTemp2[1];
            this.duration = data[0].text;
            this.addPara.curriculaTime = this.convertToBinary(this.time1)+":"+this.convertToBinary(this.time2)
            +"-"+this.convertToBinary(this.time3)+":"+this.convertToBinary(this.time4);
        },
        selectReturn(returnRecord) {
            for(let i=0; i<returnRecord.length; i++) {
                let temp = {}
                if(this.addPara.type == 2) {
                    temp = {
                        id: returnRecord[i].id,
                        cpId: returnRecord[i].id,
                        name: returnRecord[i].name,
                        status: "1",
                        late: false,
                        courseId_dictText: '-',
                        remainingremaining: '-',
                        consume: '-',
                        fcheck: '-',
                        mark: '-',
                        search: false  //高亮查询
                    }
                }
                this.dataSource.push(temp);
            }
            this.selectShow = false;
            this.getTotal();
        },
        handlerSelect() {
            // not in 
            this.getTotal();
            this.selectShow = true;
        },
        handleStatusChange() {
            this.getTotal();
        },
        getTotal() {
            this.student_total= 0;
            this.check_total= 0;
            this.late_total= 0;
            this.miss_total= 0;
            this.leave_total= 0;
            for(let i =0; i< this.dataSource.length; i++) {
                if(this.dataSource[i].status == '1') {
                    this.check_total = this.check_total + 1;
                }
                if(this.dataSource[i].status == '2') {
                    this.miss_total = this.miss_total + 1;
                }
                if(this.dataSource[i].status == '3') {
                    this.leave_total = this.leave_total + 1;
                }
                if(this.dataSource[i].late) {
                    this.late_total = this.late_total + 1;
                }
                this.student_total = this.student_total + 1;
            }
            //not in
            this.selectPara = "";
            for (let i =0 ; i< this.dataSource.length; i++) {
                this.selectPara = this.selectPara +"'"+this.dataSource[i].cpId + "',";
            }
        },
        delConfirm(record) {
            let temp = this.dataSource.find(item => {return item.id == record.id});
            let index = this.dataSource.indexOf(temp);
            this.dataSource.splice(index,1);
            this.getTotal();
            this.$message.success('删除成功！');
        },  
        delCancel() {

        },
        nameSearch() {
            for(let i=0; i< this.dataSource.length; i++) {
                let name = this.dataSource[i].name;
                let searchResult = name.indexOf(this.namePara);
                if(searchResult !== -1) {
                    this.dataSource[i].search = true;
                } else {
                    this.dataSource[i].search = false;
                }
            } 
        }
    }
}
</script>
<style lang="less">
.ant-modal {
    top: 20px;
    margin: 0 auto;
  }
.highlight {
  background-color: rgb(255, 192, 105);
  padding: 0px;
}
</style>
