<template>
  <div>
    <common-header />
    <div class="content">
      <div class="main" v-loading="loading">
        <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">
            <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" />
            </el-form-item>
            <el-form-item label="手机号码" prop="user_phone">
              <el-input v-model="formline.user_phone" />
            </el-form-item>
            <el-form-item label="任教学科" prop="subject_id">
              <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>
            <!-- <el-form-item label="学校" prop="sm_id">
              <el-select v-model="activeSchool" placeholder=" " size="large" @change="initSchool" value-key="id">
                <el-option v-for="item in schoolData" :key="item.id" :label="item.sm_name" :value="item" />
              </el-select>
            </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 label="专业知识介绍" prop="ue_zyzsjs">
              <el-input v-model="formline.ue_zyzsjs" type="textarea" rows="5" />
            </el-form-item>
            <el-form-item label="座右铭" prop="ue_zym">
              <el-input v-model="formline.ue_zym" />
            </el-form-item>

            <!-- <el-form-item v-if="editId==''">
              <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')" :loading="commitLoading">提 交</el-button>
                <el-button @click="goBack">关 闭</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { user_info, subject_list, upload_file } from "../MyCourse/api.js";
import { getFullUrl } from "@/utils/helper";
import CommonHeader from "@/components/CommonHeader/index.vue";
export default {
  name: "index",
  components: {
    CommonHeader,
  },
  data() {
    var validatePhone = (rule, value, callback) => {
      // const reg = /^1[3-9]\d{9}$/;
      const reg = /^1[0-9]{10}$/;
      if (!value) {
        callback(new Error('请输入手机号'));
      } else {
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error('手机号格式不正确'));
        }
      }
    };

    return {
      loading: false,
      userInfo: {},
      formline: {
        user_avatar: "",
        user_realname: "",
        user_phone: "",
        subject_id: "",
        ue_xxmc: "",
        // sm_id: "",
        ue_zyzsjs: "",
        ue_zym: "",
      },
      subjectData: [],
      activeSubject: {},
      schoolData: [],
      activeSchool: {},
      rules: {
        user_avatar: [{ required: true, message: "请上传头像", trigger: "submit" }],
        user_realname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        user_phone: [{ required: true, validator: validatePhone, trigger: "blur" }],
        subject_id: [{ required: true, message: "请选择任教学科", trigger: "change" }],
        ue_xxmc: [{ required: true, message: "请选择学校", trigger: "change" }],
        ue_zyzsjs: [{ required: true, message: "请输入专业知识介绍", trigger: "blur" }],
        ue_zym: [{ required: true, message: "请输入座右铭", trigger: "blur" }]
      },
      fileList: [],
      mainFileData: ["png", "jpg", "jpeg"],
      isRead: true,
      commitLoading: false,
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    // 科目
    initSubjectData() {
      this.subjectData = [];
      subject_list().then((res) => {
        if (res.code == 1) {
          this.subjectData = res.data.page_data;
        }
      });
    },
    initSubject(value) {
      this.formline.subject_name = value.subject_name;
      this.formline.subject_id = value.subject_id;
    },
    // 学校
    initSchoolData() {
      this.schoolData = [];
      request({
        url: '/school/main/index',
        data: {}
      }).then(res => {
        if (res.code == 1) {
          this.schoolData = res.data.page_data;
        }
      })
    },
    // initSchool(value) {
    //   this.formline.ue_xxmc = value.sm_name;
    //   this.formline.sm_id = value.id;
    // },
    initDetailData() {
      user_info().then((res) => {
        if (res.code == 1) {
          this.userInfo = res.data;
          this.fileList = [{
            url: getFullUrl(this.userInfo.user_avatar),
          }];
          this.formline = {
            user_avatar: this.userInfo.user_avatar,
            user_realname: this.userInfo.user_realname,
            user_phone: this.userInfo.user_phone,
            subject_id: this.userInfo.subject_id,
            // sm_id: this.userInfo.sm_id,
            ue_xxmc: this.userInfo.ue_xxmc,
            ue_zyzsjs: this.userInfo.ext.ue_zyzsjs,
            ue_zym: this.userInfo.ext.ue_zym,
          }
          this.subjectData.map((item) => {
            if (item.subject_id == this.formline.subject_id) {
              this.activeSubject = item;
            }
          });
          // this.schoolData.map((item) => {
          //   if (item.id == this.formline.sm_id) {
          //     this.activeSchool = item;
          //   }
          // });
          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("上传失败！");
        }
      });
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid && this.formline.user_avatar != "") {
          let data = {
            user_main: this.formline,
          };
          // if (!this.isRead) {
          //   this.$message.error("请勾选已阅读并同意《课程上传协议》");
          //   return false;
          // }
          this.commitLoading = true;
          request({
            url: '/user/main/edit',
            data: data
          }).then(res => {
            if (res.code == 1) {
              this.$message.success("保存成功！");
              this.goBack();
            }
          })
        } else {
          if (this.formline.user_avatar == "") {
            this.$message.error("请上传头像！");
          }
        }
      });
    },
    modifyPwd() {
      this.$router.push(({ name: "personal_components_sz_modifyPwd" }));
    }
  },
  created() {
    this.initSubjectData();
    this.initSchoolData();
  },
  mounted() {
    this.loading = true;
    this.initDetailData();
  }
};
</script>

<style lang="scss" scoped>
.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;
    cursor: pointer;
  }
}
.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>