/* 集团权限 年级班级*/
<template>
    <div>
        <div class="fontBox" style="color:#409EFF">已认领</div>
        <!-- <div class="card">
            <div class="cardItem" v-for="(v,i) in schoolList" :key="i">
                <div>2021级01班</div>
                <div class="cardItem_grey" @click="switchSchool">取消认领</div>
            </div>
        </div> -->
        <div class="treeCard">
            <van-collapse v-model="claimNames" v-for="(v,i) in claimList" :key='i'>
                <van-collapse-item :title="v[0] + ' 级'" :name="i">
                    <div class="card">
                        <div class="cardItem" v-for="(item,index) in v[1]" :key="index">
                            <div class="cardItem_black">{{item.className}}</div>
                            <div class="cardItem_grey" @click="toClaim(item,2)">取消认领</div>
                        </div>
                    </div> 
                </van-collapse-item>
            </van-collapse>
        </div>
        <div class="fontBox" style="color:#F56C6C">未认领</div>
        <div class="treeCard">
            <van-collapse v-model="activeNames" v-for="(v,i) in treeList" :key='i'>
                <van-collapse-item :title="v[0]+ ' 级'" :name="i">
                     <div class="card">
                        <div class="cardItem" v-for="(item,index) in v[1]" :key="index">
                            <div class="cardItem_black">{{item.className}}</div>
                            <div class="cardItem_blue" @click="toClaim(item,1)">认领</div>
                        </div>
                    </div> 
                </van-collapse-item>
            </van-collapse>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            claimList: [],
            claimNames: ['1'],
            showSchool: false,
            //
            treeList: [],
            isShow: false,
            activeNames: ['1'],
        }
    },
    methods: {
        //认领
        toClaim(val,state) {
            let phone = JSON.parse(localStorage.getItem('userInfo')).phone
            let schoolName = this.$route.query.schoolNamequery ? this.$route.query.schoolNamequery : ''
            let classNames = val.className
            this.yxAxios.post(`${this.baseUrl}/prod/user/info/claimClass?loginMobile=${phone}&schoolName=${schoolName}&classNames=${classNames}&operateFlag=${state}`).then((res) => {
                if(res.data.code == 200) {
                    if(state == 1) {
                        this.$toast.success('认领成功！')
                    }else {
                        this.$toast.success('取消认领成功！')
                    }
                    this.getClass()
                }else {
                    this.$toast.fail(res.data?.message)
                }
            })
            
        },
        //获取年级
        getClass() {
            let phone = JSON.parse(localStorage.getItem('userInfo')).phone
            let schoolName = this.$route.query.schoolNamequery ? this.$route.query.schoolNamequery : ''
            this.yxAxios.post(`${this.baseUrl}/prod/user/info/getClassAuth?loginMobile=${phone}&schoolName=${schoolName}`).then((res) => {
                this.$toast.clear()
                if (res.data.code == 200) {
                    let claimList = res.data.data.claim ? res.data.data.claim : []
                    let treeList = res.data.data.unclaimed ? res.data.data.unclaimed : []
                    this.claimList = Object.entries(claimList)
                    this.treeList = Object.entries(treeList)
                    console.log( this.treeList )
                   
                    this.$emit('closeJT')
                } else {
                    this.$toast.fail(res.data?.message)
                }
            })
        }
    },
    mounted() {
        this.getClass()
    }
}
</script>

<style lang="scss" scoped>
.fontBox {
    width: 100vw;
    height: 8vw;
    display: flex;
    align-items: center;
    padding: 0 4vw;
    box-sizing: border-box;
    background-color: #F5F6FA;
    font-size: 3.9vw;
    font-weight: bold;
    color: #0F1826;
}
.card {
    padding: 0 5vw; 
    box-sizing: border-box;

    .cardItem {
        display: flex;
        justify-content: space-between;
        margin-bottom: 9vw;
        font-size: 3.8vw;

        .cardItem_blue {
            color:#4092FF
        }
        .cardItem_grey {
            color:#999999
        }
        .cardItem_black {
            color: #0F1826;
        }
    }

    .treeIem {
        margin-bottom: 9vw;
        font-size: 3.8vw;
    }
}
.treeCard {
    padding: 2vw 1vw 0; 
    box-sizing: border-box;
}
/deep/ .van-collapse-item__title{
    font-size: 3.8vw;
    height: 13vw;
}
/deep/ .van-cell__title {
    font-weight: bold;
}
</style>