<template>
  <el-drawer
    title="修改MES员工信息"
    :visible.sync="drawer"
    size="50%"
    @open="drawerOpen"
    @close="handleClose"
  >
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-width="80px"
      class="sub-form"
    >
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="员工编号" prop="employeeNo">
            <el-input
              v-model="form.employeeNo"
              clearable
              placeholder="请输入员工编号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="员工名称" prop="employeeName">
            <el-input
              v-model="form.employeeName"
              clearable
              placeholder="请输入员工名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="移动电话" prop="mobilePhone">
            <el-input
              v-model="form.mobilePhone"
              clearable
              placeholder="请输入移动电话"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="固定电话" prop="fixedTelephone">
            <el-input
              v-model="form.fixedTelephone"
              clearable
              placeholder="请输入固定电话"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱地址" prop="email">
            <el-input
              v-model="form.email"
              clearable
              placeholder="请输入邮箱地址"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系地址" prop="contactAddress">
            <el-input
              v-model="form.contactAddress"
              clearable
              placeholder="请输入联系地址"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="个人头像" prop="photograph">
        <UploadAvatar ref="userAvatar" v-model="form.photograph" />
      </el-form-item>
    </el-form>
    <el-divider content-position="left">岗位信息</el-divider>
    <div style="padding: 0 20px">
      <el-table :data="postList" border :max-height="200">
        <el-table-column prop="systemPostId" label="岗位" />
        <el-table-column prop="postName" label="岗位名称" />
        <el-table-column prop="isDisabled" label="有效标记">
          <template slot-scope="scope">
            <dict-tag
              :type="DICT_TYPE.POST_VALIDATE_FLAG"
              :value="scope.row.isDisabled"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="text-center mt20">
      <el-button type="primary" :loading="ensureLoading" @click="submitForm"
        >确定</el-button
      >
      <el-button @click="drawer = false">取消</el-button>
    </div>
  </el-drawer>
</template>

<script>
import UploadAvatar from "./UploadAvatar.vue";
import {
  updateEmployeeMaster,
  getEmployeeMaster,
} from "@/api/mes/employeeMaster/index";

export default {
  components: {
    UploadAvatar,
  },
  props: {},
  data() {
    return {
      // form遮罩层
      formLoading: false,
      // 表单数据
      form: {},
      // 是否打开抽屉
      drawer: false,
      // 岗位信息
      postList: [],
      id: null,
      imageUrl: "",
      fileList: [],
      // 确定遮罩层
      ensureLoading: false,
      // 表单校验
      rules: {
        employeeNo: [
          { required: true, message: "员工编号不能为空", trigger: "blur" },
        ],
        employeeName: [
          { required: true, message: "员工名称不能为空", trigger: "blur" },
        ],
        contactAddress: [
          { required: true, message: "联系地址不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {},
  methods: {
    // 抽屉打开事件
    drawerOpen() {
      getEmployeeMaster(this.id).then((response) => {
        this.form = response.data;
        this.showImgUrl = this.fileList.find(
          (item) => JSON.stringify(item.id) === this.form.photograph
        );
        this.postList =
          response.data?.postList.map((item) => {
            if (item.isDisabled === false) {
              item.isDisabled = "0";
            } else if (item.isDisabled === true) {
              item.isDisabled = "1";
            }
            return item;
          }) || [];
      });
    },
    // 抽屉关闭
    handleClose() {},
    // 确定
    async submitForm() {
      try {
        const photo = this.$refs.userAvatar;
        const validate = await this.$refs["form"].validate();
        if (!validate) return; // 验证不通过直接返回
        // 修改的提交
        if (this.form.id) {
          this.ensureLoading = true;
          this.form.photograph = photo.imgsId.toString();
          this.form.postList = [];
          await updateEmployeeMaster(this.form);
          this.$modal.msgSuccess("修改成功");
          this.drawer = false;
          this.$emit("updateSuccess");
        }
      } catch (error) {
        console.log(error);
      } finally {
        this.ensureLoading = false;
      }
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-drawer__header > :first-child {
  font-size: 14px;
}
.sub-form {
  padding: 0 20px;
}
.sub-footer {
  position: fixed;
  bottom: 80px;
  left: 50%;
  right: 0;
  z-index: 10;
}
</style>
