<template>
    <a-modal :visible="infoShow" :footer="null"  @cancel="confirmCancel" width="75%" :dialogStyle = "dialogStyle">
        <span slot="title">
           课务详情&nbsp; <span style="color:#1890ff;">({{this.dataPara.curriculaDate + getWeek(this.dataPara.curriculaDate) +
            this.dataPara.curriculaTime}}&nbsp;&nbsp;&nbsp;{{this.dataPara.contactPhone}}--&nbsp;{{this.dataPara.courseId_dictText}}试听班)</span>
        </span>
        <a-tabs @change="handleChangeTab" :animated="false" :activeKey="educationActiveKey"
        :tab-bar-style="{marginTop: '-20px', paddingLeft: '0px'}">
            <a-tab-pane tab="课次详情" key="tab1">
                <EducationDetailBasic @editRefresh="editRefresh" @deleteRefresh="deleteRefresh" :key="timer1" :dataPara="dataPara"/>
            </a-tab-pane>
            <a-tab-pane tab="课堂展示" v-if="this.dataPara.status == '1'" key="tab2" >
                <EducationDetailShow :key="timer2" :dataPara="dataPara"/>
            </a-tab-pane>
            <a-tab-pane tab="课后作业" v-if="this.dataPara.status == '1'" key="tab3">
                <EducationDetailWork :key="timer3" :dataPara="dataPara"/>
            </a-tab-pane>
            <a-tab-pane tab="作业收交" v-if="this.dataPara.status == '1'" key="tab4">
                <EducationDetailResult :key="timer4" :dataPara="dataPara"/>
            </a-tab-pane>
            <a-tab-pane tab="操作日志" key="tab5">
                <EducationDetailLogs :key="timer5" :dataPara="dataPara"/>
            </a-tab-pane>
        </a-tabs>
    </a-modal>
</template>
<script>
import EducationDetailBasic from './EducationInfos/EducationDetailBasic.vue'
import EducationDetailLogs from './EducationInfos/EducationDetailLogs.vue'
import EducationDetailResult from './EducationInfos/EducationDetailResult.vue'
import EducationDetailShow from './EducationInfos/EducationDetailShow.vue'
import EducationDetailWork from './EducationInfos/EducationDetailWork.vue'

import { getAction } from '@/api/manage'
export default {
    components: {
        EducationDetailBasic,EducationDetailLogs,EducationDetailResult,EducationDetailShow,EducationDetailWork
    },
    name: 'EducationDetails',
    data() {
        return {
            educationActiveKey: undefined,
            timer1: undefined,
            timer2: undefined,
            timer3: undefined,
            timer4: undefined,
            timer5: undefined,
            dialogStyle: {
                top: "50px"
            }
        }
    },
    props: ['infoShow', 'dataPara', 'activeKey'],
    watch: {
        immediate: true,
        infoShow: {
            handler() {
                if(this.infoShow){
                    this.educationActiveKey = this.activeKey;
                    this.timer1 = new Date().getTime() + 1;
                }
            },
        }
    },
    methods: {
        handleChangeTab(key) {
            if (key === "tab1") {
                this.timer1 = new Date().getTime();
            }else if (key === "tab2") {
                this.timer2 = new Date().getTime();
            }else if (key === "tab3") {
                this.timer3 = new Date().getTime();
            }else if (key === "tab4") {
                this.timer4 = new Date().getTime();
            }else if(key === "tab5")  {
                this.timer5 = new Date().getTime();
            }
            this.educationActiveKey = String(key)
            
        },
        confirmCancel() {
            this.$emit('info-event', true);
        },
        confirmOk() {
        },
        editRefresh(name,phone) { //子组件不能覆盖父组件的值,父组件可以覆盖子组件，拆开写
            this.dataPara.name = name;
            this.dataPara.contactPhone = phone;
        },
        deleteRefresh() {
            this.$emit('info-event', true);
        },
        getWeek(text) {
            if (text !== undefined) {
                var dateArray = text.split("-");
                let date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
                return "【星期" + "日一二三四五六".charAt(date.getDay()) +"】" ;
            } else {
                return null;
            }
        },
    }
}
</script>
  