<template>
    <div class="apply-select-wrap dark-iview-select">
        <div class="apply-item">
            <span v-show="showLabel">{{$t('teachContent.applyPd')}}</span>
            <Select v-model="filterPeriod" multiple style="width:200px" @on-change="pdChange" :max-tag-count="2">
                <Option v-for="item in periods" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
        </div>
        <div class="apply-item">
            <span v-show="showLabel">{{$t('teachContent.applySub')}}</span>
            <Select v-model="filterSubject" multiple style="width:200px" @on-change="tagChange" :max-tag-count="2">
                <Option v-for="item in subjects" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
        </div>
        <div class="apply-item" style="margin-right:0px">
            <span v-show="showLabel">{{$t('teachContent.applyGrade')}}</span>
            <Select v-model="filterGrade" multiple style="width:200px" @on-change="tagChange" :max-tag-count="2">
                <Option v-for="(item,index) in grades" :value="index" :key="index">{{ item }}</Option>
            </Select>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    name: 'BasePdSelect',
    props: {
        pdId: {
            type: String,
            default: ''
        },
        showLabel: {
            type: Boolean,
            default: false
        },
        onlyPd: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            filterGrade: [],
            filterPeriod: [],
            filterSubject: [],
            schoolBase: {
                period: []
            }
        }
    },
    created() {
        this.$store.dispatch('user/getSchoolProfile').then(
            (res) => {
                if (res) {
                    this.schoolBase = res.school_base
                    if (this.periods && !this.pdId) {
                        this.filterPeriod = this.periods[0].id
                    } else {
                        this.filterPeriod = this.pdId
                    }
                }
            },
            (err) => {
                this.$Message.error('API error!')
            }
        )
    },
    methods: {
        pdChange(data) {
            //处理学段单选 （如果学段多选，学科和年级不知道对应的是哪个学段）
            if (data.length) {
                this.filterPeriod = [data[data.length - 1]]
            }else{
                this.filterPeriod = []
            }
            this.$emit('tag-change', {
                period: this.filterPeriod,
                grades: this.filterGrade,
                subjects: this.filterSubject
            })
        },
        tagChange() {
            this.$emit('tag-change', {
                period: this.filterPeriod,
                grades: this.filterGrade,
                subjects: this.filterSubject
            })
        }
    },
    computed: {
        ...mapGetters({
            periods: 'user/getPeriods', // 學制s
        }),
        subjects() {
            if (this.schoolBase.period && this.filterPeriod) {
                let pdData = this.schoolBase.period.find(item => {
                    return item.id == this.filterPeriod
                })
                if (pdData) {
                    return pdData.subjects
                } else {
                    return []
                }
            } else {
                return []
            }
        },
        grades() {
            if (this.schoolBase.period && this.filterPeriod) {
                let pdData = this.schoolBase.period.find(item => {
                    return item.id == this.filterPeriod
                })
                if (pdData) {
                    return pdData.grades
                } else {
                    return []
                }
            } else {
                return []
            }
        }
    },
    watch: {
        pdId: {
            handler() {
                this.filterPeriod = [this.pdId]
            },
            immediate: true
        }
    }
}
</script>
<style scope lang="less">
.apply-select-wrap {
    color: #a5a5a5;
}
.sort-dropdown {
    margin-right: 30px;
    .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;
                }
            }
        }
    }
}
.apply-item {
    margin-bottom: 6px;
    display: inline-block;
    margin-right: 15px;
}
</style>
<style lang="less">
.apply-item .ivu-tag {
    background: #1fb06d;
    border-color: #1fb06d;
}
.apply-item .ivu-tag-text,
.apply-item .ivu-tag .ivu-icon-ios-close {
    color: white;
}
</style>