<template>
    <Drawer v-model="show"
            width="420"
            :transfer="false"
            @on-close="close"
            inner
            class-name="auth-box">
        <p slot="header" style="color:#DDDDDD;">
            {{$t('stuAccount.authTitle1')}}
            <Tooltip max-width="200" :content="$t('stuAccount.authDiscraption')">
                <Icon type="md-alert" />
            </Tooltip>
        </p>
        <vuescroll :ops="ops">
            <div class="auth-info">
                <div style="width:100%;display:flex;">
                    <div class="auth-info-count-item">
                        <CountTo class="auth-info-num" :endVal='total' :duration='600'></CountTo>
                        <span class="auth-info-label">总量</span>
                    </div>
                    <div class="auth-info-count-item">
                        <CountTo class="auth-info-num" :endVal='used' :duration='600'></CountTo>
                        <span class="auth-info-label">已用</span>
                    </div>
                    <div class="auth-info-count-item">
                        <CountTo class="auth-info-num" :endVal='surplus' :duration='600'></CountTo>
                        <span class="auth-info-label">可用</span>
                    </div>
                </div>
            </div>
            <div class="auth-rule dark-iview-select">
                <Tabs>
                    <TabPane label="授权总览">
                        <p class="auth-info-discreption">{{$t('stuAccount.authNum')}}</p>
                        <Collapse accordion v-model="activePanel">
                            <Panel :name="index + ''" v-for="(item,index) in authInfo" :key="index">
                                <div class="collapse-header-box">
                                    <span class="collapse-header-label">{{item.periodName}}使用数</span>
                                    <span class="collapse-header-num">{{item.count}}</span>
                                </div>
                                <div slot="content" class="auth-num-item">
                                    <ul>
                                        <li v-for="(gradeItem, gradeIndex) in item.grades" :key="gradeIndex">
                                            <span>{{gradeItem.gradeName}}使用数</span>
                                            <span>{{gradeItem.count}}</span>
                                        </li>
                                    </ul>
                                </div>       
                            </Panel>
                        </Collapse>
                    </TabPane>
                    <TabPane label="授权设置">
                        <div class="auth-rule-item">
                            <div class="auth-rule-label">
                                当前选择学生
                                <span class="student-count">{{selected.length}}</span>
                            </div>
                            <Button :type="selected.length > 0 ? 'primary' : 'default'" size="small" :disabled="selected.length == 0" @click="used = selected.length">确认授权</Button>
                        </div>
                        <div class="auth-rule-item">
                            <div class="auth-rule-label">
                                <span>套用至</span>
                                <Select size="small" clearable v-model="periodCode" style="width:140px" placeholder="请选择学制">
                                    <Option v-for="(item, index) in $store.state.schoolBaseInfo.schoolBaseInfo.period" :value="item.periodCode" :key="index">{{ item.periodName }}</Option>
                                </Select>
                                <span>所有学生</span>
                            </div>
                            <Button :type="periodCode ? 'primary' : 'default'" size="small" :disabled="!periodCode" @click="showAuth(1)">学段授权</Button>
                        </div>
                        <div class="auth-rule-item">
                            <div class="auth-rule-label">
                                <span>套用至</span>
                                <Select size="small" clearable v-model="gradeCode" style="width:140px" placeholder="请选择学级">
                                    <Option v-for="(item, index) in $jsFn.getPeriod($store.state.schoolBaseInfo.schoolBaseInfo,periodCode).grades" :value="item.gradeCode" :key="index">{{ item.gradeName }}</Option>
                                </Select>
                                <span>所有学生</span>
                            </div>
                            <Button :type="gradeCode ? 'primary' : 'default'" size="small" :disabled="!gradeCode"  @click="showAuth(2)">年级授权</Button>
                        </div>
                        <div class="auth-rule-item">
                            <div class="auth-rule-label">
                                <span>套用至</span>
                                <Select size="small" clearable v-model="classCode" style="width:140px" placeholder="请选择班级">
                                    <Option v-for="(item,index) in classList" :value="item.classroomCode" :key="index">{{ item.classroomName }}</Option>
                                </Select>
                                <span>所有学生</span>
                            </div>
                            <Button :type="classCode ? 'primary' : 'default'" size="small" :disabled="!classCode"  @click="showAuth(3)">班级授权</Button>
                        </div>
                        <div class="auth-rule-item">
                            <div class="auth-rule-label">套用至全校所有项目</div>
                            <Button type="primary" size="small" disabled  @click="showAuth(4)">全校授权</Button>
                        </div>
                        <div class="drawer-footer">
                            <!--<div class="my-btn" @click="confirm()">
                            收回所有授权
                        </div>-->
                            <div class="my-btn my-btn-active" @click="used = 0">
                                收回所有授权
                            </div>
                        </div>
                    </TabPane>
                </Tabs>
            </div>
        </vuescroll>
        <Modal v-model="authStatus"
               title="确认授权"
               @on-ok="ok">
            <p>
                确认对
                <span v-if="periodCode && authType > 0">{{ $jsFn.getPeriod($store.state.schoolBaseInfo.schoolBaseInfo,periodCode).periodName}}</span>
                <span v-if="gradeCode  && authType > 1">·{{ $jsFn.getGradeName($jsFn.getPeriod($store.state.schoolBaseInfo.schoolBaseInfo,periodCode), gradeCode)}}</span>
                <span v-if="classCode && authType > 2">·{{ className }}</span>
                所有学生批量授权？
            </p>
        </Modal>
    </Drawer>
</template>
<script>
    import CountTo from 'vue-count-to'
    export default {
        components: {
            CountTo
        },
        props: {
            isShow: {
                type: Boolean,
                default: false
            },
            schoolCode: {
                type: String,
                default: ''
            },
            selected: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                authType:0,
                authStatus: false,
                ops: {
                    bar: {
                        opacity:0
                    }
                },
                periodCode: undefined,
                gradeCode: undefined,
                classCode: undefined,
                total: 820,
                used: 0,
                activePanel: '1',
                list: []
            }
        },
        computed: {
            show: {
                get() {
                    return this.isShow
                },
                set(value) {
                }
            },
            classList() {
                console.log(this.$store.state)
                if (this.$store.state.schoolBaseInfo.classroomList) {
                    let arr = this.$store.state.schoolBaseInfo.classroomList.filter((item) => {
                        if (!this.periodCode) {
                            return item
                        } else if (this.periodCode && !this.gradeCode) {
                            return item.periodCode == this.periodCode
                        } else {
                            return (item.periodCode == this.periodCode && item.gradeCode == this.gradeCode)
                        }
                    })
                    console.log(this.periodCode)
                    console.log(arr)
                    return arr
                } else {
                    return []
                }
            },
            surplus() {
                return this.total - this.used
            },
            className() {
                let res = this.classList.filter((item) => {
                    return item.classroomCode == this.classCode
                })
                if (res.length > 0) {
                    return res[0].classroomName
                } else {
                    return ''
                }
            },
            authInfo() {
                let data = []
                for (let pItem of this.$store.state.schoolBaseInfo.schoolBaseInfo.period) {
                    let dataItem = {
                        periodCode: pItem.periodCode,
                        periodName: pItem.periodName,
                        count: 0,
                        grades: []
                    }
                    for (let gItem of pItem.grades) {
                        dataItem.grades.push(
                            {
                                gradeName: gItem.gradeName,
                                gradeCode: gItem.gradeCode,
                                count:0
                            }
                        )
                    }
                    data.push(dataItem)
                }
                console.log(data)
                console.log(this.$store.state.schoolBaseInfo.schoolBaseInfo.period)
                return data
            }
        },
        methods: {
            ok() {
                if (this.authType == 1) {
                    for (let index in this.authInfo) {
                        if (this.authInfo[index].periodCode == this.periodCode) {
                            if (this.authInfo[index].grades.length * 100 > this.surplus) {
                                this.$Message.warning('可用授权数量不足')
                            } else {
                                for (let gIndex in this.authInfo[index].grades) {
                                    this.authInfo[index].grades[gIndex].count = 100
                                }
                                this.authInfo[index].count = this.authInfo[index].grades.length * 100
                                this.used += this.authInfo[index].count
                            }
                            break
                        }
                    }
                } else if (this.authType == 2) {
                    for (let index in this.authInfo) {
                        for (let gIndex in this.authInfo[index].grades) {
                            if (this.authInfo[index].periodCode == this.periodCode && this.authInfo[index].grades[gIndex].gradeCode == this.gradeCode) {
                                if (102 > this.surplus) {
                                    this.$Message.warning('可用授权数量不足')
                                } else {
                                    this.authInfo[index].grades[gIndex].count = 102
                                    this.used += this.authInfo[index].grades[gIndex].count
                                    this.authInfo[index].count += 102
                                }
                                break
                            }
                            
                        }
                    }
                } else if (this.authType == 3) {
                    if (this.surplus < 50) {
                        this.$Message.warning('可用授权数量不足')
                    } else {
                        this.used += 50
                    }
                }
            },
            showAuth(type) {
                this.authType = type
                this.authStatus = true
            },
            close() {
                this.$emit('closeAuth', {
                    action: 0
                })
            },
            confirm() {
                this.$emit('closeAuth', {
                    action: 1
                })
            }
        },
        created() {
        },
        mounted() {

        }
    }
</script>
<style lang="less" scoped>
    @import './Authorization.less';
</style>
<style lang="less">
    .auth-box .ivu-tabs-nav .ivu-tabs-tab {
        color: white;
    }

    .auth-box .ivu-tabs-nav .ivu-tabs-tab-active {
        color: #2d8cf0;
    }

    .auth-box .ivu-drawer-content {
        border-left: 1px solid #383838;
        background-color: #404040;
    }

    .auth-box .ivu-drawer-header {
        border-color: #424242;
    }

    /*.auth-box .ivu-drawer-body {
        box-sizing: content-box;
    }*/

    .auth-rule .ivu-select-selection {
        border-color: #AAAAAA;
        margin: 0px 5px;
    }

    .auth-rule .ivu-input {
        border-color: #AAAAAA;
        text-align: center;
    }

    .auth-rule .ivu-collapse, .ivu-collapse-content {
        background: none;
        border: none;
    }

        .auth-rule .ivu-collapse > .ivu-collapse-item > .ivu-collapse-header {
            border: none;
            padding-left: 2px;
        }

        .auth-rule .ivu-collapse > .ivu-collapse-item {
            border: none;
        }

    .auth-rule .ivu-icon-ios-arrow-forward:before {
        content: "";
    }

    .auth-rule .ivu-collapse-item-active .collapse-header-label {
        border-left: 3px solid white;
    }

    .auth-rule .ivu-collapse > .ivu-collapse-item > .ivu-collapse-header > i {
        display: none;
    }

    .auth-rule .ivu-collapse-item-active .ivu-collapse-content-box {
        border-bottom: 1px solid #AAAAAA;
    }
    .auth-rule .ivu-collapse-content > .ivu-collapse-content-box {
        padding-top:0px;
    }
</style>