<template>
  <div class="app-container">
    <el-row :gutter="2">
      <el-col :span="9">
        <el-card style="height: 655px">
          <div>基础信息</div>
          <el-form
            ref="Form"
            :model="user"
            label-width="80px"
            label-position="right"
            :rules="rule1"
          >
            <el-form-item label="姓名" prop="name">
              <el-input v-model="user.name" placeholder="姓名" />
            </el-form-item>
            <el-form-item label="账户" prop="username">
              <el-input v-model="user.username" placeholder="账户" />
            </el-form-item>
            <el-form-item label="所属部门" prop="dept">
              <el-cascader
                ref="cascader"
                :options="orgData"
                v-model="user.dept"
                :show-all-levels="false"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="角色" prop="roles">
              <el-select
                v-model="user.roles"
                multiple
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in roles"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="头像" prop="dept">
              <el-upload
                class="avatar-uploader"
                :action="upUrl"
                accept="image/jpeg, image/gif, image/png, image/bmp"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :headers="upHeaders"
              >
                <img v-if="user.avatar" :src="user.avatar" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
            <el-form-item size="large">
              <el-button type="primary" @click="submitFormuser">保存</el-button>
              <el-button @click="goBack">返回</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="15">
        <el-card style="height: 655px">
          <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-col>
              <el-col :span="8">
                <el-form-item label="学历" prop="qualification">
                  <el-input
                    v-model="formData.qualification"
                    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-col>
              <el-col :span="8">
                <el-form-item label="在职状态" prop="job_state">
                  <el-select
                    v-model="formData.job_state"
                    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-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="出生年月" prop="birthday">
                  <el-date-picker
                    v-model="formData.birthday"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    style="width: 100%"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <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="8">
                <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-col :span="8">
                <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-row>
              <el-col :span="8">
                <el-form-item label="是否显示在岗" prop="job_state">
                  <el-switch
                     v-model="formData.show_atwork"
                   
                  >
                  </el-switch>
                </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-card>
      </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, updateUser } from "@/api/user";
import { genTree } from "@/utils";
import { getOrgAll } from "@/api/org";
import { getRoleAll } from "@/api/role";
import Treeselect from "@riophae/vue-treeselect";
import { getEmployee, updateEmployee } from "@/api/employee";
const defaultForm = {
  user: {},
  show_atwork:true,
};
export default {
  name: "Employeedetail",
  components: { Treeselect },
  props: ["id"],
  data() {
    return {
      upHeaders: upHeaders(),
      upUrl: upUrl(),
      formData: Object.assign({}, defaultForm),
      user: [],
      orgData: [],
      roles: [],
      genderOptions: [
        { value: "男", label: "男" },
        { value: "女", label: "女" },
      ],
      jobstateOptions: [
        { value: 1, label: "在职" },
        { value: 2, label: "离职" },
      ],
      deptvalue: null,
      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();
    this.getOrgAll();
    this.getRoleAll();
  },
  mounted() {},
  methods: {
    getDetail() {
      getEmployee(this.$route.params.id).then((res) => {
        this.formData = res.data;
        getUser(res.data.user).then((Response) => {
          this.user = Response.data;
        });
      });
    },
    getOrgAll() {
      getOrgAll().then((response) => {
        this.orgData = genTree(response.data);
      });
    },
    getRoleAll() {
      getRoleAll({ page: 0 }).then((response) => {
        this.roles = response.data;
      });
    },

    handleAvatarSuccess(res, file) {
      this.user.avatar = res.data.path;
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 10MB!");
      }
      return isLt2M;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 10;
      if (!isLt1M) {
        this.$message.error("上传头像图片大小不能超过 10MB!");
      }
      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);
    },
    submitFormuser() {
      this.$refs["Form"].validate((valid) => {
        if (!valid) return;

        this.deptvalue = this.$refs["cascader"].getCheckedNodes();
        if (this.deptvalue != "") {
          this.user.dept = this.deptvalue[0].value;
        }

        updateUser(this.user.id, this.user).then((res) => {
          this.$message({
            message: "编辑成功",
            type: "success",
          });
        });
      });
    },
  },
};
</script>
