<template>
    <div class="p-3">
        <div class="bg-fff flex1 ov-hd d-flex flex-cln">
            <div class="d-flex a-c pd-16 border-bottom">
                <div class="f-s-20 c-333 f-w-7 mr-10">{{ form.id ? '编辑' : '新增' }}会议</div>
                <el-button @click="router.go(-1)" type="primary" text>
                    <el-icon>
                        <Back />
                    </el-icon>
                    返回上一级
                </el-button>
            </div>
            <div class="flex1 over-auto">
                <el-form ref="formRef" label-width="auto" label-position="top" :model="form" :rules="rules">
                    <div class="pd-16 border-bottom ov-hd">
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-form-item label="会议名称" prop="trainingName">
                                    <el-input v-model="form.trainingName" maxlength="100" placeholder="请输入会议名称" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="培训时间" prop="trainingTime">
                                    <el-date-picker v-model="form.trainingTime" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" date-format="YYYY-MM-DD" time-format="HH:mm:ss" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="培训方式" prop="joinType">
                                    <!-- 单选框 -->
                                    <el-radio-group v-model="form.joinType">
                                        <el-radio v-for="item in dm_training_join_type" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col v-if="form.joinType === '0'" :span="6">
                                <el-form-item label="培训地点" prop="trainingLocation">
                                    <el-input v-model="form.trainingLocation" placeholder="请输入培训地点" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="是否颁发证书" prop="certFlag">
                                    <el-radio-group v-model="form.certFlag">
                                        <el-radio v-for="item in yes_no" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col v-if="+form?.certFlag" :span="6">
                                <el-form-item label="证书名称" prop="certificateInfo">
                                    <el-select v-model="form.certificateInfo" multiple placeholder="证书名称" clearable>
                                        <el-option v-for="item in lm_training_cert" :key="item.value" :label="item.label" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="培训详情" prop="description">
                                    <el-input v-model="form.description" :rows="4" type="textarea" maxlength="300" placeholder="请输入培训详情" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="封面图" prop="coverImg">
                                    <ImageUpload v-model="form.coverImg" :limit="1"></ImageUpload>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="会议图" prop="trainingImg">
                                    <ImageUpload v-model="form.trainingImg" :fileSize="40"></ImageUpload>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="相关文件" prop="attachments">
                                    <FileUpload v-model="form.attachments" format="array" :limit="20" :fileSize="100"></FileUpload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-form>
            </div>
            <div class="d-flex a-c j-c pd-16">
                <el-button @click="router.go(-1)">取消</el-button>
                <el-button @click="save" type="primary">提交</el-button>
            </div>
        </div>
    </div>
</template>

<script setup name="meeting-add" lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { debounce } from 'lodash';
import { useRouter } from 'vue-router';
import { trainingAdd, trainingDetail, trainingUpdate } from '@/api/training';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { dm_training_join_type, yes_no, lm_training_cert } = toRefs<any>(proxy?.useDict('dm_training_join_type', 'yes_no', 'lm_training_cert'));
const router = useRouter();
const route = useRoute();
const form = ref<any>({
    id: undefined
});
const rules = reactive({
    // 自动生成全部
    trainingName: [{ required: true, message: '请输入会议名称', trigger: 'blur' }],
    trainingTime: [{ required: true, message: '请选择培训时间', trigger: 'blur' }],
    joinType: [{ required: true, message: '请选择培训方式', trigger: 'change' }],
    trainingLocation: [{ required: true, message: '请输入培训地点', trigger: 'blur' }],
    certFlag: [{ required: true, message: '请选择是否颁发证书', trigger: 'change' }],
    certificateInfo: [{ required: true, message: '请选择证书名称', trigger: 'change' }],
    description: [{ required: true, message: '请输入培训详情', trigger: 'blur' }],
    coverImg: [{ required: true, message: '请上传封面图', trigger: 'change' }],
    trainingImg: [{ required: true, message: '请上传会议图', trigger: 'change' }],
});
const formRef = ref();

const save = debounce(async () => {
    await formRef.value.validate();
    console.log('form.value', form.value);
    const params = {
        ...form.value,
        trainingStart: form.value.trainingTime ? form.value.trainingTime[0] : undefined,
        trainingEnd: form.value.trainingTime ? form.value.trainingTime[1] : undefined,
    };
    const res = form.value.id ? await trainingUpdate(params) : await trainingAdd(params);
    if (res && res.code === 200) {
        router.go(-1);
    }
}, 500);
// 获取专家详情
const getMeetingDetail = async () => {
    if (route.query?.id) {
        const res = await trainingDetail(route.query?.id as string);
        if (!res || res.code !== 200) return;
        form.value = {
            ...res.data,
            trainingTime: res.data.trainingStart && res.data.trainingEnd ? [res.data.trainingStart, res.data.trainingEnd] : undefined,
        };
    }
};
onMounted(() => {
    getMeetingDetail();
});
</script>
