<template>
  <common-header />
  <div class="content">
    <div class="main">
      <div class="header">
        <div class="title">基础信息</div>
        <div class="pwd" @click="modifyPwd()">修改密码</div>
      </div>
      <div class="formContent" v-loading="loading">
        <el-form :model="formline" ref="formline" :rules="rules" size="large" label-position="top" class="demo-ruleForm" v-if="!loading">
          <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="user_realname">
            <el-input v-model="formline.user_realname" placeholder="请输入昵称" />
          </el-form-item>
          <el-form-item label="学号" prop="stu_code" v-if="this.wholeData.user_role_id==76">
            <el-input v-model="formline.stu_code" placeholder="请输入学号" />
          </el-form-item>
          <el-form-item label="手机号码" prop="user_phone">
            <el-input v-model="formline.user_phone" placeholder="请输入手机号码" />
          </el-form-item>
          <el-form-item label="任教学科" prop="subject_id" v-if="this.wholeData.user_role_id!=76">
            <remote-select v-model="formline.subject_id" to="subject"></remote-select>
          </el-form-item>
          <!-- <el-form-item label="学校" prop="ue_xxmc">
            <el-input v-model="formline.ue_xxmc" placeholder="请输入学校" />
          </el-form-item> -->
          <el-form-item label="学校" prop="ue_xxmc">
            <el-select v-model="formline.ue_xxmc" 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>
            <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>
    </div>
  </div>
</template>

<script>
import { sz_edit, user_info, upload_file } from "./api";
import { getFullUrl } from "@/utils/helper";
import CommonHeader from "@/components/CommonHeader/index.vue";
export default {
  name: "index",
  components: {
    CommonHeader,
  },
  data() {
    return {
      https: window.GLOBAL_CONFIG.api,
      wholeData: {},
      schoolData: [],
      formline: {
        user_avatar: "",
        user_realname: "",
        user_phone: "",
        subject_id: "",
        ue_xxmc: "",
        stu_code: ""
      },
      user_id: "",
      rules: {
        user_avatar: [
          { required: true, message: "请上传头像", trigger: "submit" },
        ],
        user_realname: [
          { required: true, message: "请输入昵称", trigger: "blur" },
        ],
        stu_code: [
          { required: true, message: "请输入学号", trigger: "blur" },
        ],
        user_phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
        ],
        subject_id: [
          {
            required: true,
            message: "请选择任教学科",
            trigger: "submit",
          },
        ],
        ue_xxmc: [{ required: true, message: "请选择学校", trigger: "change" }],
      },
      fileList: [],
      mainFileData: ["png", "jpg", "jpeg"],
      isRead: true,
      loading: true,
      mainTip: "",
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    editData() {
      let data = {
        user_id: this.$route.query.id,
      };

      user_info(data).then((res) => {
        if (res.code == 1) {
          this.wholeData = res.data;
          this.fileList = [{
            url: getFullUrl(this.wholeData.user_avatar),
          }];
          for (let key in this.formline) {
            this.formline[key] = res.data[key];
          }
          this.formline.subject_id = res.data.subject_id;
          this.formline.user_avatar = res.data.user_avatar;

          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.user_avatar = res.data.url;
        } else {
          this.$message.error("上传失败！");
        }
      });
    },
    //学校
    initSchoolData() {
      this.schoolData = [];
      request({
        url: '/school/main/index',
        data: {}
      }).then(res => {
        if (res.code == 1) {
          this.schoolData = res.data.page_data;
        }
      })
    },
    // 提交
    submitForm(formName) {
      if (!this.isRead) {
        this.$message({
          message: "请勾选课程上传协议书",
          type: "error",
        });
        return;
      }

      var reg_ph = /^1[0-9]{10}$/
      if (this.formline.user_phone != '' && !reg_ph.test(this.formline.user_phone)) {
        return this.$message.error('请输入正确的手机号');
      }
      let id = this.$route.query.id;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.formline.user_avatar == "") {
            console.log(2222222);
            this.mainTip = "请上传头像";
            return;
          }
          let data = {
            user_avatar: this.formline.user_avatar,
            user_realname: this.formline.user_realname,
            user_phone: this.formline.user_phone,
            subject_id: this.formline.subject_id,
            ue_xxmc: this.formline.ue_xxmc,
            stu_code: this.formline.stu_code
          };
          Object.assign(data, { user_id: id });
          sz_edit(data).then((res) => {
            if (res.code == 1) {
              this.$message({
                message: "编辑成功！",
                type: "success",
              });
              this.goBack();
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          });
        }
      });
    },


    modifyPwd() {
      this.$router.push(({ name: "personal_components_sz_modifyPwd" }));
    }
  },

  mounted() {
    this.editData();
    this.initSchoolData();
  },
};
</script>

<style lang="scss" scoped>
.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: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .el-upload-list--picture-card .el-upload-list__item {
      display: none;
    }
  }
}
.content {
  width: 100%;
  min-width: 1400px;
  margin: 0 auto;
  background-image: url("@/assets/img/zhjy/xq_bg.png");
  background-repeat: no-repeat;
}
.main {
  width: 1400px;
  margin: 0 auto;
  background: #fcfeff;
  padding: 40px;
  margin-top: 15px;
  background: #fcfeff;
  border-radius: 10px;
  box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
}
.header {
  display: flex;
  justify-content: space-between;
  .title {
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    color: #050026;
  }
  .pwd {
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-decoration: underline;
    text-align: center;
    color: #00a3ff;
  }
}

.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;
      }
    }
  }
  .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: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .el-upload-list--picture-card .el-upload-list__item {
        display: none;
      }
    }
  }
  .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>

