
<template>
  <el-dialog
    :visible.sync="showDialog"
    :title="title"
    :modal-append-to-body="false"
    style="text-align: left;"
    @close="closeDialog"
    :close-on-click-modal="false"
    width="900px"
  >
    <div class="user-panel" v-loading="loading">
      <el-form
        ref="form"
        :model="formModel"
        :rules="ruleValidate"
        :label-width="'100px'"
        :inline="true"
      >
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="formModel.userName" placeholder="请输入用户名" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="formModel.realName" placeholder="请输入真实姓名" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="formModel.phone" placeholder="请输入联系电话" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="formModel.idCard" placeholder="请输入身份证号" style="width: 300px"></el-input>
        </el-form-item>
        <!-- <el-form-item label="年龄" prop="age">
          <el-input v-model="formModel.age" placeholder="请输入年龄" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="formModel.gender" style="width: 300px">
                <el-radio label="0">男</el-radio>
                <el-radio label="1">女</el-radio>
            </el-radio-group>
        </el-form-item> -->
        <el-form-item label="关联企业" prop="enterpriseId">
          <el-select
            v-model="formModel.enterpriseId"
            placeholder="请选择"
            style="width: 300px"
            clearable
          >
            <el-option
              v-for="item in enterpriseList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="照片" prop="photo">
            <el-upload
                style="width:300px"
                class="avatar-uploader"
                name="photoFile"
                :action="uploadUrl"
                :headers="headers"
                :data="uploadData"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="fileUrl" :src="fileUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="submitting"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import Constant from "@/constant";
import { getToken } from "@/utils/auth"; // get token from cookie
import personInfoApi from "@/api/base/personInfo";

export default {
  props: ["businessKey", "title"],
  data() {
    return {
        showPwd: true,
        ruleValidate: {
            userName: [
            { required: true, message: "用户名不能为空", trigger: "blur" },
            ],
            realName: [
            { required: true, message: "真实名称不能为空", trigger: "blur" },
            ],
            phone: [
            { required: true, message: "联系电话不能为空", trigger: "blur" },
            ],
            idCard: [
            { required: true, message: "身份证号不能为空", trigger: "blur" },
            ],
            age: [
            { required: true, message: "年龄不能为空", trigger: "blur" },
            ],
            gender: [
            { required: true, message: "性别不能为空", trigger: "blur" },
            ],
        },
        roleList: [],
        formModel: {},
        showDialog: true,
        loading: false,
        submitting: false,
        enterpriseList:[],
        //上传地址
        uploadUrl: Constant.serverUrl + "/uploadPicture",
        uploadData: {
            subFolder: "emporary-workers",
        },
        fileUrl: "",
        headers: {
            Authorization: getToken(),
        },
    };
  },
  created() {
  },
  methods: {
    closeDialog() {
      this.$emit("close", false);
    },
    handleSubmit() {
      var self = this;

      this.$refs["form"].validate((valid) => {
        if (valid) {
          (function () {
            var id = self.formModel.id;

            if (id == null || id.length == 0) {
              return personInfoApi.add(self.formModel);
            } else {
              return personInfoApi.update(self.formModel);
            }
          })().then(function (response) {
            var jsonData = response.data;

            if (jsonData.result) {
              self.$message({
                message: "保存成功!",
                type: "success",
              });

              self.$emit("close", true);
            } else {
              self.$message({
                message: jsonData.message + "",
                type: "warning",
              });

              self.$emit("close", false);
            }
          });
        }
      });
    },
    handleAvatarSuccess(res, file) {
        var self = this;
        self.formModel.photo = res.data;

        self.fileUrl =
          res.data + "?x-oss-process=image/resize,m_lfit,h_300,w_300";
    },
    beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
    }
  },
  async mounted() {
    var self = this;
    self.loading = true;

    (function () {
      if (self.businessKey != null && self.businessKey.length > 0) {
        return personInfoApi.edit(self.businessKey);
      } else {
        return personInfoApi.create();
      }
    })()
      .then((response) => {
        var jsonData = response.data;

        if (jsonData.result) {
            self.formModel = jsonData.data;

            let photo = self.formModel.photo;
            if (photo != null) {
                self.fileUrl = photo 
            }

            self.showModal = true;
        } else {
          self.$message.error(jsonData.message + "");
        }

        self.loading = false;
      })
      .catch((error) => {
        self.$message.error(error + "");
        self.loading = false;
      });
  },
  components: {
  },
};
</script>
<style scoped>
.user-panel {
  margin: 10px auto;
}
.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>