<template>
  <div class="page-container courseManagement-basicSettings">
    <div class="content-box scrollbar-box">
      <el-form class="add-form-box" :model="newData" ref="form" :rules="rules" label-width="120px">
        <div class="form-big-box">
          <div class="form-box">
            <div class="form-flex-box">
              <el-form-item label="课程分类" prop="disciplineTypeId">
                <el-select v-model="newData.disciplineTypeId" :disabled="showType" placeholder="请选择课程分类" style="width: 160px">
                  <el-option
                    v-for="dict in optionListA"
                    :key="dict.id"
                    :label="dict.disciplineName"
                    :value="dict.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="是否上架" prop="shelfStatus" label-width="200px">
                <el-switch
                  :disabled="showType"
                  :active-value="1"
                  :inactive-value="0"
                  v-model="newData.shelfStatus"
                  active-color="#0183FB"
                  inactive-color="#AAAAAA">
                </el-switch>
              </el-form-item>
              <el-form-item label="是否共享" prop="shareStatus" label-width="200px">
                <el-switch
                  :disabled="showType"
                  :active-value="1"
                  :inactive-value="0"
                  v-model="newData.shareStatus"
                  active-color="#0183FB"
                  inactive-color="#AAAAAA">
                </el-switch>
                <span style="margin-left:15px;">{{newData.shareStatus==1?'共享开启，全校所有学院单位都可见':'不共享，仅本学院单位及上级都可见'}}</span>
              </el-form-item>
            </div>
          </div>
          <div class="form-box">
            <el-form-item label="课程名称" prop="courseName">
              <el-input :disabled="showType" v-model="newData.courseName" placeholder="请输入课程名称" maxLength="20" style="width:960px;"></el-input>
            </el-form-item>
          </div>
          <div class="form-box">
            <el-form-item label="图形弹窗校验" prop="popupVerifyEnabled">
              <div class="switch-row">
                <el-switch :disabled="showType" v-model="newData.popupVerifyEnabled" :active-value="1" :inactive-value="0"
                           active-color="#0183FB" inactive-color="#AAAAAA"
                />
                <template v-if="newData.popupVerifyEnabled==1">
                  <p class="tip-text" style="margin-left:12px;">开启后，每隔</p>
                  <div class="number-stepper" style="margin-left:8px;">
                    <el-input-number
                      :disabled="showType"
                      class="form-input-number"
                      style="width:160px;"
                      :min="0"
                      :max="9999"
                      :step="1" :precision="0" step-strictly
                      v-model="newData.popupIntervalMinutes"
                    >
                    </el-input-number>
                  </div>
                  <span class="tip-text" style="margin-left:8px;">分钟，提醒弹窗验证</span>
                </template>
                <span class="tip-text" style="margin-left:12px;" v-else>开启后，每隔 N 分钟，提醒弹窗验证</span>
              </div>
            </el-form-item>
          </div>
          <div class="form-box">
            <div class="form-flex-box">
              <el-form-item label="课程封面" prop="coverAttachmentPath">
                <el-upload
                  :disabled="showType"
                  style="width:400px;"
                  drag
                  accept=".png, .jpg, .jpeg"
                  :action="uploadImgUrl"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :headers="headers"
                  :before-upload="beforeAvatarUpload">
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
                  <p style="line-height:25px;color:#333;">上传文件大小不超过10MB</p>
                  <p style="line-height:25px;color:#333;">支持jpg/jpeg/png格式图片</p>
                </el-upload>
              </el-form-item>
              <img class="img-box" v-if="newData.coverAttachmentPath" :src="newData.coverAttachmentPath">
            </div>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  //import { getDicts } from "@/api/commonality/noPermission";
  //import { systemUserSelect } from "@/api/commonality/permission";
  //import { getInfo } from "@/api/basicsModules/index";
  import { examElDisciplineTypeList, } from "@/api/safetyEducationExaminationNew/index";
  import { getToken } from "@/utils/auth";
  export default {
    name: 'basicSettings',
    props:{
      propsData:{},
    },
    data(){
      const validateData5 = (rule, value, callback) => {
        if (this.newData.popupVerifyEnabled == 1 && this.newData.popupIntervalMinutes == 0) {
          callback(new Error('图形弹窗校验间隔不能为0'))
        } else {
          callback()
        }
      }
      return{
        //上传相关
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization:getToken(),
        },
        optionListA:[],
        newData:{
          disciplineTypeId:null,
          shelfStatus:1,
          shareStatus:1,
          courseName:'',
          coverAttachmentPath:'',
          popupVerifyEnabled: 0,
          popupIntervalMinutes: 0,
        },
        rules:{
          // disciplineTypeId: [
          //   { required: true, message: "请选择课程分类", trigger: "blur" },
          //   { required: true, message: "请选择课程分类", validator: this.spaceJudgment, trigger: "blur" }
          // ],
          courseName: [
            { required: true, message: "请输入课程名称", trigger: "blur" },
            { required: true, message: "请输入课程名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          coverAttachmentPath: [
            { required: true, message: "请上传课程封面", trigger: "blur" },
            { required: true, message: "请上传课程封面", validator: this.spaceJudgment, trigger: "blur" }
          ],
          popupVerifyEnabled: [
            { required: true, message: '请输入图形弹窗校验间隔', trigger: 'change' },
            { validator: validateData5, trigger: 'blur' }
          ],
        },
        showType:false,
      }
    },
    created(){

    },
    mounted(){
      this.examElDisciplineTypeList();
    },
    methods:{
      //查看模式
      setShowType(){
        this.$set(this,'showType',true);
      },
      //写入详情
      setDataInfo(data){
        this.$set(this,'newData',data);
      },
      //图片上传相关
      handleAvatarSuccess(res) {
        this.$set(this.newData,'coverAttachmentPath',res.data.url);
        // this.$set(this.newData,'coverAttachmentPath','http://192.168.1.8/statics/2026/07/21/ecad2625-c47b-4e15-aef3-61ec486f23f6.jpg');
      },
      beforeAvatarUpload(file,status) {
        return new Promise((resolve, reject) => {
          if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/jpg') {
            if(file.size > 10500000){
              this.msgError('上传大小不能超过10M')
              reject();
            }else{
              resolve()
            }
          }else{
            this.msgError('只能上传jpg/jpeg/png');
            reject();
          }
        })
      },
      //查询全部专业类别
      examElDisciplineTypeList(){
        examElDisciplineTypeList({}).then(response => {
          this.$set(this,'optionListA',response.data);
        });
      },
      //提交检查
      submitButton(){
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.$parent.pageDataA();
          }
        })
      },
      checkTheData(){
        if(!this.newData.disciplineTypeId){
          this.msgError('请选择专业类别')
          return
        }
        if(!this.newData.courseName){
          this.msgError('请输入课程名称')
          return
        }
        if(!this.newData.coverAttachmentPath){
          this.msgError('请上传课程封面')
          return
        }
        this.$parent.pageDataA();
      },
    }
  }
</script>

<style scoped lang="scss">
  .courseManagement-basicSettings{
    flex:1;
    display: flex;
    flex-direction: column;
    padding:20px;
    overflow: hidden;
    .content-box{
      flex:1;
      display: flex;
      flex-direction: column;
      padding:20px;
      .form-big-box{
        padding:20px;
        .form-box{
          ::v-deep .el-upload-dragger{
            width:400px;
            height:240px;
          }
          .img-box{
            width:400px;
            height:240px;
            display: inline-block;
            margin-left:20px;
            border-radius:6px;
          }
          .switch-row {
            display: flex;
            /*align-items: center;*/
            /*flex-wrap: wrap;*/
            .el-switch {
              margin-top: 10px;
            }

            .tip-text {
              margin-top: 2px;
            }
          }
        }
        .form-flex-box{
          display: flex;
          .for-up-list-box{
            border:1px dashed #dedede;
            height:240px;
            width:540px;
            margin-left:20px;
            border-radius:6px;
            padding:20px;
            div{
              display: flex;
              p:nth-child(1){
                width: 40px;
                height: 40px;
                text-align: center;
                font-weight: 700;
                font-size: 30px;
                line-height: 40px;
                color: #70B603;
              }
              p:nth-child(2){
                flex:1;
                font-size:14px;
                height:40px;
                line-height:40px;
                margin-left:10px;
              }
              p:nth-child(3){
                width: 40px;
                height: 40px;
                text-align: center;
                font-weight: 700;
                font-size: 30px;
                line-height: 40px;
                cursor: pointer;
                color:#999;
              }
              p:nth-child(3):hover{
                color:#FF6666;
              }
            }
          }
        }
      }
    }
  }
</style>
