<template>
    <div class="group-container">
        <vuescroll>
            <div class="group-box">
                <div class="group-wrap-item" v-for="(item,index) in groupData" :key="index">
                    <div class="group-title-wrap">
                        <!-- <span class="group-num-tag">{{item.groupId ? parseInt(item.groupId) : '-'}}</span> -->
                        <Input v-model="item.groupName" class="group-name-tag" :placeholder="$t('cusMgt.groupNameHolder')" :disabled="nameEdStatus" @click.native.stop="nameEdStatus = false" :title="$t('cusMgt.edtiGroupName')" @on-change="$jsFn.debounce(setGroupName,1000)(index)" />
                        <Icon type="md-close" class="close-group-icon" v-show="item.groupName != '默认组别'" @click="delGroup(index)" />
                    </div>
                    <Draggable ghost-class="ghost" group="student" class="list-group" :list="item.teachers" :animation='200' @end="groupToList">
                        <div class="student-info-item" v-for="(stuItem,index) in item.teachers" :key="index">
                            <PersonalPhoto :name="stuItem.name" :picture="stuItem.picture"></PersonalPhoto>
                            <p class="teacher-name">{{`${stuItem.name}(${stuItem.id})`}}</p>
                        </div>
                        <EmptyData textContent="暂无老师" v-if="item.teachers.length == 0"></EmptyData>
                    </Draggable>
                </div>
                <div id="add-group-box">
                    <Input v-model="groupName" :placeholder="$t('cusMgt.groupNameHolder')" style="width: 200px;margin:40px 50px 10px 50px;" />
                    <Icon type="md-add-circle" class="add-group-icon" @click="addGroup" />
                    <p class="add-group-label" @click="addGroup">{{$t('cusMgt.addGroup')}}</p>
                </div>
                <!-- <Button type="info" @click="saveGroup">保存分组</Button> -->
            </div>
        </vuescroll>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import PersonalPhoto from '@/components/public/personalPhoto/Index.vue'
import Draggable from 'vuedraggable'
export default {
    components: {
        PersonalPhoto, Draggable
    },
    data() {
        return {
            groupData: [],
            teaData: [],
            groupName: '',
            nameEdStatus: false
        }
    },
    computed: {
        ...mapGetters({
            teachers: 'user/getSchoolUserJoined', // 取得已加入此學校的使用者
        }),
    },
    methods: {
        //转分组模式数据结构
        handelGroup() {
            this.teaData.forEach(item=>{
                item.groupName = item.groupName || '默认组别'
            })
            let groupRes = this.$jsFn.groupBy(this.teaData, 'groupName')
            this.groupData.length = 0
            for (let index in groupRes) {
                this.groupData.push({
                    groupName: groupRes[index][0].groupName || '默认组别',
                    groupId: groupRes[index][0].groupId,
                    teachers: groupRes[index]
                })
            }
            this.groupData.sort((a, b) => {
                return parseInt(a.groupId) - parseInt(b.groupId)
            })
        },
        //新增分组
        addGroup() {
            if (this.groupName == '') {
                this.$Message.warning(this.$t('cusMgt.checkName'))
            } else if (this.teaData.length == 0) {
                this.$Message.warning(this.$t('cusMgt.noStuTips'))
            } else {
                this.groupData.push({
                    groupId: (this.groupData.length + 1) + '',
                    groupName: this.groupName,
                    teachers: []
                })
                this.groupName = ''
            }
            this.updated = true
        },
        //分组视图修改后对应调整表格视图
        groupToList() {
            this.teaData = []
            for (let i in this.groupData) {
                for (let j in this.groupData[i].teachers) {
                    this.groupData[i].teachers[j].groupId = this.groupData[i].groupId
                    this.groupData[i].teachers[j].groupName = this.groupData[i].groupName
                    this.teaData.push(this.groupData[i].teachers[j])
                }
            }
            this.updated = true
        },
        //删除组别
        delGroup(index) {
            if (this.groupData.length > 1) {
                let teachers = JSON.parse(JSON.stringify(this.groupData[index].teachers))
                for (let i in teachers) {
                    teachers[i].groupId = ''
                    teachers[i].groupName = ''
                }
                this.groupData.splice(index, 1)
                let t = this.groupData.find(item=>{
                    return !item.groupId
                })
                if(t){
                    t.teachers.push(...teachers)
                }else{
                    this.groupData.push({
                        groupId:'',
                        groupName:'',
                        teachers
                    })
                }
                this.groupToList()
            } else {
                this.$Message.warning(this.$t('cusMgt.atLeast'))
            }
        },
        // 保存分组
        saveGroup() {
            console.log('教师数据', this.teaData, this.teachers)
            this.$api.teachMgmt.savaTeacherGroup({
                schoolId: this.$store.state.userInfo.schoolCode,
                teachers: this.teaData.map(item=>{
                    return {
                        id: item.id,
                        groupName: item.groupName  == '默认组别' ? null : item.groupName,
                        groupId: item.groupId || '1' 
                    }
                })
            }).then(
                (res) => {
                    if (!res.error) {
                        this.$Message.success(this.$t('cusMgt.saveOk'))
                    } else {
                        // this.$Message.error('API error!')
                    }
                },
                (err) => {
                    // this.$Message.error('API error!')
                }
            ).finally(()=>{
                this.$EventBus.$emit('noSaveOk')
            })
        },
        //设置组名
        setGroupName(index) {
            for (let i in this.teaData) {
                if (this.teaData[i].groupId == this.groupData[index].groupId) {
                    this.teaData[i].groupName = this.groupData[index].groupName
                }
            }
            this.updated = true
        },
    },
    mounted() {
        this.$EventBus.$off('noSaveGroup')
        this.$EventBus.$on('noSaveGroup', val => {
            this.saveGroup()
        })
    },
    watch: {
        teachers: {
            handler(n, o) {
                this.teaData = this._.cloneDeep(this.teachers)
                this.handelGroup()
            },
            deep: true,
            immediate: true
        }
    }
}
</script>
<style lang="less" scoped>
@import "./Group.less";
</style>