<template>
  <layout-card>
    <el-form
      ref="formRef"
      :rules="rules"
      :model="data.form"
      label-width="120px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="课件名称" prop="COURSEWARENAME">
            <el-input v-model="data.form.COURSEWARENAME" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="培训板块" prop="trainingSection">
            <layout-training-section-cascader
              v-model="data.form.trainingSection"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="培训行业类型" prop="TRAINTYPE">
            <layout-learning-train-type
              v-model="data.form.TRAINTYPE"
              type="industry"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="岗位培训类型" prop="POSTTYPE">
            <layout-learning-train-type
              v-model="data.form.POSTTYPE"
              type="post"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="课件学时(分钟)" prop="CLASSHOUR">
            <el-input-number v-model="data.form.CLASSHOUR" :min="1" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="讲师名称" prop="SPEAKER">
            <el-input v-model="data.form.SPEAKER" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="课件文件" prop="file">
            <layout-upload
              v-model:file-list="data.form.file"
              accept=".pdf"
              :size="500"
              @preview="fnPreviewPdf"
            >
              <template #tip> 只能上传pdf文件 </template>
            </layout-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="课件截图" prop="screenshotFile">
            <layout-upload
              v-model:file-list="data.form.screenshotFile"
              accept=".jpg,.jpeg,.png"
              list-type="picture-card"
            >
              <template #tip> 建议上传尺寸224*160 </template>
            </layout-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="课件描述" prop="COURSEWAREINTRODUCE">
            <el-input
              v-model="data.form.COURSEWAREINTRODUCE"
              type="textarea"
              :autosize="{
                minRows: 3,
              }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="大纲类型" prop="ONTLINETYPE">
            <el-select v-model="data.form.ONTLINETYPE">
              <el-option
                v-for="item in outlineTypeList"
                :key="item.DICTIONARIES_ID"
                :label="item.NAME"
                :value="item.DICTIONARIES_ID"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="tc mt-10">
      <el-button type="primary" @click="fnSubmit">提交</el-button>
    </div>
    <layout-pdf
      :src="data.pdfDialog.src"
      v-model:visible="data.pdfDialog.visible"
    />
  </layout-card>
</template>

<script setup>
import { reactive, ref } from "vue";
import { debounce } from "throttle-debounce";
import { ElMessage } from "element-plus";
import useFormValidate from "@/assets/js/useFormValidate.js";
import LayoutTrainingSectionCascader from "@/components/training_section_cascader/index.vue";
import LayoutLearningTrainType from "@/components/learning_train_type/index.vue";
import LayoutUpload from "@/components/upload/index.vue";
import { layoutFnGetOutlineType } from "@/assets/js/data_dictionary.js";
import LayoutPdf from "@/components/pdf/index.vue";
import {
  getDataCoursewareView,
  setDataCoursewareAdd,
  setDataCoursewareEdit,
} from "@/request/online_learn_exam.js";
import { getFileName } from "@/assets/js/utils.js";
import { useRoute, useRouter } from "vue-router";
import { useUserStore } from "@/pinia/user.js";

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
const { DATACOURSEWARE_ID } = route.query;
const VITE_FILE_URL = import.meta.env.VITE_FILE_URL;
const rules = {
  COURSEWARENAME: [
    { required: true, message: "请输入课件名称", trigger: "blur" },
  ],
  CLASSHOUR: [{ required: true, message: "请输入课件学时", trigger: "blur" }],
  SPEAKER: [{ required: true, message: "请输入讲师名称", trigger: "blur" }],
  file: [{ required: true, message: "请上传课件文件", trigger: "change" }],
  screenshotFile: [
    { required: true, message: "请上传课件截图", trigger: "change" },
  ],
  COURSEWAREINTRODUCE: [
    { required: true, message: "请输入课件描述", trigger: "blur" },
  ],
  ONTLINETYPE: [
    { required: true, message: "请选择大纲类型", trigger: "change" },
  ],
};
const formRef = ref(null);
const data = reactive({
  form: {
    COURSEWARENAME: "",
    trainingSection: [],
    TRAINTYPE: "",
    POSTTYPE: "",
    CLASSHOUR: 1,
    SPEAKER: "",
    file: [],
    screenshotFile: [],
    COURSEWAREINTRODUCE: "",
    ONTLINETYPE: "",
  },
  pdfDialog: {
    src: "",
    visible: false,
  },
});
const fnGetData = async () => {
  if (!DATACOURSEWARE_ID)
    data.form.TRAINTYPE = userStore.getUserInfo.CORP_TRAINTYPE;
  else {
    const resData = await getDataCoursewareView({ DATACOURSEWARE_ID });
    data.form = resData.pd;
    data.form.screenshotFile = [
      {
        url: VITE_FILE_URL + resData.pd.COURSEWARECAPTURE,
        name: getFileName(resData.pd.COURSEWARECAPTURE),
      },
    ];
    data.form.file = [
      {
        url: VITE_FILE_URL + resData.pd.COURSEWAREFILES,
        name: getFileName(resData.pd.COURSEWAREFILES),
      },
    ];
    data.form.trainingSection = resData.coursewareAllList.map((item) =>
      item.DICTIONARIES_IDS.split(",")
    );
  }
};
fnGetData();
const outlineTypeList = await layoutFnGetOutlineType();
const fnPreviewPdf = async (event) => {
  data.pdfDialog.visible = true;
  data.pdfDialog.src = event.url;
};
const fnSubmit = debounce(
  1000,
  async () => {
    await useFormValidate(formRef);
    const formData = new FormData();
    Object.keys(data.form).forEach((key) => {
      formData.append(key, data.form[key]);
    });
    if (data.form.trainingSection.length > 0) {
      formData.delete("trainingSection");
      formData.append("trainingSection", data.form.trainingSection.join(";"));
    }
    formData.delete("file");
    formData.delete("screenshotFile");
    if (data.form.file[0].raw) formData.append("cfile", data.form.file[0].raw);
    if (data.form.screenshotFile[0].raw)
      formData.append("ccfile", data.form.screenshotFile[0].raw);
    formData.append("captureIsType", !!data.form.screenshotFile[0].raw);
    formData.append("fileIsType", !!data.form.file[0].raw);
    !DATACOURSEWARE_ID
      ? await setDataCoursewareAdd(formData)
      : await setDataCoursewareEdit(formData);
    ElMessage.success("提交成功");
    router.back();
  },
  { atBegin: true }
);
</script>

<style scoped lang="scss"></style>
