<template>
    <div class="dark-iview-table student-list">
        <div class="student-filter-wrap dark-iview-select dark-iview-input">
            <span style="margin-top:6px">{{$t('stuAccount.filterLabel')}}</span>
            <!-- 學制Select -->
            <Select v-model="searchPeriod" style="width:120px;" :placeholder="$t('stuAccount.periodHolder')" clearable @on-change="filterData" :not-found-text="$t('stuAccount.noSchool')">
                <Option v-for="(item,index) in periods" :value="item.id" :key="index">{{ item.name }}</Option>
            </Select>
            <!-- 學級Select -->
            <Select v-model="searchGrade" style="width:120px;margin-left:5px;" :placeholder="$t('stuAccount.gradeHolder')" :not-found-text="$t('stuAccount.sltPdFirst')" clearable @on-change="filterData">
                <Option v-for="(item,index) in filterGrades" :value="item.id" :key="index">{{ item.name }}</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>
            </Select>
            <!-- 字串模糊搜尋 -->
            <Input v-model="searchText" clearable :placeholder="$t('stuAccount.searchHolder')" style="width: 220px;margin-left:20px;" search @on-search="filterData" @on-clear="filterData"></Input>
        </div>
        <div class="dark-iview-table" style="position:relative">
            <Scroll :on-reach-bottom="scrollLoad" height="600" :distance-to-edge="[15,15]">
                <Table ref="stuSelection" :columns="tableColumns" :data="tableShowData" @on-selection-change="getSelectInfo">
                    <template slot-scope="{ row,index }" slot="status">
                        <Icon custom="iconfont icon-auth-key" size="25" color="#565656" />
                    </template>
                    <template slot-scope="{ row,index }" slot="header">
                        <PersonalPhoto :name="row.name" :picture="row.picture"></PersonalPhoto>
                    </template>
                    <template slot-scope="{ row }" slot="grade">
                        <span>{{ $jsFn.getGradeNameByYear(schoolBase, row.periodId, row.year) }}</span>
                    </template>
                    <template slot-scope="{ row }" slot="classId">
                        <span>{{ getClassName(row.classId)}}</span>
                    </template>
                    <template slot-scope="{ row }" slot="no">
                        <span>{{row.no}}</span>
                    </template>
                    <template slot-scope="{ row }" slot="action">
                        <div class="item-tools" v-if="$access.can('admin.*|student-upd')">
                            <Icon type="md-create" size="18" color="white" @click="editStudent(row)" />
                            <Icon custom="iconfont icon-reset" size="18" color="white" @click="resetPW(row)" />
                            <Icon type="md-trash" size="18" color="white" @click="delStudent(row)" />
                        </div>
                    </template>
                </Table>
            </Scroll>
            <Loading v-show="tableLoading" :top="100"></Loading>
        </div>
    </div>
</template>
<script>
import PersonalPhoto from '@/components/public/personalPhoto/Index.vue'
import { mapGetters } from 'vuex'
export default {
    components: {
        PersonalPhoto
    },
    data() {
        return {
            bgColor: ['#4ECDC4', '#F99406', '#075CD0', '#F7CA17', '#F2774B', '#67809F', '#BF55ED', '#00B169', '#F72459', '#F15A22', '#03C9A8', '#9A1294'],
            searchText: '',
            searchPeriod: '',
            searchGrade: '',
            searchClassroom: '',
            selections: [],
            currentPage: 1,
            pageSize: 20,
            tableShowData: [],
            tableColumns: [],
            totalNum: 0,
            tableLoading: false,
            tableFilterData: [],
            basicCount: 99,
            schoolBase: {
                period: []
            }
        }
    },
    methods: {
        //清空选择状态
        clearTable() {
            this.$refs.stuSelection.selectAll(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: '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
                        }
                    }
                },
                {
                    key: 'name',
                    title: this.$t('stuAccount.stuName'),
                    align: 'center'
                },
                {
                    slot: 'grade',
                    title: this.$t('stuAccount.grade'),
                    align: 'center',
                    width: 140
                },
                {
                    slot: 'classId',
                    title: this.$t('stuAccount.classroomName'),
                    align: 'center'
                }
            ]
        },
        /**基础查询数据 */
        baseFindStudent(params) {
            if (!this.$store.state.user.schoolCode) return
            this.$api.stuAccount.findStudent(this.$store.state.user.schoolCode).then(
                (res) => {
                    this.tableLoading = false
                    res.students = res.students || []
                    // 給一個 PW 讓AddStudent.vue 的Watch 可以動作
                    let newStudents = res.students.map(function (item) {
                        let temp = item
                        temp.pw = '******'
                        return temp
                    })
                    this.$store.dispatch('schoolBaseInfo/setStudentsToState', newStudents)
                    this.filterData()
                },
                (err) => {
                    this.tableLoading = false
                }
            )
        },
        /**根据学段、年级、班级搜索 */
        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)
                })
            }

            // 學制篩選
            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.gradeId == id
                })
            }

            // 教室篩選
            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)
        },

        getSelectInfo(selction, row) {
            this.selections = selction
            this.selectRow = row
            this.$emit('getSelectInfo', selction)
        },

        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);
        },
        /** 取得年級Name */
        getGradeName: function (gradeId) {
            if (gradeId != null) {
                let gradeData = this.grades.filter(function (item) {
                    return item.id == gradeId
                })
                return gradeData[0].name
            } else {
                return ''
            }
        },
        /** 取得教室Name */
        getClassName: function (classId) {
            if (classId != null) {
                let classesData = this.classes.filter(function (item) {
                    return item.id == classId
                })
                return classesData[0].name
            }

        },
        getFirstChart(name) {
            if (name) {
                return name.substr(0, 1)
            } else {
                return '--'
            }
        },
    },
    created() {
        this.initData()
        this.baseFindStudent()
        this.$store.dispatch('user/getSchoolProfile').then(
            res => {
                this.schoolBase = res.school_base
            }
        )
    },
    computed: {
        ...mapGetters({
            periods: 'user/getPeriods', // 學制s
            grades: 'user/getGrades', // 年級
            classes: 'user/getClasses', // 教室ID
            students: 'schoolBaseInfo/getStudent', // 學生List
        }),
        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) {
                let gradeId = this.searchGrade
                data = data.filter(function (item) {
                    return item.gradeId == gradeId
                })
                return data
            } else {
                return []
            }
        }
    }

}
</script>
<style lang="less" scoped>
@import "./StudentList.less";
</style>
<style>
</style>