<style lang="scss" scoped>
@import "../table.scss";
</style>
<template>
    <div>
        <el-card>
            <!--  检索区域  -->
            <div class="seachbox">
                <div class="seachbox">
                    <!-- 学期检索 --><!-- <el-select v-model="queryParams.Term" placeholder="学期" filterable clearable
                        size="small" class="ml-5 seachbox_input">
                        <el-option v-for="item in TermList" :key="item.name" :label="item.name" :value="item.value" />
                    </el-select> -->
                    <!-- 学院检索  -->
                    <!-- <el-select v-model="queryParams.College" placeholder="学院" filterable clearable size="small"
                        class="ml-5 seachbox_input">
                        <el-option v-for="item in CollegeList" :key="item.name" :label="item.name"
                            :value="item.value" />
                    </el-select> -->
                    <!-- 教室检索 -->
                    <el-select v-model="queryParams.Classroom" placeholder="教室" filterable clearable size="small"
                        class="ml-5 seachbox_input">
                        <el-option v-for="item in ClassroomList" :key="item.name" :label="item.name"
                            :value="item.name" />
                    </el-select>
                    <!--  周次检索 -->
                    <!-- <el-select v-model="queryParams.Week" placeholder="周次" filterable clearable size="small"
                        @change="selectweek" class="ml-5 seachbox_input">
                        <el-option v-for="item in WeekList" :key="item.name" :label="item.name" :value="item.value" />
                    </el-select> -->
                    <!-- 教师检索  -->
                    <el-input v-model.trim="queryParams.Teacher" placeholder="教师" clearable size="small"
                        style="width:200px; margin:0px 10px 0px 0px "></el-input>
                    <!-- 节次检索 -->
                    <!-- <el-select v-model="queryParams.Section" placeholder="节次" filterable clearable size="small"
                        class="ml-5 seachbox_input">
                        <el-option v-for="item in SectionList" :key="item.name" :label="item.name"
                            :value="item.value" />
                    </el-select> -->
                    <!-- <el-select v-model="queryParams.Status" placeholder="状态" filterable clearable size="small"
                        class="ml-5 seachbox_input">
                        <el-option v-for="item in StatusList" :key="item.name" :label="item.name" :value="item.value" />
                    </el-select> -->
                    <!-- 日历检索 -->

                   <!--  <el-date-picker v-model="queryParams.Date" value-format="YYYY-MM-DD" type="daterange"
                        @change="selecttimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        style="margin-top: 10px;" /> -->

                    <!-- 按钮——————搜索 -->
                    <el-button class="ml-5" style="margin-left: 10px;" type="primary"
                        @click="ClickSearch">搜索</el-button>
                </div>
                <!-- 状态检索 -->
                <!-- <div class="status">
                   
                                </div> -->
            </div>
            <!-- 检索结束  -->
            <!-- 按钮————新增    -->
            <div class="seachbox">
                <el-button type="success" @click="addbox" class="seachboxadd">
                    <el-icon class="el-icon-left">
                        <Plus :size="30" />
                    </el-icon>
                    <div> 新 增 </div>
                </el-button>
            </div>
            <!-- table开始-->
            <el-table :data="tableData" border stripe :header-cell-style="{ 'text-align': 'center' }"
                :scrollbar-always-on="true">
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column prop="TeacherName" align="center" label="教师名字" width="100">
                </el-table-column>
                <el-table-column prop="TeacherTitle" align="center" label="教师职称" width="100">
                </el-table-column>
                <el-table-column prop="IsOutSide" align="center" label="校内/外教师" width="100">
                    <template v-slot="scope">
                        <el-tag type="success" v-if="!scope.row.IsOutSide">校内教师</el-tag>
                        <el-tag v-if="scope.row.IsOutSide">校外教师</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="DateTime" label="日期" align="left">
                </el-table-column>
                <el-table-column prop="CourceName" align="left" label="课程名称">
                </el-table-column>
                <el-table-column prop="ClassName" align="left" label="班级名称">
                </el-table-column>
                <el-table-column prop="ClassroomName" align="center" label="教室名称" width="150">
                </el-table-column>
                <el-table-column prop="IsValid" align="center" label="按日期时间排课" width="150">
                    <template v-slot="scope">
                        <el-tag type="success" v-if="!scope.row.IsByDate">是</el-tag>
                        <el-tag type="danger" v-if="scope.row.IsByDate">否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="150" fixed="right">
                    <template v-slot="scope">


                        <el-row class="rowcenter" v-if="scope.row.IsAdded">
                            <Edit-Button permission="TeaLogColumns:Edit" content="编辑"
                                @clicknative="edititem(scope.row)"></Edit-Button>

                            <Delete-Button permission="TeaLogColumns:Delete" @confirm="delitem(scope.row)"
                                content="删除"></Delete-Button>

                        </el-row>

                        <p v-else>非手动添加无操作</p>

                    </template>
                </el-table-column>
            </el-table>
            <!-- table结束 -->
            <!-- 分页 -->
            <div class="paginationbox">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageobj.pageNum" :page-sizes="pageobj.pageSizeOptions" :page-size="pageobj.pageSize"
                    layout="total, sizes, prev, pager, next" :total="pageobj.Total">
                </el-pagination>
            </div>
            <!-- 新增抽屉 -->
            <el-drawer size="50%" v-model="drawerform" :title="drawerformtitle" :append-to-body="false">
                <div class="demo-drawer__content">
                    <el-form label-position="right" ref="ruleForm" :rules="rules" label-width="150px" :model="formItem">
                        <!-- 新增__教室 -->
                        <el-form-item label="请选择教室" prop="ClassroomCode">
                            <el-select v-model="formItem.ClassroomCode" placeholder="教室" clearable size="small"
                                class="ml-5 seachbox_input">
                                <el-option v-for="item in AddClassroonList" :key="item.name" :label="item.name"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <!-- 新增__按钮--添加专业班级 -->
                        <el-form-item label="添加班级" prop="MajorClass">
                            <!-- <el-button type="primary" round @click="Newbox"><el-icon size="20">
                                    <Plus />
                                </el-icon> 添加</el-button> -->
                            <el-select ref="itemSelectclass" filterable multiple v-model="classformItem.ClassCode"
                                placeholder="班级" clearable @change="classSelectclasscode">
                                <el-option v-for="item in NewClassList" :key="item.name" :label="item.name"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="校内/外教师" prop="xnw">
                            <el-radio-group v-model="IsOutSide">
                                <el-radio label="1">校内</el-radio>
                                <el-radio label="2">校外</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <!-- 新增__教师姓名 -->
                        <el-form-item label="教师姓名" prop="TeacherName">
                            <!-- <el-select v-model="formItem.TeacherNumber" placeholder="教师姓名" clearable size="small"
                                class="ml-5 seachbox_input">
                                <el-option v-for="item in TeacherNameList" :key="item.Number" :label="item.Name"
                                    :value="item.Number">{{ item.Name }}({{ item.Number }})</el-option>>
                            </el-select> -->
                            <el-input v-if="IsOutSide==2" v-model="formItem.TeacherName" placeholder="请选择教师"
                                autocomplete="off"></el-input>
                            <el-input v-else v-model="formItem.TeacherName" readonly placeholder="请选择教师" @click="modelteacher"
                                autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="职称" prop="TeacherTitle">
                            <el-input v-model="formItem.TeacherTitle" placeholder="请输入职称" autocomplete="off"></el-input>
                        </el-form-item>
                        <!-- 新增__周次
                        <el-form-item label="请选择周次" prop="Weeks">
                            <el-checkbox-group v-model="formItem.Weeks">
                                <el-checkbox v-for="item in WeekList" :key="item.value" :label="item.value">{{
                                    item.name
                                    }}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="请选择周几" prop="WeekDay">
                            <el-radio-group v-model="formItem.WeekDay">
                                <el-radio v-for="item in DayList" :key="item.value" :label="item.value">
                                    {{ item.name }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="请选择节次" prop="ScheduleName">
                            <el-checkbox-group v-model="formItem.ScheduleName">
                                <el-checkbox v-for="item in AddSectionList" :key="item.value" :label="item.value">{{
                                    item.name
                                    }}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>-->
                        <el-form-item label="日期" prop="Date">
                            <el-date-picker
                                v-model="formItem.Date"
                                type="date"
                                placeholder="请选择日期"
                                format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD"
                            />
                        </el-form-item>
                        <el-form-item label="时间" prop="Time">
                            <el-time-picker
                                v-model="formItem.Time"
                                is-range
                                range-separator="-"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                :format="'HH:mm'"
                                value-format="HH:mm"
                            />
                        </el-form-item>
                        <!-- 新增__课程 -->
                        <el-form-item label="课程名称" prop="CourceName">
                            <el-input placeholder="请填写课程" clearable v-model.trim="formItem.CourceName"> </el-input>
                        </el-form-item>
                        <el-form-item label="午别时段" prop="TimeInterval">
                            <el-input placeholder="请填写午别时段" clearable v-model.trim="formItem.TimeInterval"> </el-input>
                        </el-form-item>
                        <el-form-item label="教学形式" prop="TeachingForm">
                            <el-input placeholder="请填写午别时段" clearable v-model.trim="formItem.TeachingForm"> </el-input>
                        </el-form-item>
                        <el-form-item label="按日期时间排课" prop="IsByDate">
                            <el-radio-group v-model="formItem.IsByDate">
                                <el-radio label="1">是</el-radio>
                                <el-radio label="2">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <!-- 新增__课程类型 -->
                        <!--
                            <el-form-item label="请填写课程类型" prop="CourceType">
                                <el-select v-model="formItem.CourceType" placeholder="请选择类型" clearable size="small"
                                    class="ml-5 seachbox_input">
                                    <el-option v-for="item in CourseTypeList" :key="item.name" :label="item.name"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        -->
                        <!-- 新增__状态 -->
                        <!-- <el-form-item label="是否有效" prop="IsValid">
                            <el-radio-group v-model="formItem.IsValid">
                                <el-radio v-for="item in youxiaolist" :key="item.value" :label="item.value">
                                    {{ item.name }}</el-radio>
                            </el-radio-group>
                        </el-form-item> -->
                    </el-form>

                    <!-- <div class="demo-drawer__footer demo-drawerchange__footer ">
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                                    </div> -->
                    <div class="demo-drawer__footer demo-drawerchange__footer" v-if="!isedit">
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </div>
                    <div class="demo-drawer__footer demo-drawerchange__footer" v-if="isedit">
                        <el-button type="primary" @click="editsubmitForm('ruleForm')">提交</el-button>
                        <el-button @click="editresetForm('ruleForm')">重置</el-button>
                    </div>
                </div>

                <!-- 添加页面  -->
                <el-card class="box-card" v-show="isClose">
                    <template #header>
                        <div class="card-header">
                            <span>添加专业班级</span>
                            <el-button class="btn_close" text @click="Btn_Close"><el-icon>
                                    <Close />
                                </el-icon></el-button>
                        </div>
                    </template>
                    <div class="card-contain">
                        <el-form label-width=" 150px" v-model="classformItem" :rules="NewRules" ref="ruleForm1">
                            <!-- 添加页面---学院 -->
                            <!-- <el-form-item label="请选择学院" prop="College">
                                <el-select filterable clearable size="small" v-model="classformItem.CollegeCode"
                                    placeholder="学院" @change="CollegeChange">
                                    <el-option v-for="item in NewCollegeList" :key="item.name" :label="item.name"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item> -->
                            <!-- 添加页面---专业-->
                            <!-- <el-form-item label="请选择专业" prop="Major">
                                <el-select ref="itemSelectmajor" filterable clearable size="small"
                                    v-model="classformItem.MajorCode" placeholder="专业" @change="MajorChange">
                                    <el-option v-for="item in NewMajorList" :key="item.name" :label="item.name"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item> -->
                            <!-- 添加页面---年级 -->
                            <!-- <el-form-item label="请选择年级" prop="Grade">
                                <el-select filterable clearable size="small" v-model="classformItem.Grade"
                                    placeholder="年级" @change="GradeChange">
                                    <el-option v-for="item in NewGradeList " :key="item.name" :label="item.name"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item> -->
                            <!-- 添加页面---班级 -->
                            <el-form-item label="请选择班级" prop="Class">
                                <el-select ref="itemSelectclass" filterable multiple v-model="classformItem.ClassCode"
                                    placeholder="班级" size="small" clearable @change="classSelectclasscode">
                                    <el-option v-for="item in NewClassList" :key="item.name" :label="item.name"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="Newfooter">
                        <el-button class="btn_cancel" @click="Btn_Cancel"> 取消 </el-button>
                        <el-button class="btn_affirm" @click="Btn_Affirm" type="primary"> 确认 </el-button>
                    </div>
                </el-card>
            </el-drawer>
            <!-- 抽屉结束 -->


        </el-card>
        <el-dialog title="选择教师" v-model="teachershow" center draggable>
            <teacher-select @funval="numberval" :showteacherselect="showteacherselect"
                :activwshow="activwshow"></teacher-select>
        </el-dialog>

    </div>
</template>

<script>
import { nanoid } from 'nanoid'
import { getsplit } from "@/utils/common.js"
import teacherSelect from "@/components/teacherselect.vue";
import { getAddClassroonList, postaddinfo, posteditinfo, getNewMajorList, getNewClassList, getdefaultValues, getNewGradeList, getNewCollegeList, getAddWeekList, getAddSectionList, getStatusList, getTeacherNameList, getTermList, getCollegeList, getClassroomList, getWeekList, getSectionList, getTabledata, getSchoolAreaList, getBuildingList, delTeachingLog, getweektime, getedit } from "@/api/teachlog.js"
export default {
    name: 'teach-log_index',
    components: {
        teacherSelect
    },
    directives: {

    },
    data() {

        return {
            teachershow: false,
            activwshow: 0,
            showteacherselect: false,
            //检索部分
            // 检索 ---数组列表  数组系列
            TermList: [],          //检索——学期
            CollegeList: [],       //检索——学院    
            ClassroomList: [],     //检索——教室
            WeekList: [],          //检索——周末
            SectionList: [],       //检索——节次
            //检索——状态
            StatusList: [

                { value: 1, name: "有效" },
                { value: 0, name: "无效" },
            ],

            youxiaolist: [
                {
                    name: "有效",
                    value: true,
                },
                {
                    name: "无效",
                    value: false,
                },
            ],
            zhaunclasslist: [],
            tableData: [],         //检索——表格
            //检索  ----参数
            queryParams: {
                Term: '',          //学期
                College: '',       //学院
                Classroom: '',     //教室
                Week: '',          //周次
                Teacher: '',       //教师
                Section: '',       //节次
                Status: '',
                signal: 1,        //状态    
                Date: [],          //日期
            },
            //新增页
            drawerform: false,    //抽屉开关
            IsOutSide:'1',
            //新增  ----form参数
            formItem: {
                AcademicNumber: "",
                YearTerm: "",
                SchoolAreaCode: 1,
                CollegeCode: "",
                MajorCode: "",
                ClassCode: "",
                ClassroomCode: "",
                BuildingCode: "",
                Date: "",
                falseDate: "",
                xnw:'1',
                Weeks: [],
                Date:'',
                Time:'',
                WeekDay: "",
                ScheduleName: [],
                CourceName: "",
                CourceType: "必修",
                Grade: "",
                IsValid: true,
                TeacherNumber: "",
                TeacherName: "",
                TeacherTitle:"",
                IsByDate:'1'
            },
            //新增  -----form数组列表
            isedit: false,
            SchoolAreaList: [], //数组---校区
            BuildingList: [],   //数组---教学楼
            AddClassroonList: [],//数组---教室
            TeacherNameList: [],//数组---教师名
            CourseTypeList: [  //数组---课程类型
                {
                    value: "选修",
                    name: "选修",
                },
                {
                    value: "限选",
                    name: "限选",
                },
                {
                    value: "必修",
                    name: "必修",
                },
            ],
            AddStatusList: [],
            AddSectionList: [],
            WeekList: [],
            DayList: [
                {
                    value: "1",
                    name: "周一",
                },
                {
                    value: "2",
                    name: "周二",
                },
                {
                    value: "3",
                    name: "周三",
                },
                {
                    value: "4",
                    name: "周四",
                },
                {
                    value: "5",
                    name: "周五",
                },
                {
                    value: "6",
                    name: "周六",
                },
                {
                    value: "7",
                    name: "周日",
                },
            ],
            //新增--form规则
            rules:
            {
                YearTerm: [
                    { required: true, message: '学期不能为空', trigger: 'change' },
                ],
                CollegeCode: [
                    { required: true, message: '学院不能为空', trigger: 'change' },
                ],
                BuildingCode: [
                    { required: true, message: '教学楼不能为空', trigger: 'change' },
                ],
                ClassroomCode: [
                    { required: true, message: '教室不能为空', trigger: 'change' },
                ],
                TeacherName: [
                    { required: true, message: '教师不能为空', trigger: 'change' },
                ],
                Weeks: [
                    { required: true, message: '周次不能为空', trigger: 'change' },
                ],
                WeekDay: [
                    { required: true, message: '周几不能为空', trigger: 'change' },
                ],
                ScheduleName: [
                    { required: true, message: '节次不能为空', trigger: 'change' },
                ],
                CourceName: [
                    { required: true, message: '课程名称不能为空', trigger: 'change' },
                ],
                CourceType: [
                    { required: true, message: '课程类型不能为空', trigger: 'change' },
                ],
                IsValid: [
                    { required: true, message: '是否有效不能为空', trigger: 'change' },
                ],
            },
            //添加页
            //添加展示模块
            ObjList: [],
            //参数-----添加页
            isClose: false,
            //添加----数组
            NewCollegeList: [],  //数组-----学院
            NewMajorList: [],    //数组-----专业
            NewGradeList: [],    //数组-----年级
            NewClassList: [],    //数组-----班级
            //添加---form参数
            // Form: {
            //     College: '',   //添加---学院
            //     Major: '',     //添加---专业
            //     Grade: '',     //添加---年级
            //     Class: '',     //添加---班级
            // },


            classformItem: {
                ClassCode: "",
                CollegeCode: "",
                MajorCode: "",
                Grade: "",
                ClassCodename: "",
                CollegeCodename: "",
                MajorCodename: "",
                Gradename: "",
            },
            NewRules: {
                Major: [
                    { required: true, message: '专业不能为空', trigger: 'blur' },
                ],
                Class: [
                    { required: true, message: '班级不能为空', trigger: 'blur' },
                ],

            },
            //分页
            pageobj: {
                oldTotal: 0,
                oldCurrent: 1,
                Total: 0,
                pageSize: 10,
                pageNum: 1,
                pageSizeOptions: [10, 20, 50, 100, 150, 200],
            }
        }
    },
    methods: {
        modelteacher() {
            //  debugger;
            //  this.getDatateacher();
            this.activwshow = 1;
            this.teachershow = true;
            this.showteacherselect = true;
        },
        numberval(data) {
            // 传值赋值
            // debugger;
            this.formItem.TeacherName = data.Name;//教师
            this.formItem.TeacherNumber = data.Number;//教师工号
            this.teachershow = false;
        },

        selectweek() {

            if (this.queryParams.Week) {
                this.queryParams.signal = 2;
                this.getweektimeinfo();
            } else {
                this.queryParams.signal = 1;
                this.queryParams.Date = [];
            }
            // this.getTabledatainfo(1);
        },
        selecttimerange() {
            this.queryParams.Week = '';
            this.queryParams.signal = 1;

        },
        //分页部分
        //切换页码
        handleCurrentChange(e) {    //e---指代的是页码数
            this.pageobj.pageNum = Math.ceil(e);
            this.getTabledatainfo(this.pageobj.pageNum);
        },
        //切换每页条数
        handleSizeChange(e) {  //e--指代的是每页条数
            this.pageobj.pageSize = Math.ceil(e);
            this.pageobj.pageNum = 1;    //这里是当我们位于每页十条的时候的第5页的时候  我们切换每页条数 页面跳转到第一页
            this.getTabledatainfo(this.pageobj.pageNum);
        },
        // 检索部分
        // 检索——Term（学期）
        getTermListinfo() {
            getTermList({ SelectTermList: '' })
                .then((res) => {
                    this.TermList = res
                    this.formItem.YearTerm = this.TermList[0].value;
                })
        },
        //检索——College（学院）
        getCollegeListinfo() {
            getCollegeList({ scSchoolCode: '' })
                .then((res) => {
                    this.CollegeList = res
                })
        },
        //检索——Classroom（教室）
        getClassroomListinfo() {
            getClassroomList({
                bName: '',
            }).then((res) => {
                this.ClassroomList = res
            })
        },

        getweektimeinfo() {
            //获取时间
            getweektime({
                week: this.queryParams.Week,
            }).then((res) => {
                //debugger
                let data = res;
                if (data != null) {
                    this.queryParams.Date = [this.$moment(data[0]).format("YYYY-MM-DD"), this.$moment(data[1]).format("YYYY-MM-DD")];

                }
            })
        },

        //检索——Week（周次）
        getWeekListinfo() {
            getWeekList({
                weekList: ""
            }).then((res) => {
                this.WeekList = res
            })
        },
        //检索——Section（节次）
        getSectionListinfo() {
            getSectionList({
                ssSchoolCode: ''
            }).then((res) => {
                this.SectionList = res
            }).catch((res) => {
                // console.log('节次检索失败');
            })
        },
        //All检索——表格
        getTabledatainfo(pageNum) {  //pageNum---当前页
            let stime = "";
            let etime = "";
            // console.log(this.queryParams.Date[0]);
            // console.log(this.queryParams.Date[1]);
            // if (this.queryParams.Date[0] !== undefined && this.queryParams.Date[0] !== "") {
            //     etime = this.queryParams.Date[1];

            //     stime = this.queryParams.Date[0];

            // }
            // else {
            //     stime = ""
            //     etime = ""
            // }


            this.pageobj.pageNum = pageNum;

            getTabledata({
                oldTotal: this.pageobj.oldTotal,
                oldCurrent: this.pageobj.oldCurrent,
                pageSize: this.pageobj.pageSize,
                pageNum: pageNum,
                SchoolAreaCode: '',
                CollegeCode: this.queryParams.College,
                MajorCode: '',
                ClassCode: '',
                ScheduleName: this.queryParams.Section,
                ClassroomCode: '',
                Term: this.queryParams.Term,
                IsValid: this.queryParams.Status === '' ? '3' : this.queryParams.Status,
                TeacherName: this.queryParams.Teacher,
                StartTime: this.queryParams.Date && this.queryParams.Date.length > 0 ? this.$moment(this.queryParams.Date[0]).format(
                    "YYYY-MM-DD"
                ) : '',
                EndTime: this.queryParams.Date && this.queryParams.Date.length > 0 ? this.$moment(this.queryParams.Date[1]).format(
                    "YYYY-MM-DD"
                ) : '',
                Week: this.queryParams.Week,
                Signal: this.queryParams.signal,
                ClassName: this.queryParams.Classroom,
            }).then((res) => {
                // let data = res
                // // console.log(res);
                // this.pageobj.Total = data[0].total
                let data = res;
                if (data.length > 0) {
                    this.pageobj.Total = data[0].total;
                } else {
                    this.pageobj.Total = 0;
                    this.pageobj.pageNum = 1;
                }
                this.tableData = data;
            })
        },
        // 检索完成  

        //新增页部分
        //新增页初始化
        AddInitialization() {
            this.getSchoolAreaListinfo(); //校区
            this.getBuildingListinfo();   //教学楼
            //  this.getTeacherNameListinfo();//教师名
            this.getStatusListinfo();     //状态
            this.getAddSectionListinfo(); //新增页面节次
            this.getAddWeekListinfo();       //周次
            this.getAddClassroonListinfo('') //教室信息
        },

        //新增之信息获取
        //校区信息
        getSchoolAreaListinfo() {
            getSchoolAreaList({
                SelectSchoolList: ''
            }).then((res) => {
                this.SchoolAreaList = res;
                // debugger
                //  this.formItem.SchoolAreaCode = this.SchoolAreaList[0].value;
                //  this.formItem.SchoolArea = this.SchoolAreaList[0].name;
                // console.log(this.formItem.SchoolAreaCode);
            })
                .catch((err) => {
                    // console.log(err);
                })
        },
        //教学楼信息
        getBuildingListinfo() {
            getBuildingList({
                schoolcode: "",
            }).then((res) => {
                this.BuildingList = res
            }).catch((err) => {
                // console.log(err);
            })
        },
        ChangeBuild() {
            this.getAddClassroonListinfo("b")
        },
        // 教室信息
        getAddClassroonListinfo(signal) {
            getAddClassroonList(
                {
                    rCode: this.formItem.BuildingCode || '',
                    signal: 'b',
                }
            ).then((res) => {
                // console.log("这是教室的res");
                // console.log(res);
                this.AddClassroonList = res
            }).catch((err) => {
                // console.log(err);
            })
        },
        delitem(info) {
            // debugger
            //删除数据
            delTeachingLog({ id: info.TeachingLogId, }).then((res) => {
                let data = res;
                if (data == 1) {
                    this.$message({
                        message: '已修改为无效数据',
                        type: 'success'
                    });
                    this.getTabledatainfo(this.pageobj.pageNum);
                } else if (data == 2) {
                    this.$message({
                        message: '删除失败',
                        type: 'error'
                    });
                } else if (data == 3) {
                    this.$message({
                        message: '非手动添加的记录不能物理删除！',
                        type: 'error'
                    });
                }

            }).catch((err) => {
                // console.log(err);
            });
        },
        //教师名信息
        getTeacherNameListinfo() {
            getTeacherNameList({
                oldTotal: 0,
                oldCurrent: 0,
                pageSize: 1000,
                pageNum: 1,
                Name: "",
                Number: "",
                Type: "",
                Status: "",
                SchoolId: "",
                CollegeId: "",
            }).then((res) => {
                this.TeacherNameList = res
            }).catch((err) => {
                // console.log('教师姓名获取失败');
            })
        },

        //状态信息
        getStatusListinfo() {
            getStatusList({
                GetStatusList: ""
            }).then((res) => {
                this.AddStatusList = res
            }).catch((err) => {
                // console.log('状态信息获取失败');
            })
        },
        //节次信息
        getAddSectionListinfo() {
            getAddSectionList({
                bySchoolCode: '',
            }).then((res) => {
                this.AddSectionList = res
            }).catch((res) => {
                // console.log('节次获取失败');
            })
        },
        //周次信息
        getAddWeekListinfo() {
            getAddWeekList({
                weekList: '',
            }).then((res) => {
                this.WeekList = res
            })
        },
        //抽屉关闭
        closedrawer() { },
        //初始化
        Initialization() {
            this.getTermListinfo();          //学期
            this.getCollegeListinfo();     //学院
            this.getClassroomListinfo();     //教室
            this.getWeekListinfo();        //周次
            this.getSectionListinfo();       //节次
            this.getTabledatainfo(1)        //桌面
        },
        // 添加页面
        //添加按钮
        Newbox() {
            this.isClose = true;
            this.classformItem = {
                MajorCode: "",
                ClassCode: "",
                CollegeCode: "",
                MajorCode: "",
                Grade: "",
                ClassCodename: "",
                CollegeCodename: "",
                MajorCodename: "",
                Gradename: "",
            };
            this.getNewCollegeListinfo();

            this.getNewClassListinfo()
        },
        //获取学院信息 --这里获取学院信息有点重复
        getNewCollegeListinfo() {
            getNewCollegeList({
                scSchoolCode: '',
            }).then((res) => {
                this.NewCollegeList = res
            }).catch((err) => {
                // console.log('学院信息请求错误');
            })
        },
        CollegeChange() {
            this.classformItem.MajorCode = "";
            this.classformItem.MajorCodename = "";
            this.classformItem.ClassCode = "";
            this.classformItem.ClassCodename = "";
            this.classformItem.Gradename = "";
            this.getNewMajorListinfo('c');


        },
        //获取专业信息 
        getNewMajorListinfo(Signal) {
            getNewMajorList({
                mCode: this.classformItem.CollegeCode,
                Signal: Signal
            }).then((res) => {
                this.NewMajorList = res
            }).catch((err) => {
                // console.log('专业信息请求错误');
            })
        },
        MajorChange(e) {
            // debugger
            let obj = {};
            obj = this.NewMajorList.find((item) => { // 这里的userList就是上面遍历的数据源
                return item.value === e; // 筛选出匹配数据
            });
            this.classformItem.MajorCodename = obj.name;
            this.classformItem.ClassCode = "";
            this.classformItem.ClassCodename = "";
            this.classformItem.Gradename = "";
            this.getNewClassListinfo('');
            this.getNewGradeListinfo();

        },
        //获取年级信息 
        getNewGradeListinfo() {
            getNewGradeList({
                majorCode: this.classformItem.MajorCode
            }).then((res) => {
                this.NewGradeList = res
            }).catch((err) => {
                // console.log('年级信息请求错误');
            })
        },
        GradeChange(e) {

            let obj = {};
            obj = this.NewGradeList.find((item) => { // 这里的userList就是上面遍历的数据源
                return item.value === e; // 筛选出匹配数据
            });
            this.classformItem.Gradename = obj.value;
            this.classformItem.ClassCode = "";
            this.classformItem.ClassCodename = "";
            this.getNewClassListinfo(this.classformItem.Gradename)
        },

        classSelectclasscode(e) {
            //弹框里选择班级
            debugger;
            let obj = {};
            /* obj = this.NewClassList.find((item) => { // 这里的userList就是上面遍历的数据源
                return item.value === e; // 筛选出匹配数据
            });
            this.classformItem.ClassCode = obj.value;
            this.classformItem.ClassCodename = obj.name; */

            
            

        },

        //获取班级 
        getNewClassListinfo(grade) {
            getNewClassList({
                majorCode: 'e3649c',
                grade: '',
            }).then((res) => {
                this.NewClassList = res
            }).catch((err) => {
                // console.log('班级信息请求错误');
            })
        },
        //默认值
        defaultValues() {

            getdefaultValues().then((res) => {
                // debugger
                let data = res[0];
                //  this.formItem.YearTerm = data.YearTerm;
                this.formItem.SchoolAreaCode = data.SchoolAreaCode;
                this.formItem.CollegeCode = data.CollegeCode;
                //  this.formItem.WeekTime = data[0].WeekTime;
                //    this.formItem.Grade = data[0].Grade;
                // this.formItem.TeacherNumber = data[0].TeacherNumber;
                //  this.formItem.TeacherName = data[0].TeacherName;



            }).catch((err) => {
                // console.log('班级信息请求错误');
            })
        },
        //按钮系列--
        //新增部分
        //新增按钮  --已完成
        addbox() {
            // debugger
            //新增信息
            this.isedit = false;
            this.drawerform = true;   //抽屉打开
            this.drawerformtitle = '新增教学日志';  //抽屉标题
            this.zhaunclasslist = [];
            setTimeout(() => {
                //  debugger
                this.$data.formItem = JSON.parse(JSON.stringify(this.$options.data().formItem));
                this.$refs['ruleForm'].resetFields();
                this.defaultValues();//默认值
                // 初始化
                this.AddInitialization();
            }, 200);

           
            this.formItem.xnw = '1'
            console.log(this.formItem);

            this.getNewClassListinfo()

        },
        edititem(info) {
            //获取修改详情
            //debugger
            this.isedit = true;
            this.drawerform = true;   //抽屉打开
            this.drawerformtitle = '修改教学日志';  //抽屉标题
            // 初始化
            this.AddInitialization();
            this.geteditdeails(info.TeachingLogId);

            this.getNewClassListinfo()
        },
        //  
        getzhaunlist(datalist) {
            let vm = this;
            let MajorCodelist = datalist.MajorCode.includes(',') ? datalist.MajorCode.split(",") : [datalist.MajorCode];
            let ClassCodelist = datalist.ClassCode.includes(',') ? datalist.ClassCode.split(",") : [datalist.ClassCode];
            let ClassCodenamelist = datalist.ClassName.includes(',') ? datalist.ClassName.split(",") : [datalist.ClassName];
            let MajorCodenamelist = datalist.MajorName.includes(',') ? datalist.MajorName.split(",") : [datalist.MajorName];
            vm.zhaunclasslist = [];
            for (let index = 0; index < MajorCodelist.length; index++) {


                vm.zhaunclasslist.push({
                    MajorCode: MajorCodelist[index],
                    ClassCode: ClassCodelist[index],
                    ClassCodename: ClassCodenamelist[index],
                    MajorCodename: MajorCodenamelist[index],
                });
            }

            //获取原始列表
        },

        getzhaunclasslist(type) {
            //获取专业和班级数组
            let list = [];
            this.zhaunclasslist.forEach((item, index) => {
                if (type == "MajorCode") {
                    list.push(item.MajorCode);
                    // let flag1 = list.findIndex(
                    //   (item1) => item1.MajorCode == item1.MajorCode
                    // );
                    // if (flag1 !== -1) {
                    //   //存在
                    // } else {
                    //   //去重
                    //   list.push(item.MajorCode);
                    // }
                }
                if (type == "ClassCode") {
                    list.push(item.ClassCode);
                }
            });
            return list;
        },

        geteditdeails(id) {
            //获取详情
            getedit({ gtid: id }).then((res) => {
                
                let data = res;
                console.log(data.ClassCode.replace(/"([^"]*)"/, '$1').split(','));
                
                this.classformItem = {
                    ClassCode: data.ClassCode.replace(/"([^"]*)"/, '$1').split(','),
                }

                // Time: `${this.formItem.Time[0]}-${this.formItem.Time[1]}`,

                this.formItem = {
                    TeacherTitle: data.TeacherTitle,
                    IsByDate:data.IsByDate,
                    AcademicNumber: data.AcademicNumber,
                    YearTerm: data.YearTerm,
                    SchoolAreaCode: data.SchoolAreaCode,
                    CollegeCode: data.CollegeCode,
                    MajorCode: data.MajorCode,
                    ClassCode: data.ClassCode,
                    BuildingCode: data.BuildingCode,
                    Date: data.Date,
                    falseDate: data.falseDate,
                    ClassroomCode: data.ClassroomCode,
                    WeekTime: data.WeekTime,
                    ScheduleName: getsplit(data.ScheduleName, 'string'),
                    CourceName: data.CourceName,
                    WeekTime: data.WeekTime,
                    Grade: data.Grade,
                    xnw:'1',
                    TeacherNumber: data.TeacherNumber,
                    Weeks: getsplit(data.Weeks),
                    TeacherName: data.TeacherName,
                    WeekDay: data.WeekDay.toString(),
                    IsValid: data.IsValid,
                    TeachingLogId: data.TeachingLogId,
                    CourceCode: data.CourceCode,
                    CourceType: data.CourceType == "" ? "必修" : data.CourceType,
                    // SchoolArea: '',     //校区 
                    // Term: '',           //学期
                    // College: '',        //学院
                    // Building: '',       //教学楼
                    // Classroom: '',      //教室
                    // TeacherName: '',    //教师姓名
                    // Course: '',         //课程
                    // Type: '',           //类型
                    // Status: true,       //状态
                    // AddSection: [],     //节次
                    // AddWeekList: [],    //周次
                    // Day: '',            //周几
                }
                this.getzhaunlist(data);

            })
                .catch((err) => {
                    this.$message({
                        message: '详情获取失败！',
                        type: 'error'
                    });
                });


        },
        romveitrm(index) {
            //删除数据
            this.zhaunclasslist.splice(index, 1);
        },
        //检索部分
        ClickSearch() {
            this.getTabledatainfo(1)
        },
        //添加页面
        //添加----关闭按钮
        Btn_Close() {
            this.isClose = false;
        },
        //添加----确认按钮
        Btn_Affirm() {
            // if (this.Form.Major !== '' && this.Form.Class !== '') {
            //     this.isClose = false;
            //     let Selectcollege = this.$refs.itemSelectmajor.selectedLabel;
            //     // 这里是通过 ref来获取学院信息
            //     let id = nanoid();
            //     let Selectclass = this.$refs.itemSelectclass.selectedLabel;
            //     //同上
            //     let obj = {
            //         id,
            //         major: Selectcollege,
            //         class: Selectclass
            //     }

            //     this.ObjList.push(obj)
            // }
            let vm = this;
            let flag1 = vm.zhaunclasslist.findIndex(
                (item) => item.ClassCode === vm.classformItem.ClassCode
            );
            if (flag1 !== -1) {
                //存在
                vm.errroMes("已添加过该信息，请重新选择！", "error", vm);
                return false;
            } else {
                //  debugger;
                vm.zhaunclasslist.push({
                    MajorCode: vm.classformItem.MajorCode,
                    ClassCode: vm.classformItem.ClassCode,
                    ClassCodename: vm.classformItem.ClassCodename,
                    MajorCodename: vm.classformItem.MajorCodename,
                });
            }

            this.isClose = false;
        },
        //添加-----取消按钮
        Btn_Cancel() {
            this.isClose = false;
        },
        //添加-----（-）
        Btn_SemiSelect(index) {

            // 两种方法实现，使用数组删除
            // 使用数组过滤

            // // console.log("这里是index");
            // // console.log(index);
            // this.ObjList.splice(index,1)
            this.ObjList = this.ObjList.filter((item) => {
                return item.id !== index
            })
        },
        submitForm(formName) {
            //新增提交
            let vm = this;
            //   debugger
            this.$refs[formName].validate((valid) => {
                if (valid) {

                    /* if (vm.zhaunclasslist.length == 0) {

                        this.$message({
                            message: '专业班级不能为空！',
                            type: 'error'
                        });
                        return false;
                    } */

                    this.classformItem.MajorCode = new Array(this.classformItem.ClassCode.length).fill('e3649c').join(',')
                    console.log(this.formItem.Date);
                    console.log(this.formItem.Time);

                    let datas = {
                        AcademicNumber: '', //自动生成，不需填写
                        YearTerm: '2025-1', //学期，必填
                        SchoolAreaCode: 1, //	校区Code，必填
                        CollegeCode: 101, //	学院Code，单个Code值，必填
                        MajorCode: this.classformItem.MajorCode, //专业Code，可多个Code值
                        ClassCode: this.classformItem.ClassCode.join(','), //班级Code，可多个Code值，必填
                        BuildingCode: '001', //楼Code
                        ClassroomCode: vm.formItem.ClassroomCode, //教室Code
                        Weeks: 1, //上课周次 例如,1,2, 代表第一周和第二周
                        WeekDay: 1, //上课时间 周几 新增 2020改 例如：3 即 星期三
                        ScheduleName: '01', //节次
                        CourceName: vm.formItem.CourceName, //课程名称
                        CourceCode: "", //	课程代码
                        CourceType: '', //课程类型 暂为空即可
                        Grade: "", //年级
                        IsValid: vm.formItem.IsValid, //是否有效
                        xnw:'1',
                        TeacherNumber: vm.formItem.TeacherNumber, //任课教师工号
                        TeacherName: vm.formItem.TeacherName, //教师姓名
                        TeachingLogId: 0,

                        IsOutSide: this.IsOutSide == '1' ? false : true,
                        TeacherTitle: this.formItem.TeacherTitle,
                        Date: this.formItem.Date,
                        Time: `${this.formItem.Time[0]}-${this.formItem.Time[1]}`,
                        IsByDate: this.formItem.IsByDate == '1' ? true : false,
                        TimeInterval:0,
                        TeachingForm:0
                    };

                    debugger
                    postaddinfo(datas).then((res) => {
                        let data = res;
                        if (data == 1) {
                            this.$message({
                                message: '新增成功',
                                type: 'success'
                            });
                            this.drawerform = false;
                            this.getTabledatainfo(this.pageobj.pageNum);
                        } else if (data == 2) {

                            this.$message({
                                message: '教务编号已存在，教务编号是唯一的',
                                type: 'error'
                            });

                        } else if (data == 3) {

                            this.$message({
                                message: '教务编号不能为空',
                                type: 'error'
                            });

                        } else if (data == 4) {

                            this.$message({
                                message: '学年学期不能为空',
                                type: 'error'
                            });

                        } else if (data == 5) {

                            this.$message({
                                message: '学院不能为空',
                                type: 'error'
                            });

                        } else if (data == 6) {

                            this.$message({
                                message: '专业不能为空',
                                type: 'error'
                            });

                        } else if (data == 7) {

                            this.$message({
                                message: '教室不能为空',
                                type: 'error'
                            });

                        } else if (data == 8) {

                            this.$message({
                                message: '日期不能为空',
                                type: 'error'
                            });

                        } else if (data == 9) {

                            this.$message({
                                message: '节次名称不能为空',
                                type: 'error'
                            });

                        } else if (data == 10) {

                            this.$message({
                                message: '课程名称不能为空',
                                type: 'error'
                            });

                        } else if (data == 11) {

                            this.$message({
                                message: '课程名称不存在',
                                type: 'error'
                            });

                        } else if (data == 12) {

                            this.$message({
                                message: '教师工号不能为空',
                                type: 'error'
                            });

                        } else if (data == 13) {

                            this.$message({
                                message: '教师姓名不能为空',
                                type: 'error'
                            });

                        } else if (data == 14) {

                            this.$message({
                                message: '教师的工号和姓名不对应',
                                type: 'error'
                            });

                        } else if (data == 15) {

                            this.$message({
                                message: '学院有误',
                                type: 'error'
                            });

                        } else if (data == 16) {

                            this.$message({
                                message: '专业有误',
                                type: 'error'
                            });

                        } else if (data == 17) {

                            this.$message({
                                message: '教室有误',
                                type: 'error'
                            });

                        } else if (data == 18) {

                            this.$message({
                                message: '班级有误',
                                type: 'error'
                            });

                        } else {
                            this.$message({
                                message: '新增失败',
                                type: 'error'
                            });
                        }

                    })
                        .catch((err) => {
                            // console.log(err);
                        });
                } else {
                    // debugger
                    // console.log('验证失败');
                    return false;
                }
            });
        },

        editsubmitForm(formName) {
            //修改提交
            let vm = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // debugger
                    // let content = this.phoneEditor.txt.text();//文字
                    if (vm.zhaunclasslist.length == 0) {

                        this.$message({
                            message: '专业班级不能为空！',
                            type: 'error'
                        });
                        return false;
                    }

                    let datas = {
                        AcademicNumber: vm.formItem.AcademicNumber, //自动生成，不需填写
                        YearTerm: vm.formItem.YearTerm, //学期，必填
                        SchoolAreaCode: vm.formItem.SchoolAreaCode, //	校区Code，必填
                        CollegeCode: vm.formItem.CollegeCode, //	学院Code，单个Code值，必填
                        MajorCode: vm.getzhaunclasslist("MajorCode").toString(), //专业Code，可多个Code值
                        ClassCode: vm.getzhaunclasslist("ClassCode").toString(), //班级Code，可多个Code值，必填
                        BuildingCode: vm.formItem.BuildingCode, //楼Code
                        ClassroomCode: vm.formItem.ClassroomCode, //教室Code
                        Weeks: vm.formItem.Weeks.toString(), //上课周次 例如,1,2, 代表第一周和第二周
                        WeekDay: vm.formItem.WeekDay, //上课时间 周几 新增 2020改 例如：3 即 星期三
                        ScheduleName: vm.formItem.ScheduleName.toString()
                            ? vm.formItem.ScheduleName.toString().replace(/,/g, "")
                            : "", //节次
                        CourceName: vm.formItem.CourceName, //课程名称
                        CourceCode: vm.formItem.CourceCode, //	课程代码
                        CourceType: vm.formItem.CourceType, //课程类型 暂为空即可
                        Grade: vm.formItem.Grade, //年级
                        IsValid: vm.formItem.IsValid, //是否有效
                        xnw:'1',
                        TeacherNumber: vm.formItem.TeacherNumber, //任课教师工号
                        TeacherName: vm.formItem.TeacherName, //教师姓名
                        TeachingLogId: vm.formItem.TeachingLogId,
                    };
                    posteditinfo(datas).then((res) => {
                        let data = res;
                        if (data == 1) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.drawerform = false;
                            this.getTabledatainfo(this.pageobj.pageNum);
                        } else if (data == 2) {

                            this.$message({
                                message: '教务编号已存在，教务编号是唯一的',
                                type: 'error'
                            });

                        } else if (data == 3) {

                            this.$message({
                                message: '教务编号不能为空',
                                type: 'error'
                            });

                        } else if (data == 4) {

                            this.$message({
                                message: '学年学期不能为空',
                                type: 'error'
                            });

                        } else if (data == 5) {

                            this.$message({
                                message: '学院不能为空',
                                type: 'error'
                            });

                        } else if (data == 6) {

                            this.$message({
                                message: '专业不能为空',
                                type: 'error'
                            });

                        } else if (data == 7) {

                            this.$message({
                                message: '教室不能为空',
                                type: 'error'
                            });

                        } else if (data == 8) {

                            this.$message({
                                message: '日期不能为空',
                                type: 'error'
                            });

                        } else if (data == 9) {

                            this.$message({
                                message: '节次名称不能为空',
                                type: 'error'
                            });

                        } else if (data == 10) {

                            this.$message({
                                message: '课程名称不能为空',
                                type: 'error'
                            });

                        } else if (data == 11) {

                            this.$message({
                                message: '课程名称不存在',
                                type: 'error'
                            });

                        } else if (data == 12) {

                            this.$message({
                                message: '教师工号不能为空',
                                type: 'error'
                            });

                        } else if (data == 13) {

                            this.$message({
                                message: '教师姓名不能为空',
                                type: 'error'
                            });

                        } else if (data == 14) {

                            this.$message({
                                message: '教师的工号和姓名不对应',
                                type: 'error'
                            });

                        } else if (data == 15) {

                            this.$message({
                                message: '学院有误',
                                type: 'error'
                            });

                        } else if (data == 16) {

                            this.$message({
                                message: '专业有误',
                                type: 'error'
                            });

                        } else if (data == 17) {

                            this.$message({
                                message: '教室有误',
                                type: 'error'
                            });

                        } else if (data == 18) {

                            this.$message({
                                message: '班级有误',
                                type: 'error'
                            });

                        } else {
                            this.$message({
                                message: '修改失败',
                                type: 'error'
                            });
                        }
                    })
                        .catch((err) => {
                            // console.log(err);
                        });
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },

        //新增重置
        resetForm(formName) {
            this.defaultValues();//默认值
            this.AddInitialization();
            this.zhaunclasslist = [];
            this.$refs[formName].resetFields();
        },

        editresetForm(formName) {
            this.AddInitialization();
            this.geteditdeails(this.formItem.TeachingLogId);

        },
    },
    mounted() {
        this.Initialization()
    },
    activated() {

    },
    created() {

    },
}
</script>

<style lang="scss" scoped>
.status {
    display: flex;
    flex-direction: row;
}

.date {
    margin: 0px 10px 0px 0px;
}

.el-form .el-select {
    width: 80%;
}

.el-form .el-input {
    width: 80%;
}

.demo-drawerchange__footer {
    position: relative;
    margin-top: 50px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box-card {
    position: absolute;
    width: 60%;
    left: 20%;
    top: 30%;
    z-index: 3;
}

.Newfooter {
    position: relative;
    float: right;
    margin: 10px 0px;
}

.btn_close {
    box-shadow: none;
    border: none;
    background: none;
    color: #606266;
}

.btn_cancel {
    box-shadow: none;
    border: none;
    background: none;
}


.div_show {
    position: relative;
    margin: 5px 0px;
    border: 2px dotted rgba(113, 158, 243, 0.3);
    display: flex;
    flex-direction: row;
    font-size: 13px;
}

.div_item {
    width: 220px;
    margin: 0px 20px;
}

.btn_semiselect {
    margin: 2px 0px;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    box-shadow: none;
    background: rgba(139, 139, 241, 0.5);
    color: white;
}

.div_btn {
    width: 60px;
}
</style>