<template>
    <div class="pd-select-wrap">
        <Dropdown class="sort-dropdown" trigger="click" placement="bottom-start" @on-click="function(e){ filterPeriod = e }" @on-visible-change="dropdownStates" v-if="$store.state.user.schoolProfile.school_base">
            <span style="cursor: pointer;">
                {{$t('schoolBaseInfo.pdLabel')}}
                <b class="title">{{ filterPeriodName }}</b>
                <Icon type="ios-arrow-down" style="margin-left:8px;"></Icon>
            </span>
            <DropdownMenu slot="list" v-for="(item,index) in periods" :value="item.id" :key="index">
                <DropdownItem :name="item.id">{{ item.name }}</DropdownItem>
            </DropdownMenu>
        </Dropdown>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    name: 'BasePdSelect',
    props: {
    },
    data() {
        return {
            filterPeriod: '',
        }
    },
    created() {
        this.$store.dispatch('user/getSchoolProfile').then(
            (res) => {
                if (res) {
                    if (this.periods) this.filterPeriod = this.periods[0].id
                }
            },
            (err) => {
                this.$Message.error('API error!')
            }
        )
    },
    methods: {
        dropdownStates(flag) {
            // if (!flag) this.filterByPeriod()
        }
    },
    computed: {
        ...mapGetters({
            periods: 'user/getPeriods', // 學制s
        }),
        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
        },
    },
    watch: {
        filterPeriod() {
            this.$emit('pd-change', this.filterPeriod)
        }
    }
}
</script>
<style lang="less">
.pd-select-wrap{
    display: inline-block;
}
.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;
                }
            }
        }
    }
}
</style>
