<template>
  <div class="app-container">
    <el-row>
      <el-col :span="4">
        <div>基础信息</div>
        <el-form label-width="60px">
          <el-form-item label="姓名">{{userDate.name}}</el-form-item>
          <el-form-item label="账户">{{userDate.username}}</el-form-item>
           
          <el-form-item label="角色">
            <el-tag
              v-for="(item, index) in userDate.roles_name"
              :key="index"
              style="margin:2px"
            >{{item}}</el-tag>
          </el-form-item>
          <el-form-item label="手机">{{userDate.phone}}</el-form-item>
        </el-form>
      </el-col>
      <el-col :span="20">
        <div>详细信息</div>
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="人员编号" prop="number">
                <el-input
                  v-model="formData.number"
                  placeholder="请输入编号"
                  clearable
                  :style="{width: '100%'}"
                ></el-input>
              </el-form-item>
               <el-form-item label="学历" prop="academic">
                <el-input
                  v-model="formData.academic"
                  placeholder="请输入学历"
                  clearable
                  :style="{width: '100%'}"
                ></el-input>
              </el-form-item>
              
            </el-col>
           
           
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="性别" prop="gender">
                <el-select
                  v-model="formData.gender"
                  placeholder="请选择性别"
                  clearable
                  :style="{width: '100%'}"
                >
                  <el-option
                    v-for="item in genderOptions"
                    :key="item.key"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              
               <el-form-item label="在职状态" prop="jobstate">
                <el-select
                  v-model="formData.jobstate"
                  placeholder="请选择在职状态"
                  clearable
                  :style="{width: '100%'}"
                >
                  <el-option
                    v-for="item in jobstateOptions"
                    :key="item.key"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
               <el-form-item label="出生年月" prop="birthdate">
          <el-date-picker
            v-model="formData.birthdate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            style="width:100%"
          >
          </el-date-picker>
        </el-form-item>
            </el-col>
           
          </el-row>
          <el-row>
          
            <el-col :span="8">
              <el-form-item label="身份证号" prop="ID_number">
                <el-input
                  v-model="formData.ID_number"
                  placeholder="请输入身份证号"
                  clearable
                  :style="{width: '100%'}"
                ></el-input>
              </el-form-item>
            </el-col>
          
          </el-row>
         
         
          <el-row>
            <el-col :span="6">
              <el-form-item label="证件照" prop="photo">
                <el-upload
                  :action="upUrl"
                  accept=".png, .jpeg, .jpg"
                  :headers="upHeaders"
                  class="avatar-uploader"
                  :show-file-list="false"
                  :on-success="handleSuccess"
                  :before-upload="beforeUpload"
                >
                  <img v-if="formData.photo" :src="formData.photo" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
             </el-row>
              <el-row>
            <el-col :span="6">
              <el-form-item label="签名图片" prop="signature">
                <el-upload :action="upUrl" :headers="upHeaders" accept=".png, .jpeg, .jpg" :before-upload="beforeUpload" class="avatar-uploader"
                  :show-file-list="false"
                  :on-success="handleSuccess2"><img v-if="formData.signature" :src="formData.signature" class="avatar2" />
                  <i v-else class="el-icon-plus avatar-uploader-icon2"></i></el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm" >保存</el-button>
            <el-button @click="goBack">返回</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<style>
.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: 110px;
  height: 140px;
  line-height: 140px;
  text-align: center;
}
.avatar {
  width: 110px;
  height: 140px;
  display: block;
}
.avatar-uploader-icon2 {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 90px;
  line-height: 90px;
  text-align: center;
}
.avatar2 {
  width: 150px;
  height: 90px;
  display: block;
}
</style>
<script>

import { upUrl, upHeaders } from "@/api/file"
import { genSignature } from "@/api/util"
import { getUser } from "@/api/user";
import { getEmployee, updateEmployee } from "@/api/employee";
const defaultForm = {
  user:{},
};
export default {
  name: "Employeedetail",
  components: {},
  props: ["id"],
  data() {
    return {
      upHeaders: upHeaders(),
      upUrl: upUrl(),
      formData: Object.assign({}, defaultForm),
      userDate:[],
      genderOptions: [
        { value: "男", label: "男" },
        { value: "女", label: "女" }
      ],
      jobstateOptions:[
        { value: 1, label: "在职" },
        { value: 2, label: "离职" }
      ],
      rules: {
       
        ID_number: [
          {
            pattern: /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
            message: "身份证格式错误",
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {},
  watch: {},
  created() {
    this.formData.id = this.$route.params.id;
    this.getDetail();
    
  },
  mounted() {},
  methods: {
    getDetail() {
      getEmployee(this.$route.params.id).then(res => {
        this.formData = res.data;
         getUser(res.data.user).then(Response => {
         
          this.userDate=Response.data;
        
        })
      });
    },
   
    
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!isLt1M) {
        this.$message.error("上传头像图片大小不能超过 1MB!");
      }
      return isLt1M;
    },
    handleSuccess(res, file) {
      this.formData.photo = res.data.path;
    },
    handleSuccess2(res, file) {
      const loading = this.$loading({text:'上传成功,正在转换..'})
      genSignature({path:res.data.path}).then(res=>{
        this.formData.signature = res.data.path
        loading.close()
      }).catch(error=>{loading.close()})
      // this.formData.photo = res.data.path;
    },
   
    submitForm() {
      this.$refs["elForm"].validate(valid => {
        if (!valid) return;
        // TODO 提交表单
        var data = this.formData;
      
        updateEmployee(this.$route.params.id, data).then(res => {
          this.$message.success("成功");
        });
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>