<template>
    <a-card :bordered="false" :body-style="{ padding: '0px 0px 8px' }">
        <a-row>
            <a-col :span="12" style="text-align: left;">
                <a-divider type="vertical" style="width: 3px; background-color:#1890FF " />
                课次信息
            </a-col>
            <a-col :span="12" style="text-align: right;">
                <a-space :size="12">
                    <a-button icon="solution" type="primary" @click="handleCallRoll">点名</a-button>
                    <a-button icon="file-sync" @click="handleClassEdit">排课变更</a-button>
                    <a-button icon="user-delete" @click="handleDelete">删除</a-button>
                </a-space>
            </a-col>
        </a-row>
        <a-row style="margin-top:20px;">
            <a-col :span="5" style="text-align: left;">
                课程:&nbsp;&nbsp;{{this.educationData.courseId_dictText}}
            </a-col>
            <a-col :span="6" style="text-align: left;">
                老师:&nbsp;&nbsp;{{this.educationData.lecturerId_dictText}}
            </a-col>
            <a-col :span="5" style="text-align: left;">
                授课课时:&nbsp;&nbsp;{{this.educationData.period}}
            </a-col>
            <a-col :span="5" style="text-align: left;">
                上课主题:&nbsp;&nbsp;{{this.educationData.themeId_dictText}}
            </a-col>
            <a-col :span="3"></a-col>
        </a-row>
        <a-row>
            <a-col :span="24">
                <a-divider dashed />
            </a-col>
        </a-row>
        <a-row>
            <a-col :span="12" style="text-align: left;">
                <a-divider type="vertical" style="width: 3px; background-color:#1890FF " />
                上课学员
            </a-col>
        </a-row>
        <a-row>
            <a-col :span="24">
                <a-table
                    ref="table"
                    size="middle"
                    :scroll="{ y:200}"
                    :pagination="false" 
                    rowKey="id"
                    :columns="columns"
                    :dataSource="callRollData"
                    :loading="loading"
                    style="margin-top: 30px;"
                    >
                    <span slot="name" slot-scope="text, record">
                        <a href="javascript:;" @click="handleCustomer(record)">{{record.name}}({{record.nickname}})</a>
                    </span>
                    <span slot="course" slot-scope="text, record">
                       {{educationData.courseId_dictText}}
                    </span>
                    <span slot="remainingremaining" slot-scope="text, record">
                        <span v-if="educationData.type == '1'" >{{record.remainingremaining}}</span>
                        <span v-else>-</span>
                    </span>
                    <span slot="fcheck" slot-scope="text, record">
                        <span v-if="educationData.type == '1'" >{{record.fcheck}}</span>
                        <span v-else>-</span>
                    </span>
                    <span slot="status" slot-scope="text, record">
                        <span v-if="record.status == '3'" >是</span>
                        <span v-else>-</span>
                    </span>
                    <span slot="action" slot-scope="text, record">
                        <a href="javascript:;" @click="handleDelete(record)">移除学员</a>
                    </span>
                </a-table>
            </a-col>
        </a-row>
        <CustomerInfo  @info-event='infoReturn' :infoShow="infoShow" :dataPara="infoRow" activeKey = "tab2"></CustomerInfo>
        <CallRoll @child-event='callRollReturn' :para="dataPara" :childShow="callRollShow" :update="updateTag"></CallRoll>
        <AuditionClassEdit  @child-event='editReturn' :childShow="editShow" :para="dataPara"></AuditionClassEdit>
        <a-modal :visible="deleteVisible" title="确认信息" @ok="deleteOk"  @cancel="deleteCancel" :width="600">
         <span style="text-align: center;">是否将“{{delName}}”移出本节课？?</span>
        </a-modal> 
    </a-card>
</template>
<script>

import { getAction,postAction } from '@/api/manage'
import CustomerInfo from '../../modules/CustomerInfo.vue'
import store from '@/store'
import { Empty } from 'ant-design-vue';
import CallRoll from '../../education/modules/CallRoll.vue'
import AuditionClassEdit from '../../education/modules/AuditionClassEdit.vue'

export default {
    name: 'EducationDetailBasic',
    components: { CustomerInfo,CallRoll,AuditionClassEdit },
    data() {
        return {
            simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
            educationData: {},
            callRollData: [],
            infoShow: false,
            infoRow: {},
            callRollShow: false,
            editShow: false,
            deleteVisible: false,
            delPara: {},
            updateTag: true,
            delName: undefined,
            columns: [
                {
                    title:'姓名(昵称)',
                    align:"center",
                    dataIndex: 'name',
                    scopedSlots: { customRender: 'name' }
                },
                {
                    title:'联系方式',
                    align:"center",
                    dataIndex: 'contactPhone',
                },
                {
                    title:'课程',
                    align:"center",
                    dataIndex: 'type',
                    scopedSlots: { customRender: 'course' }
                },
                {
                    title:'当前剩余',
                    align:"center",
                    scopedSlots: { customRender: 'remainingremaining' }
                },
                {
                    title:'人脸签到',
                    align:"center",
                    dataIndex: 'late',
                    scopedSlots: { customRender: 'fcheck' }
                },
                {
                    title:'是否请假',
                    align:"center",
                    dataIndex: 'schoolDistrictId',
                    scopedSlots: { customRender: 'status' }
                },
                {
                    title:'操作',
                    align:"center",
                    dataIndex: 'sysOrgCode',
                    scopedSlots: { customRender: 'action' }
                },
            ],
            loading: false,
        }
    },
    props: ['dataPara'],
    created() { //没用watch 用的create 传入不同的key  key不同每次都会调用刷新 尤其应用在tabs上
        this.loadData();
    },
    methods: {
        loadData() {
            let para = {
                id: this.dataPara.id
            }
            getAction("/education/educationSchedule/queryById", para).then((res) => {
                this.educationData = res.result.records[0];
            });
            let paraCallRoll = {
                schedule_id: this.dataPara.id
            }
            getAction("/education/educationCallRoll/getCPsByScheduleId", paraCallRoll).then((res) => {
                this.callRollData = res;
            });
        },
        handleCustomer(record) {
            this.infoRow = {
                id: record.cpId,
                name: record.name,
                contactPhone:record.contactPhone,
                nickname: record.nickname
            }
            this.infoShow = true;
        },
        infoReturn() {
            this.loadData();
            this.infoShow = false;
        },
        callRollReturn() {
            this.loadData();
            this.callRollShow = false;
        },
        editReturn() {
            this.loadData();
            this.editShow = false;
        },
        deleteCancel() {
            this.deleteVisible = false
            this.delPara = {};
        },
        handleCallRoll(){
            this.callRollShow = true;
        },
        handleClassEdit() {
            this.editShow = true;
        },
        handleDelete(record) {
            this.delName = record.name;
            this.deleteVisible = true;
            this.delPara = {
                id: record.id,
                cp_id: record.cpId,
                createBy: store.getters.userInfo.id,
                courseId_dictText: this.educationData.courseId_dictText,
                schedule_id: this.educationData.id,
            }
        },
        deleteOk() {
            postAction("/education/educationSchedule/removeStudent", this.delPara).then((res) => {
                this.$message.success('移除成功');
                this.deleteVisible = false;
                this.delPara = {};
                this.loadData();
            });
        }
    }
}
</script>
  