<style lang="less" scoped>
@import "./Index.less";
</style>
<style lang="less">
@import "./IndexIview.less";
</style>

<template>
    <div class="sc-container">
        <Loading v-if="isloading == true"></Loading>
        <!-- tab切换 -->
        <div class="stu-mgt-header">
            <div class="tab-box">
                <span class="pane" @click="tab = 'list'" :class="{ active: tab === 'list' }">
                    学生管理
                </span>
                <span class="pane" @click="tab = 'class'" :class="{ active: tab === 'class' }">
                    班级管理
                </span>
                <span class="pane" @click="tab = 'stulist'" :class="{ active: tab === 'stulist' }">
                    {{$t('cusMgt.stuListMgt')}}
                </span>
                <!-- <span @click="goMgtStuList" :class="courseListShow.length == 0 ? 'action-btn-disabled action-btn':'action-btn'">
                    <Icon type="ios-people" size="16" />
                    <span>{{$t('cusMgt.stuListMgt')}}</span>
                </span> -->
            </div>
        </div>
        <!-- 学生账号管理 -->
        <div v-show="tab == 'list'">
            <!--菜单栏-->
            <div class="sc-menu">
                <div class="sc-menu-left dark-iview-select">
                    <!-- 學制Select -->
                    <Select v-model="searchPeriod" style="width: 120px" :placeholder="$t('stuAccount.periodHolder')" @on-change="filterData">
                        <Option v-for="(item, index) in periods" :value="item.id" :key="index">{{ item.name }}</Option>
                    </Select>
                    <!-- 學級Select -->
                    <Select v-model="searchGrade" style="width: 150px; margin-left: 5px" :placeholder="$t('stuAccount.gradeHolder')" :not-found-text="$t('stuAccount.sltPdFirst')" clearable @on-change="filterData">
                        <Option v-for="(item, index) in years" :value="item.value" :key="index">{{ item.label }}</Option>
                    </Select>
                    <!-- 教室Select -->
                    <Select v-model="searchClassroom" ref="classroom" style="width: 150px; margin-left: 5px" :placeholder="$t('stuAccount.classroomHolder')" clearable @on-change="filterData" :not-found-text="searchGrade ? $t('stuAccount.noClass') : $t('stuAccount.sltGdFirst')">
                        <Option v-for="(item, index) in filterClasses" :value="item.id" :key="index">{{ item.name }}</Option>
                        <Option v-show="!searchGrade" value="noclass">{{$t('stuAccount.noRelClass')}}</Option>
                    </Select>
                    <!-- 字串模糊搜尋 -->
                    <Input v-model="searchText" clearable :placeholder="$t('stuAccount.searchHolder')" style="width: 220px; margin-left: 20px" search @on-search="filterData" @on-clear="filterData" />
                </div>
                <div class="sc-menu-right sc-text-no-select" v-if="authorizationStatus == false">
                    <ul v-if="$access.can('admin.*|student-upd')">
                        <!--授權管理開關 0531无法完成，暂时隐藏-->
                        <!-- <li @click="showAuthorization()">
                            <Icon custom="iconfont icon-auth-key" color="white" size="18" />
                            <span>{{ $t('stuAccount.menuAuth') }}</span>
                        </li> -->
                        <li @click="importStudent()">
                            <Icon type="md-arrow-round-up" color="white" size="18" />
                            <span>{{ $t('stuAccount.importStu') }}</span>
                        </li>
                        <li @click="addStudent()">
                            <Icon type="md-add" color="white" size="18" />
                            <span>{{ $t('stuAccount.addStu') }}</span>
                        </li>
                        <li @click="delStudent(-1)" :class="selections.length > 0 ? '' : 'sc-disable-cursor'">
                            <Icon type="md-trash" :color="selections.length > 0 ? 'white' : '#606060'" size="18" />
                            <span>{{ $t('stuAccount.delStu') }}</span>
                        </li>
                        <li @click="editStudent()" :class="selections.length > 0 ? '' : 'sc-disable-cursor'">
                            <Icon type="md-create" :color="selections.length > 0 ? 'white' : '#606060'" size="18" />
                            <span>{{ $t('stuAccount.editInfo') }}</span>
                        </li>
                        <li @click="resetPW(-1)" :class="selections.length > 0 ? '' : 'sc-disable-cursor'">
                            <Icon custom="iconfont icon-reset" :color="selections.length > 0 ? 'white' : '#606060'" size="18" />
                            <span>{{$t('stuAccount.resetPw')}}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <!--学生账号table-->
            <div class="sc-content dark-iview-table" style="position: relative; padding-left: 20px" :style="{width: authorizationStatus == true ? '70%' : '100%',transition: 'all 0.7s'}">
                <Scroll :on-reach-bottom="scrollLoad" height="750" :distance-to-edge="[15, 15]">
                    <Table ref="selection" :columns="tableColumns" :data="tableShowData" :loading="tableLoading" @on-selection-change="getSelectInfo">
                        <template slot-scope="{ row }" slot="status">
                            <Icon custom="iconfont icon-auth-key" size="25" :style="{
                color: aclassOneInfoNum != undefined && (aclassOneInfoNum.staIds.includes(row.id) == true || aclassOneInfoNum.dyncIds.includes(row.id)) == true ? '#00f492' : '#565656'
              }" />
                        </template>
                        <template slot-scope="{ row, index }" slot="header">
                            <!--<span class="name-header" :style="{background:bgColor[index % 12]}">{{getFirstChart(row.name)}}</span>-->
                            <PersonalPhoto :name="row.name" :picture="row.picture" :color="bgColor[index % 12]" />
                        </template>
                        <template slot-scope="{ row }" slot="classId">
                            <span>{{ row.className }}</span>
                        </template>
                        <template slot-scope="{ row }" slot="no">
                            <span>{{ row.no }}</span>
                        </template>
                        <template slot-scope="{ row }" slot="gradeName">
                            <span>{{ $jsFn.getGradeNameByYear(schoolBase, searchPeriod, row.year) }}</span>
                        </template>
                        <template slot-scope="{ row }" slot="action" v-if="authorizationStatus == false">
                            <div class="item-tools" v-if="$access.can('admin.*|student-upd')">
                                <Icon type="md-create" size="18" color="white" @click="editStudent(row)" :title="$t('stuAccount.edit')" />
                                <Icon custom="iconfont icon-reset" size="18" color="white" @click="resetPW(row)" :title=" $t('stuAccount.resetPw')" />
                                <Icon type="md-trash" size="18" color="white" @click="delStudent(row)" :title="$t('stuAccount.delStu')" />
                            </div>
                        </template>
                    </Table>
                </Scroll>

                <AclassOneAuth :students="students" :selected="selections" @closeAuth="closeAuth" :closefromBtn="closefromBtn" />
            </div>
        </div>
        <!-- 班级管理 -->
        <div v-show="tab == 'class'" class="class-mgt-wrap" id="class-mgt-list">
            <ClassMgt></ClassMgt>
        </div>
        <!-- 自定义名单 -->
        <div v-show="tab == 'stulist'" class="class-mgt-wrap" id="stu-mgt-list">
            <MgtStuList></MgtStuList>
        </div>
        <Modal v-model="addStudentStatus" width="520" class-name="add-student dark-iview-modal" :mask-closable="false">
            <add-student v-if="addStudentStatus" :schoolCode="$store.state.user.schoolCode" :isShow="addStudentStatus" :editStudentInfo="editStudentInfo" @saveStudentInfo="closeAddStudent" :bizType="bizType"></add-student>
            <div slot="footer"></div>
        </Modal>
        <Modal v-model="importStudentStatus" width="70%" class="import-student" :mask-closable="false">
            <div slot="header">
                <span class="import-model-title">{{ $t('stuAccount.importTitle') }}</span>
                <div style="display: flex;justify-items: center;">
                    <!-- <div class="importPeriod">
                        <span class="label">目前學段:</span>
                        <span class="name">{{ getPeriodName }}</span>
                    </div> -->
                    <BasePdSelect @pd-change="(data)=>{searchPeriod = data }"></BasePdSelect>
                    <!-- 由excel汇入 -->
                    <!-- <div class="importAcademicYear">
                        <span class="label">學年度:</span>
                        <InputNumber v-model="academicYear" :editable="false"></InputNumber>
                    </div> -->
                </div>
            </div>
            <import-student v-if="importStudentStatus" :period="searchPeriod" :schoolCode="$store.state.user.schoolCode" :isShow="importStudentStatus" @importStudentInfo="closeImportStudent" :academicYear="academicYear"></import-student>
            <div slot="footer"></div>
        </Modal>
    </div>
</template>

<script>
import PersonalPhoto from '@/components/public/personalPhoto/Index.vue'
import AddStudent from './AddStudent'
import ClassMgt from './ClassMgt'
import ImportStudent from './ImportStudent'
import Authorization from './Authorization'
import AclassOneAuth from './AclassOneAuth'
import MgtStuList from './MgtStuList'
import { mapGetters, mapMutations } from 'vuex'
export default {
    components: {
        AddStudent,
        ImportStudent,
        Authorization,
        PersonalPhoto,
        AclassOneAuth,
        ClassMgt,
        MgtStuList
    },
    data() {
        return {
            tab: 'list',
            totalNum: 0,
            bgColor: ['#4ECDC4', '#F99406', '#075CD0', '#F7CA17', '#F2774B', '#67809F', '#BF55ED', '#00B169', '#F72459', '#F15A22', '#03C9A8', '#9A1294'],
            classroomList: [],
            classroomShowList: [],
            gradeList: [],
            searchPeriod: '',
            searchGrade: '',
            searchClassroom: '',
            schoolBase: {
                period: []
            },
            tableLoading: true,
            searchText: '',
            currentPage: 1,
            pageSize: 20,
            bizType: 0, // 0:新增 1：修改
            editStudentInfo: [],
            editOneStudtInfo: {},
            selections: [],
            selectRow: {},
            addStudentStatus: false,
            importStudentStatus: false,
            authorizationStatus: false,
            closefromBtn: false,
            tableShowData: [],
            tableFilterData: [],
            tableColumns: [],
            basicCount: 99,
            pointNum: 0,
            academicYear: new Date().getFullYear(), //这里需要根据学期计算当前学级
            isloading: true
        }
    },
    methods: {
        /**
         * 重置密碼
         * @param row
         */
        resetPW(row) {
            //重置单个学生
            if (row != -1) {
                this.$Modal.confirm({
                    title: this.$t('cusMgt.resetPw'),
                    content: '<p>' + this.$t('cusMgt.resetPwContent1') + " <strong style='color:red;'>" + row.name + '</strong>' + this.$t('cusMgt.resetPwContent1') + '?</p>',
                    onOk: () => {
                        let ids = []
                        row.pw = row.id
                        row.year = row.year ? row.year.toString() : ''
                        delete row.no
                        ids.push(row)
                        this.tableLoading = true
                        this.$api.stuAccount.saveAllStudent(this.$store.state.user.schoolCode, ids).then(
                            res => {
                                this.$Message.success(this.$t('cusMgt.resetPwOk'))
                                this.tableLoading = false
                            },
                            err => {
                                this.$Message.error('API error!')
                                this.tableLoading = false
                            }
                        )
                    }
                })
            } else {
                //批量重置
                if (this.selections.length > 0) {
                    this.$Modal.confirm({
                        title: this.$t('cusMgt.resetPw'),
                        content: '<p>' + this.$t('cusMgt.resetPwContent3') + " <strong style='color:red;'>" + this.selections.length + '</strong>' + this.$t('cusMgt.resetPwContent4') + '</p>',
                        onOk: () => {
                            this.tableLoading = true
                            let apiData = this.selections.map((item) => {
                                let d = item
                                d.pw = d.id
                                delete d.no
                                d.year = d.year.toString()
                                return d
                            })

                            this.$api.stuAccount.saveAllStudent(this.$store.state.user.schoolCode, apiData).then(
                                res => {
                                    this.selections.length = 0
                                    this.$refs.selection.selectAll(false)
                                    this.$Message.success(this.$t('cusMgt.resetPwOk'))
                                },
                                err => {
                                    this.$Message.error('API ERROR!')
                                }
                            ).finally(() => {
                                this.tableLoading = false
                            })
                        }
                    })
                }
            }
        },
        getFirstChart(name) {
            if (name) {
                return name.substr(0, 1)
            } else {
                return '--'
            }
        },
        getClassroomList(index) {
            this.classroomShowList = this.classroomList.filter(item => {
                return item.grade == this.gradeList[index].code
            })
            if (this.classroomShowList.length == 0) {
                this.$refs.classroom.clearSingleSelect()
            }
        },
        cancelAll() {
            this.selections = []
        },
        getIndex(_arr, _obj) {
            var len = _arr.length
            for (let i = 0; i < len; i++) {
                if (this.isObjEqual(_arr[i], _obj)) {
                    return parseInt(i)
                }
            }
            return -1
        },
        isObjEqual(o1, o2) {
            var props1 = Object.keys(o1)
            var props2 = Object.keys(o2)
            if (props1.length != props2.length) {
                return false
            }
            for (var i = 0, max = props1.length; i < max; i++) {
                var propName = props1[i]
                if (o1[propName] !== o2[propName]) {
                    return false
                }
            }
            return true
        },
        getSelectInfo(selction, row) {
            this.selections = selction
            this.selectRow = row
        },
        closeAddStudent(data) {
            let newStudents = []
            // 給一個 PW 讓AddStudent.vue 的Watch 可以動作
            if (data.action == 1) { // 新增
                data.studentInfos.pw = '******'
                data.studentInfos.year = parseInt(data.studentInfos.year)
                newStudents.push(data.studentInfos)
            } else if (data.action == 2) {  // 修改
                newStudents = data.studentInfos.map(function (item) {
                    let temp = item
                    temp.pw = '******'
                    temp.year = parseInt(temp.year)
                    return temp
                })
            }
            let storePath = data.action == 1 ? 'schoolBaseInfo/addStudentsToState' : 'schoolBaseInfo/updStudentsToState'
            this.$store.dispatch(storePath, newStudents)
            this.addStudentStatus = false
            this.filterData()
        },
        closeImportStudent(data) {
            // 給一個 PW 讓AddStudent.vue 的Watch 可以動作
            if(!data) return
            let newStudents = data.map((item) =>{
                let temp = item
                temp.pw = '******'
                temp.year = parseInt(temp.year)
                return temp
            })
            this.$store.dispatch('schoolBaseInfo/importStudentsToState', newStudents)
            this.importStudentStatus = false
            //这里需要更细班级列表，因为这里可能创建信息的班级
            this.$store.commit('user/setSchoolBase', undefined)
            this.getSchoolProfile()
            this.filterData()
            // this.totalNum += data.length
        },
        closeAuth() {
            this.isloading = true
            setTimeout(() => {
                this.initData()
                this.authorizationStatus = false
                this.closefromBtn = true
                this.isloading = false
            }, 1000)
        },

        addStudent() {
            this.bizType = 1
            this.$refs.selection.clearCurrentRow()
            this.addStudentStatus = true
        },
        importStudent() {
            this.importStudentStatus = true
        },
        showAuthorization() {
            this.setFirstOpenAuth(true)
            this.authorizationStatus = true
            this.closefromBtn = false
            this.isloading = true
            setTimeout(() => {
                this.tableColumns = [
                    {
                        type: 'selection',
                        width: 80,
                        align: 'center'
                    },
                    {
                        slot: 'header',
                        title: ' ',
                        align: 'center',
                        width: 120
                    },
                    {
                        key: 'id',
                        title: this.$t('stuAccount.account'),
                        align: 'center',
                        sortable: true,
                        sortMethod: (a, b, type) => {
                            if (type == 'asc') {
                                return a.localeCompare(b)
                            } else {
                                return b.localeCompare(a)
                            }
                        }
                    },
                    {
                        key: 'name',
                        title: this.$t('stuAccount.stuName'),
                        align: 'center',
                        sortable: true
                    },
                    {
                        slot: 'classId',
                        title: this.$t('stuAccount.classroomName'),
                        align: 'center',
                        sortable: true
                    },
                    {
                        key: 'no',
                        title: this.$t('stuAccount.seatNo'),
                        align: 'center',
                        width: 120,
                        sortable: true,
                        sortMethod: (a, b, type) => {
                            if (type == 'desc') {
                                return parseInt(a) > parseInt(b) ? -1 : 1
                            } else {
                                return parseInt(a) < parseInt(b) ? -1 : 1
                            }
                        }
                    },
                    {
                        slot: 'status',
                        title: this.$t('stuAccount.authStatus'),
                        align: 'center',
                        width: 150,
                        sortable: true
                    }
                ]
                this.isloading = false
            }, 1000)
        },
        editStudent(index) {
            this.bizType = 2
            if (index != undefined) {
                this.editStudentInfo = []
                index.year = parseInt(index.year)
                // 避免被深拷貝
                let obj = JSON.parse(JSON.stringify(index))
                this.editStudentInfo.push(obj)

                this.addStudentStatus = true
            } else {
                if (this.selections.length > 0) {
                    this.editStudentInfo.length = 0
                    this.editStudentInfo = [...this.selections]

                    // 多筆設定拿掉classId
                    this.editStudentInfo[0].classId = ''

                    this.addStudentStatus = true
                } else {
                    this.$Message.error(this.$t('stuAccount.tips1'))
                }
            }
        },
        /**
         * 删除学生
         * @param row
         */
        delStudent(row) {
            //删除单个学生
            if (row != -1) {
                this.$Modal.confirm({
                    title: this.$t('stuAccount.tips2Title'),
                    content: '<p>' + this.$t('stuAccount.tips2Content1') + " <strong style='color:red;'>" + row.name + '</strong></p>',
                    onOk: () => {
                        let delIds = []
                        delIds.push({ id: row.id })
                        this.tableLoading = true

                        this.$api.stuAccount.deleteStudent(this.$store.state.user.schoolCode, delIds).then(
                            res => {
                                this.$store.dispatch('schoolBaseInfo/delStudentsToState', res.ids)
                                this.filterData()
                                this.$Message.success(this.$t('stuAccount.delOk'))
                                this.tableLoading = false
                            },
                            err => {
                                this.$Message.error('API error!')
                                this.tableLoading = false
                            }
                        )
                    }
                })
            } else {
                //批量删除
                if (this.selections.length > 0) {
                    this.$Modal.confirm({
                        title: this.$t('stuAccount.tips2Title'),
                        content: '<p>' + this.$t('stuAccount.tips2Content3') + " <strong style='color:red;'>" + this.selections.length + '</strong>' + this.$t('stuAccount.tips2Content4') + '</p>',
                        onOk: () => {
                            this.tableLoading = true
                            let delIds = this.selections.map(item => {
                                return { id: item.id }
                            })
                            this.$api.stuAccount.deleteStudent(this.$store.state.user.schoolCode, delIds).then(
                                res => {
                                    //分页查询后，直接重新访问API
                                    this.selections.length = 0
                                    this.$store.dispatch('schoolBaseInfo/delStudentsToState', res.ids)
                                    this.filterData()
                                    this.$Message.success('删除成功！')
                                    this.tableLoading = false
                                },
                                err => {
                                    this.$Message.error('API ERROR!')
                                    this.tableLoading = false
                                }
                            )
                        }
                    })
                }
            }
        },
        initData() {
            this.tableColumns = [
                {
                    type: 'selection',
                    width: 80,
                    align: 'center'
                },
                {
                    slot: 'header',
                    title: ' ',
                    align: 'center',
                    width: 150
                },
                {
                    key: 'id',
                    title: this.$t('stuAccount.account'),
                    align: 'center',
                    sortable: true,
                    sortMethod: (a, b, type) => {
                        if (type == 'asc') {
                            return a.localeCompare(b)
                        } else {
                            return b.localeCompare(a)
                        }
                    }
                },
                {
                    key: 'name',
                    title: this.$t('stuAccount.stuName'),
                    align: 'center',
                    sortable: true
                },
                {
                    key: 'stuId',
                    title: '学号',
                    align: 'center',
                    sortable: true
                },
                {
                    key: 'year',
                    title: '学级',
                    align: 'center',
                    width: 140,
                    sortable: true
                },
                {
                    slot: 'gradeName',
                    title: '年级',
                    align: 'center',
                    width: 140,
                    sortable: true
                },
                {
                    slot: 'classId',
                    title: '班级',
                    align: 'center',
                    sortable: true
                },
                {
                    key: 'no',
                    title: this.$t('stuAccount.seatNo'),
                    align: 'center',
                    width: 120,
                    sortable: true,
                    sortMethod: (a, b, type) => {
                        if (type == 'desc') {
                            return parseInt(a) > parseInt(b) ? -1 : 1
                        } else {
                            return parseInt(a) < parseInt(b) ? -1 : 1
                        }
                    }
                },
                {
                    slot: 'status',
                    title: this.$t('stuAccount.authStatus'),
                    align: 'center',
                    width: 120,
                    sortable: true
                },
                {
                    slot: 'action',
                    title: ' ',
                    width: 160,
                    align: 'center'
                }
            ]
        },
        /**基础查询数据 */
        baseFindStudent(params) {
            this.$api.stuAccount.findStudent(this.$store.state.user.schoolCode).then(
                res => {
                    if (res && res.students) {
                        this.tableLoading = false
                        // 給一個 PW 讓AddStudent.vue 的Watch 可以動作
                        let newStudents = res.students.map(function (item) {
                            let temp = item
                            temp.pw = '******'
                            return temp
                        })

                        newStudents.forEach(element => {
                            Object.defineProperty(element, 'isGivenAuth', {
                                value: this.aclassOneInfoNum != undefined && (this.aclassOneInfoNum.staIds.includes(element.id) == true || this.aclassOneInfoNum.dyncIds.includes(element.id)) == true,
                                writable: true
                            })
                        })
                        //console.log(newStudents);
                        //Louise Mock加一個授權狀態
                        this.$store.dispatch('schoolBaseInfo/setStudentsToState', newStudents)
                        this.filterData()
                    } else {
                        console.log('返回学生数据异常')
                    }
                },
                err => {
                    this.tableLoading = false
                }
            )
        },

        getSchoolAclassOne(schoolCode) {
            this.$store.dispatch('studentAclassOneAuth/getSchoolAclassOne', schoolCode).then(
                res => {
                    //this.$Message.success('取得getSchoolAclassOne API資料')
                    this.isloading = false
                },
                err => {
                    this.$Message.error('get API error')
                }
            )
        },

        scrollLoad: function () {
            setTimeout(() => {
                let maxLength = this.tableShowData.length
                let temp = this.tableFilterData.slice(this.pointNum + 1, this.pointNum + this.basicCount)
                this.pointNum += this.basicCount
                if (temp.length == 0) {
                    this.$Message.info(this.$t('stuAccount.isBottom'))
                } else {
                    this.tableShowData.push(...temp)
                }
            }, 1500)
        },
        //获取学校基础信息
        getSchoolProfile() {
            this.$store.dispatch('user/getSchoolProfile').then(
                res => {
                    this.schoolBase = res.school_base
                    //根据入学期计算当前学级
                    let pData = this.schoolBase.period.find(item => {
                        return item.id == this.searchPeriod
                    })
                    if (pData) {
                        let date = new Date()
                        let curYear = date.getFullYear()
                        let month = date.getMonth() + 1
                        let start = pData.semesters.find(item => {
                            return item.start == 1
                        })
                        // 根据入学月份确定当前年级和学级的关系
                        if (start && month < start.month) {
                            curYear--
                        }
                        this.academicYear = curYear
                    }

                }
            )
        },
        /**根据学段、年级、班级搜索 */
        filterData: function () {
            let data = this.students
            // 优先帳號資訊搜尋
            if (this.searchText) {
                let text = this.searchText
                data = data.filter(function (item) {
                    return item.name.indexOf(text) >= 0 || item.id.indexOf(text) >= 0
                })
                this.tableFilterData = data
                this.pointNum = this.basicCount
                this.tableShowData = data.slice(0, this.basicCount)
                return
            }

            // 其次班级筛选条件
            if (this.searchClassroom == 'noclass') {
                if (this.searchClassroom) {
                    let id = this.searchClassroom
                    data = data.filter(function (item) {
                        return !item.classId
                    })
                }

                this.tableFilterData = data
                this.pointNum = this.basicCount
                this.tableShowData = data.slice(0, this.basicCount)
                return
            } else if (this.searchClassroom) {
                let id = this.searchClassroom
                data = data.filter(function (item) {
                    return item.classId == id
                })
                this.tableFilterData = data
                this.pointNum = this.basicCount
                this.tableShowData = data.slice(0, this.basicCount)
                return
            }

            // 其他筛选条件

            // 學制篩選
            if (this.searchPeriod) {
                let id = this.searchPeriod
                data = data.filter(function (item) {
                    return item.periodId == id
                })
            }

            // 年級篩選
            if (this.searchGrade) {
                let id = this.searchGrade
                data = data.filter(function (item) {
                    return item.year == id
                })
            }

            this.tableFilterData = data
            this.pointNum = this.basicCount
            this.tableShowData = data.slice(0, this.basicCount)
        },
        ...mapMutations({
            setFirstOpenAuth: 'studentAclassOneAuth/setFirstOpenAuth'
        })
    },
    created() {
        this.getSchoolProfile()
        this.initData()
        this.baseFindStudent()
    },
    computed: {
        ...mapGetters({
            periods: 'user/getPeriods', // 學制s
            grades: 'user/getGrades', // 年級
            classes: 'user/getClasses', // 教室ID
            students: 'schoolBaseInfo/getStudent', // 學生List
            aclassOneInfoNum: 'studentAclassOneAuth/getSchoolAclassOneInfoNum'
        }),
        filterGrades: function () {
            var data = this.grades
            if (this.searchPeriod) {
                let periodId = this.searchPeriod
                data = data.filter(function (item) {
                    return item.periodId == periodId
                })
                return data
            } else {
                return []
            }
        },
        filterClasses: function () {
            var data = this.classes
            if (this.searchGrade) {
                data = data.filter((item) => {
                    return item.year == this.searchGrade && item.periodId == this.searchPeriod
                })
                return data
            } else {
                return []
            }
        },
        getPeriodName: function () {
            let str = ''
            if (this.periods) {
                let id = this.searchPeriod
                let period = this.periods.filter((item) => {
                    return item.id == id
                })
                if (period[0]) str = period[0].name
            }
            return str
        },
        years() {
            if (this.schoolBase && this.schoolBase.period.length && this.searchPeriod) {
                let pData = this.schoolBase.period.find(item => {
                    return item.id == this.searchPeriod
                })
                if (pData) {
                    let date = new Date()
                    let year = date.getFullYear()
                    let month = date.getMonth() + 1
                    let start = pData.semesters.find(item => {
                        return item.start == 1
                    })
                    // 根据入学月份确定当前年级和学级的关系
                    if (start && month < start.month) {
                        year--
                    }
                    let res = pData.grades.map(item => {
                        return {
                            label: `${item}(${year}级)`,
                            value: year--
                        }
                    })
                    return res
                } else {
                    return []
                }
            }
            return []
        }
    },
    watch: {
        selections: function (value) {
            console.log(value)
        }
    },
    mounted() {
        this.getSchoolAclassOne(this.$store.state.user.schoolCode)
        if (Array.isArray(this.periods)) {
            this.searchPeriod = this.periods[0].id
        }
    }
}
</script>
