<template>
    <CommonBox title="周历校历" class="school-calendar-style">
        <div class="select-top-style">
                <span :class="'select-item-style border-right-style' + (selectType === 1?' select-style':'')"
                      @click="typeChange(1)">周历</span>
            <span :class="'select-item-style' + (selectType === 2?' select-style':'')"
                  @click="typeChange(2)">校历</span>
        </div>
        <div class="school-calendar-content-style">
            <a-tabs :activeKey="paneKey">
                <a-tab-pane :key="1" tab="Tab 1">
                    <WeekCalendar/>
                </a-tab-pane>
                <a-tab-pane :key="2" tab="Tab 2">
                    <SchoolCalendar/>
                </a-tab-pane>
            </a-tabs>
        </div>
    </CommonBox>
</template>
<script>
    /*
     * 周历校历
     * */
    import CommonBox from '../../secondPages/commonBox.vue';
    import {Tabs} from 'ant-design-vue';
    import WeekCalendar from './calendar/weekCalendar.vue';
    import SchoolCalendar from './calendar/schoolCalendar.vue';
    export default{
        data(){
            return {
                selectType: 1,//1 周历 2 校历
                paneKey:1,
            }
        },
        mounted(){
            this.changeType();
        },
        methods: {
            changeType:function () {
                this.timing = setInterval(() => {
                    let paneKey = this.paneKey === 1?2:1;
                    this.typeChange(paneKey)
                }, 12000)
            },
            typeChange: function (type) {
                if (this.selectType !== type) {
                    this.selectType = type;
                    this.paneKey = type;
                }
            }
        },
        components: {
            CommonBox,
            ATabs: Tabs,
            ATabPane: Tabs.TabPane,
            WeekCalendar,
            SchoolCalendar
        }
    }
</script>
<style scoped lang="scss">
    @import "../../../assets/scss/style";
    .school-calendar-style {
        width: 100%;
        height: 400px !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        .select-top-style {
            width: 100%;
            height: 20px;
            text-align: right;
            /*position: absolute;*/
            /*right: 0;*/
            .select-item-style {
                color: #1379c8;
                padding: 0 10px;
                font-size: 16px;
                cursor: pointer;
            }
            .border-right-style {
                border-right: 1px solid #1379c8;
            }
            .select-style {
                color: $color-default-bright;
                cursor: default;
            }
        }
        .school-calendar-content-style{
            width: 100%;
            /*min-height: 350px;*/
            margin-top: 10px;
            /deep/ .ant-tabs-bar{
                display: none !important;
            }
        }
    }
</style>