<template>
  <!-- 创建 -->
  <div class="createCourse">
    <el-card>
      <div style="color: #050026; font-size: 18px; font-weight: 400">
        创建组
      </div>
      <div class="formContent">
        <el-form v-if="!loading" :model="formline" ref="formline" :rules="rules" size="large" label-position="top" class="demo-ruleForm">
          <el-form-item label="教研名称" prop="ug_name">
            <el-input placeholder="请输入教研名称，限30个字" maxlength="30" v-model="formline.ug_name" />
          </el-form-item>
          <el-form-item label="教研简介" prop="zt_content">
            <el-input type="textarea" rows="5" placeholder="该文字显示课程简介" v-model="formline.ug_brief" />
          </el-form-item>
          <div class="type flex">
            <el-form-item label="年级" prop="grade_id">
              <remote-multi-select v-model="formline.grade_id" v-model:model-name="formline.grade_name" to="grade"></remote-multi-select>
              <!--<el-select v-model="activeGrade" placeholder=" " size="large" @change="initGrade" value-key="grade_id">
                <el-option v-for="item in gradeData" :key="item.grade_id" :label="item.grade_name" :value="item" />
              </el-select>-->
            </el-form-item>
            <el-form-item label="学科" prop="subject_id">
              <remote-multi-select v-model="formline.subject_id" v-model:model-name="formline.subject_name" to="subject"></remote-multi-select>
              <!--<el-select v-model="activeSubject" placeholder=" " size="large" @change="initSubject" value-key="subject_id">
                <el-option v-for="item in subjectData" :key="item.subject_id" :label="item.subject_name" :value="item" />
              </el-select>-->
            </el-form-item>
          </div>
          <el-form-item label="参与教研教师" style="margin-top: 15px">
            <div class="checkedjs">
              <div v-for="(js,index) in isCheckedTeacher" :key="index" class="checkedEach">
                <span>{{ js.user_realname }}</span>
                <img style="cursor: pointer" @click="deleteJs(js)" src="../../../../assets/img/del.png" alt="" />
              </div>
            </div>
            <div class="check">
              <div class="checkTop">
                <div class="searchValue">
                  <el-select v-model="activeSchool" size="large" placeholder="学校">
                    <el-option label="全部" value="" />
                    <el-option v-for="item in schoolData" :key="item.id" :label="item.sm_name" :value="item.id" />
                  </el-select>

                  <el-select v-model="activeGrade1" size="large" placeholder="年级">
                    <el-option label="全部" value="" />
                    <el-option v-for="item in gradeData" :key="item.grade_id" :label="item.grade_name" :value="item.grade_id" />
                  </el-select>
                  <el-select v-model="activeClass" size="large" placeholder="班级">
                    <el-option label="全部" value="" />
                    <el-option v-for="item in classData" :key="item.class_id" :label="item.class_name" :value="item.class_id" />
                  </el-select>
                  <div class="searchBtn" @click="getTeacher">
                    <img src="/kczy/searchIcon.png" alt="" />
                  </div>
                </div>

                <div class="pages flex">
                  <div @click="previousPage" class="previous">
                    <el-icon>
                      <Back />
                    </el-icon>
                  </div>
                  <div @click="nextPage" class="next">
                    <el-icon>
                      <Right />
                    </el-icon>
                  </div>
                </div>
              </div>
              <div class="goupeTeacher flex">
                <el-checkbox-group v-if="cyjylsTeacher?.length > 0" v-model="checkList">
                  <el-checkbox @change="isCheckJs($event, t)" v-for="t in cyjylsTeacher" :label="t.user_id" :key="t.user_id">{{ t.user_realname }}</el-checkbox>
                </el-checkbox-group>
                <div v-else>暂无数据</div>
              </div>
            </div>
            <div style="
                color: #f35421;
                position: absolute;
                bottom: -30px;
                font-size: 12px;
              " v-if="fileList?.length == 0">
              {{ checkTip }}
            </div>
          </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 @click="closeCreate()">关 闭</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

  <script>
import {
  user_list,
  wcydz_add,
  grade_list,
  subject_list,
  school_list,
  class_list,
} from "./api";

import { Picture, FolderOpened } from "@element-plus/icons-vue";
import { ElConfigProvider } from "element-plus";
import zhcn from "element-plus/dist/locale/zh-cn.mjs";
export default {
  data() {
    return {
      local: zhcn,
      https: window.GLOBAL_CONFIG.api,
      gradeData: [],
      subjectData: [],
      schoolData: [],
      classData: [],
      wholeData: {},
      formline: {
        ug_name: "",
        ug_brief: "",
        teacher_data_json: "",
        grade_id: "",
        grade_name: "",
        subject_id: "",
        subject_name: "",
      },
      activeGrade: {},
      activeGrade1: "",
      activeSubject: {},
      activeSchool: "",
      activeClass: "",
      rules: {
        grade_id: [
          {
            required: true,
            message: "请选择年级",
            trigger: "submit",
          },
        ],
        subject_id: [
          {
            required: true,
            message: "请选择学科",
            trigger: "submit",
          },
        ],
        ug_name: [
          { required: true, message: "请输入教研名称", trigger: "blur" },
        ],
        ug_brief: [
          { required: true, message: "请输入教研简介", trigger: "blur" },
        ],
      },
      fileList: [],

      cyjylsTeacher: [],
      isCheckedTeacher: [],
      teacherPage: 1,
      checkList: [],
      ug_cyjyls: [],
      teacher_data_json: "",
      checkTip: "",
      pageData: 1,
      searchKey: "",
      isRead: false,
      loading: true,
      subject_id: "",
      grade_id: "",
      grade: {},
      subject: {},
    };
  },
  components: { Picture, FolderOpened, ElConfigProvider },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    // 用户列表
    getTeacher() {
      let data = {
        page: this.pageData,
        limit: "20",
        user_name: "",
        user_role_id: "75",
        grade_id: this.activeGrade1,
        sm_id: this.activeSchool,
        cm_id: this.activeClass,
      };
      user_list(data).then((res) => {
        this.cyjylsTeacher = res.data.page_data;
        this.teacherPage = res.data.total_page;
        this.gradeData.map((item) => {
          if (item.grade_id == this.formline.grade_id) {
            this.activeGrade = item;
          }
        });

        this.subjectData.map((item) => {
          if (item.subject_id == this.formline.subject_id) {
            this.activeSubject = item;
          }
        });
      });
    },
    // 年级
    initGradeData() {
      this.gradeData = [];
      grade_list().then((res) => {
        if (res.code == 1) {
          this.gradeData = res.data.page_data;
        }
      });
    }, // 科目
    initSubjectData() {
      this.subjectData = [];
      subject_list().then((res) => {
        if (res.code == 1) {
          this.subjectData = res.data.page_data;
        }
      });
    },
    //学校
    initSchoolData() {
      this.schoolData = [];
      school_list().then((res) => {
        if (res.code == 1) {
          this.schoolData = res.data.page_data;
          console.log(this.schoolData, 456);
        }
      });
    },
    // 班级
    initClassData() {
      this.classData = [];
      class_list().then((res) => {
        if (res.code == 1) {
          this.classData = res.data.page_data;
          console.log(this.classData, 123);
        }
      });
    },
    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;
    },
    // 选中教师
    isCheckJs(e, t) {
      if (e) {
        this.isCheckedTeacher.push(t);
      } else {
        let index = this.isCheckedTeacher.findIndex(
          (item) => item.user_id == t.user_id
        );
        this.isCheckedTeacher.splice(index, 1);
      }
      this.ug_cyjyls = [];
      this.isCheckedTeacher.forEach((item) => {
        this.ug_cyjyls.push({
          user_id: item.user_id,
          user_name: item.user_name,
          user_avatar: item.user_avatar,
        });
      });
      this.teacher_data_json = JSON.stringify(this.ug_cyjyls);
    },
    // 删除教师
    deleteJs(js) {
      let index = this.isCheckedTeacher.findIndex(
        (item) => item.user_id == js.user_id
      );
      this.isCheckedTeacher.splice(index, 1);
      this.checkList.splice(index, 1);
    },
    // 上一页
    previousPage() {
      if (this.pageData == 1) {
        this.pageData = 1;
      } else {
        this.pageData--;
      }

      let data = {
        page: this.pageData,
        limit: "20",
        user_name: "",
        user_role_id: "75",
        grade_id: this.activeGrade1,
        sm_id: this.activeSchool,
        cm_id: this.activeClass,
      };
      user_list(data).then((res) => {
        this.cyjylsTeacher = res.data.page_data;
        this.teacherPage = res.data.total_page;

      });

    },
    // 下一页
    nextPage() {
      if (this.pageData == this.teacherPage) {
        this.pageData = this.teacherPage;
      } else {
        this.pageData++;
      }
      let data = {
        page: this.pageData,
        limit: "20",
        user_name: "",
        user_role_id: "75",
        grade_id: this.activeGrade1,
        sm_id: this.activeSchool,
        cm_id: this.activeClass,
      };
      user_list(data).then((res) => {
        this.cyjylsTeacher = res.data.page_data;
        this.teacherPage = res.data.total_page;

      });

    },
    // 初始化
    initValue() {
      // 新建
      for (let key in this.formline) {
        this.formline[key] = "";
      }
      this.loading = false;
    },

    // 提交
    submitForm(formName) {
      console.log(this.formline);
      if (!this.isRead) {
        this.$message({
          message: "请勾选教研组协议书",
          type: "error",
        });
        return;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.isCheckedTeacher.length == 0) {
            this.checkTip = "请选择教师";
            return;
          }
          let data = {
            ug_name: this.formline.ug_name,
            ug_brief: this.formline.ug_brief,
            teacher_data_json: this.teacher_data_json,
            grade_id: this.formline.grade_id,
            subject_id: this.formline.subject_id,
            grade_name: this.formline.grade_name,
            subject_name: this.formline.subject_name,
          };
          console.log("data", data);

          wcydz_add(data).then((res) => {
            if (res.code == 1) {
              this.$message({
                message: "添加成功！",
                type: "success",
              });
              this.$router.push("/personal/participate");
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          });
        }
      });
    },
    // 关闭
    closeCreate() {
      let id = this.$route.query.id;
      if (id === undefined) {
        for (let key in this.formline) {
          this.formline[key] = "";
        }
      }
      this.$router.push("/personal/participate");
    },
  },
  created() {
    this.initValue();
    this.getTeacher();
    this.initGradeData();

    this.initSubjectData();
    this.initSchoolData();
    this.initClassData();
  },
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  flex-wrap: wrap;
}
.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 {
      margin-bottom: 10px;
      justify-content: space-between;
      .el-form-item {
        width: 273px;
      }
      .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;
      }
    }
  }
}
.checkedjs {
  width: 100%;
  height: 44px;
  background-color: #f9f9f9;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  .checkedEach {
    display: flex;
    height: 22px;
    line-height: 22px;
    margin-right: 5px;
    span {
      padding: 0 5px;
      border-radius: 6px;
      background-color: #00a3ff;
      color: #fff;
    }
    img {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      border: 1px solid #00a3ff;
      margin: 5px;
    }
  }
}
.check {
  // width: 516px;
  width: 100%;
  height: 258px;
  background: #ffffff;
  padding: 6px 15px;
  box-sizing: border-box;
  border: 1px solid #e4e6e8;
  border-radius: 6px;
  .checkTop {
    width: 100%;
    height: 80px;
    justify-content: space-between;
    //border: 1px solid red;
    position: relative;
    .searchValue {
      width: 450px;
      height: 39px;
      border-radius: 8px;

      position: relative;
      display: flex;
      .el-select {
        margin-right: 20px;
      }
      .searchBtn {
        width: 26px;
        height: 26px;
        background: #00a3ff;
        border-radius: 6px;
        position: absolute;
        right: -50px;
        top: 10px;

        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        img {
          display: block;
          text-align: center;
          margin: 6px auto 0;
        }
      }
    }
    .pages {
      width: 70px;
      height: 32px;
      justify-content: space-between;
      margin-top: 5px;
      position: absolute;
      bottom: 0;
      right: 20px;
      .previous,
      .next {
        width: 32px;
        height: 32px;
        line-height: 32px;
        opacity: 0.6;
        text-align: center;
        border: 1px solid #e4e6e8;
        border-radius: 8px;
        cursor: pointer;
      }
    }
  }
  .goupeTeacher {
    padding: 5px 10px;
    box-sizing: border-box;

    .each {
      margin-right: 27px;
      font-size: 16px;
      font-weight: 500;
      color: #949494;
      input {
        width: 17px;
        height: 17px;
        background-color: #e7ebee;
        border-radius: 4px;
        margin-right: 5px;
      }
    }
  }
}
</style>

  <style lang="scss">
.createCourse {
  .el-card {
    margin-bottom: 15px;
    background: #fff;
    .el-form {
      .el-form-item {
        &.is-required {
          .el-form-item__label {
            &::before {
              display: none;
            }
            &::after {
              content: "*";
              color: #f35421;
              margin-left: 4px;
            }
          }
        }
        .el-form-item__label {
          color: #949494;
          font-size: 14px;
          position: relative;
          &::after {
            content: "*";
            color: #f35421;
            margin-left: 4px;
          }
        }
        .el-form-item__content {
          .el-select {
            width: 100%;
          }
          .el-input {
            width: 100%;

            .el-input__wrapper {
              width: 100%;
              box-shadow: none;
              background: #f9f9f9;
              border-radius: 6px;
            }
          }
          .el-textarea {
            .el-textarea__inner {
              box-shadow: none;
              background: #f9f9f9;
              border-radius: 6px;
              // color: #d0d0d0;
            }
          }
          .el-checkbox.read {
            .el-checkbox__inner {
              border-radius: 50%;
            }
          }
          .el-input__inner {
            // color: #d0d0d0;
          }
        }
      }
      .uploadDiv {
        .mainUpload {
          .el-upload--picture-card {
            width: 180px;
            height: 96px;
          }
          .el-upload-list--picture-card .el-upload-list__item {
            display: none;
          }
        }
        .attachUpload {
          .el-upload--picture-card {
            width: 65px;
            height: 65px;
          }
        }
      }
    }
  }
}
</style>