<template>
    <div class="accompanimentModal">
        <van-sticky :offset-top="isHead ? '.46rem' : 0">
            <van-dropdown-menu class="cateDropDown" active-color="#01C1B5">
                <van-dropdown-item v-model="levelId" :options="levelOptions" @change="levelChange" />
                <van-dropdown-item v-model="subjectId" :options="subjectOptions" @change="subjectChange" />
            </van-dropdown-menu>
            <van-search
                v-model="search"
                show-action
                placeholder="请输入搜索关键词"
                shape="round"
            >
                <template #action>
                    <div @click="onSearch">搜索</div>
                </template>
            </van-search>
        </van-sticky>

        <van-list
            v-model="loading"
            v-if="show"
            key="data"
            :finished="finished"
            finished-text="没有更多数据了"
            :immediate-check="false"
            @load="FetchList"
        >
            <van-cell-group>
                <van-cell
                    v-for="(item, index) in list"
                    :key="index"
                    class="input-cell"
                    clickable
                    @click="onSelect(item)"
                    :center="true"
                >
                    <template slot="icon">
                        <van-icon class="iconMusic" :name="MusicIcon" />
                        <div class='icon' v-if="item.rankIds">
                            <img src='./icons/vip_icon.png' />
                        </div>
                    </template>
                    <template slot="title">
                        <!-- {{ item.examSongName }} -->
                        <van-notice-bar
                            background="none"
                            :style="{ paddingLeft: (item.rankIds ? '.04rem' : '.15rem') + '!important' }"
                            color="#444"
                            :scrollable="false"
                            :text="item.examSongName"
                        />
                    </template>
                </van-cell>
            </van-cell-group>
        </van-list>
        <m-empty class="empty" v-else key="data" />
    </div>
</template>

<script>
import { getCourseStudents } from '@/api/teacher'
import MusicIcon from './icons/music.png'
export default {
    props: {
        isHead: {
            type: Boolean,
            default() {
                return false
            }
        },
        subjectList: {
            type: Array,
            default() {
                return []
            }
        }
    },
    data() {
        return {
            MusicIcon,
            levelId: 0,
            tempSubjectId: 0,
            levelOptions: [
                { text: '全部声部', value: 0 },
                { text: '会员学员', value: 0 },
                { text: '非会员学员', value: 0 },
            ],
            subjectOptions: [
                { text: '全部声部', value: 0 }
            ],
            typeId: 0,
            typeOptions: [],
            search: null,
            loading: false,
            finished: false,
            show: true,
            params: {
                page: 1,
                rows: 20,
            },
            list: [],
        }
    },
    async mounted() {
        
    },
    methods: {
        
        subjectChange(val) {
            this.tempSubjectId = val
            this.onSearch()
        },
        typeChange(val) {
            this.typeId = val
            this.onSearch()
        },
        onSearch() {
            this.params.page = 1
            this.list = []
            this.show = true
            this.finished = false
            this.FetchList()
        },
        onSelect(item) {
            this.$emit('onSelectMusic', item)
        }
    }
}
</script>

<style lang="less" scoped>
.accompanimentModal {
    background-color: #f5f5f5;
    min-height: 100vh;

    /deep/.van-search {
        .van-cell {
            font-size: 0.14rem;
            padding: 0.05rem 0.08rem;
            line-height: 0.24rem;
        }
        .van-dropdown-menu__bar {
            height: .36rem;
            background: transparent;
            box-shadow: none;
        }
    }

    .headDropDown {
        height: .36rem;
        background: transparent;
        /deep/.van-dropdown-menu__title {
            font-size: .14rem;
        }
    }
    /deep/.van-field__control {
        font-size: .14rem;
    }
    /deep/.van-dropdown-item .van-cell {
        padding: 0.12rem 0.16rem;
    }

    .iconMusic {
        /deep/.van-icon__image {
            width: .38rem;
            height: .38rem;
            margin: auto;
            vertical-align: middle;
            // padding-right: .1rem;
        }
    }

    .icon{
        display: flex;
        align-items: center;
        margin-left: .15rem;
        img{
            width: .4rem;
            // margin-top: -.02rem;
        }
    }

}
</style>