<template>
  <div>
    <el-dialog :title="title" :visible.sync="searchDialog" width="600px" :close-on-click-modal="false">
      <el-form :model="searchForm" ref="form" :rules="rules">
        
        <el-form-item label="人员编码:" label-width="120px" v-if="title != '录入临时工'">
          <div class="searchDiv">
            <el-input size="medium" v-model="searchForm.staffNum" placeholder="输入人员编码" clearable></el-input>
          </div>
        </el-form-item>

        <el-form-item label="姓名:" label-width="120px" prop="staffName">
          <div class="searchDiv">
            <el-input size="medium" v-model="searchForm.staffName" placeholder="输入姓名" clearable></el-input>
          </div>
        </el-form-item>

        <el-form-item label="手机号:" label-width="120px" prop="mobilePhone">
          <div class="searchDiv">
            <el-input  size="medium"  v-model="searchForm.mobilePhone" placeholder="输入手机号" clearable></el-input>
          </div>
        </el-form-item>

        <el-form-item label="身份证:" label-width="120px" prop="identityCard">
          <div class="searchDiv">
            <el-input  size="medium"  v-model="searchForm.identityCard" placeholder="输入身份证" clearable @change="getGenderFromIdCard"></el-input>
          </div>
        </el-form-item>

        <el-form-item label="性别:" label-width="120px" prop="sex">
          <div class="searchDiv">
            <el-radio-group v-model="searchForm.sex" fill="#f78989">
              <el-radio :label="0" size="medium" type="primary">男</el-radio>
              <el-radio :label="1" size="medium" type="primary">女</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>

        <el-form-item label="紧急联系人:" label-width="120px" prop="urgentName">
          <div class="searchDiv">
            <el-input size="medium" v-model="searchForm.urgentName" placeholder="输入紧急联系人" clearable></el-input>
          </div>
        </el-form-item>

        <el-form-item label="紧急联系人电话:" label-width="120px" prop="urgentPhone">
          <div class="searchDiv">
            <el-input  size="medium"  v-model="searchForm.urgentPhone" placeholder="输入紧急联系人电话" clearable></el-input>
          </div>
        </el-form-item>

        <el-form-item label="紧急联系人关系:" label-width="120px" prop="urgentRelationship">
          <div class="searchDiv">
            <div class="searchDiv">
              <el-radio-group v-model="searchForm.urgentRelationship" fill="#f78989">
                <el-radio label="配偶" size="medium" type="primary">配偶</el-radio>
                <el-radio label="父母" size="medium" type="primary">父母</el-radio>
                <el-radio label="子女" size="medium" type="primary">子女</el-radio>
                <el-radio label="兄弟姐妹" size="medium" type="primary">兄弟姐妹</el-radio>
              </el-radio-group>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="状态:" label-width="120px" v-if='title != "录入临时工"' prop="state">
          <div class="searchDiv">
            <el-radio-group v-model="searchForm.state" fill="#f78989">
              <el-radio :label="0" size="medium" type="primary">正常</el-radio>
              <el-radio :label="1" size="medium" type="primary">异常</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>

        <el-form-item label="服务类型:" label-width="120px" :prop="title == '录入临时工'?'job':'type'">
          <div class="searchDiv">
            <el-radio-group v-model="searchForm.job" fill="#f78989" v-if='title == "录入临时工"'>
              <el-radio :label="0" size="medium" type="primary">日结</el-radio>
              <el-radio :label="1" size="medium" type="primary">月结</el-radio>
            </el-radio-group>
            <el-radio-group v-model="searchForm.type" fill="#f78989" v-else>
              <el-radio :label="0" size="medium" type="primary">日结</el-radio>
              <el-radio :label="1" size="medium" type="primary">月结</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>

        <el-form-item label="入场时间:" label-width="120px" prop="ruzhiTime">
          <div class="searchDiv">
            <el-date-picker
              v-model="searchForm.ruzhiTime"
              type="date"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
        </el-form-item>

        <el-form-item label="外包服务商:" label-width="120px" prop="remark">
          <div class="searchDiv">
            <el-input size="medium" v-model="searchForm.remark" placeholder="输入外服务商" clearable></el-input>
          </div>
        </el-form-item>

        <el-form-item label="上传头像:" label-width="120px">
          <el-upload
            style="width:400px"
            action="#"
            v-model="searchForm.fileList"
            :http-request="uploadFile"
            :file-list="fileList"
            list-type="picture"
            ref="upload">
            <el-button size="mini" type="danger ">点击上传人像</el-button>
          </el-upload>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" plain @click="searchDialog = false">取 消</el-button>
        <el-button type="primary" size="mini" :loading="loading" @click="search()">确 定</el-button>
      </span>

    </el-dialog>
  </div>
</template>
<script>
import { addStaffs,updateById } from "../../../api/storeManage.js";
export default {
  data() {
    return {
      fileList:[],
      rules:{
        staffName: [
            { required: true, message: '请输入输入姓名', trigger: 'blur' },
          ],
          mobilePhone: [
            { required: true, message: '请输入输入手机号', trigger: 'blur' },
          ],
          identityCard: [
            { required: true, message: '请输入输入身份证', trigger: 'blur' },
          ],
          sex: [
            { required: true, message: '请选择性别', trigger: 'change' },
          ],
          urgentName: [
            { required: true, message: '请输入紧急联系人', trigger: 'change' },
          ],
          urgentPhone: [
            { required: true, message: '请输入紧急联系人电话', trigger: 'change' },
          ],
          urgentRelationship: [
            { required: true, message: '请选择紧急联系人关系', trigger: 'change' },
          ],
          job:[
            { required: true, message: '请选择服务类型', trigger: 'change' },
          ],
          type:[
            { required: true, message: '请选择服务类型', trigger: 'change' },
          ],
          ruzhiTime:[
            { required: true, message: '请选择入场时间', trigger: 'change' },
          ],
          remark:[
            { required: true, message: '请输入输入外包服务商', trigger: 'blur' },
          ]
      },
      loading:false,
      searchForm:{
        storeId: sessionStorage.getItem("parentId")
      },
      searchDialog:false,
      title:''
    }
  },
  methods: {
    getGenderFromIdCard(idCard) {
			if (idCard.length == 18) {
				const genderDigit = parseInt(idCard.charAt(idCard.length - 2)) % 2;
				if (genderDigit === 0) {
          this.$set(this.searchForm,'sex',1)
				} else {
          this.$set(this.searchForm,'sex',0)
				}
			}else{
        this.$set(this.searchForm,'sex','')
			}
		},
    fileToBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onloadend = function() {
          const base64Data = reader.result;
          resolve(base64Data);
        };
        reader.onerror = function() {
          reject(reader.error);
        };
        reader.readAsDataURL(file);
      });
    },
    uploadFile(file) {
      const isLt500K = file.file.size / 1024 ;
      if (isLt500K>500) {
        this.$message.error('上传的图片大小不能超过 500KB!');
        this.fileList = []
      }else{
        this.fileToBase64(file.file).then(res=>{
        this.searchForm.facesInformation = res
      })
      }
    },
    search(){
      if(!this.searchForm.facesInformation){
        return this.$alert('请上传人像照片', "提示", {
          confirmButtonText: "确定",
          confirmButtonClass: "confirmbtnFalses",
          type: "warning",
          center: true,
          callback: (action) => {},
        });
      }
      this.$refs['form'].validate((valid) => {
        if (valid) {
            this.loading = true
            if(this.title == '录入临时工'){
              this.searchForm.ruzhiTime = this.formatTime(
                this.searchForm.ruzhiTime,
                "YYYY-MM-DD 09:00:00"
              );
              addStaffs(this.searchForm).then(res=>{
                this.loading = false
                  if(res.code == '000000'){
                      this.searchDialog = false
                      this.$message.success({ message: '添加成功' });
                      this.$emit('init')
                  }else{
                      this.$alert(res.message, "提示", {
                        confirmButtonText: "确定",
                        confirmButtonClass: "confirmbtnFalses",
                        type: "warning",
                        center: true,
                        callback: (action) => {},
                      });
                  }
              })
          }else{
            this.searchForm.ruzhiTime = this.formatTime(
              this.searchForm.ruzhiTime,
              "YYYY-MM-DD 09:00:00"
            );
            updateById(this.searchForm).then(res=>{
              this.loading = false
                if(res.code == '000000'){
                  this.searchDialog = false
                  this.$message.success({ message: '修改成功' });
                  this.$emit('init')
                }else{
                  this.$alert(res.message, "提示", {
                    confirmButtonText: "确定",
                    confirmButtonClass: "confirmbtnFalses",
                    type: "warning",
                    center: true,
                    callback: (action) => {},
                  });
                }
            })
          }
        }
      });
    },
    show(title,row){
      Object.assign(this.$data, this.$options.data.call(this));
      this.searchDialog = true
      this.title = title
      if(title == '录入临时工'){
        this.$nextTick(()=>{
          this.fileList = []
          this.$refs['form'].resetFields();
          this.searchForm = { storeId: sessionStorage.getItem("parentId")}
        })
      }else{
        this.searchForm = { ...row }
      }
    }
  },
}
</script>
<style scoped></style>