<template>
  <div v-loading="loading" class="addLecturer">
    <div class="head-title">
      <span @click="CommonJump('lecturermanage')" class="blue point">讲师管理</span> / 编辑讲师管理
    </div>
    <div class="content">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px" style="width:50%">
        <el-form-item label="讲师名称" prop="Name" class="is-required" size="small">
          <el-input v-model="addMsg.Name" placeholder="请输入讲师名称" />
        </el-form-item>
        <el-form-item label="头像" class="is-required" size="small">
          <el-button @click="openChangeDig(1)" size="small">选择文件</el-button>
          <div class="app-gallery-item" style="position: relative;width: 100px;margin-top: 10px;">
            <img v-if="!addMsg.TeacherLogo || addMsg.TeacherLogo==''" src="../../assets/img/default.png"
              style="width:80px;height:80px" alt="">
            <img v-else style="width:80px;height:80px" :src="addMsg.TeacherLogo" alt="">
          </div>
        </el-form-item>
        <el-form-item label="关联用户" size="small">
          <el-select size="small" v-model="addMsg.UserId" filterable remote reserve-keyword placeholder="关联用户"
            :remote-method="remoteMethod" :loading="loadingPeople">
            <el-option v-for="item in peopleData" :key="item.Id" :label="`${item.AliasName}`" :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话" prop="Telephone" class="is-required" size="small">
          <el-input v-model="addMsg.Telephone" placeholder="请输入电话" type="number" />
        </el-form-item>
        <el-form-item label="专业" prop="Major" class="is-required" size="small">
          <el-input v-model="addMsg.Major" placeholder="请输入专业" />
        </el-form-item>
        <el-form-item label="工作年限" prop="WorkYears" class="is-required" size="small">
          <el-input v-model="addMsg.WorkYears" @keyup.native="checkInteger(addMsg,'WorkYears')" placeholder="请输入工作年限" />
        </el-form-item>
        <el-form-item label="讲师国籍" prop="Nationality" class="is-required" size="small">
          <el-input v-model="addMsg.Nationality" />
        </el-form-item>
        <el-form-item label="国旗" class="is-required" size="small">
          <el-button @click="openChangeDig(2)" size="small">选择文件</el-button>
          <div class="app-gallery-item" style="position: relative;width: 100px;margin-top: 10px;">
            <img v-if="!addMsg.ForeignersUrl || addMsg.ForeignersUrl==''" src="../../assets/img/default.png"
              style="width:80px;height:80px" alt="">
            <img v-else style="width:80px;height:80px" :src="addMsg.ForeignersUrl" alt="">
          </div>
        </el-form-item>
        <el-form-item label="上架状态" size="small">
          <el-switch v-model="addMsg.TeacherStatus" active-color="#409EFF" :active-value="1" :inactive-value="2">
          </el-switch>
        </el-form-item>
        <el-form-item label="标签" size="small">
          <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
            {{tag}}
          </el-tag>
          <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
            @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 标签</el-button>
        </el-form-item>
        <el-form-item label="擅长课程" size="small">
          <el-tag :key="tag" v-for="tag in dynamicTags2" closable :disable-transitions="false"
            @close="handleClose2(tag)">
            {{tag}}
          </el-tag>
          <el-input class="input-new-tag" v-if="inputVisible2" v-model="inputValue2" ref="saveTagInput2" size="small"
            @keyup.enter.native="handleInputConfirm2" @blur="handleInputConfirm2">
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput2">+ 标签</el-button>
        </el-form-item>
        <el-form-item label="简介">
          <UE style="width:750px;" :defaultMsg="defaultMsg" :config="config" :IsMultiple="true" ref="ue"></UE>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-top:20px">
      <el-button size="small" type="primary" @click="Save('addMsg')">保存</el-button>
    </div>

    <!-- 选择文件 -->
    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import UE from "@/components/global/UE.vue";

  export default {
    components: {
      ChooseImg,
      UE
    },
    data() {
      return {
        addMsg: {
          ID: 0,
          TeacherLogo: '',
          Name: '',
          Telephone: "",
          UserId: '',
          Introduction: '',
          Major: '',
          WorkYears: '',
          TeacherStatus: 2,
          LableNameList: '',
          GoodCourseList: '',
          Nationality: '', //老师国籍
          ForeignersUrl: '', //国家图片
        },
        loadingPeople: false,
        dynamicTags: [],
        dynamicTags2: [],
        inputVisible: false,
        inputValue: '',
        inputVisible2: false,
        inputValue2: '',
        defaultMsg: "",
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350
        },
        Picindex: 0,
        rules: {

          Name: [{
            required: true,
            message: '请输入讲师名称',
            trigger: 'blur'
          }],
          Telephone: [{
            required: true,
            message: '请输入讲师电话',
            trigger: 'blur'
          }],
          Introduction: [{
            required: true,
            message: '请输入讲师简介',
            trigger: 'blur'
          }],
          Major: [{
            required: true,
            message: '请输入讲师专业',
            trigger: 'blur'
          }],
          Nationality: [{
            required: true,
            message: '请输入讲师国籍',
            trigger: 'blur'
          }],
          WorkYears: [{
            required: true,
            message: '请输入讲师年限',
            trigger: 'blur'
          }],
        },
        loading: false,
        changeState: false,
        imgType: 0,
        peopleData: [],
      };
    },
    created() {
      if (this.$route.query.ID) {
        this.getData(this.$route.query.ID)
      }
    },
    methods: {
      SelectId(msg) {
        if (this.imgType == 1) {
          let url = this.getIconLink(msg.url)
          this.addMsg.TeacherLogo = url
        }
        if (this.imgType == 2) {
          let url = this.getIconLink(msg.url)
          this.addMsg.ForeignersUrl = url
        }
        this.changeState = false;
      },
      openChangeDig(num) {
        this.changeState = true;
        this.imgType = num;
      },
      Save(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.addMsg.TeacherLogo == '') {
              this.Error('请上传品牌Logo')
              return false
            }
            if (this.addMsg.ForeignersUrl == '') {
              this.Error('请上传国家国旗')
              return false
            }
            this.addMsg.LableNameList = this.dynamicTags
            if (this.dynamicTags2.length == '' || this.dynamicTags2.length == 0) {
              this.Error('请填写教师擅长课程')
              return false
            }
            this.addMsg.GoodCourseList = this.dynamicTags2
            let content = this.$refs.ue.getUEContent();
            this.addMsg.Introduction = content;
            let msg = this.addMsg
            if (msg.UserId == '') {
              msg.UserId = 0
            }
            this.apipost("/api/Education/AddOrUpdateTeacher", msg, res => {
              if (res.data.resultCode == 1) {
                this.CommonJump('lecturermanage');
                this.Success(res.data.message);
              } else {
                this.Error(res.data.message);
              }
            })
          } else {
            return false;
          }
        });
      },
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },
      handleClose2(tag) {
        this.dynamicTags2.splice(this.dynamicTags2.indexOf(tag), 1);
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      showInput2() {
        this.inputVisible2 = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput2.$refs.input.focus();
        });
      },
      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      handleInputConfirm2() {
        let inputValue = this.inputValue2;
        if (inputValue) {
          this.dynamicTags2.push(inputValue);
        }
        this.inputVisible2 = false;
        this.inputValue2 = '';
      },
      getData(ID) {
        this.loading = true;
        this.apipost("/api/Education/GetTeacherModel", {
          ID: ID
        }, res => {
          this.loading = false;
          this.addMsg = res.data.data;
          if (this.addMsg.Introduction && this.addMsg.Introduction != "") {
            this.defaultMsg = this.addMsg.Introduction;
          }
          if (this.addMsg.LableNameList != null) {
            this.dynamicTags = this.addMsg.LableNameList
          }
          if (this.addMsg.GoodCourseList != null) {
            this.dynamicTags2 = this.addMsg.GoodCourseList
          }
          if (this.addMsg.UserId == 0) {
            this.addMsg.UserId = ''
          } else if (this.addMsg.UserId > 0) {
            this.peopleData = [{
              Id: this.addMsg.UserId,
              AliasName: this.addMsg.UserName
            }]
          }
        })
      },
      remoteMethod(val) {
        this.loadingPeople = true;
        this.apipost("/api/User/GetListByPhoneOrAliasName", {
          'AliasName': val,
          SmallShopId: 0
        }, res => {
          this.loadingPeople = false;
          if (res.data.resultCode == 1) {
            this.peopleData = res.data.data
          } else {
            this.Info(res.data.message);
          }
        })
      },
    },
    mounted() {}
  };

</script>
<style>
  .app-add-cat .el-checkbox-group {
    font-size: 14px !important;
  }

  .app-add-cat .el-checkbox {
    margin-right: 0;
  }

  .app-add-cat .el-dialog__body {
    padding: 10px 20px !important;
  }

  .app-add-cat .tag-box .tag-item {
    margin-right: 5px;
  }

  .app-add-cat .tag-box {
    margin: 20px 0;
  }

  .app-add-cat .app-goods-cat-list .active {
    background: #FAFAFA;
  }

  .app-add-cat .app-goods-cat-list .cat-item {
    cursor: pointer;
    padding: 5px 10px;
  }

  .app-add-cat .app-goods-cat-list {
    border: 1px solid #E8EAEE;
    border-radius: 5px;
    margin-top: -5px;
    padding: 10px 0;
    overflow: scroll;
    height: 400px;
  }



  .addLecturer .blue {
    color: #409EFF;

  }

  .addLecturer .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }

  .addLecturer .gez_list {
    /*width: 650px;*/
    margin-bottom: 12px;
    padding: 20px;
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    color: #303133;

  }

  .addLecturer .quyu {
    background-color: #f4f4f5;
    color: #909399;
    padding: 10px;
    line-height: 30px;
    height: 30px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    margin: 5px;
  }

  .addLecturer .el-tag+.el-tag {
    margin-left: 10px;
  }

  .addLecturer .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .addLecturer .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  .addLecturer .el-form-item__content {
    line-height: 0;
  }

  .addLecturer .app-gallery-item {
    border: none
  }

</style>
