<template>
    <div class="p-3">
        <div class="bg-fff flex1 ov-hd d-flex flex-cln">
            <div class="d-flex a-c pd-16">
                <div class="info-title f-s-20 c-333 f-w-7">会议详情</div>
                <el-button @click="router.go(-1)" type="primary" text>
                    <el-icon>
                        <Back />
                    </el-icon>
                    返回上一级
                </el-button>
            </div>
            <div class="border-botttom pl-20">
                <div class="d-flex">
                    <template v-for="(item, index) in tabs" :key="index">
                        <div class="tabs-item" @click="() => { activeName = item.value }" :class="{ checked: activeName === item.value }">{{ item.label }}</div>
                    </template>
                </div>
            </div>
            <MeetingDetailAttend v-if="activeName === '1'" :form="form" />
            <MeetingDetailInfo v-if="activeName === '2'" :form="form" />
            <meetingSpecialList v-if="activeName === '3'" :form="form" />
        </div>
    </div>
</template>

<script setup name="meeting-detail" lang="ts">
import { trainingDetailById, trainingMembers } from '@/api/training';
import router from '@/router';
import { onMounted, ref } from 'vue';
import { MeetingDetailInfo,meetingSpecialList } from '../models';
import MeetingDetailAttend from '../models/meeting-detail-attend.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { lm_training_join_type, yes_no, dm_training_cert, lm_training_status, lm_training_signup_status_list } = toRefs<any>(proxy?.useDict('lm_training_join_type', 'yes_no', 'dm_training_cert', 'lm_training_status', 'lm_training_signup_status_list'));
// 获取详情
const tabs = ref([
    { label: '参会人员信息', value: '1' },
    { label: '会议信息', value: '2' },
    {label: '特殊清单', value: '3'}
])

const activeName = ref('1');
const form = ref<any>(null);
const query = useRoute().query;
const getDetail = async () => {
    const res = await trainingDetailById(query?.id as string);
    if (res.code === 200) {
        form.value = res.data;
    } else {
        ElMessage.error(res.msg);
    }
};
const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
    trainingId: query?.id || ''
});
const loading = ref(false);
const total = ref(0);
const list = ref<any>([]);
const getList = async () => {
    loading.value = true;
    const res = await trainingMembers(queryParams.value);
    if (!res || res.code !== 200) return;
    list.value = res.rows;
    total.value = res.total;
    loading.value = false;
};
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
};
const queryFormRef = ref<ElFormInstance>();
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};
onMounted(() => {
    getDetail();
    getList();
});
</script>
<style scoped lang="scss">
.tabs-item {
    margin-right: 20px;
    padding: 8px 20px;
    font-size: 14px;
    border-color: #d7d7d7;
    border-style: solid;
    border-width: 1px 1px 0 1px;
    cursor: pointer;
    user-select: none;

    &.checked {
        color: #fff;
        border-color: var(--el-color-primary);
        background-color: var(--el-color-primary);
    }
}

.border-botttom {
    border-bottom: 1px solid #d7d7d7;
}
</style>
