<template>
  <!-- 创建课程 -->
  <div class="createCourse">
    <el-card>
      <div style="padding: 0 75px;">
        <span class="title">双师一生</span>
        <span class="subTitle">我的课程 - 我创建的 - <span class="pointer" @click="goBack">网络直播</span> - <span
            style="color: #000;">创建课程</span></span>
      </div>
    </el-card>

    <el-card>
      <div style="color: #050026;font-size: 18px;font-weight: 400;">创建课程</div>
      <div class="formContent">
        <el-form :model="formline" ref="formline" :rules="rules" size="large" label-position="top"
          class="demo-ruleForm">
          <div class="must">
            <div class="label">课程封面图</div>
            <div class="uploadDiv">
              <div style="display: flex;">
                <el-upload class="mainUpload" action="" accept=".png, .jpg, .jpeg" :auto-upload="false"
                  list-type="picture-card" :on-change="handleMainChange" :file-list="fileList">
                  <el-icon v-if="fileList.length==0">
                    <Picture />
                  </el-icon>
                  <img v-else :src="fileList[0].url" alt="" style="width: 100%;height: 100%;" />
                </el-upload>
                <div style="font-size: 12px;margin-left: 20px;position: relative;">
                  <div style="color: #949494;">支持格式：jpg,png,jpeg（200kb以内） 建议尺寸600x320</div>
                  <div style="color: #F35421;position: absolute;bottom: 0;" v-if="fileList.length==0">{{mainTip}}</div>
                </div>
              </div>
            </div>
          </div>
          <el-form-item label="主讲账号" prop="kz_master_teacher">
            <el-input v-model="formline.kz_master_teacher" />
          </el-form-item>
          <el-form-item label="主讲老师" prop="kz_master_user_name">
            <el-input v-model="formline.kz_master_user_name" />
          </el-form-item>
          <el-form-item label="课程名称" prop="kz_title">
            <el-input v-model="formline.kz_title" />
          </el-form-item>
          <el-form-item label="课程简介" prop="kz_kcjj">
            <el-input v-model="formline.kz_kcjj" type="textarea" :rows="4" />
          </el-form-item>
          <el-form-item label="课时数" prop="kz_kss">
            <el-input v-model="formline.kz_kss" />
          </el-form-item>

          <div class="must" style="display: block;">
            <div class="label" style="margin-bottom: 12px;">类型（每个类型只能选一个）</div>
            <div class="showType">
              <div class="typeItem" style="background: #00a3ff;">{{formline.grade_name}}</div>
              <div class="typeItem" style="background: rgba(0,131,197,0.8);">{{formline.subject_name}}</div>
            </div>
          </div>
          <div class="type">
            <div class="flex">
              <div class="label">年级</div>
              <div class="valueDiv">
                <div class="item pointer" :class="formline.grade_id==item.grade_id?'active':''" @click="initGrade(item)"
                  v-for="item in gradeData" :key="item.grade_id">{{item.grade_name}}</div>
              </div>
            </div>
            <div class="flex">
              <div class="label">分类</div>
              <div class="valueDiv">
                <div class="item pointer" :class="formline.subject_id==item.subject_id?'active':''"
                  @click="initSubject(item)" v-for="item in subjectData" :key="item.subject_id">{{item.subject_name}}
                </div>
              </div>
            </div>
          </div>
          <div style="display: flex;">
            <el-form-item style="flex: 1;" label="开始时间" prop="kz_starttime">
              <el-date-picker v-model="formline.kz_starttime" :disabled-date="pickerStartTime" type="datetime"
                placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
            <el-form-item style="flex: 1;margin-left: 20px;" label="结束时间" prop="kz_endtime">
              <el-date-picker v-model="formline.kz_endtime" :disabled-date="pickerEndTime" type="datetime"
                placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
          </div>


          <div style="display: flex;">
            <el-form-item label="是否手机端推荐课程" prop="kz_recommend">
              <el-radio-group v-model="formline.kz_recommend">
                <el-radio label="1">推荐</el-radio>
                <el-radio label="0">不推荐</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否精品" prop="kz_best">
              <el-radio-group v-model="formline.kz_best">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <el-form-item label="是否需要审核" prop="is_shenhe">
            <el-radio-group v-model="formline.is_shenhe">
              <el-radio label="1">需要审核</el-radio>
              <el-radio label="0">不需要审核</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审核状态">
            <el-select v-model="formline.kz_shzt" placeholder=" " size="large">
              <el-option v-for="item in shztData" :key="item.v" :label="item.n" :value="item.v" />
            </el-select>
          </el-form-item>
          <el-form-item label="审核对象">
            <el-select v-model="formline.shdx" placeholder=" " size="large">
              <el-option v-for="item in shztData" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-checkbox class="read" v-model="isRead" label="已阅读并同意《课程上传协议》" size="large" />
          </el-form-item>
          <el-form-item>
            <div class="btnDiv">
              <el-button type="primary" @click="submitForm('formline')">提 交</el-button>
              <el-button>关 闭</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { grade_list, subject_list, wlzb_list, upload_file } from "./api";

import { Picture, FolderOpened } from "@element-plus/icons-vue";
export default {
  data() {
    return {
      formline: {
        kz_img: '',
        kz_master_teacher: '',
        kz_master_user_name: '',
        kz_title: '',
        kz_kcjj: '',
        kz_kss: '',
        grade_id: '',
        subject_id: '',
        kz_starttime: '',
        kz_endtime: '',
        kz_recommend: '',
        kz_best: '',
        is_shenhe: '',
        shenhe_user: '',
      },
      rules: {
        kz_master_teacher: [
          { required: true, message: '请输入主讲账号', trigger: 'blur' },
        ],
        kz_master_user_name: [
          { required: true, message: '请输入主讲老师', trigger: 'blur' },
        ],
        kz_title: [
          { required: true, message: '请输入课程名称', trigger: 'blur' },
        ],
        kz_kcjj: [
          { required: true, message: '请输入课程简介', trigger: 'blur' },
        ],
        kz_kss: [
          { required: true, message: '请输入课时数', trigger: 'blur' },
        ],
        kz_starttime: [
          { required: true, message: '请选择开始时间', trigger: 'change', type: 'date' },
        ],
        kz_endtime: [
          { required: true, message: '请选择结束时间', trigger: 'change', type: 'date' },
        ]
      },
      fileList: [],
      mainFileData: ["png", "jpg", "jpeg"],
      mainFileSize: 200,
      mainTip: "",
      attachList: [],
      attachFileData: ["ppt", "pptx", "pdf", "mp4"],
      attachFileSize: 500,
      attachTip: "",
      gradeData: ["一年级", "二年级", "三年级", "四年级", "五年级", "六年级", "初一", "初二", "初三", "高一", "高二", "高三"],
      subjectData: ["美术", "音乐", "舞蹈"],
      sfsjdtjkcData: [],
      sfjpData: [],
      sfxyshData: [],
      shztData: [],
      isRead: false,
      pickerStartTime: (time) => {
        let beginDateVal = this.formline.kz_endtime;
        if (beginDateVal) {
          return time.getTime() > new Date(beginDateVal).getTime();
        }
      },
      pickerEndTime: (time) => {
        let beginDateVal = this.formline.kz_starttime;
        if (beginDateVal) {
          return time.getTime() < new Date(beginDateVal).getTime();
        }
      },
    }
  },
  components: { Picture, FolderOpened, ElConfigProvider },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    initValue() {
      for (let key in this.formline) {
        this.formline[key] = "";
      }

      this.formline.kz_sfsjdtjkc = "1";
      this.formline.kz_sfjp = "1";
      this.formline.kz_sfxysh = "1";
      if (this.gradeData[0]) {
        this.formline.grade_name = this.gradeData[0].grade_name;
        this.formline.grade_id = this.gradeData[0].grade_id;
      }
      if (this.subjectData[0]) {
        this.formline.subject_name = this.subjectData[0].subject_name;
        this.formline.subject_id = this.subjectData[0].subject_id;
      }
    },
    // 获取下拉数据
    initSelectData() {
      wlzb_list().then((res) => {
        if (res.code == 1) {
          // 是否手机端推荐课程
          this.sfsjdtjkcData = res.data.table_structure.field.kz_sfsjdtjkc.option;
          // 是否精品
          this.sfjpData = res.data.table_structure.field.kz_sfjp.option;
          // 是否需要审核
          this.sfxyshData = res.data.table_structure.field.kz_sfxysh.option;
          // 审核对象
          this.shztData = res.data.table_structure.field.kz_shzt.option;
        }
      });
    },
    // 年级
    initGradeData() {
      this.gradeData = [];
      grade_list().then((res) => {
        if (res.code == 1) {
          this.gradeData = res.data.page_data;

          if (this.gradeData[0]) {
            this.formline.grade_name = this.gradeData[0].grade_name;
            this.formline.grade_id = this.gradeData[0].grade_id;
          }
        }
      });
    },
    // 分类
    initSubjectData() {
      this.subjectData = [];
      subject_list().then((res) => {
        if (res.code == 1) {
          this.subjectData = res.data.page_data;

          if (this.subjectData[0]) {
            this.formline.subject_name = this.subjectData[0].subject_name;
            this.formline.subject_id = this.subjectData[0].subject_id;
          }
        }
      });
    },
    initGrade(value) {
      this.formline.grade_name = value.grade_name;
      this.formline.grade_id = value.grade_id;
    },
    initSubject(value) {
      this.formline.subject_name = value.subject_name;
      this.formline.subject_id = value.subject_id;
    },
    // 封面图
    handleMainChange(file) {
      let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isJPG = this.mainFileData.includes(fileType);
      const sizeLimit = file.size / 1024 < this.mainFileSize;
      if (!isJPG) {
        this.mainTip = "上传文件只能是jpg,png,jpeg格式";
      }
      if (!sizeLimit) {
        this.mainTip = "上传文件不能超过200KB";
      }
      if (isJPG && sizeLimit) {
        this.fileList = [file];
      } else {
        this.fileList = [];
      }

      if (this.fileList.length == 0) {
        return false;
      }

      upload_file(file.raw).then(res => {
        if (res.code == 1) {
          this.formline.kz_img = res.data.url;
        } else {
          this.mainTip = "上传失败";
        }
      })
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid && this.formline.kz_img != "" && this.formline.kz_kj == "") {
          // alert('submit!');
          console.log(this.formline)
        } else {
          if (this.formline.kz_img == "") {
            this.mainTip = "请上传课程封面图";
          }
          if (this.formline.kz_kj == "") {
            this.attachTip = "请上传源文件";
          }
        }
      });
    }
  },
  created() {
    this.initValue();
    this.initSelectData();
    this.initGradeData();
    this.initSubjectData();
  }
}
</script>

<style lang="scss" scoped>
.createCourse {
  .el-card {
    margin-bottom: 15px;
    background: #fff;
  }

  .pointer {
    cursor: pointer;
  }

  .title {
    font-size: 18px;
    color: #050026;
  }

  .subTitle {
    font-size: 14px;
    color: #949494;
    margin-left: 45px;
  }

  .formContent {
    width: 575px;
    margin: auto;

    .must {
      display: flex;
      align-items: center;
      margin-bottom: 22px;

      .label {
        color: #949494;
        font-size: 14px;
        margin-right: 15px;

        &::after {
          content: "*";
          color: #f35421;
          margin-left: 4px;
        }
      }

      .uploadDiv {
        flex: 1;

        .el-upload--picture-card {
          width: 180px;
          height: 96px;
        }
      }
    }

    .showType {
      width: 100%;
      height: 40px;
      background: #f9f9f9;
      border-radius: 6px;
      display: flex;
      align-items: center;
      padding: 0 20px;

      .typeItem {
        color: #fff;
        font-size: 13px;
        padding: 3px 8px;
        border-radius: 6px;
        margin-right: 20px;
        line-height: 22px;
      }
    }

    .type {
      padding: 0 20px;
      margin-bottom: 10px;

      .flex {
        display: flex;
        align-items: baseline;

        .label {
          font-size: 13px;
          color: #333;

          &::after {
            content: "*";
            color: #f35421;
            margin-left: 4px;
          }
        }

        .valueDiv {
          margin-left: 15px;
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          color: #949494;
          padding-bottom: 15px;
          font-weight: 400;
          font-size: 14px;

          .item {
            padding: 3px 5px;
            margin-right: 20px;
            margin-bottom: 5px;

            &.active {
              color: #00a3ff;
              border-radius: 6px;
              background: rgba($color: #00a3ff, $alpha: 0.1);
            }
          }
        }
      }
    }

    .btnDiv {
      text-align: center;
      width: 100%;

      .el-button {
        background: #f4f4f4;
        border: none;
        width: 160px;
        height: 50px;
        color: #41387f;
        font-family: PingFangSC, PingFangSC-Semibold;
      }

      .el-button--primary {
        background: #00a3ff;
        margin-right: 80px;
        color: #fff;
      }
    }
  }
}
</style>


