<template>
  <div class="global">
    <div class="mainContainer">
      <!-- <div class="title">{{ title }}人员信息</div> -->

      <div class="company">
        <span>所属公司: {{ this.$route.query.name}}</span>
        <el-button v-if="this.$route.query.state == 'detail'" type="success" style="float:right;" @click="detailedit">修改</el-button>
      </div>
      <div>
        <div class="basicInfo">
          <div>基本信息</div>
          <div>
            <el-form
              ref="ruleForm"
              :inline="true"
              :model="personnel"
              class="demo-form-inline"
              label-width="100px"
              :rules="rules"
            >
              <el-form-item label="人员姓名:" prop="uname">
                <el-input
                  v-model="personnel.uname"
                  :disabled="this.$route.query.state == 'detail'"
                />
              </el-form-item>

              <el-form-item label="联系方式:" prop="uphone">
                <el-input
                  v-model="personnel.uphone"
                  :disabled="this.$route.query.state == 'detail'"
                />
              </el-form-item>
              <el-form-item label="性别:">
                <el-select
                  v-model="personnel.usex"
                  placeholder="请选择"
                  :disabled="this.$route.query.state == 'detail'"
                >
                  <el-option label="男" value="0" />
                  <el-option label="女" value="1" />
                </el-select>
              </el-form-item>

              <el-form-item label="出生日期:">
                <!-- <el-input v-model="personnel.ubirthday"></el-input> -->
                <el-date-picker
                  v-model="personnel.ubirthday"
                  type="date"
                  placeholder="选择日期"
                  :disabled="this.$route.query.state == 'detail'"
                />
              </el-form-item>

              <el-form-item label="邮箱:">
                <el-input
                  v-model="personnel.umail"
                  :disabled="this.$route.query.state == 'detail'"
                />
              </el-form-item>
              <el-form-item label="工作年限:" prop="pworkYears">
                <el-input
                  v-model="personnel.pworkYears"
                  :disabled="this.$route.query.state == 'detail'"
                />
              </el-form-item>
              <el-form-item label="职位:">
                <el-input   v-model="personnel.ppost"
                  :disabled="this.$route.query.state == 'detail'">
                </el-input>
              </el-form-item>
              <el-form-item label="政治面貌:">
                <el-select
                  v-model="personnel.ppoliticalOutlook"
                  :disabled="this.$route.query.state == 'detail'"
                >
                  <el-option label="党员" value="0" />
                  <el-option label="群众" value="1" />
                </el-select>
              </el-form-item>
              <el-form-item label="入党时间:">
                <!-- <el-input v-model="personnel.ppartyTime"></el-input> -->
                <el-date-picker
                  v-model="personnel.ppartyTime"
                  type="date"
                  placeholder="选择日期"
                  :disabled="this.$route.query.state == 'detail'"
                />
              </el-form-item>
              <el-form-item label="所属部门:" prop="pdepartment">
                <el-select
                  v-model="personnel.pdepartment"
                  :disabled="this.$route.query.state == 'detail'"
                >
                  <el-option label="仓储科" value="0" />
                  <el-option label="财务科" value="1" />
                </el-select>
              </el-form-item>

              <div style="margin-left:30px;">
                <span>上传头像</span>
              
                <div style="margin-left:70px;">
                   <el-upload
                  class="avatar-uploader"
                  action= 'http://101.36.160.140:21021/api/csc-szls-system-manage/minio/testupload'
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload" 
                  :disabled='this.$route.query.state == "detail"'
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>

                </div>
               
              </div>

              <div class="educational">
                <div>教育学历</div>
                <el-form-item label="第一学历:">
                  <el-select
                    v-model="personnel.pfirstDegree"
                    :disabled="this.$route.query.state == 'detail'"
                  >
                    <el-option label="本科" value="0" />
                    <el-option label="大专" value="1" />
                  </el-select>
                </el-form-item>

                <el-form-item label="毕业院校:">
                  <el-input
                    v-model="personnel.puniversityGraduated"
                    :disabled="this.$route.query.state == 'detail'"
                  />
                </el-form-item>
                <el-form-item label="专业:">
                  <el-input
                    v-model="personnel.pmajor"
                    :disabled="this.$route.query.state =='detail'"
                  />
                </el-form-item>

                <el-form-item label="教育形式:">
                  <el-select
                    v-model="personnel.pformEducationTwo"
                    :disabled="this.$route.query.state == 'detail'"
                  >
                    <el-option label="全日制" value="0" />
                    <el-option label="自考" value="1" />
                  </el-select>
                </el-form-item>

                <el-form-item label="学位:">
                  <el-input
                    v-model="personnel.pAcademicDegree"
                    :disabled="this.$route.query.state == 'detail'"
                  />
                </el-form-item>
                <div class="education2">
                  <el-form-item label="最高学历:">
                    <el-select
                      v-model="personnel.pHighestEducation"
                      :disabled="this.$route.query.state == 'detail'"
                    >
                      <el-option label="本科" value="0" />
                      <el-option label="大专" value="1" />
                    </el-select>
                  </el-form-item>

                  <el-form-item label="毕业院校:">
                    <el-input
                      v-model="personnel.puniversityGraduatedTwo"
                      :disabled="this.$route.query.state == 'detail'"
                    />
                  </el-form-item>
                  <el-form-item label="专业:">
                    <el-input
                      v-model="personnel.pmajorTwo"
                      :disabled="this.$route.query.state == 'detail'"
                    />
                  </el-form-item>

                  <el-form-item label="教育形式:">
                    <el-select
                      v-model="personnel.pformEducationTwo"
                      :disabled="this.$route.query.state == 'detail'"
                    >
                      <el-option label="全日制" value="0" />
                      <el-option label="自考" value="1" />
                    </el-select>
                  </el-form-item>
                </div>
              </div>
              <!-- <span> 专业证书</span> -->
              <div class="major">
                <div>专业证书</div>
                <el-form-item label="专业:">
                  <el-input
                    v-model="personnel.pmajorThree"
                    :disabled="this.$route.query.state == 'detail'"
                  ></el-input>
                </el-form-item>
                <el-form-item label="等级:">
                  <el-input
                    v-model="personnel.pGrade"
                    :disabled="this.$route.query.state == 'detail'"
                  ></el-input>
                </el-form-item>
                <el-form-item label="颁证机构:">
                  <el-input
                    v-model="personnel.pLicensingAgency"
                    :disabled="this.$route.query.state == 'detail'"
                  ></el-input>
                </el-form-item>
                <el-form-item label="颁证年月:">
                  <el-input
                    v-model="personnel.pLicensingTime"
                    :disabled="this.$route.query.state == 'detail'"
                  ></el-input>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>

        <div class="btns">
          <el-button type="success" plain @click="cancel()">取消</el-button>
          <el-button
            v-if="this.$route.query.state == 'new'"
            type="success"
            @click="btnSave('ruleForm')"
          >保存</el-button>
          <el-button
            v-if="this.$route.query.state == 'edit'"
            type="success"
            @click="btnedit('ruleForm')"
          >保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 中转站
import bus from "@/utils/bus"
// 引入接口
import {
  getPersonnelInfo,
  checkPersonnelInfo,
  updatePersonnelInfo,
  addPersonnelInfo,
  getfilebyname
} from "@/api/system/organizationalStructure/personnel"
export default {
  name: "AddPersonnel",

  data() {
   const checkyear = (rule, value, callback) => {
       const age= /^[0-9]*$/
      if (!age.test(value)) {
        callback(new Error('年龄只能为大于等于0的数字'))
      }else{
        callback()
      }
    }
    // 手机号校验
    const checkPhone = (rule, value, callback) => {
      const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
      if (reg.test(value)) {
        callback()
      } else {
        return callback(new Error("请输入正确的手机号"))
      }
    }
    return {
      // 按钮标识(1:查看；2:新增；3:修改)
      type: "",
      // 图片路径
      imageUrl: "",
      title: "",
      id: "",
      // 必填项规则
      rules: {
        // 姓名
        uname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        // 联系方式
        uphone: [{ required: true, validator: checkPhone, trigger: "blur" }],
        // 岗位(职务)
        ppost: [
          { required: true, message: "请输入职位名称", trigger: "change" }
        ],
        // 所属科室
        pdepartment: [
          { required: true, message: "请选择所属科室", trigger: "change" }
        ],
        pworkYears: [{ required: true, validator: checkyear, trigger: "blur" }]
      },
      // 初始化数据
      personnel: {
        // 人员姓名
        uname: "",
        // 性别
        usex: "",
        // 联系方式
        uphone: "",
        // 出生年月
        ubirthday: "",
        // 邮箱
        umail: "",
        // 工作年限
        pworkYears: "",
        // 岗位(职位)
        ppost: "",
        // 政治面貌
        ppoliticalOutlook: "",
        // 入党时间
        ppartyTime: "",
        // 所属科室
        pdepartment: "",
        // 第一学历(教育学历)
        pfirstDegree: "",
        // 毕业院校
        puniversityGraduated: "",
        // 专业
        pmajor: "",
        // 教育形式
        pformEducationTwo: "",
        // 学位
        pAcademicDegree: "",
        // 最高学历(教育学历)
        pHighestEducation: "",
        // 毕业院校
        puniversityGraduatedTwo: "",
        // 专业
        pmajorTwo: "",
        // 教育形式
        pformEducationTwoTwo: "",
        // 学位
        pacademicDegreeTwo: "",
        depotId: "",
        depotName: "",
        pheadPortrait:''
      },
      fileobj: {
        file: "",
        id: ""
      },
      fileurl: ''

    }
  },
  created() {
    this.personnel.depotName = this.$route.query.name
    if (this.$route.query.state == "new") {
    }
    if (this.$route.query.state == "detail") {
    
      checkPersonnelInfo(this.$route.query.pid).then(res => {
        this.personnel = res.data
          getfilebyname(  this.personnel.pheadPortrait).then(res=>{
              this.imageUrl= window.URL.createObjectURL(res)
          })
      })
    }
    if (this.$route.query.state == "edit") {
      checkPersonnelInfo(this.$route.query.pid).then(res => {
        this.personnel = res.data
         getfilebyname(  this.personnel.pheadPortrait).then(res=>{
              this.imageUrl= window.URL.createObjectURL(res)
          })
      })
    }
  },
  mounted() {
    // 对表单进行重置
    this.$nextTick(() => {
      this.$refs["ruleForm"].resetFields()
    })
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.personnel.pheadPortrait = res.data
      this.imageUrl= URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg"
      const isLt2M = file.size / 1024 / 1024 < 10

      // if (!isJPG) {
      //   this.$message.error("上传头像图片只能是 JPG 格式!")
      // }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 10MB!")
      }
      return   isLt2M
      // return isJPG && isLt2M
    },
    // 保存按钮
    btnSave(formName) {
      this.personnel.depotId = this.$route.query.id
      this.$refs[formName].validate(valid => {
        if (valid) {
          addPersonnelInfo(this.personnel).then(res => {
            if (res.code == 200) {
              this.$message.success("新增成功")
              this.$router.push({
                path:
                  "/systemManagement/organizationalStructureManagement/personnelOrganizationalStructureManagement"
              })
            }else {
                this.$message.error("新增失败")
            }
          })
        }
      })
    },
    btnedit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          updatePersonnelInfo(this.personnel).then(res => {
            this.$message.success("新增成功")
            this.$router.push({
              path:
                "/systemManagement/organizationalStructureManagement/personnelOrganizationalStructureManagement"
            })
          })
        }
      })
    },

    // 取消按钮
    cancel() {
      this.$router.push({
        path:
          "/systemManagement/organizationalStructureManagement/personnelOrganizationalStructureManagement"
      })
    },
    detailedit(index, row) {
       this.$router.push({
        name: "AddPersonnels",
        query: {
          id: this.$route.query.id,
          pid: this.$route.query.pid,
          state: "edit",
           name: this.$route.query.name
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.mainContainer {
  padding: 20px;
  .title {
    margin-bottom: 10px;
  }
  .educational {
    margin-top: 20px;
    .education2 {
      margin-top: 20px;
    }
  }
  .company {
    margin-bottom: 20px;
  }
  .el-form--inline .el-form-item {
    width: 30%;
  }
  .btns {
    text-align: right;
  }
}
</style>
<style>
.el-input--medium {
  width: 220px;
}
.el-select > .el-input {
  width: 220px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
