<template>
  <div class="m-container">
    <!-- <h2>
      <el-page-header @back="onCancel" :content="'老师' + (pageType == 'create' ? '新增' : '修改')"></el-page-header>
    </h2>-->
    <div class="infoWrap">
      <div class="left">
        <h4>基本信息</h4>
        <el-form :model="topForm" :rules="rules" ref="form">
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名" prop="realName" :label-width="formLabelWidth">
                <el-input v-model.trim="topForm.realName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="gender" :label-width="formLabelWidth">
                <el-select v-model.trim="topForm.gender">
                  <el-option label="男" :value="1"></el-option>
                  <el-option label="女" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="出生日期" :label-width="formLabelWidth">
                <el-date-picker
                  v-model.trim="topForm.birthdate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="出生日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="入职日期" prop="entryDate" :label-width="formLabelWidth">
                <el-date-picker
                  v-model.trim="topForm.entryDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="入职日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="工作类型" prop="jobNature" :label-width="formLabelWidth">
                <el-select v-model.trim="topForm.jobNature" placeholder="工作类型" clearable filterable>
                  <el-option
                    v-for="item in jobNature"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属分部" prop="organId" :label-width="formLabelWidth">
                <el-select v-model.trim="topForm.organId" filterable clearable placeholder="所属分部">
                  <el-option
                    v-for="item in branchList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="流动范围" :label-width="formLabelWidth">
                <el-select
                  v-model.trim="topForm.flowOrganRange"
                  filterable
                  clearable
                  multiple
                  placeholder="流动范围"
                >
                  <el-option
                    v-for="item in branchList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value.toString()"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="人事状态" prop="isProbationPeriod" :label-width="formLabelWidth">
                <el-select
                  v-model.trim="topForm.isProbationPeriod"
                  clearable
                  filterable
                  placeholder="人事状态"
                >
                  <el-option label="正式" :value="1"></el-option>
                  <el-option label="临时" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" v-if="pageType == 'update'">
              <el-form-item label="教学点" :label-width="formLabelWidth">
                <el-input disabled v-model.trim="teacherSchools"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="老师简介" :label-width="formLabelWidth">
                <el-input type="textarea" v-model.trim="topForm.introduction"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="diSpan">
              <el-tooltip placement="top" popper-class="mTooltip"> 
                <div slot="content">
                  「是」当前声部的学生都可以选择该老师；
                  <br />「否」只有该老师的VIP课，单技课，基础技能课的学生可以选择该老师；
                </div>
                <img :src="imageIcon" class="micon el-tooltip" style="width:8px height:8px" alt />
              </el-tooltip>

              <el-form-item label="开放陪练" label-width="90px" class="course">
                <el-select
                  v-model.trim="topForm.isSupportExtraPracticeLesson"
                  clearable
                  filterable
                  placeholder="开放陪练"
                >
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <h4>资料学历</h4>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="手机号"
                :rules="[{ required: true, message: '手机号不能为空',trigger: 'blur'},{pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号',trigger: 'blur' }]"
                prop="phone"
                :label-width="formLabelWidth"
              >
                <el-input v-model.trim.number="topForm.phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="毕业学校" :label-width="formLabelWidth">
                <el-input v-model.trim="topForm.graduateSchool"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="电子邮箱" :label-width="formLabelWidth">
                <el-input v-model.trim="topForm.email"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最高学历" :label-width="formLabelWidth">
                <!-- <el-input v-model.trim="topForm.educationBackground"></el-input> -->
                <el-select
                  v-model.trim="topForm.educationBackground"
                  clearable
                  filterable
                  placeholder="最高学历"
                >
                  <el-option label="初中" value="初中"></el-option>
                  <el-option label="高中" value="高中"></el-option>
                  <el-option label="大专" value="大专"></el-option>
                  <el-option label="本科" value="本科"></el-option>
                  <el-option label="硕士" value="硕士"></el-option>
                  <el-option label="博士" value="博士"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="专业技能" prop="subjectIds" :label-width="formLabelWidth">
                <el-select
                  multiple
                  v-model.trim="topForm.subjectIds"
                  clearable
                  filterable
                  placeholder="专业技能"
                >
                  <el-option-group
                    v-for="group in subjectList"
                    :key="group.label"
                    :label="group.label"
                  >
                    <el-option
                      v-for="item in group.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value.toString()"
                    ></el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="职称" :label-width="formLabelWidth">
                <el-input v-model.trim="topForm.technicalTitles"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="证件类型" :label-width="formLabelWidth">
                <el-input v-model.trim="topForm.certificateType"></el-input>
                <!-- <el-select v-model.trim="topForm.certificateType" placeholder="证件类型">
                            <el-option label="身份证" value="身份证"></el-option>
                            <el-option label="护照" value="护照"></el-option>
                            <el-option label="港澳通行证" value="港澳通行证"></el-option>
                </el-select>-->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件号码" :label-width="formLabelWidth">
                <el-input v-model.trim="topForm.certificateNum"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label :label-width="formLabelWidth">
                <!-- <el-input v-model.trim="topForm.certificateType"></el-input> -->
                <el-checkbox v-model.trim="topForm.isSupportCourseScheduleRewardsRules">适用VIP分部活动</el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button
              @click="onSubmit('form')"
              type="primary"
            >立即{{ pageType == "create" ? '创建' : '修改' }}</el-button>
            <el-button @click="onReSet('form')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <div class="teacherIcon">
          <img v-if="topForm.avatar" key="avatar" :src="topForm.avatar" alt />
          <img v-else key="avatar" src="@/assets/images/base/woman.png" alt />
        </div>
        <el-upload
          class="ivu-upload"
          :show-upload-list="false"
          :show-file-list="false"
          :headers="headers"
          :on-success="handleSuccess"
          accept=".jpg, .jpeg, .png"
          :max-size="2048"
          multiple
          action="/api-web/uploadFile"
        >
          <el-button
            icon="ios-cloud-upload-outline"
            v-if="pageType != 'create'"
            v-permission="{child: 'resetTeacher/uploadFile', parent: '/teacherUpdate/baseInfo'}"
          >修改头像</el-button>
          <el-button
            icon="ios-cloud-upload-outline"
            v-if="pageType == 'create'"
            v-permission="{child: 'createTeacher/uploadFile', parent: '/teacherAdd/baseInfo'}"
          >新增头像</el-button>
        </el-upload>
        <p class="iconP">
          推荐图片尺寸：200x200；
          <br />支持的格式：jpg，jpeg，png；
          <br />*头像修改后，需要点击页面
          <br />下方「立即修改」保存生效；
        </p>
      </div>
    </div>
  </div>
</template>
<script>
// import { queryByOrganId } from '@/api/systemManage'
import { getToken } from "@/utils/auth";
import { branchQueryPage, subjectListTree } from "@/api/specialSetting";
import { teacherAdd, teacherUpdate, teacherGet } from "@/api/teacherManager";
import store from "@/store";
import { permission } from "@/utils/directivePage";
import { jobNature } from "@/utils/searchArray";
import { isvalidPhone } from "@/utils/validate";
let validPhone = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请输入电话号码"));
  } else if (!isvalidPhone(value)) {
    callback(new Error("请输入正确的11位手机号码"));
  } else {
    callback();
  }
};
export default {
  name: "teacherOperation",
  data() {
    return {
      headers: {
        Authorization: getToken()
      },
      jobNature: jobNature,
      organId: null,
      pageType: this.$route.query.type,
      teacherId: this.$route.query.teacherId,
      formLabelWidth: "80px",
      branchList: [], // 分部列表
      subjectList: [], //声部列表
      teacherSchools: null,
      topForm: {
        realName: null,
        gender: null,
        birthdate: null,
        entryDate: null,
        jobNature: null,
        organId: null,
        flowOrganRange: null,
        introduction: null,
        phone: null,
        avatar: null,
        graduateSchool: null,
        email: null,
        educationBackground: null,
        subjectIds: [],
        isProbationPeriod: null,
        technicalTitles: null,
        certificateType: null,
        certificateNum: null,
        isSupportCourseScheduleRewardsRules: true,
        isSupportExtraPracticeLesson: null
      },
      imageIcon: require("@/assets/images/base/warning.png"),
      rules: {
        realName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 10, message: "请输入 2 到 10 个字符", trigger: "blur" }
        ],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        entryDate: [
          { required: true, message: "请选择入职日期", trigger: "change" }
        ],
        jobNature: [
          { required: true, message: "请选择工作类型", trigger: "change" }
        ],
        isProbationPeriod: [
          { required: true, message: "请选择人事状态", trigger: "change" }
        ],
        organId: [
          { required: true, message: "请选择所属分部", trigger: "change" }
        ],
        phone: [{ required: true, validator: validPhone, trigger: "blur" }],
        subjectIds: [
          {
            required: true,
            type: "array",
            message: "请选择专业技能",
            trigger: "change"
          }
        ],
        isAvatar: null
      }
    };
  },
  created() {},
  mounted() {
    this.__init();
  },
  activated() {
    this.pageType = this.$route.query.type;
    this.teacherId = this.$route.query.teacherId;
    this.__init();
  },
  methods: {
    __init() {
      if (this.$route.query.search) {
        this.Fsearch = this.$route.query.search;
      }
      if (this.$route.query.rules) {
        this.Frules = this.$route.query.rules;
      }
      // isAvatar
      branchQueryPage({
        // 获取分部
        delFlag: 0,
        rows: 9999
      }).then(res => {
        if (res.code == 200 && res.data && res.data.rows) {
          this.branchList = [];
          res.data.rows.forEach(item => {
            this.branchList.push({
              label: item.name,
              value: item.id
            });
          });
        }
      });
      subjectListTree({
        // 声部
        delFlag: 0,
        rows: 9999
      }).then(res => {
        let result = res.data;
        if (res.code == 200) {
          let tempArray = [];
          result.rows.forEach((item, index) => {
            let subject = [];
            item.subjects.forEach(s => {
              subject.push({
                value: s.id,
                label: s.name
              });
            });

            tempArray[index] = {
              label: item.name,
              options: subject
            };
          });
          this.subjectList = tempArray;
        }
      });

      if (this.pageType == "update") {
        teacherGet({ teacherId: this.teacherId }).then(res => {
          let result = res.data;
          this.topForm = {
            realName: result.realName,
            gender: result.gender,
            birthdate: result.birthdate,
            entryDate: result.entryDate,
            jobNature: result.jobNature,
            organId: result.teacherOrganId,
            flowOrganRange: result.flowOrganRangeId
              ? result.flowOrganRangeId.split(",")
              : null,
            introduction: result.introduction,
            phone: result.phone,
            avatar: result.avatar,
            graduateSchool: result.graduateSchool,
            email: result.email,
            educationBackground: result.educationBackground,
            subjectIds: result.subjectId ? result.subjectId.split(",") : null,
            technicalTitles: result.technicalTitles,
            certificateType: result.certificateType,
            certificateNum: result.certificateNum,
            isProbationPeriod: result.isProbationPeriod,
            isSupportCourseScheduleRewardsRules:
              result.isSupportCourseScheduleRewardsRules,
            isSupportExtraPracticeLesson: result.isSupportExtraPracticeLesson
          };
          let sn = [];
          result.teacherSchools.forEach(item => {
            sn.push(item.name);
          });
          this.teacherSchools = this.joinArray(sn, ","); // 教学点
        });
      }
    },
    joinArray(value, type) {
      if (!type) {
        type = " ";
      }
      if (typeof value == "object" && value != null) {
        return value.join(type);
      } else {
        return value;
      }
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.topForm.flowOrganRange = this.topForm.flowOrganRange
            ? this.topForm.flowOrganRange.join(",")
            : null;
          this.topForm.subjectId = this.topForm.subjectIds.join(",");
          if (this.pageType == "update") {
            this.topForm.id = this.teacherId;
            teacherUpdate(this.topForm).then(res => {
              if (res.code == 200) {
                // this.$emit('onTeacher')
                this.$router.push({
                  path: "/business/teacherList",
                  query: { rules: this.Frules, search: this.Fsearch }
                });
              }
              this.messageTips("修改", res);
            });
          } else if (this.pageType == "create") {
            if (this.topForm.id) {
              delete this.topForm.id;
            }
            teacherAdd(this.topForm).then(res => {
              if (res.code == 200) {
                // 权限判断，是否有课酬设置
                if (permission("/teacherAdd/salarySeting")) {
                  this.$emit("onTeacher", res.data);
                } else {
                  this.$router.push({
                    path: "/business/teacherList",
                    query: { rules: this.Frules, search: this.Fsearch }
                  });
                }
              }
              this.messageTips("添加", res);
            });
          }
        } else {
          return false;
        }
      });
    },
    messageTips(title, res) {
      if (res.code == 200) {
        this.$message.success(title + "成功");
      } else {
        this.topForm.subjectIds = this.topForm.subjectIds.split(",");
        this.$message.error(res.msg);
      }
    },
    onReSet(formName) {
      this.topForm = {
        realName: null,
        gender: null,
        birthdate: null,
        entryDate: null,
        jobNature: null,
        organId: null,
        flowOrganRange: null,
        introduction: null,
        phone: null,
        avatar: null,
        graduateSchool: null,
        email: null,
        educationBackground: null,
        subjectIds: [],
        technicalTitles: null,
        certificateType: null,
        certificateNum: null,
        jobType: "ADVISER"
      };
      this.$refs[formName].resetFields();
    },
    onCancel() {
      this.$router.push({
        path: "/business/teacherList",
        query: { rules: this.Frules, search: this.Fsearch }
      });
    },
    handleSuccess(res) {
      // 获取富文本组件实例
      // let quill = this.editor
      // 如果上传成功
      if (res.code == 200) {
        // 获取光标所在位置
        this.topForm.avatar = res.data.url;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow {
  border-top-color: #ecf0f0;
  color: #666666;
}
.atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
  border-top-color: #ecf0f0;
  color: #666666;
}
.atooltip {
  background: #ecf0f0 !important;
  color: #666666;
}
.diSpan {
  position: relative;
  .micon {
    position: absolute;
    top: 12px;
    left: 64px;
  }
}
.course {
  /deep/.el-form-item__label {
    text-align: left !important;
  }
}

// /deep/.el-tooltip__popper.is-dark {
//   background-color: #ECF0F0!important;
//   color: #666!important;
// }
.el-button--primary {
  background: #14928a;
  border-color: #14928a;
  color: #fff;
  &:hover,
  &:active,
  &:focus {
    background: #14928a;
    border-color: #14928a;
    color: #fff;
  }
}
/deep/.el-date-editor.el-input,
/deep/.el-select {
  width: 100% !important;
}
// .el-row {
//   margin-top: 40px;
// }
// .el-col {
//   display: flex;
//   align-items: center;
//   margin-bottom: 20px;
//   justify-content: flex-end;
//   margin-right: 50%;
// }
// .el-input-group {
//   width: 200px;
//   margin: 0 20px;
// }
// /deep/.el-tree-node__content {
//   height: 40px !important;
// }
/deep/.el-form-item__content {
  font-size: 14px !important;
  margin-right: 5%;
}
.infoWrap {
  margin-top: 20px;

  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  .left {
    max-width: 1000px;
    width: 100%;
    h4 {
      margin-bottom: 20px;
    }
  }
  .right {
    margin-left: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .teacherIcon {
      width: 150px;
      height: 150px;
      // border: 1px solid #444;
      border-radius: 50%;
      overflow: hidden;
      margin-bottom: 20px;
      img {
        width: 150px;
        height: 150px;
        object-fit: cover;
      }
    }
  }
  .iconP {
    margin-top: 10px;
    font-size: 14px;
    color: red;
    width: 260px;
    text-align: center;
  }
}
</style>