<style>
.classHours .border-bottom {
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.classHours .text-bottom {
    height: 32px;
    line-height: 32px;
    padding-left: 16px;padding-right: 16px;
    border-bottom: 1px dashed #eee;
    
    
}

.classHours .singeRowTable tr th {
    border: 1px solid #d2d2d2;
}

.border-bottom {
    border-bottom: 1px dashed #eee;
    padding-bottom: 5px;
    margin-bottom: 5px;
}
.stulistNum {
    display: inline-block;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 23px;
    border: 1px solid #2961fe;
    border-radius: 50%;
    cursor: pointer;
    color: #2961fe;
}
.cycle_Title {
    font-size: 20px;
    font-weight: 500;
    color: #1f2329;
}
.customMain {
    width: 700px !important;
    display: flex;
    flex-direction: column;
    height: 100 vh;
    padding: 15px 17px 0 17px;
    background-color: #fff;
}
.el-input-group__append{
    padding: 0 10px;
}
</style>
<template>
    <div class="page-body classHours">
        <div class="page-content">
            <q-table
                :pagination="msg"
                :loading="loading"
                no-data-label="暂无相关数据"
                flat
                class="sticky-column-table sticky-right-column-table"
                separator="none"
                :data="dataList"
                :columns="columns"
                row-key="name"
            >
                <template v-slot:top>
                    <div class="col-2 q-table__title">上课时间段</div>
                    <q-space />
                    <div class="page-option">
                        <q-btn
                            color="accent"
                            size="sm"
                            class="q-mr-md"
                            icon="add"
                            label="新增时间段"
                            @click="AddMsg(null)"
                        />
                    </div>
                </template>
                <template v-slot:body="props">
                    <q-tr :props="props">
                        <template v-for="col in props.cols">
                            <q-td v-if="col.name == 'Name'">{{ col.value }}</q-td>

                            <q-td v-if="col.name == 'Sort'" style="padding: 10px 0">
                                <div v-for="item in col.value">
                                    <div class="text-bottom" style="margin-left: 10px;">{{ item.Sort }}</div>
                                </div>
                            </q-td>
                            <q-td v-if="col.name == 'StartTime'" style="padding: 10px 0">
                                <div v-for="item in col.value">
                                    <div class="text-bottom">{{ item.StartTime }}</div>
                                </div>
                            </q-td>
                            <q-td v-if="col.name == 'EndTime'" style="padding: 10px 0">
                                <div v-for="item in col.value">
                                    <div class="text-bottom">{{ item.EndTime }}</div>
                                </div>
                            </q-td>
                            <q-td v-if="col.name == 'Minutes'" style="padding: 10px 0">
                                <div v-for="item in col.value">
                                    <div class="text-bottom">{{ item.Minutes }}</div>
                                </div>
                            </q-td>
                            <q-td v-if="col.name == 'UpdateByName'">{{ col.value }}</q-td>
                            <q-td v-if="col.name == 'UpdateTime'">{{ col.value }}</q-td>
                            <q-td v-if="col.name == 'Id'">
                                <q-btn
                                    flat
                                    size="xs"
                                    icon="edit"
                                    color="accent"
                                    style="font-weight:400"
                                    label="编辑"
                                    @click="AddMsg(props.row)"
                                />
                                <q-btn
                                    flat
                                    size="xs"
                                    icon="delete"
                                    color="negative"
                                    class="q-mr-xs"
                                    label="删除"
                                    @click="delConsult(props.row.Id)"
                                />
                            </q-td>
                        </template>
                    </q-tr>
                </template>
                <template v-slot:body-cell-Id="props">
                    <q-td :props="props">
                        <div></div>
                    </q-td>
                </template>
                <template v-slot:bottom></template>
            </q-table>
        </div>
        <q-dialog
            v-model="persistent"
            full-height
            maximized
            position="right"
            persistent
            @hide="persistent=false"
            transition-show="slide-left"
        >
            <div class="customMain" v-if="addMsg">
                <div class="cycle_Title">上课时间段</div>
                <div style="margin-top: 10px;">
                    <q-input
                        filled
                        stack-label
                        :dense="false"
                        v-model="addMsg.Name"
                        style="width: 640px;"
                        ref="Name"
                        class="col-12 q-pb-lg"
                        label="时段名称"
                        :rules="[val => !!val || '请填写时段名称']"
                    />
                </div>
                <div style="margin-bottom: 80px;">
                    <div style="margin-bottom: 10px;">时段列表</div>
                    <div
                        v-for="(x,y) in addMsg.TimeList"
                        :key="y"
                        style="display: flex;align-items: center;margin-bottom: 10px;"
                    >
                      
                        <el-input v-model="x.Sort" placeholder="排序" type='number' min="0" style="width: 80px;margin-right: 5px;"></el-input>
                        
                        <el-time-select
                            class="q-mr-lg"
                            style="width: 180px;margin-right: 5px;"
                            v-model="x.StartTime"
                            :picker-options="{
                                start: '00:00',
                                step: '00:05',
                                end: '23:59',
                                maxTime: x.EndTime
                            }"
                            placeholder="开始时间(格式00:00)"
                        ></el-time-select>
                        <el-time-select
                            style="width: 180px;margin-right: 5px;"
                            v-model="x.EndTime"
                            :picker-options="{
                                start: '06:00',
                                step: '00:05',
                                end: '23:59',
                                minTime: x.StartTime
                            }"
                            placeholder="结束时间(格式00:00)"
                        ></el-time-select>
                        <el-input v-model="x.ClassHours" placeholder="消耗课时" type='number' min="0" style="width: 100px;margin-right: 5px;"></el-input>
                        <q-btn
                            round
                            size="xs"
                            color="deep-orange"
                            icon="delete"
                            v-if="addMsg.TimeList.length > 1"
                            @click="addMsg.TimeList.splice(y, 1)"
                            style="margin-left: 10px;"
                        />
                        <q-btn
                            round
                            size="xs"
                            color="primary"
                            icon="add"
                            v-if="addMsg.TimeList.length == y + 1"
                            @click="addMsg.TimeList.push({ Sort: y+2, StartTime: '', EndTime: '', Minutes: 0,ClassHours:'' })"
                            style="margin-left: 10px;"
                        />
                    </div>
                </div>

                <div
                    style="width: 100%;height: 50px;position: absolute;left: 0;bottom: 0;background: #FFF;display: flex;align-items: center;padding: 0 20px;justify-content: flex-end;"
                >
                    <q-btn color="accent" size="sm" class="q-mr-md" label="保存" @click="setAdd()" :loading="saveLoading"></q-btn>
                </div>

                <div class="dialog-out-close" @click="persistent = false">
                    <i class="iconfont icon-close" style="font-size:26px;" />
                </div>
            </div>
        </q-dialog>
    </div>
</template>
<script>
import {
    getScrollCourseTimeList,
    setScrollCourseTimeInfo,
    delScrollCourseTimeInfo
} from '../../api/course/roll'
//   import consultForm from '../../../components/finance/consult-form'
export default {
    meta: {
        title: "上课时间段"
    },
    props: {},
    components: {
        //   consultForm
    },
    data() {
        return {
            msg: {
                pageIndex: 1,
                pageSize: 12,
                rowsPerPage: 99999,
            },
            columns: [{
                name: "Name",
                label: "时段名称",
                field: "Name",
                align: "left"
            },
            {
                name: "Sort",
                label: "排序",
                align: "left",
                field: row => row.TimeList
            },
            {
                name: "StartTime",
                label: "开始时间",
                align: "left",
                field: row => row.TimeList
            },
            {
                name: "EndTime",
                label: "结束时间",
                align: "left",
                field: row => row.TimeList
            },

            {
                name: "Minutes",
                required: true,
                label: "分钟数",
                align: "left",
                field: 'Minutes',
                field: row => row.TimeList
            },


            {
                name: "UpdateByName",
                label: "创建人",
                field: "UpdateByName",
                align: "left",
            },
            {
                name: "UpdateTime",
                label: "创建时间",
                field: "UpdateTime",
                align: "left"
            },
            {
                name: 'Id',
                label: '操作',
                field: 'Id'
            }
            ],
            pageCount: 0,
            loading: false,
            persistent: false,
            dataList: [], //列表数据
            addMsg: null,
            saveLoading:false
        }
    },
    created() { },
    mounted() {
        this.getList(); //获取规则
    },
    methods: {

        getList() {
            this.loading = true;
            getScrollCourseTimeList({}).then(res => {
                if (res.Code == 1) {
                    this.dataList = res.Data;
                }
                this.loading = false
            })
        },
        AddMsg(obj) {
            if (obj) {
                this.addMsg = JSON.parse(JSON.stringify(obj)) ;
            } else {
                this.addMsg = {
                    Id: 0,
                    Name: '',
                    TimeList: [{ Sort: 1, StartTime: '', EndTime: '', Minutes: 0, ClassHours:''}]
                }
            }
            this.persistent = true
        },
        setAdd(){
            this.$refs.Name.validate()
            if(!this.$refs.Name.hasError){
                for(let i = 0;i<this.addMsg.TimeList.length;i++){
                    let x =this.addMsg.TimeList[i]
                    if(x.Sort=='' || x.Sort==null || x.Sort<0){
                        x.Sort = 0
                    }
                    if(x.Minutes=='' || x.Minutes==null|| x.Minutes<0){
                        x.Minutes = 0
                    }
                    if(x.ClassHours=='' || x.ClassHours==null || x.ClassHours<0){
                        x.ClassHours = 0
                    }
                    if(x.StartTime==''){
                         this.$q.notify({
                            type: 'negative',
                            message: `请输入开始时段`,
                            position: 'top'
                        })
                        return
                    }
                    if(x.EndTime==''){
                         this.$q.notify({
                            type: 'negative',
                            message: `请输入结束时段`,
                            position: 'top'
                        })
                        return
                    }
                }
                this.saveLoading = true;
                setScrollCourseTimeInfo(this.addMsg).then(res => {
                    if (res.Code == 1) {
                        this.$q.notify({
                            icon: 'iconfont icon-chenggong',
                            color: 'accent',
                            timeout: 2000,
                            message: '操作成功',
                            position: 'top'
                        })
                        this.getList();
                    }
                    this.saveLoading = false;
                    this.persistent = false;
                })

            }
        },

        delConsult(Id) {
            let delMsg = {
                CourseTimeId: Id
            };
            this.$q.dialog({
                title: '提示信息',
                message: '是否确定删除？',
                cancel: true,
                persistent: true,
                ok: "确定",
                cancel: "取消",
            }).onOk(() => {
                delScrollCourseTimeInfo(delMsg).then(res => {
                    if (res.Code == 1) {
                        this.$q.notify({
                            icon: 'iconfont icon-chenggong',
                            color: 'accent',
                            timeout: 2000,
                            message: '删除成功！',
                            position: 'top'
                        })
                        this.getList();
                    }
                })
            }).onCancel(() => {

            });
        }
    },
}

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

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