<template>
  <!-- 申请成为名师 -->
  <div class="createCourse">
    <el-card>
      <div>基本信息</div>
      <div class="formContent" v-loading="loading">
        <el-form v-if="!loading" :model="formline" ref="formline" :rules="rules" size="large" label-position="top" class="demo-ruleForm">
          <div class="must">
            <div class="label">头像</div>
            <div class="uploadDiv">
              <el-upload class="mainUpload" action="" accept=".png, .jpg, .jpeg" :auto-upload="false" list-type="picture-card" :on-change="handleMainChange" :file-list="fileList">
                <el-icon size="38" color="#9d9ab9" v-if="fileList.length==0">
                  <Picture />
                </el-icon>
                <img v-else :src="fileList[0].url" alt="" style="width: 100%;height: 100%;" />
              </el-upload>
            </div>
          </div>

          <el-form-item label="姓名" prop="um_name">
            <el-input v-model="formline.um_name" />
          </el-form-item>
          <el-form-item label="手机号码" prop="um_mobile">
            <el-input v-model="formline.um_mobile" />
          </el-form-item>
          <el-form-item label="职称" prop="um_rank">
            <el-input v-model="formline.um_rank" />
          </el-form-item>

          <el-form-item label="任教学科" prop="um_subject">
            <remote-select to="subject" v-model="formline.um_subject"></remote-select>
          </el-form-item>
          <el-form-item label="任教年级" prop="um_grade">
            <remote-select to="grade" v-model="formline.um_grade"></remote-select>
          </el-form-item>
          <!-- <el-form-item label="学校" prop="um_school_name">
            <el-input v-model="formline.um_school_name" />
          </el-form-item> -->
          <el-form-item label="学校" prop="um_school_name">
            <el-select v-model="formline.um_school_name" placeholder=" " size="large">
              <el-option v-for="item in schoolData" :key="item.sm_name" :label="item.sm_name" :value="item.sm_name" />
            </el-select>
          </el-form-item>
          <el-form-item label="之江汇账号" prop="um_zjer_account">
            <el-input v-model="formline.um_zjer_account" />
          </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="goBack()">关 闭</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
  
   <script>
import { mssq_add, mssq_list, upload_file } from "./api";
import { getFullUrl } from "@/utils/helper";
import { Picture, FolderOpened } from "@element-plus/icons-vue";

export default {
  data() {
    return {
      wholeData: [],
      schoolData: [],
      formline: {
        um_name: "",
        um_avatar: "",
        um_mobile: "",
        um_rank: "",
        um_subject: "",
        um_grade: "",
        um_school_name: "",
        um_zjer_account: "",
        um_status: "",
      },
      rules: {
        um_avatar: [{ required: true, message: "请上传头像", trigger: "blur" }],
        um_name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        um_mobile: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
        ],
        um_rank: [{ required: true, message: "请输入职称", trigger: "blur" }],

        um_subject: [
          {
            required: true,
            message: "请选择任教学科",
            trigger: "submit",
          },
        ],
        um_grade: [
          {
            required: true,
            message: "请选择任教年级",
            trigger: "submit",
          },
        ],
        // um_school_name: [
        //   { required: true, message: "请输入学校名称", trigger: "blur" },
        // ],
        um_school_name: [{ required: true, message: "请选择学校", trigger: "change" }],
        um_zjer_account: [
          { required: true, message: "请输入之江汇账号", trigger: "blur" },
        ],
      },
      fileList: [],
      mainFileData: ["png", "jpg", "jpeg"],
      isRead: false,
      loading: true,
      mainTip: "",
    };
  },
  components: { Picture, FolderOpened, ElConfigProvider },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    //学校
    initSchoolData() {
      this.schoolData = [];
      request({
        url: '/school/main/index',
        data: {}
      }).then(res => {
        if (res.code == 1) {
          this.schoolData = res.data.page_data;
        }
      })
    },
    getListData() {
      this.loading = true;
      let data = {
        page: this.cur_page,
        limit: this.limit,
        keyword: this.keyword,
      };

      mssq_list(data).then((res) => {
        this.loading = false;
        this.wholeData = res.data.page_data;
        this.fileList = [{
          url: getFullUrl(this.wholeData.user_avatar),
        }];
        console.log(this.wholeData);
      });
    },
    addData() {
      for (let key in this.formline) {
        this.formline[key] = "";
      }
      this.loading = false;
    },
    // 封面图
    handleMainChange(file) {
      let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isJPG = this.mainFileData.includes(fileType);
      if (!isJPG) {
        this.mainTip = "上传文件只能是jpg,png,jpeg格式";
      }
      if (isJPG) {
        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.um_avatar = res.data.url;
        } else {
          this.$message.error("上传失败！");
        }
      });
    },
    //提交
    submitForm(formName) {
      if (!this.isRead) {
        this.$message({
          message: "请勾选课程上传协议书",
          type: "error",
        });
        return;
      }
      var reg_ph = /^1[0-9]{10}$/
      if (this.formline.um_mobile != '' && !reg_ph.test(this.formline.um_mobile)) {
        return this.$message.error('请输入正确的手机号');
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.formline.um_avatar == "") {
            this.mainTip = "请上传头像";
            return;
          }
          let data = {
            um_name: this.formline.um_name,
            um_avatar: this.formline.um_avatar,
            um_mobile: this.formline.um_mobile,
            um_rank: this.formline.um_rank,
            um_subject: this.formline.um_subject,
            um_grade: this.formline.um_grade,
            um_school_name: this.formline.um_school_name,
            um_zjer_account: this.formline.um_zjer_account,
          };
          mssq_add(data).then((res) => {
            if (res.code == 1) {
              this.$message({
                message: "添加成功！",
                type: "success",
              });
              this.goBack();
              this.getListData();
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          });
        }
      });
    },

  },
  mounted() {
    this.addData();
    this.getListData();
    this.initSchoolData();
  },
};
</script>
  
<style lang="scss" scoped>
::v-deep .el-input__wrapper {
  background: #f9f9f9;
  height: 44px;
}

.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::v-deep {
    flex: 1;
    .el-upload--picture-card {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      img {
        width: 96px;
        height: 96px;
        border-radius: 50%;
      }
    }
    .el-upload-list--picture-card .el-upload-list__item {
      display: none;
    }
  }
}

.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;
    //     }
    //     .mainUpload {
    //       .el-upload--picture-card {
    //         width: 180px;
    //         height: 96px;
    //       }
    //       .el-upload-list--picture-card .el-upload-list__item {
    //         display: none;
    //       }
    //     }
    .attachUpload {
      .el-upload-dragger {
        width: 65px;
        height: 65px;
        padding: 0;
        line-height: 65px;
        background: #f9f9f9;
      }
    }
  }
}
a .el-upload-list__item-name {
  width: 300px;
}
.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;
  }
}

.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;
  }
}

.formContent {
  width: 575px;
  margin: auto;
  .el-form-item::v-deep {
    &.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;
    }
    .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;
      }
    }
  }

  .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>
 