<template>
  <div class="form-wrapper">
    <div style="width: 100%; height: 100%">
      <el-form
        :model="contractTrainForm"
        :rules="rules"
        ref="contractTrainForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="培训名称" prop="courseName">
          <el-input v-model="contractTrainForm.courseName"></el-input>
        </el-form-item>
        <el-form-item label="培训内容" prop="courseConent">
          <el-input
            type="textarea"
            v-model="contractTrainForm.courseConent"
            rows="5"
          ></el-input>
        </el-form-item>
        <div class="flex">
          <el-form-item label="视频上传" v-if="!readOnly" prop="video">
            <FileUpload
              listType="picture"
              @resFun="getFileInfoVideo"
              @remove="listRemoveVideo"
              :fileArr="fileListVideo"
              :fileSize="500"
              :fileType="['mp4']"
            />
            <el-input
              v-show="false"
              disabled
              v-model="contractTrainForm.video"
            ></el-input>
          </el-form-item>
          <el-form-item label="附件上传" v-if="!readOnly" prop="enclosure">
            <FileUpload
              listType="picture"
              @resFun="getFileInfoFile"
              @remove="listRemoveFile"
              :fileArr="fileListFile"
            />
            <el-input
              v-show="false"
              disabled
              v-model="contractTrainForm.enclosure"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <visitorQuestion ref="visitorQuestion"></visitorQuestion>
  </div>
</template>
<script>
import FileUpload from "@/components/FileUpload";
import uploadfile from "@/assets/uploadfile.png";
import visitorQuestion from "@/views/educationPlanExam/visitorProgram/visitorQuestion";
import { listCourse } from "@/api/contractTrain/contractTrain";
export default {
  data() {
    return {
      contractTrainForm: {
        courseName: "",
        courseConent: "",
        video: "",
        enclosure: "",
      },
      fileListVideo: [],
      fileListFile: [],
      readOnly: false,
      rules: {
        name: [{ required: true, message: "请输入培训名称", trigger: "blur" }],
        region: [
          { required: true, message: "请输入培训内容", trigger: "change" },
        ],
        video: [{ required: true, trigger: "blue", message: "视频不能为空" }],
        enclosure: [
          { required: true, trigger: "blur", message: "附件不能为空" },
        ],
      },
    };
  },
  components: {
    FileUpload,
    visitorQuestion,
  },
  created() {
    this.getContractTrainList();
  },
  methods: {
    getContractTrainList() {
      listCourse().then((res) => {
        this.contractTrainForm = res.rows[0];
        console.log("this.contractTrainForm", this.contractTrainForm);
        if (this.contractTrainForm.video) {
          this.fileListVideo = [
            {
              name: this.contractTrainForm.courseName + "视频",
              url: uploadfile,
            },
          ];
        }
        if (this.contractTrainForm.enclosure) {
          this.fileListFile = [
            {
              name: this.contractTrainForm.courseName + "附件",
              url: uploadfile,
            },
          ];
        }
        // this.$refs.visitorQuestion.rightNum =
        //   this.contractTrainForm.qualifiedNum;

        this.$refs.visitorQuestion.bottomFrom = {
          judgmentScore: this.contractTrainForm.judgmentScore || 0,
          multipleChoiceScore: this.contractTrainForm.multipleChoiceScore || 0,
          qualifiedNum: this.contractTrainForm.qualifiedNum || 0,
          singleChoiceScore: this.contractTrainForm.singleChoiceScore || 0,
        };

        this.$refs.visitorQuestion.getContractTopicList(
          this.contractTrainForm.contractorCourseId
        );
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    getFileInfoVideo(res) {
      this.contractTrainForm.video = res.url;
      this.fileListVideo = [
        {
          name: res.fileName,
          url: uploadfile,
        },
      ];
    },
    listRemoveVideo(e) {
      this.fileListVideo = [];
      this.contractTrainForm.video = "";
      // this.form.videoName = null;
    },
    getFileInfoFile(res) {
      this.contractTrainForm.enclosure = res.url;
      this.fileListFile = [
        {
          name: res.fileName,
          url: uploadfile,
        },
      ];
    },
    listRemoveFile(e) {
      this.fileListFild = [];
      this.contractTrainForm.enclosure = "";
      // this.form.fileName = null;
    },
  },
};
</script>
<style lang="scss" scoped>
.form-wrapper {
  padding-top: 30px;
  width: 80%;
  height: 100%;
  margin-bottom: 20px;
}
.flex {
  width: 100%;
  justify-content: space-around;
  padding: 20px 30px;
}
</style>