<template>
    <div class="teacher-group-container">
        <vuescroll>
            <div class="group-data-box">
                <div class="group-wrap-item" v-for="(item,index) in groupList" :key="index">
                    <!-- <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 class="group-info-wrap">
                        <div class="group-img-start" :style="{backgroundImage:`radial-gradient(${colorList[index % 9]},#fff)`}">
                        </div>
                        <div>
                            <h6 class="group-name">{{item.name}}</h6>
                            <p class="group-info">
                                {{$t('teachermgmt.peopleNum')}}
                                {{item.teachers.length}}
                                {{$t('teachermgmt.peopleUnit')}}
                            </p>
                            <p class="group-info">
                                <span class="view-member" @click="addMember(item.id)">
                                    {{$t('teachermgmt.addMember')}}
                                </span>
                            </p>
                        </div>
                        <!-- <div class="group-img-end" :style="{backgroundImage:`radial-gradient(circle at 0% 0%, #fff, ${colorList[index]})`}">
                        </div> -->
                    </div>
                    <div class="list-group">
                        <vuescroll :ops="options">
                            <Draggable ghost-class="ghost" group="student" :disabled="true" style="height:300px" :list="item.teacherInfos" :animation='200' @end="moveToGroup">
                                <div class="student-info-item" v-for="(teaItem,index) in item.teacherInfos" :key="index">
                                    <PersonalPhoto :name="teaItem.name" :picture="teaItem.picture"></PersonalPhoto>
                                    <p class="teacher-name">{{`${teaItem.name}(${teaItem.id})`}}</p>
                                    <Icon type="md-remove-circle" class="remove-member-icon" @click="delMember(item.id,teaItem.id)" />
                                </div>
                                <EmptyData :textContent="$t('teachermgmt.noTeacher')" style="opacity:0.5" v-if="item.teachers.length == 0"></EmptyData>
                            </Draggable>
                        </vuescroll>
                        <span class="add-member-box" @click="delGroup(item.id)">
                            <Icon type="md-close" class="add-member-icon" />
                        </span>
                    </div>
                </div>
                <div id="add-tea-group-box">
                    <Input v-model="groupName" :placeholder="$t('cusMgt.groupNameHolder')" style="width: 245px;margin:40px 50px 30px 50px;" />
                    <Icon type="md-add-circle" class="add-group-icon" @click="addGroup" />
                    <p class="add-group-label" style="color: #ff9900;font-size:16px;margin-bottom:5px" @click="addGroup" v-show="!groupList.length">(暂无教研组)</p>
                    <p class="add-group-label" @click="addGroup">{{$t('cusMgt.addGroup')}}</p>
                </div>
            </div>
        </vuescroll>
        <Modal v-model="addTeaStatus" :title="$t('teachermgmt.addMember')" @on-ok="okAdd" @on-cancel="cancelAdd" :width="850">
            <Table ref="teacherList" stripe :columns="teaColumns" :data="teacherList" :height="600" @on-selection-change="getSelectTeachers">
                <template slot-scope="{ row }" slot="pictrue">
                    <PersonalPhoto :name="row.name" :picture="row.picture"></PersonalPhoto>
                </template>
            </Table>
        </Modal>
    </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 {
            options: {
                bar: {
                    opacity: 0.2
                }
            },
            colorList: ['#19be6b', '#2b85e4', '#5cadff', '#ed4014', '#2FCADB', '#2d8cf0', '#ff9900', '#2db7f5', '#fb0000'],
            selections: [],
            addTeaStatus: false,
            groupName: "",
            nameEdStatus: false,
            groupList: [],
            teaColumns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: ' ',
                    slot: 'pictrue',
                    width: 100,
                },
                {
                    title: this.$t('teachermgmt.table.th2'),
                    key: 'name',
                    width: 160,
                },
                {
                    title: 'ID',
                    key: 'id',
                    width: 160,
                },
                {
                    title: this.$t('teachermgmt.table.th3'),
                    key: 'job',
                    width: 150,
                },
                {
                    title: this.$t('teachermgmt.table.th5'),
                    key: 'group',
                    width: 150,
                },
            ],
            curGroupId: ''
        }
    },
    computed: {
        ...mapGetters({
            teacherList: 'user/getSchoolUserJoined', // 取得已加入此學校的使用者
        }),
    },
    methods: {
        //移除教研组成员
        delMember(groupId, teaId) {
            let gIndex = this.groupList.findIndex(item => {
                return item.id == groupId
            })
            let teaIndex
            if (gIndex > -1) {
                teaIndex = this.groupList[gIndex].teacherInfos.findIndex(item => {
                    return item.id == teaId
                })
            }

            if (gIndex > -1 && teaIndex > -1) {
                this.$Modal.confirm({
                    title: this.$t('teachermgmt.rmvTch'),
                    content: `${this.$t('teachermgmt.rmvTchContent')}${this.groupList[gIndex].teacherInfos[teaIndex].name}?`,
                    okText: this.$t('teachermgmt.yes'),
                    cancelText: this.$t('teachermgmt.no'),
                    onOk: () => {
                        this.groupList[gIndex].teacherInfos.splice(teaIndex, 1)
                        this.groupList[gIndex].teachers.splice(teaIndex, 1)
                        this.$api.schoolSetting.UpsertTchGroup(this.groupList[gIndex]).then(
                            res => {
                                this.$Message.success(this.$t('teachermgmt.rmvOk'))
                            },
                            err => {
                                this.$Message.error(this.$t('teachermgmt.rmvErr'))
                            }
                        )
                    }
                })
            }
        },
        // 查询教研组
        getResearchGroup() {
            let params = {
                code: this.$store.state.userInfo.schoolCode,
                scope: 'school'
            }
            this.$api.schoolSetting.FindTchGroup(params).then(
                res => {
                    if (res && res.tchLists) {
                        res.tchLists.forEach(listItem => {
                            listItem.teacherInfos = []
                            listItem.teachers.forEach(tid => {
                                let teacher = this.teacherList.find(tItem => {
                                    return tItem.id == tid
                                })
                                if (teacher) {
                                    listItem.teacherInfos.push(teacher)
                                }
                            })
                        })
                    }
                    this.groupList = res.tchLists
                },
                err => {
                    this.$Message.error(this.$t('teachermgmt.groupInfoErr'))
                }
            )
        },
        //删除组别
        delGroup(id) {
            let index = this.groupList.findIndex(item => {
                return item.id == id
            })
            if (index > -1) {
                this.$Modal.confirm({
                    title: this.$t('teachermgmt.delGroup'),
                    content: `${this.$t('teachermgmt.rmvTchContent')}${this.groupList[index].name}?`,
                    okText: this.$t('teachermgmt.yes'),
                    cancelText: this.$t('teachermgmt.no'),
                    onOk: () => {
                        let params = {
                            id: this.groupList[index].id,
                            // code: this.$store.state.userInfo.schoolCode,
                            // scope: 'school'
                        }
                        this.$api.schoolSetting.DelTchGroup(params).then(
                            res => {
                                this.groupList.splice(index, 1)
                                this.$Message.success(this.$t('teachermgmt.rmvOk'))
                            },
                            err => {
                                this.$Message.error(this.$t('teachermgmt.rmvErr'))
                            }
                        )
                    }
                })
            }
        },
        // 添加组别
        addGroup() {
            if (this.groupName == '') {
                this.$Message.warning(this.$t('cusMgt.checkName'))
            } else {
                //TODO 对接保存分组API
                let groupId = this.$jsFn.uuid()
                let params = {
                    id: groupId,
                    name: this.groupName,
                    scope: 'school',
                    code: this.$store.state.userInfo.schoolCode,
                    school: this.$store.state.userInfo.schoolCode,
                    creatorId: this.$store.state.userInfo.TEAMModelId,
                    type: 'research',
                    teachers: [],
                    teacherInfos: []
                }
                this.$api.schoolSetting.UpsertTchGroup(params).then(
                    res => {
                        this.groupList.push(params)
                        this.groupName = ''
                        this.$Message.success(this.$t('teachermgmt.addOk'))
                    },
                    err => {
                        this.$Message.error(this.$t('teachermgmt.addErr'))
                    }
                )

            }
        },
        moveToGroup(data) {
            console.log(this.groupList)
            console.log('参数', data)
        },
        addMember(id) {
            this.curGroupId = id
            this.addTeaStatus = true
        },
        cancelAdd() {
            this.$refs['teacherList'].selectAll(false)
        },
        //添加老师
        okAdd() {
            let curGroup = this.groupList.find(item => {
                return item.id == this.curGroupId
            })
            if (curGroup) {
                let ids = curGroup.teacherInfos.map(item => {
                    return item.id
                })
                let needUpd = false
                this.selections.forEach(item => {
                    if (!ids.includes(item.id)) {
                        curGroup.teacherInfos.push(item)
                        needUpd = true
                    }
                })
                if (needUpd) {
                    // let data = this._.cloneDeep(curGroup)
                    curGroup.teachers = curGroup.teacherInfos.map(item => {
                        return item.id
                    })
                    this.$api.schoolSetting.UpsertTchGroup(curGroup).then(
                        res => {
                            this.$Message.success(this.$t('teachermgmt.addOk'))
                        },
                        err => {
                            this.$Message.error(this.$t('teachermgmt.addErr'))
                        }
                    )
                }
            }
            this.$refs['teacherList'].selectAll(false)
        },
        getSelectTeachers(selections) {
            this.selections = selections
        }
    },
    created() {
        this.getResearchGroup()
    }
}
</script>
<style lang="less" scoped>
@import "./Group.less";
</style>