<template>
    <div class="class-mgt-container dark-iview-split">
        <Loading v-show="isListLoading"></Loading>
        <Split v-model="split1">
            <div class="class-list-wrap" slot="left">
                <!--教室列表头部-->
                <div class="class-list-header">
                    <span>{{$t('schoolBaseInfo.classroomList')}}</span>
                    <div v-if="!isSearch" style="float:right;">
                        <Icon class="action-btn-icon" type="ios-search" @click="isSearch = true" />
                        <Icon v-if="$access.can('admin.*|classroom-upd')" class="action-btn-icon" type="md-trash" @click.stop="showConfirmDelete()" />
                        <Icon v-if="$access.can('admin.*|classroom-upd')" class="action-btn-icon" type="md-add" @click="addClassroom()" />
                    </div>
                    <div v-else class="dark-iview-input" style="float:right;width:calc(100% - 100px);padding-right:10px;">
                        <Input icon="ios-close" v-model="keyword" :placeholder="$t('schoolBaseInfo.codeSearchHolder')" autofocus style="width:100%" @on-click="closeKeySearch" @on-change="filterClassname" />
                    </div>
                </div>
                <!-- 排序条件 -->
                <div class="class-list-filter">
                    <div class="class-list-filter-box">
                        <Dropdown class="sort-dropdown" trigger="click" placement="bottom-start" @on-click="function(e){ orderBy = e }" @on-visible-change="restOrderBy">
                            <span style="cursor: pointer;color:white;">
                                <Icon type="md-funnel" color="white" size="17" />
                                {{ orderByText }}
                                <Icon type="ios-arrow-down"></Icon>
                            </span>
                            <DropdownMenu slot="list">
                                <DropdownItem name="id">{{$t('schoolBaseInfo.listOrder1')}}</DropdownItem>
                                <DropdownItem name="state">{{$t('schoolBaseInfo.listOrder2')}}</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </div>
                </div>
                <!-- 教室数据列表 -->
                <div class="class-list" id="class-list">
                    <vuescroll>
                        <div class="class-list-item" v-for="(item,index) in roomListShow" :key="index" @click="chooseClassroom(index)" :class="curClassIndex == index ? 'block-bg block-bg-active':'block-bg'">
                            <div class="class-list-item-left">
                                <!-- <p style="color: #a5a5a5;">{{$jsFn.getGradeName(schoolBase,item.gradeId)}}</p> -->
                                <p class="class-name">
                                    <span class="class-id-tag">
                                        {{item.no}}
                                    </span>
                                    <span>
                                        {{item.name}}
                                    </span>
                                </p>
                                <p class="class-type">
                                    <template v-if="isSmart(item.id)">
                                        <v-icon class="iconHi" iconClass="htc" />
                                        <span>
                                            {{$t('schoolBaseInfo.tmdClass')}}
                                        </span>
                                    </template>
                                    <template v-else>
                                        <div class="iconBoard">
                                            <v-icon iconClass="board" style="color:#333;" />
                                        </div>
                                        <span style="color:#a5a5a5;">
                                            {{$t('schoolBaseInfo.normalClass')}}
                                        </span>
                                    </template>
                                </p>
                                <!-- <p class="second-text-color" v-if="item.openType == '1'">
                                <span>{{ $t('schoolBaseInfo.headmaster') }}</span>
                                <span class="primary-text-color">{{item.teacher.name}}</span>
                            </p>
                            <p class="second-text-color" v-else>
                                <span class="primary-text-color">{{$t('schoolBaseInfo.dClass')}}</span>
                            </p> -->
                            </div>
                        </div>
                        <EmptyData v-if="roomListShow.length == 0" style="padding-top:120px;"></EmptyData>
                    </vuescroll>
                </div>
            </div>
            <div class="class-info-wrap" slot="right">
                <!-- tab菜单 -->
                <div class="class-info-header common-save-btn">
                    <!-- 位置设定 暂时去掉-->
                    <!-- <span :class="currentTabIndex == 1 ? 'main-header-tab line-bottom line-bottom-active':'main-header-tab line-bottom'" @click="selectTab(1)">
                        {{$t('schoolBaseInfo.tab3')}}
                    </span> -->
                    <!-- hiteach关联 -->
                    <span :class="currentTabIndex == 3 ? 'main-header-tab line-bottom line-bottom-active':'main-header-tab line-bottom'" @click="selectTab(3)">
                        {{$t('schoolBaseInfo.tab4')}}
                    </span>
                    <!-- 课表 -->
                    <span :class="currentTabIndex == 4 ? 'main-header-tab line-bottom line-bottom-active':'main-header-tab line-bottom'" @click="selectTab(4)">
                        {{$t('schoolBaseInfo.cusTabel')}}
                    </span>
                    <!-- 编辑教室 -->
                    <Button v-if="$access.can('admin.*|classroom-upd')" class="save-btn" :loading="isSaveLoading" :disabled="!updated" icon="ios-albums-outline" @click="saveClassroom()" v-show="currentTabIndex == 1">
                        {{$t('schoolBaseInfo.saveInfo')}}
                    </Button>

                </div>
                <div class="class-info-content">
                    <!-- 關聯 Hiteach -->
                    <div id="hiteach-link" style="height: 100%;" v-show="currentTabIndex == 3">
                        <div class="hiteach-code-wrap">
                            <Loading v-show="hiteachListLoading"></Loading>
                            <div class="hiteach-code-wrap-header">
                                <!-- <p>
                                {{$t('schoolBaseInfo.relationHi')}}
                            </p> -->
                                <div class="class-list-filter">
                                    <div class="class-list-filter-box">
                                        <Dropdown class="sort-dropdown" trigger="click" placement="bottom-start" @on-click="function(e){ filterHiteachVer = e }">
                                            <span v-if="filterHiteachVer == 'ALL'" style="cursor: pointer;color:white;"> {{ $t('schoolBaseInfo.hiFilter1') }} <Icon type="ios-arrow-down"></Icon></span>
                                            <span v-else-if="filterHiteachVer == 'J223IZ6M'" style="cursor: pointer;color:white;"> {{ $t('schoolBaseInfo.hiFilter2') }} <Icon type="ios-arrow-down"></Icon></span>
                                            <span v-else-if="filterHiteachVer == 'J223IZAM'" style="cursor: pointer;color:white;"> {{ $t('schoolBaseInfo.hiFilter3') }} <Icon type="ios-arrow-down"></Icon></span>
                                            <span v-else-if="filterHiteachVer == '3222C6D2'" style="cursor: pointer;color:white;"> {{ $t('schoolBaseInfo.hiFilter4') }} <Icon type="ios-arrow-down"></Icon></span>
                                            <DropdownMenu slot="list">
                                                <DropdownItem name="ALL">{{ $t('schoolBaseInfo.hiFilter1') }}</DropdownItem>
                                                <DropdownItem name="J223IZ6M">{{ $t('schoolBaseInfo.hiFilter2') }}</DropdownItem>
                                                <DropdownItem name="J223IZAM">{{ $t('schoolBaseInfo.hiFilter3') }}</DropdownItem>
                                                <DropdownItem name="3222C6D2">{{ $t('schoolBaseInfo.hiFilter4') }}</DropdownItem>
                                            </DropdownMenu>
                                        </Dropdown>
                                        <div class="dark-iview-input" style="padding-right:10px;">
                                            <Input clearable v-model="serchCode" size="small" suffix="ios-search"></Input>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="hiteach-code-wrap-list">
                                <vuescroll>
                                    <div class="hiteach-collapse" v-for="(item, index) in showHiteachData" :key="index">
                                        <div @click="openHiSub(index)" class="hiteach-collapse-main">
                                            <Icon class="arrowIcon" v-if="item.deviceMax > 1" :type="item.subOpen ? 'ios-arrow-up' : 'ios-arrow-down'" size="30" color="white" />
                                            <v-icon v-if="item.prodCode == 'J223IZ6M'" class="proIcon" iconClass="htc_std" />
                                            <v-icon v-else-if="item.prodCode == '3222C6D2'" class="proIcon" iconClass="htc_tbl" />
                                            <v-icon v-else-if="item.prodCode == 'J223IZAM'" class="proIcon" iconClass="htc_pro" />
                                            <div class="proCont">
                                                <ul>
                                                    <li>
                                                        <h1 class="title">
                                                            {{ $t('schoolBaseInfo.' + item.prodCode)}}
                                                        </h1>
                                                        <span class="serialType">
                                                            {{ item.deviceMax == 1 ? $t('schoolBaseInfo.single') : $t('schoolBaseInfo.mach')}}
                                                        </span>
                                                        <span style="color: #1cc0f3;font-size:12px">
                                                            <!-- 要增加被關聯了幾個 -->
                                                            {{ item.deviceBound ? item.linkCount + ' / '+item.deviceMax : '-- / -- '}}
                                                        </span>
                                                    </li>
                                                    <li><span style="color: #1cc0f3;">{{ item.serial }}</span></li>
                                                    <li style="display: block;">
                                                        <div v-for="(aprule, index) in aprules" :key="index" class="tag" :class="{active: item.aprule ? item.aprule[aprule] : false}">{{ $t('schoolBaseInfo.'+ aprule)}}</div>
                                                    </li>
                                                    <li><span style="color: #8d8d8d;">{{$t('schoolBaseInfo.expireLabel')}}： </span>{{item.endDate | timeFmt}}</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div v-if="item.subOpen" id="hiteach-1">
                                            <template v-if="item.deviceBound.length >0">
                                                <div v-for="(dbItem, dbIndex) in item.deviceBound" :key="dbIndex" class="hiteach-collapse-sub gradient" :class="{'linked': dbItem.classId != '' && dbItem.classId != null && roomListShow[curClassIndex].id != dbItem.classId}">
                                                    <!-- 被關聯 disabled -->
                                                    <Button class="hiteach-collapse-sub-linkBtn" v-model="dbItem.hiteachLink" @click="confirmLink(dbItem.hiteachLink, item.id, dbItem.uuid, dbItem.uuid2, roomListShow[curClassIndex].id)">{{ dbItem.hiteachLink ? $t('schoolBaseInfo.deLink') : $t('schoolBaseInfo.link') }}</Button>
                                                    <!-- <Checkbox :id="'checkbox-' + (dbItem.uuid + dbItem.uuid2)" @on-change="whatUpdHiLink(dbItem, roomListShow[curClassIndex].id, item.id)" style="margin-right: 70px;" v-model="dbItem.hiteachLink" :disabled="dbItem.classId != '' && dbItem.classId != null && roomListShow[curClassIndex].id != dbItem.classId"></Checkbox> -->
                                                    <div class="hiteach-collapse-sub-detail">
                                                        <ul>
                                                            <li>
                                                                <h3>{{ dbItem.pcname }}</h3>
                                                            </li>
                                                            <li>
                                                                <span>{{ dbItem.ip }} {{ dbItem.ip && (dbItem.uuid || dbItem.uuid2) ? '|' : '' }} {{ dbItem.uuid }} {{ dbItem.uuid && dbItem.uuid2 ? '|' : '' }} {{ dbItem.uuid2 }}</span>
                                                            </li>
                                                            <li>
                                                                <span>
                                                                    {{ dbItem.os }}
                                                                </span>
                                                            </li>
                                                        </ul>
                                                        <span v-if="dbItem.classId && roomListShow[curClassIndex].id != dbItem.classId" style="color: #1cc0f3;padding: 0 15px;">
                                                            {{$t('schoolBaseInfo.related')}}
                                                        </span>
                                                    </div>
                                                </div>
                                            </template>
                                            <template v-else>
                                                <div class="hiteach-collapse-sub gradient" style="display: flex;align-items: center;border-top: 1px solid rgb(66, 66, 66);margin-left: 20px;letter-spacing: 1px;font-size: 12px;padding: 20px;">
                                                    <span style="margin-right: 70px;"></span>
                                                    <div style="display: flex;justify-content: space-between;align-items: center;width: 100%;color: #8d8d8d">
                                                        {{$t('schoolBaseInfo.noEnable')}}
                                                    </div>
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                </vuescroll>
                            </div>
                        </div>
                    </div>
                    <!--平面位置-->
                    <div class="school-plan-wrap" v-show="currentTabIndex == 1">
                        <Upload action="" :on-success="uploadSchoolPlan" :before-upload="getFileData">
                            <Button icon="ios-cloud-upload-outline">{{$t('schoolBaseInfo.uploadPlan')}}</Button>
                        </Upload>
                        <div class="school-plan-zoom">
                            <span @click="defaultSize()">1:1</span>
                            <Icon type="ios-add-circle-outline" color="white" size="24" @click="bigger()" />
                            <Icon type="ios-remove-circle-outline" color="white" size="24" @click="smaller()" />
                        </div>
                        <div class="school-plan-box" id="school-plan-box">
                            <canvas id="school-plan" style="cursor:move;" @mousedown="canvasMouseDown" @mousemove="canvasMouseMove" @mouseup="canvasMouseUp" @mouseout="canvasMouseOut">
                                {{$t('schoolBaseInfo.suportCanvas')}}
                            </canvas>
                        </div>
                    </div>
                    <!--课程表-->
                    <div class="school-plan-wrap" v-show="currentTabIndex == 4">
                        <ClassTable mode="view" v-if="this.roomListShow[this.curClassIndex]" :schedData="roomCus" :roomId="roomListShow[curClassIndex].id">
                        </ClassTable>
                    </div>
                </div>
            </div>
        </Split>
        <!-- 创建教室表单 -->
        <Modal v-model="addRoomStatus" :title="$t('schoolBaseInfo.addClassroom')" @on-ok="confirmAddRoom" class-name="dark-iview-modal dark-iview-form">
            <Form ref="classInfo" :model="room" :rules="classValidate">
                <FormItem prop="name" :label="$t('schoolBaseInfo.classroomName')" @click.native.stop class="requird-color">
                    <span slot="label" class="class-attr-wrap-label">{{$t('schoolBaseInfo.classroomName')}}</span>
                    <Input @on-change="watchUpdate" :disabled="editStatus" v-model="room.name" clearable :placeholder="$t('schoolBaseInfo.classroomNameHolder')" />
                </FormItem>
                <FormItem prop="no" @click.native.stop class="requird-color">
                    <span slot="label" class="class-attr-wrap-label">{{$t('schoolBaseInfo.classroomCode')}}</span>
                    <Input @on-change="watchUpdate" :disabled="editStatus" v-model="room.no" clearable :placeholder="$t('schoolBaseInfo.classroomCodeHolder')" />
                </FormItem>
                <FormItem prop="openType" @click.native.stop class="requird-color">
                    <span slot="label" class="class-attr-wrap-label">{{$t('schoolBaseInfo.classAttr')}}</span>
                    <Select @on-change="watchUpdate" :disabled="editStatus" v-model="room.openType" clearable>
                        <Option v-for="(item,index) in attributeList" :value="item.value" :key="index">{{ item.label }}</Option>
                    </Select>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
import '@/icons/svg/htc.svg'
import '@/icons/svg/htc_pro.svg'
import '@/icons/svg/htc_std.svg'
import '@/icons/svg/htc_tbl.svg'
import '@/icons/svg/board.svg'
import { mapGetters } from 'vuex'
import ClassTable from "@/view/newcourse/ClassTable.vue"
export default {
    components: { ClassTable },
    data() {
        // 验证只能是字母和数字
        const validateCode = (rule, value, callback) => {
            if (!value) {
                return callback(new Error(this.$t('schoolBaseInfo.classNoErr')))
            }
            let zg = /^[0-9a-zA-Z]+$/
            if (zg.test(value)) {
                callback()
            } else {
                callback(new Error(this.$t('schoolBaseInfo.classNoErr1')))
            }
        }
        return {
            roomCus: [],//教室课程信息
            split1: 0.2,
            room: {
                id: '',
                name: '',
                no: '',
                openType: ''
            },
            addRoomStatus: false,
            updHiteachLink: [],
            orgHiteachData: [],
            hiteachData: [],
            schoolBase: {
                period: []
            },
            orderBy: 'id',
            filterHiteachVer: 'ALL',
            updateBefore: '',
            updateBeforebyHiteach: '',
            filterPeriod: undefined,
            editStatus: true,//可切换编辑状态
            noStatus: false,
            isSearch: false,
            currentTabIndex: 3,
            isListLoading: false,
            isSaveLoading: false,
            hiteachListLoading: true,
            isInit: true,
            updated: false,
            roomList: [],
            roomListShow: [],
            curClassIndex: 0,
            schoolPlan: '',
            point: {},
            clickPoint: {},
            isMouseDown: false,
            isFirstDraw: 0,
            schoolImageData: [],
            pinImageData: {},
            whiteImageData: {},
            greenImageData: {},
            activeIcon: -1,
            textStatus: true,
            keyword: '',
            serchCode: '',
            scaleDefault: 1,
            maxScale: 3,
            minScale: 0.4,
            scaleStep: 0.1,
            stopScale: false,
            attributeList: [
                {
                    value: '1',
                    label: this.$t('schoolBaseInfo.classAttr1')
                },
                {
                    value: '2',
                    label: this.$t('schoolBaseInfo.classAttr2')
                }
            ],
            classValidate: {
                no: [
                    { required: true, validator: validateCode, trigger: 'change' }
                ],
                name: [
                    { required: true, message: this.$t('schoolBaseInfo.nameWarning'), trigger: 'change' }
                ],
                openType: [
                    { required: true, message: this.$t('schoolBaseInfo.typeWarning'), trigger: 'change' }
                ],
                gradeId: [
                    { required: true, message: this.$t('schoolBaseInfo.gradeWarning'), trigger: 'change' }
                ]
            },
        }
    },
    filters: {
        timeFmt: function (val) {
            if (val == 0 || val == 1) {
                return val == 0 ? this.$t('schoolBaseInfo.expireLabel1') : this.$t('schoolBaseInfo.expireLabel2')
            } else {
                if (val.toString().length < 13) val = val * 1000
                let d = new Date(val),
                    month = '' + (d.getMonth() + 1),
                    day = '' + d.getDate(),
                    year = d.getFullYear();

                if (month.length < 2)
                    month = '0' + month;
                if (day.length < 2)
                    day = '0' + day;

                return [year, month, day].join('/');
            }
        }
    },
    computed: {
        ...mapGetters({
            periods: 'user/getPeriods', // 學制s
            aprules: 'schoolBaseInfo/getAprules',
        }),
        filterPeriodName: function () {
            let data = this.periods
            let pId = this.filterPeriod
            let name = ''
            if (pId !== '') {
                let temp = data.filter(item => {
                    return pId == item.id
                })
                if (temp.length > 0) name = temp[0].name
            }
            return name
        },
        orderByText: function () {
            switch (this.orderBy) {
                case 'id':
                    return this.$t('schoolBaseInfo.listOrder1')
                    break;
                case 'state':
                    return this.$t('schoolBaseInfo.listOrder2')
                    break;
                case 'total':
                    return this.$t('依學生數排序')
                    break;
            }
        },
        showHiteachData: function () {
            let data = this.hiteachData
            let filterText = this.filterHiteachVer
            let nowSeletedClassId = null
            if (this.roomListShow.length > 0) {
                nowSeletedClassId = this.roomListShow[this.curClassIndex].id
            }

            if (nowSeletedClassId != null && this.isSmart(nowSeletedClassId)) {

                // 篩選有 deviceBound 且classID 和現在的教室相同的
                data = data.filter(item => {
                    return Array.isArray(item.deviceBound) && item.deviceBound.length > 0 && item.deviceBound.some(s => { return s.classId == nowSeletedClassId })
                })

                // 整形 拿掉不相關的
                data = data.map(item => {
                    let newD = item
                    newD.deviceBound = newD.deviceBound.filter(f => {
                        return f.classId != null && f.classId != ''
                    })
                    return newD
                })
            } else {
                // 整形 拿掉沒被關聯的
                data = data.map(item => {
                    let newD = item
                    if (Array.isArray(item.deviceBound) && item.deviceBound.length > 0) {
                        newD.deviceBound = newD.deviceBound.filter(f => {
                            return f.classId == null || f.classId == ''
                        })
                    }
                    return newD
                })
            }


            if (Array.isArray(data) && data.length > 0 && filterText != 'ALL') {
                data = data.filter(item => {
                    return item.prodCode == filterText
                })
            }

            if (this.serchCode != '') {
                let serchCode = this.serchCode.toUpperCase()
                data = data.filter((item, index) => {
                    let verName = this.$t('schoolBaseInfo.' + item.prodCode)
                    let pcNames = false;

                    if (Array.isArray(item.deviceBound) && item.deviceBound.length > 0) {
                        pcNames = item.deviceBound.some(db => {
                            if (db.pcname) {
                                return db.pcname.toUpperCase().indexOf(serchCode) != -1
                            } else {
                                return false
                            }

                        })
                    }
                    return item.serial.toUpperCase().indexOf(serchCode) != -1 || verName.toUpperCase().indexOf(serchCode) != -1 || pcNames
                })
            }

            return data
        }
    },
    methods: {
        //根据班级查询课程安排
        findClassCus() {
            if (this.roomListShow.length > 0) {
                let roomId = this.roomListShow[this.curClassIndex].id
                let requestData = {
                    id: roomId,
                    code: this.$store.state.userInfo.schoolCode,
                    scope: 'school'
                }
                this.$api.courseMgmt.findCusByRoom(requestData).then(
                    (res) => {
                        if (!res.error) {
                            this.roomCus = res.courses
                            // this.$set(this.allClassCus, roomId, )
                            this.isLoading = false
                        } else {
                            this.$Message.error('API error!')
                            this.isLoading = false
                        }
                    },
                    (err) => {
                        this.isLoading = false
                    }
                )
            } else {
                this.isLoading = false
            }
        },
        dropdownStates(flag) {
            if (!flag) this.filterByPeriod()
        },
        restOrderBy(flag) {
            if (!flag) this.filterByPeriod()
        },
        closeKeySearch() {
            this.isSearch = false
            this.keyword = ''
            this.filterClassname()
        },
        watchUpdate(data) {
            if (data) {
                this.updated = true
            }
        },
        dataSort(data) {
            switch (this.orderBy) {
                case 'id': // no=>编号 排序
                    data.sort(function (a, b) {
                        let nameA = a.no.toUpperCase(); // ignore upper and lowercase
                        let nameB = b.no.toUpperCase(); // ignore upper and lowercase
                        if (nameA < nameB) {
                            return -1;
                        }
                        if (nameA > nameB) {
                            return 1;
                        }

                        // names must be equal
                        return 0;
                    })
                    break;
                case 'state': // 智慧教室排序
                    data.sort(function (a, b) {
                        if (a.style == 'smart') {
                            return -1
                        } else {
                            return 1
                        }
                    })
                    break; // 學生總數排序
                case 'total':
                    data.sort(function (a, b) {
                        return b.studCount - a.studCount;
                    })
                    break;
            }
            return data
        },
        filterByPeriod() {
            this.curClassIndex = 0
            if (this.filterPeriod) {
                this.roomListShow = this.roomList.filter(item => item.periodId == this.filterPeriod || !item.periodId)
            } else {
                this.roomListShow = [...this.roomList]
            }
            // 排序
            this.roomListShow = this.dataSort(this.roomListShow)

            this.$nextTick(() => {
                this.drawSchoolPlan('')
                this.initIcon()
            })
        },
        filterClassname() {
            if (this.keyword == '' || this.keyword == undefined) {
                this.filterByPeriod()
            } else {
                let filterRes = []
                if (this.filterPeriod) {
                    filterRes = this.roomList.filter(item => item.periodId == this.filterPeriod)
                } else {
                    filterRes = [...this.roomList]
                }
                this.roomListShow = filterRes.filter(item => item.name.indexOf(this.keyword) != -1)
                // 排序
                this.roomListShow = this.dataSort(this.roomListShow)
                this.curClassIndex = 0
                this.updateBefore = JSON.stringify(this.roomListShow[this.curClassIndex])
            }
        },
        selectTab(index) {
            this.currentTabIndex = index
            if (index == 4) {
                this.findClassCus()
            }
        },
        bundleScoll() {
            let schoolPlanBox = document.getElementById('school-plan-box')
            let _this = this
            schoolPlanBox.addEventListener('mousewheel', function (e) {
                if (e.preventDefault) {
                    e.preventDefault()
                } else {
                    window.event.returnValue == false
                }
                _this.scrollFunc(e)
            }, false) || schoolPlanBox.addEventListener('DOMMouseScroll', function (e) {
                if (e.preventDefault) {
                    e.preventDefault()
                } else {
                    window.event.returnValue == false
                }
                _this.scrollFunc(e)
            }, false)
        },
        scrollFunc(e) {
            e = e || window.event
            if (e.wheelDelta) { // 判断浏览器IE，谷歌滑轮事件
                if (e.wheelDelta > 0) { // 当滑轮向上滚动时
                    this.bigger()
                }
                if (e.wheelDelta < 0) { // 当滑轮向下滚动时
                    this.smaller()
                }
            } else if (e.detail) { // Firefox滑轮事件
                if (e.detail > 0) { // 当滑轮向上滚动时
                    this.bigger()
                }
                if (e.detail < 0) { // 当滑轮向下滚动时
                    this.smaller()
                }
            }
        },
        defaultSize() {
            this.scaleDefault = 1
            this.repaint(this.scaleDefault)
        },
        bigger() {
            if (this.scaleDefault + this.scaleStep > this.maxScale) {
                if (!this.stopScale) {
                    this.$Message.warning(this.$t('schoolBaseInfo.csTips1'))
                    this.stopScale = true
                }
            } else {
                this.stopScale = false
                this.scaleDefault += this.scaleStep
                this.repaint(this.scaleDefault)
            }
        },
        smaller() {
            if (this.scaleDefault - this.scaleStep < this.minScale) {
                if (!this.stopScale) {
                    this.$Message.warning(this.$t('schoolBaseInfo.csTips2'))
                    this.stopScale = true
                }
            } else {
                this.stopScale = false
                this.scaleDefault -= this.scaleStep
                this.repaint(this.scaleDefault)
            }
        },
        repaint(scale) {
            this.schoolPlan = document.getElementById('school-plan')
            this.schoolPlan.height = this.schoolImageData.height * this.scaleDefault
            this.schoolPlan.width = this.schoolImageData.width * this.scaleDefault
            this.drawSchoolPlan('imgUrl')
            this.initIcon()
        },

        drawText(text, x, y) {
            this.schoolPlan = document.getElementById('school-plan')
            let ctx = this.schoolPlan.getContext('2d')
            ctx.font = '16px Arial'
            ctx.fillStyle = 'yellow'
            ctx.fillText(text, x, y)
        },
        drawIcon(x, y) {
            this.schoolPlan = document.getElementById('school-plan')
            let ctx = this.schoolPlan.getContext('2d')
            ctx.beginPath()
            ctx.drawImage(this.whiteImageData, x * this.scaleDefault, y * this.scaleDefault, 20 * this.scaleDefault, 20 * this.scaleDefault)
        },
        moveIcon(x, y) {
            this.schoolPlan = document.getElementById('school-plan')
            let ctx = this.schoolPlan.getContext('2d')
            let _this = this
            for (let i = 0; i < _this.roomListShow.length; i++) {
                if (this.activeIcon == i) {
                    ctx.drawImage(this.greenImageData, x * _this.scaleDefault, y * _this.scaleDefault, 20 * _this.scaleDefault, 20 * _this.scaleDefault)
                    this.updated = true
                } else {
                    ctx.drawImage(this.whiteImageData, _this.roomListShow[i].x * _this.scaleDefault, _this.roomListShow[i].y * _this.scaleDefault, 20 * _this.scaleDefault, 20 * _this.scaleDefault)
                }
            }
        },
        initIcon() {
            this.schoolPlan = document.getElementById('school-plan')
            let ctx = this.schoolPlan.getContext('2d')
            for (let i = 0; i < this.roomListShow.length; i++) {
                let icon = i == this.curClassIndex ? this.greenImageData : this.whiteImageData
                if (icon.complete) {
                    ctx.drawImage(icon,
                        this.roomListShow[i].x * this.scaleDefault, this.roomListShow[i].y * this.scaleDefault,
                        20 * this.scaleDefault, 20 * this.scaleDefault)
                }
            }
        },
        checkActivieIcon(point) {
            for (let item in this.roomListShow) {
                if (point.x > this.roomListShow[item].x * this.scaleDefault && point.x < (this.roomListShow[item].x + 15) * this.scaleDefault && point.y > this.roomListShow[item].y * this.scaleDefault && point.y < (this.roomListShow[item].y + 15) * this.scaleDefault) {
                    return item
                }
            }
            return -1
        },
        getCanvasPoint(x, y) {
            this.schoolPlan = document.getElementById('school-plan')
            let canvasRect = this.schoolPlan.getBoundingClientRect()
            let ctx = this.schoolPlan.getContext('2d')
            return {
                x: x - canvasRect.left,
                y: y - canvasRect.top
            }
        },
        canvasMouseDown(e) {
            this.point = this.getCanvasPoint(e.clientX, e.clientY)
            this.clickPoint = this.getCanvasPoint(e.clientX, e.clientY)
            this.activeIcon = this.checkActivieIcon(this.point)
            if (this.activeIcon != -1 && this.activeIcon != this.curClassIndex) {
                this.$Message.warning(this.$t('schoolBaseInfo.noStdClass'))
                this.activeIcon = -1
            } else {
                this.isMouseDown = true
            }
        },
        moveCanvas(start, current) {
            let container = document.getElementById('school-plan-box')
            container.scrollLeft = container.scrollLeft + (start.x - current.x)
            container.scrollTop = container.scrollTop + (start.y - current.y)
        },
        canvasMouseMove(e) {
            this.point = this.getCanvasPoint(e.clientX, e.clientY)
            if (this.isMouseDown == true && this.activeIcon != -1) {
                this.drawSchoolPlan('')
                this.moveIcon(this.point.x / this.scaleDefault, this.point.y / this.scaleDefault)
            } else if (this.isMouseDown == true && this.activeIcon == -1) {
                this.moveCanvas(this.clickPoint, this.point)
            } else {
                let index = this.checkActivieIcon(this.point)
                if (index != -1) {
                    if (this.textStatus == true) {
                        this.drawText(this.roomListShow[index].name, (this.roomListShow[index].x + 25) * this.scaleDefault, (this.roomListShow[index].y + 20) * this.scaleDefault)
                        this.textStatus = false
                    }
                } else {
                    this.drawSchoolPlan('')
                    this.initIcon()
                    this.textStatus = true
                }
            }
        },
        canvasMouseUp(e) {
            this.isMouseDown = false
            if (this.activeIcon != -1) {
                this.roomListShow[this.activeIcon].x = this.point.x / this.scaleDefault
                this.roomListShow[this.activeIcon].y = this.point.y / this.scaleDefault
            }
            this.activeIcon = -1
        },
        canvasMouseOut(e) {
            this.isMouseDown = false
            if (this.activeIcon != -1) {
                this.roomListShow[this.activeIcon].point = this.point
            }
            this.activeIcon = -1
        },
        drawSchoolPlan(imgUrl) {
            this.schoolPlan = document.getElementById('school-plan')
            let context = this.schoolPlan.getContext('2d')
            context.clearRect(0, 0, this.schoolPlan.width, this.schoolPlan.height)
            let _this = this
            if (_this.isFirstDraw <= 0) {
                let image = new Image()
                image.crossOrigin = 'anonymous'
                image.src = require('../../../assets/image/school_plan.jpg');
                image.onload = function () {
                    _this.schoolPlan.width = image.width
                    _this.schoolPlan.height = image.height
                    context.drawImage(image, 0, 0)
                    let imgData = context.getImageData(0, 0, _this.schoolPlan.width, _this.schoolPlan.height)
                    for (let i = 0; i < imgData.data.length; i += 4) {
                        let r = imgData.data[i]
                        let g = imgData.data[i + 1]
                        let b = imgData.data[i + 2]
                        let a = imgData.data[i + 3]
                        if (r > 200 && g > 200 && b > 200) {
                            imgData.data[i + 3] = 0
                        } else {
                            imgData.data[i] = 255
                            imgData.data[i + 1] = 255
                            imgData.data[i + 2] = 255
                            imgData.data[i + 3] = 255
                        }
                    }
                    context.putImageData(imgData, 0, 0)
                    let PNGImg = new Image()
                    PNGImg.src = _this.schoolPlan.toDataURL('image/png')
                    PNGImg.onload = function () {
                        _this.schoolImageData = PNGImg
                        _this.isFirstDraw++
                        _this.initIcon()
                    }

                }
            } else {
                if (this.schoolImageData) {
                    context.drawImage(this.schoolImageData, 0, 0, this.schoolImageData.width, this.schoolImageData.height, 0, 0, this.schoolImageData.width * this.scaleDefault, this.schoolImageData.height * this.scaleDefault)
                }
            }
        },
        getFileData(file) {
            let _this = this
            const reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = () => {
                const _base64 = reader.result
                _this.drawSchoolPlan(_base64)
            }
            return false
        },
        saveClassroom() {
            this.roomListShow[this.curClassIndex]['code'] = this.$store.state.userInfo.schoolCode
            this.isSaveLoading = true
            this.isListLoading = true
            this.$api.room.RoomUpsert(this.roomListShow[this.curClassIndex]).then(
                res => {
                    if (res) {
                        if (res.error) {
                            this.$Message.error(res.v)
                        } else {
                            this.$Message.success(this.$t('schoolBaseInfo.csTips3'))
                            this.updated = false
                            this.updHiteachLink = []
                            this.roomListShow[this.curClassIndex].code = 'Class-' + this.roomListShow[this.curClassIndex].code
                            // this.roomList.unshift(this.roomListShow[this.curClassIndex])
                            // this.$store.dispatch('user/addSchoolRoom', this.roomListShow[this.curClassIndex])
                        }
                    } else {
                        this.$Message.error('API error!')
                    }
                },
                err => {
                    this.$Message.error('API error!')
                }
            ).finally(
                () => {
                    this.isSaveLoading = false
                    this.isListLoading = false
                }
            )
        },
        getClassroom() {
            this.isListLoading = true
            this.$store.dispatch('user/getSchoolProfile').then(
                (res) => {
                    if (res) {
                        this.roomList = res.school_rooms
                        this.schoolBase = res.school_base
                        if (this.roomList.length > 0) {
                            this.updateBefore = JSON.stringify(this.roomList[0])
                        }
                        this.filterClassname()
                        // 預設搜尋給第一個
                        if (this.periods) this.filterPeriod = this.periods[0].id
                        this.filterByPeriod()
                    }
                },
                (err) => {
                    this.$Message.error('API error!')
                }
            ).finally(() => {
                setTimeout(() => {
                    this.isListLoading = false
                }, 500)
            })
        },
        /**显示确认删除班级对话框 */
        showConfirmDelete() {
            if (this.$access.can('admin.*|classroom-upd')) {
                this.$Modal.confirm({
                    title: this.$t('schoolBaseInfo.delClass'),
                    content: this.$t('schoolBaseInfo.delete') + this.roomListShow[this.curClassIndex].name + this.$t('schoolBaseInfo.delContent'),
                    onOk: () => {
                        this.delClassroom(this.curClassIndex)
                    }
                })
            } else {
                this.$Message.warning(this.$t('schoolBaseInfo.authWarning'))
            }
        },
        delClassroom(index) {
            this.isListLoading = true
            // if (this.roomListShow[index].option !== 'insert') {
            //     this.$api.schoolSetting.delClassroom({
            //         id: this.roomListShow[index].id,
            //         scope: this.roomListShow[index].scope,
            //         school_code: this.$store.state.userInfo.schoolCode
            //     }).then(
            //         (res) => {
            //             if (res.error == null) {
            //                 if (this.curClassIndex >= index && index > 0) {
            //                     this.curClassIndex = 0
            //                     this.updateBefore = JSON.stringify(this.roomListShow[this.curClassIndex])
            //                 }
            //                 let originIndex = -1
            //                 for (let i in this.roomList) {
            //                     if (this.roomList[i].id == this.roomListShow[index].id) {
            //                         originIndex = i
            //                         break
            //                     }
            //                 }
            //                 this.$api.schoolSetting.hiteachUnlinkByClassId({
            //                     classId: this.roomListShow[index].id,
            //                     school_code: this.$store.state.userInfo.schoolCode
            //                 })
            //                 this.unlinkHiteachByClassId(this.roomListShow[index].id) // 刪掉指定的classId                                
            //                 this.$store.dispatch('user/delSchoolClasses', this.roomListShow[index].id);
            //                 this.roomList.splice(originIndex, 1)
            //                 this.roomListShow.splice(index, 1)
            //                 this.$Message.success(this.$t('schoolBaseInfo.csTips7'))
            //                 this.updated = false
            //                 this.updHiteachLink = []
            //             }
            //         },
            //         (err) => {
            //             this.$Message.error('API error!')
            //         }
            //     ).finally(() => {
            //         this.isListLoading = false
            //     })
            // } else {
            //     if (this.curClassIndex >= index && index > 0) {
            //         this.curClassIndex = 0
            //         this.updateBefore = JSON.stringify(this.roomListShow[this.curClassIndex])
            //     }
            //     this.roomListShow.splice(index, 1)
            //     this.unlinkHiteachByClassId(this.roomListShow[index].id)// 刪掉指定的classId
            //     this.isListLoading = false
            //     this.updated = false
            //     this.updHiteachLink = []
            // }
            let requestData = {
                id: this.roomListShow[index].id,
                code: this.$store.state.userInfo.schoolCode
            }
            this.$api.room.DelRoom(requestData).then(
                res => {
                    this.curClassIndex = 0
                    this.$Message.success(this.$t('schoolBaseInfo.csTips7'))
                    let originIndex = -1
                    for (let i in this.roomList) {
                        if (this.roomList[i].id == this.roomListShow[index].id) {
                            originIndex = i
                            break
                        }
                    }
                    this.roomList.splice(originIndex, 1)
                    this.roomListShow.splice(index, 1)
                    this.$store.dispatch('user/delSchoolRoom', this.roomListShow[index].id);
                },
                err => {
                    this.$Message.error('API error!')
                }
            ).finally(() => {
                this.isListLoading = false
            })
        },
        uploadSchoolPlan(res, file) {
            this.$Message.success(this.$t('schoolBaseInfo.csTips5'))
        },
        chooseClassroom(index) {
            if (index != this.curClassIndex) {
                if (this.updated) {
                    let config = {
                        title: this.$t('schoolBaseInfo.saveWarning'),
                        content: this.$t('schoolBaseInfo.saveClassWarning'),
                        okText: this.$t('schoolBaseInfo.leaveText'),
                        onOk: () => {
                            if (this.roomListShow[this.curClassIndex].option == 'insert') {
                                this.delClassroom(this.curClassIndex)
                            } else {
                                this.updated = false
                                this.updHiteachLink = []
                                this.$set(this.roomListShow, this.curClassIndex, JSON.parse(this.updateBefore))
                                this.curClassIndex = index
                                this.updateBefore = JSON.stringify(this.roomListShow[this.curClassIndex])
                                this.hiteachData = JSON.parse(this.orgHiteachData)
                            }
                        }
                    }
                    this.$Modal.confirm(config)
                } else {
                    this.curClassIndex = index
                    this.updateBefore = JSON.stringify(this.roomListShow[this.curClassIndex])
                    this.hiteachData = JSON.parse(this.orgHiteachData)
                }
                if (this.currentTabIndex == 1) {
                    this.drawSchoolPlan('')
                    this.initIcon()
                }
                if (this.currentTabIndex == 4) {
                    this.findClassCus()
                }
            }
        },

        initData() {
            let white = new Image()
            let pink = new Image()
            let green = new Image()
            white.crossOrigin = 'anonymous'
            pink.crossOrigin = 'anonymous'
            green.crossOrigin = 'anonymous'
            white.src = require('../../../assets/pin.svg')
            pink.src = require('../../../assets/redpin.svg')
            green.src = require('../../../assets/greenpin.svg')
            let _this = this
            white.onload = function () {
                _this.whiteImageData = white
                _this.drawSchoolPlan()
                _this.initIcon()
            }
            pink.onload = function () {
                _this.pinImageData = pink
            }
            green.onload = function () {
                _this.greenImageData = green
            }
            this.bundleScoll()
        },
        addClassroom() {
            this.addRoomStatus = true
        },
        confirmAddRoom() {
            this.room.code = this.$store.state.userInfo.schoolCode
            this.$api.room.RoomUpsert(this.room).then(
                res => {
                    if (!res.error) {
                        this.$Message.success(this.$t('schoolBaseInfo.csTips3'))
                        this.roomListShow.unshift(this._.cloneDeep(res.room))
                        this.roomList.unshift(this.roomListShow[this.curClassIndex])
                        this.$store.dispatch('user/addSchoolRoom', res.room)
                        this.updated = false
                    } else {
                        this.$Message.error('API error!')
                    }
                },
                err => {
                    this.$Message.error('API error!')
                }
            ).finally(
                () => {
                    this.isSaveLoading = false
                    this.isListLoading = false
                    this.room = {
                        id: '',
                        name: '',
                        no: '',
                        openType: ''
                    }
                }
            )
        },
        initHiteachData: async function () {
            let temp;
            let linkedClassIds = []
            await this.getHiteachList().then(res => {
                temp = res.map(item => {
                    // 子項目開關
                    item.subOpen = false
                    if (item.deviceMax == 1) item.subOpen = true

                    // 已被關聯數量
                    let linkCount = 0

                    // 關聯開關
                    item.deviceBound.map(db => {
                        db.hiteachLink = false
                        if (db.classId) {
                            db.hiteachLink = true
                            linkedClassIds.push(db.classId)
                            linkCount++;
                        }
                    })

                    item.linkCount = linkCount

                    return item
                })
            })
            this.orgHiteachData = JSON.stringify(temp)
            this.hiteachData = temp

            if (this.roomList.length > 0) {
                this.roomList.forEach(item => {
                    item.style = "normal"
                    if (linkedClassIds.indexOf(item.id) >= 0) {
                        item.style = "smart"
                    }
                })
            }
        },
        getHiteachList: async function () {
            let data = []
            await this.$api.classroom.GetHiteachList(this.$store.state.user.schoolCode).then(
                (res) => {
                    this.hiteachListLoading = false;
                    data = res.serial
                },
                (err) => {
                    this.$Message.error('API error!')
                }
            )
            return data
        },
        openHiSub(index) {
            if (this.showHiteachData.length > 0 && this.showHiteachData[index].deviceMax > 1) {
                this.showHiteachData[index].subOpen = !this.showHiteachData[index].subOpen
            }
        },
        isSmart: function (classId) {
            let style = false
            if (this.orgHiteachData != '') {
                let orgHiData = JSON.parse(this.orgHiteachData)
                let exist = orgHiData.some(item => {
                    let dbexist;
                    if (Array.isArray(item.deviceBound) && item.deviceBound.length > 0) {
                        dbexist = item.deviceBound.some(dbItem => {
                            return dbItem.classId == classId
                        })
                    }
                    return dbexist
                })
                style = exist
            }
            return style
        },
        pushCheckbox(item, disabled) {
            if (!disabled) {
                document.getElementById('checkbox-' + item.uuid + item.uuid2).click()
            }
        },
        whatUpdHiLink: function (item, classId, id) {
            if (item) {
                this.updated = true

                let arrayIndex = null
                this.updHiteachLink.forEach((updItem, updIndex) => {
                    // 利用相加字串來判斷
                    if (updItem.uuid + updItem.uuid2 == item.uuid + item.uuid2) {
                        arrayIndex = updIndex
                    }
                })

                if (arrayIndex != null) {
                    this.updHiteachLink.splice(arrayIndex, 1)
                }

                this.updHiteachLink.push(
                    {
                        id: id,
                        uuid: item.uuid,
                        uuid2: item.uuid2,
                        classId: item.hiteachLink ? classId : null,
                        deviceId: item.deviceId
                    }
                )
            }
        },
        unlinkHiteachByClassId: function (classId) {
            // 刪掉指定的classId
            let orgHiData = JSON.parse(this.orgHiteachData)
            orgHiData.forEach(item => {
                if (Array.isArray(item.deviceBound) && item.deviceBound.length > 0) {
                    item.deviceBound.forEach(db => {
                        if (db.classId == classId) {
                            db.classId = null
                            db.hiteachLink = false
                        }
                    })
                }
            })
            this.hiteachData = orgHiData
            this.orgHiteachData = JSON.stringify(orgHiData)
        },
        // 詢問視窗
        confirmLink: function (linkFlag, pid, uuid, uuid2, classId) {
            let action = linkFlag ? 'unLink' : 'link';
            if (action == 'unLink') {
                this.$Modal.confirm({
                    title: this.$t('schoolBaseInfo.deLink'),
                    content: `${this.$t('schoolBaseInfo.confirmDelink')}?`,
                    onOk: () => {
                        this.executeHiteachLink(action, pid, uuid, uuid2, classId)
                    }
                })
            } else {
                this.executeHiteachLink(action, pid, uuid, uuid2, classId)
            }
        },
        executeHiteachLink: function (action, pid, uuid, uuid2, classId) {
            // Hiteach 與教室綁定
            this.hiteachListLoading = true
            this.$api.schoolSetting.hiteachLink({
                school_code: this.$store.state.userInfo.schoolCode,
                // linkList: this.updHiteachLink
                action: action,
                pid: pid,
                uuid: uuid,
                uuid2: uuid2,
                classId: classId
            }).then(res => {
                if (res.error == 0) {
                    let orgHiData = JSON.parse(this.orgHiteachData)

                    let tempIndex;
                    let temp = orgHiData.find((hiItem, hiIndex) => {
                        tempIndex = hiIndex
                        return hiItem.id == pid
                    })
                    temp.deviceBound.forEach((dbItem, dbIndex, dbArray) => {
                        if ((dbItem.uuid + dbItem.uuid2) == (uuid + uuid2)) {
                            if (action == 'link') {
                                dbItem.classId = classId
                                dbItem.hiteachLink = true
                            } else if (action == 'unLink') {
                                dbItem.classId = null
                                dbItem.hiteachLink = false
                            }
                        }
                    })

                    orgHiData[tempIndex] = temp

                    // 新增加
                    this.hiteachData = orgHiData
                    this.orgHiteachData = JSON.stringify(orgHiData)
                } else if (res.error == 1) {
                    this.$Message.error(this.$t('無法關聯已被關聯的Hiteach'))
                }
            },
                err => {
                    this.$Message.error(this.$t('參數錯誤'))
                }).finally(() => {
                    this.hiteachListLoading = false
                })
        }
    },
    mounted() {
        this.filterClassname()
        this.initData()
        this.initHiteachData()
    },
    beforeRouteLeave(to, from, next) {
        if (this.updated) {
            let config = {
                title: this.$t('schoolBaseInfo.saveWarning'),
                content: this.$t('schoolBaseInfo.saveClassWarning'),
                okText: this.$t('schoolBaseInfo.leaveText'),
                onOk: () => {
                    next()
                },
                onCancel: () => {
                    next(false)
                }
            }
            this.$Modal.confirm(config)
        } else {
            next()
        }
    },
    created() {
        if (this.$access.can('admin.*|classroom-upd')) this.editStatus = this.noStatus
        this.getClassroom()
        this.$store.dispatch('teachers/getTeacherList').then(res => { })
    }
}
</script>
<style lang="less" scoped>
@import "./ClassroomSetting.less";
</style>
<style>
.class-mgt-container .ivu-table-row-hover .item-tools {
    display: inline-block;
    cursor: pointer;
}
.class-info-content
    .ivu-select-single
    .ivu-select-selection
    .ivu-select-placeholder,
.class-info-content
    .ivu-select-single
    .ivu-select-selection
    .ivu-select-selected-value {
    color: white;
}

.class-search-input .ivu-input {
    height: 30px;
    background: none;
    line-height: 30px;
    border: none;
    color: white;
    font-size: 15px;
}

.hiteach-code-wrap-header .ivu-input {
    width: 110px;
    color: white;
    font-size: 15px;

    background: none;
    color: white;
    border-color: #606060;
}

.class-attr-wrap .ivu-input {
    width: calc(100% - 10px);
    background: none;
    border: none;
    border-radius: 0px;
    font-size: 16px;
    color: white;
    margin-left: 2px;
    border-bottom: 1px solid #424242;
}

.class-attr-wrap .ivu-select {
    width: calc(100% - 10px);
    color: white;
}

.class-attr-wrap .ivu-select-selected-value {
    font-size: 16px !important;
}

.class-attr-wrap .ivu-select-selection {
    background: none;
    border-color: #424242;
}

.class-attr-wrap .ivu-divider {
    background-color: #424242;
}

.school-plan-wrap .ivu-upload {
    position: absolute;
    top: 2px;
    right: 4px;
    color: white;
    cursor: pointer;
}

.school-plan-wrap .ivu-btn {
    background: none;
    border: none;
    color: white;
    padding: 8px 35px 6px 20px;
    border-radius: 0px;
    font-size: 14px;
}

.school-plan-wrap .ivu-upload-list {
    display: none;
}
</style>
<style lang="less">
.gradient {
    @keyframes Itemfadein {
        0% {
            opacity: 0;
            transform: translate(-40px);
        }
        100% {
            opacity: 1;
            transform: translate(0px);
        }
    }
    animation: 0.5s Itemfadein;
}

.sort-dropdown {
    .title {
        color: white;
        font-size: 14px;
    }
    .ivu-select-dropdown {
        background-color: #2d2d2d;
        border-radius: 2px;
        border: 1px #464646 solid;
        .ivu-dropdown-menu {
            li {
                color: #ccc;
                font-size: 12px !important;
                &:hover {
                    color: #2d2d2d;
                }
            }
        }
    }
}
.requird-color {
    .ivu-form-item-label:before {
        color: #1cc0f3;
    }
}
.hiteach-collapse {
    .ivu-tag-border {
        background: transparent !important;
        margin-right: 10px;
        border-radius: 5px;
        letter-spacing: 1px;
    }
}
</style>