<template>
  <div id="basicInfoEdit">
    <div class="boxWidth">
      <el-form
        label-position="right"
        label-width="120px"
        :model="listData"
        :rules="rules"
        ref="listData"
      >
        <el-form-item label="教育类型" prop="educationTypeId">
          <el-select
            v-model="listData.educationTypeId"
            placeholder="请选择教育类型"
            @change="changeEducationTypeId"
          >
            <el-option
              v-for="(item, index) in eduTypeOptions"
              :key="index"
              :label="item.educationName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务层次" prop="businessId">
          <el-select
            v-model="listData.businessId"
            placeholder="请选择业务层次"
            @change="changeBusinessId"
          >
            <el-option
              v-for="(item, index) in newCourTypeOptions"
              :key="index"
              :label="item.businessName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="院校" prop="schoolId" v-if="listData.businessId && avtives()">
          <el-select v-model="listData.schoolId" placeholder="请选择院校">
            <el-option
              v-for="(item, index) in newSchoolOption"
              :key="index"
              :label="item.schoolName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业" prop="majorId" v-if="listData.businessId && avtivesMajor()">
          <el-select v-model="listData.majorId" placeholder="请选择专业">
            <el-option
              v-for="(item, index) in newMajorOption"
              :key="index"
              :label="item.categoryName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="科目/类目"
          prop="subjectId"
          v-if="listData.businessId"
        >
          <el-select v-model="listData.subjectId" placeholder="请选择科目/类目">
            <el-option
              v-for="(item, index) in newSujectOption"
              :key="index"
              :label="item.subjectName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称前缀" prop="prefixName">
          <el-input v-model="listData.prefixName"></el-input>
        </el-form-item>
        <el-form-item label="课程名称" prop="courseName">
          <el-input v-model="listData.courseName"></el-input>
        </el-form-item>

        <el-form-item label="课程封面">
          <div class="imgBoxins">
            <img :src="$methodsTools.splitImgHost(listData.coverUrl)" alt="" />
            <div
              class="posimg"
              v-if="
                listData.coverUrl === null ||
                listData.coverUrl === '' ||
                listData.coverUrl === undefined
              "
            >
              <label for="uplose">
                <i class="el-icon-circle-plus-outline iconStsz"></i
              ></label>
              <input
                ref="file"
                type="file"
                style="display: none"
                id="uplose"
                @change="getImgFile"
              />
              <p>
                注：请上传小于300kb，尺寸为750*440的图片，支持gif、jpg、jpeg、png等类型
              </p>
            </div>
          </div>
          <el-button
            v-if="
              listData.coverUrl !== null &&
              listData.coverUrl !== '' &&
              listData.coverUrl !== undefined
            "
            type="danger"
            size="mini"
            class="margin-top: 20px;"
            @click="clearImgs"
            >删除</el-button
          >
        </el-form-item>
        <el-form-item label="是否发布" prop="publishStatus">
          <el-radio-group v-model="listData.publishStatus">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="课程简介">
          <el-input type="textarea" v-model="listData.introduction"></el-input>
        </el-form-item>
        <el-form-item label="适合对象">
          <el-input
            type="textarea"
            v-model="listData.suitableObject"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="courseStyle">
        课程详情<span style="color: #999; margin-left: 6px">支持图文</span>
      </div>
      <div style="text-align: center; margin-bottom: 10px">
        <el-button
          size="mini"
          :type="active === 1 ? 'success' : ''"
          @click="active = 1"
          >PC端</el-button
        >
        <el-button
          size="mini"
          :type="active === 2 ? 'success' : ''"
          @click="active = 2"
          >手机端</el-button
        >
      </div>
      <editor
        v-show="active === 1"
        v-model="listData.pcDetailHtml"
        :min-height="300"
        :max-height="500"
        :uploadStatus="uploadStatus"
      />
      <editor
        v-show="active === 2"
        v-model="listData.mobileDetailHtml"
        :min-height="300"
        :max-height="500"
        :uploadStatus="uploadStatus"
      />
      <div style="text-align: center; margin-top: 20px">
        <el-button @click="backPage" size="mini">取消</el-button>
        <el-button type="primary" @click="submit('listData')" size="mini"
          >确定</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import Editor from "@/components/Editor";

export default {
  components: { Editor },
  data() {
    return {
      uploadStatus: 2, //富文本组件传值
      active: 1,
      //   弹窗数据
      bfImg: "oss/images/avatar/20211013/1634097664410_1397766697",
      listData: {
        coverUrl: "oss/images/avatar/20211013/1634097664410_1397766697",
        educationTypeId: "",
        businessId: "",
        schoolId: "",
        majorId: "",
        subjectId: "",
      },

      eduTypeOptions: [], //教育类型数据
      courTypeOptions: [], //业务层次数据
      sujectOption: [], //科目数据
      schoolOption: [], //院校数据
      majorOption: [], //专业数据

      newCourTypeOptions: [], //当前业务层次数据
      newSujectOption: [], //当前科目数据数据
      newSchoolOption: [], //当前院校数据
      newMajorOption: [], //当前专业数据
      //表单验证
      rules: {
        educationTypeId: [
          {
            required: true,
            message: "请选择教育类型",
            trigger: ["blur", "change"],
          },
        ],
        businessId: [
          {
            required: true,
            message: "请选择业务层次",
            trigger: ["blur", "change"],
          },
        ],
        schoolId: [
          {
            required: true,
            message: "请选择院校",
            trigger: ["blur", "change"],
          },
        ],
        majorId: [
          {
            required: true,
            message: "请选择专业",
            trigger: ["blur", "change"],
          },
        ],
        subjectId: [
          {
            required: true,
            message: "请选择科目",
            trigger: ["blur", "change"],
          },
        ],
        prefixName: [
          { required: true, message: "请输入名称前缀", trigger: "blur" },
        ],
        courseName: [
          { required: true, message: "请输入课程名称", trigger: "blur" },
        ],
        publishStatus: [
          { required: true, message: "请选择是否发布", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    this.getDict();
  },
  methods: {
    avtives() {
      if (this.listData.educationTypeId) {
        for(let i = 0; i < this.eduTypeOptions.length; i++){
          if(this.eduTypeOptions[i].id === this.listData.educationTypeId){
            return this.eduTypeOptions[i].tireStatus.indexOf("3") != -1
          }
        }
      }
    },
    avtivesMajor() {
      if (this.listData.educationTypeId) {
        for(let i = 0; i < this.eduTypeOptions.length; i++){
          if(this.eduTypeOptions[i].id === this.listData.educationTypeId){
            return this.eduTypeOptions[i].tireStatus.indexOf("4") != -1
          }
        }
      }
    },
    search() {
      this.$api.obtainCourseS(this.$route.query.id).then((res) => {
        this.listData = res.data;
        this.changeBusiness();
      });
    },
    changeBusiness() {
      var arrays = [];
      this.courTypeOptions.map((item) => {
        if (item.educationId === this.listData.educationTypeId) {
          arrays.push(item);
        }
      });
      this.newCourTypeOptions = arrays;
      this.courTypeOptions.map((item) => {
        if (item.id === this.listData.businessId) {
          // var newSujectOption = [];
          var newSchoolOption = [];
          var newMajorOption = [];
          this.$api
            .inquireCourseSubjectlistAll({ projectId: item.projectId })
            .then((res) => {
              this.newSujectOption = res.rows
            });
          // this.sujectOption.map((items) => {
          //   if (items.courseArrays.indexOf(item.projectId) !== -1) {
          //     newSujectOption.push(items);
          //   }
          // });
          this.schoolOption.map((items) => {
            if (items.courseArrays.indexOf(item.projectId) !== -1) {
              newSchoolOption.push(items);
            }
          });
          this.majorOption.map((items) => {
            if (items.courseArrays.indexOf(item.projectId) !== -1) {
              newMajorOption.push(items);
            }
          });
          // this.newSujectOption = newSujectOption;
          this.newSchoolOption = newSchoolOption;
          this.newMajorOption = newMajorOption;
        }
      });
    },
    async getDict() {
      await this.EducationType();
      await this.ProjectType();
      await this.businessList();
      await this.CourseSubject();
      await this.UserSchool();
      await this.CourseMajor();
      this.search();
    },
    //改变教育类型
    changeEducationTypeId() {
      var arrays = [];
      this.courTypeOptions.map((item) => {
        if (item.educationId === this.listData.educationTypeId) {
          arrays.push(item);
        }
      });
      this.newCourTypeOptions = arrays;
      this.listData.businessId = "";
    },
    //改变业务层次触发
    changeBusinessId() {
      this.listData.schoolId = "";
      this.listData.majorId = "";
      this.listData.subjectId = "";
      this.courTypeOptions.map((item) => {
        if (item.id === this.listData.businessId) {
          this.listData.educationTypeId = item.educationId;
          var newSujectOption = [];
          var newSchoolOption = [];
          var newMajorOption = [];
          this.sujectOption.map((items) => {
            if (items.courseArrays.indexOf(item.projectId) !== -1) {
              newSujectOption.push(items);
            }
          });
          this.schoolOption.map((items) => {
            if (items.courseArrays.indexOf(item.projectId) !== -1) {
              newSchoolOption.push(items);
            }
          });
          this.majorOption.map((items) => {
            if (items.courseArrays.indexOf(item.projectId) !== -1) {
              newMajorOption.push(items);
            }
          });
          this.newSujectOption = newSujectOption;
          this.newSchoolOption = newSchoolOption;
          this.newMajorOption = newMajorOption;
        }
      });
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (
            this.listData.coverUrl === "" ||
            this.listData.coverUrl === null ||
            this.listData.coverUrl === undefined
          ) {
            this.$message.error("请上传节封面");
            return false;
          }
          this.rulesTableSumbit();
        } else {
          return false;
        }
      });
    },
    async rulesTableSumbit() {
      this.courTypeOptions.map((item) => {
        if (item.id === this.listData.businessId) {
          this.listData.projectId = item.projectId;
        }
      });
      this.listData.status = 1;
      this.$api.editCourse(this.listData).then((res) => {
        this.$message.success("修改成功");
        setTimeout(() => {
          this.$router.go(-1);
        }, 300);
      });
    },
    backPage() {
      this.$router.go(-1);
    },
    getImgFile() {
      var self = this;
      var file = self.$refs.file.files[0];
      if (file === undefined) {
        self.$set(self.listData, "coverUrl", "");
        return;
      }
      if (file.size > 2 * 1024 * 1024) {
        self.$message.error("图片不得大于2MB");
        return;
      }
      var type = self.$refs.file.value.toLowerCase().split(".").splice(-1);
      if (
        type[0] != "jpg" &&
        type[0] != "png" &&
        type[0] != "jpeg" &&
        type[0] != "gif"
      ) {
        self.$message.error("上传格式需为：.jpg/.png/.jpeg/gif");
        self.$refs.file.value = "";
        return;
      }
      this.$upload.upload(file, 0).then((res) => {
        self.listData.coverUrl = res;
      });
    },
    clearImgs() {
      this.listData.coverUrl = "";
    },
    EducationType() {
      return new Promise((resolve, reject) => {
        this.$api.inquireCourseEducationType({ status: 1 }).then((res) => {
          this.eduTypeOptions = res.rows;
          resolve();
        });
      });
    },
    ProjectType() {
      return new Promise((resolve, reject) => {
        this.$api.inquireCourseProjectType({ status: 1 }).then((res) => {
          this.projectTypeOptions = res.rows;
          resolve();
        });
      });
    },
    businessList() {
      return new Promise((resolve, reject) => {
        this.$api.inquirebusinessList({ status: 1 }).then((res) => {
          this.courTypeOptions = res.rows;
          this.newCourTypeOptions = res.rows;
          resolve();
        });
      });
    },
    CourseSubject() {
      return new Promise((resolve, reject) => {
        this.$api.inquireCourseSubject({ status: 1 }).then((res) => {
          res.rows.map((item, index) => {
            var array = [];
            item.courseProjectTypes.map((items, indexs) => {
              array.push(items.id);
            });
            item.courseArrays = array;
          });
          this.sujectOption = res.rows;
          resolve();
        });
      });
    },
    UserSchool() {
      return new Promise((resolve, reject) => {
        this.$api.inquireUserSchool({ status: 1 }).then((res) => {
          res.rows.map((item, index) => {
            var array = [];
            item.courseProjectTypes.map((items, indexs) => {
              array.push(items.id);
            });
            item.courseArrays = array;
          });
          this.schoolOption = res.rows;
          resolve();
        });
      });
    },
    CourseMajor() {
      return new Promise((resolve, reject) => {
        this.$api.inquireCourseMajor({ status: 1 }).then((res) => {
          res.rows.map((item, index) => {
            var array = [];
            item.courseProjectTypeVo.map((items, indexs) => {
              array.push(items.id);
            });
            item.courseArrays = array;
          });
          this.majorOption = res.rows;
          resolve();
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.courseStyle {
  margin: 20px;
  margin-bottom: 10px;
  font-size: 14px;
  border-bottom: 2px solid skyblue;
}
.boxWidth {
  width: 800px;
}
.numInputs {
  width: 150px;
}
.checkboxSty {
  max-height: 210px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.listBoxStys {
  flex-shrink: 0;
  padding: 0px 10px;
  border-radius: 8px;
  border: 1px solid #eee;
  margin-right: 10px;
  margin-bottom: 6px;
}
.closeIcons {
  color: red;
  cursor: pointer;
  margin-left: 6px;
}
.ach {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.clh {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.imgBoxins {
  width: 375px;
  height: 220px;
  text-align: center;
  img {
    height: 100%;
  }
}
.iconStsz {
  font-size: 40px;
  color: #67c23a;
  cursor: pointer;
}
.dis_plays {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.comInputsty {
  width: 50px;
  height: 24px;
  text-align: center;
  border: none;
}
</style>
