<template>
  <div v-loading="listLoading">
    <div style="padding:20px">
      <div class="title_super">
        <div>{{ this.$parent.USER_ID == '' ? '新增用户' : '查看用户' }}</div>
      </div>
      <el-form ref="form" :rules="rules" :model="form" label-width="210px">
        <!--第一行-->
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="dialogType !== 'saveUser'" label="已上传图片">
              <div >
                <img :src="config.fileUrl + form.PHOTO" width="100" height="100">
              </div>
            </el-form-item>
            <el-form-item v-if="this.$parent.USER_ID == ''" label="照片" prop="PHOTO" >
              <el-upload
                ref="photoUpload"
                :file-list="form.PHOTO"
                :multiple="false"
                :limit="1"
                :class="{hide:hideUpload}"
                :auto-upload="false"
                :on-remove="handleRemove"
                :on-change="handleChangeIMG"
                action="#"
                accept=".jpg,.jpeg,.png"
                list-type="picture-card">
                <i class="el-icon-plus" />
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="NAME" class="input-width">
              <el-input :span="5" v-model="form.NAME" placeholder="这里输入姓名..."/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户名" prop="USERNAME" class="input-width">
              <el-input v-model="form.USERNAME" :disabled="dialogType == 'editUser'" placeholder="这里输入用户名..." />
            </el-form-item>
          </el-col>
        </el-row>
        <re-row>
          <el-form-item label="联系电话" prop="PHONE" style="display:none">
            <el-input v-model="form.PHONE" disabled placeholder="这里输入联系电话..."/>
          </el-form-item>
        </re-row>
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="this.$parent.USER_ID == ''" label="部门" prop="DEPARTMENT_ID" label-width="">
              <SelectTree
                ref="deptTree"
                :clearable="false"
                :options="treeData"
                :props="defaultProps"
                v-model="form.DEPARTMENT_ID"
                placeholder="请选择部门"
                style="width: 290px"
              />
            </el-form-item>
            <el-form-item v-else label="部门" prop="DEPARTMENT_ID">
              <el-input v-model="form.DEPARTMENT_NAME" :disabled="dialogType == 'editUser'" placeholder="请选择部门..." />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="身份证号" prop="CARD_ID" class="input-width">
              <el-input v-model="form.CARD_ID" placeholder="这里输入身份证号..."/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证照片" class="input-width" prop="userCardFile">
              <el-upload
                ref="userCardUpload"
                :file-list="form.userCardFile"
                :multiple="false"
                :limit="2"
                :class="{hide:userCardIDUpload}"
                :auto-upload="false"
                :on-remove="handleUserCardPhoneRemove"
                :on-change="handleUserCardPhoneZhengshu"
                action="#"
                accept=".jpg,.jpeg,.png"
                list-type="picture-card">
                <i class="el-icon-plus" />
              </el-upload>
              <div style="font-size: 10px; color: red">温馨提示：用户要上传身份证正反面（身份证照片数量是2张）, 才能进行人员培训</div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="民族" prop="NATIONALITY">
              <el-select v-model="form.NATIONALITY" placeholder="请选择" style="width: 290px">
                <el-option
                  v-for="item in minzuList"
                  :key="item.DICTIONARIES_ID"
                  :label="item.NAME"
                  :value="item.BIANMA"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" >
              <el-radio-group v-model="form.SEX" disabled>
                <el-radio v-model="form.SEX" label="1">女</el-radio>
                <el-radio v-model="form.SEX" label="0">男</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="出生年月" prop="DATE_OF_BIRTH">
              <el-date-picker
                v-model="form.DATE_OF_BIRTH"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                disabled
                style="width: 290px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄" prop="AGE" class="input-width">
              <el-input v-model="form.AGE" type="number" placeholder="这里输入年龄..." disabled/>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="户口所在地" prop="HKLOCAL" class="input-width">
              <el-input v-model="form.HKLOCAL" placeholder="这里输入户口所在地..."/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="现住址" prop="ADDRESS" class="input-width">
              <el-input v-model="form.ADDRESS" placeholder="这里输入现住址..."/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="文化程度" prop="DEGREE_OF_EDUCATION">
              <el-select v-model="form.DEGREE_OF_EDUCATION" placeholder="请选择" style="width: 290px">
                <el-option
                  v-for="item in wenhuachengduList"
                  :key="item.DICTIONARIES_ID"
                  :label="item.NAME"
                  :value="item.BIANMA"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="婚姻状况" prop="MARITALSTATUS" class="input-width">
              <el-radio-group v-model="form.MARITALSTATUS" >
                <el-radio v-model="form.MARITALSTATUS" label="1">已婚</el-radio>
                <el-radio v-model="form.MARITALSTATUS" label="0">未婚</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="政治面貌" prop="POLITICAL_STATUS">
              <el-select v-model="form.POLITICAL_STATUS" placeholder="请选择" style="width: 290px">
                <el-option
                  v-for="item in zhengzhimianmaoList"
                  :key="item.DICTIONARIES_ID"
                  :label="item.NAME"
                  :value="item.BIANMA"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-show="form.POLITICAL_STATUS === 'zhonggongdangyuan'" :span="12">
            <el-form-item label="入党时间" prop="POLITICAL_TIME">
              <el-date-picker
                v-model="form.POLITICAL_TIME"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                style="width: 290px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否缴纳社保" prop="IS_SOCIAL">
              <el-radio-group v-model="form.IS_SOCIAL" @change="form.contractFileList = []">
                <el-radio v-model="form.IS_SOCIAL" label="1">是</el-radio>
                <el-radio v-model="form.IS_SOCIAL" label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.IS_SOCIAL === '1'" label="社会保障号码" class="input-width" prop="SOCIAL_NUMBER">
              <el-input v-model="form.SOCIAL_NUMBER" placeholder="这里输入社会保障号码..." @keyup.native="number"/>
            </el-form-item>
            <el-form-item v-if="form.IS_SOCIAL === '1'" label="社保卡照片" prop="PHOTO" >
              <el-upload
                ref="zhenbaoUpload"
                :file-list="form.zhebaoZhaopian"
                :multiple="false"
                :limit="2"
                :class="{hide:zhebaoUpload}"
                :auto-upload="false"
                :on-remove="handleZhebaoRemove"
                :on-change="handleZhebaoChangeIMG"
                action="#"
                accept=".jpg,.jpeg,.png"
                list-type="picture-card">
                <i class="el-icon-plus" />
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否缴纳保险" prop="IS_BF">
              <el-radio-group v-model="form.IS_BF">
                <el-radio v-model="form.IS_BF" label="1">是</el-radio>
                <el-radio v-model="form.IS_BF" label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="是否签订劳动合同" prop="IS_SIGN_LABOR">
                <el-radio-group v-model="form.IS_SIGN_LABOR" @change="form.contractFileList = []">
                  <el-radio v-model="form.IS_SIGN_LABOR" label="1">是</el-radio>
                  <el-radio v-model="form.IS_SIGN_LABOR" label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="form.IS_SIGN_LABOR === '1'" label="合同图片" prop="contractFileList">
                <el-upload
                  ref="contractFileList"
                  :file-list="form.contractFileList"
                  :limit="4"
                  :class="{hide:hideContractUpload}"
                  :auto-upload="false"
                  :on-remove="handleContractFileRemove"
                  :on-change="handleContractFileChange"
                  multiple
                  action="#"
                  accept=".jpg,.jpeg,.png"
                  list-type="picture-card">
                  <i class="el-icon-plus" />
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否缴纳商业保险" prop="ISPAY" @change="form.insuranceFileList = []">
                <el-radio-group v-model="form.ISPAY">
                  <el-radio v-model="form.ISPAY" label="1">是</el-radio>
                  <el-radio v-model="form.ISPAY" label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="form.ISPAY === '1'" label="商业保险单号" prop="ISPAY_NUMBER">
                <el-input v-model="form.ISPAY_NUMBER" placeholder="这里输入商业保险单号..."/>
              </el-form-item>
              <el-form-item v-if="form.ISPAY === '1'" label="保险图片" prop="insuranceFileList">
                <el-upload
                  ref="insuranceFileList"
                  :file-list="form.insuranceFileList"
                  :limit="4"
                  :class="{hide:hideInsuranceUpload}"
                  :auto-upload="false"
                  :on-remove="handleInsuranceFileRemove"
                  :on-change="handleInsuranceFileChange"
                  multiple
                  action="#"
                  accept=".jpg,.jpeg,.png"
                  list-type="picture-card">
                  <i class="el-icon-plus" />
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="是否按期缴纳工伤保险" prop="IS_INJURIES_PAY" style="float:left">
                <el-radio-group v-model="form.IS_INJURIES_PAY">
                  <el-radio v-model="form.IS_INJURIES_PAY" label="1">是</el-radio>
                  <el-radio v-model="form.IS_INJURIES_PAY" label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="form.IS_INJURIES_PAY ==='1'" label="工伤保险有效期" prop="IS_INJURIES_PAY_TIME" style="float:left">
                <el-date-picker
                  v-model="form.IS_INJURIES_PAY_TIME"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  style="width: 290px"
                />
              </el-form-item>
              <el-form-item v-if="form.IS_INJURIES_PAY ==='1'" label="上传工伤保险凭证" style="float:left" prop="gongshangbaoxianFile">
                <el-upload
                  ref="gongshangFileList"
                  :file-list="form.gongshangbaoxianFile"
                  :limit="4"
                  :class="{hide:hidegongshangUpload}"
                  :auto-upload="false"
                  :on-remove="handleGongshangFileRemove"
                  :on-change="handleGongshangFileChange"
                  multiple
                  action="#"
                  accept=".jpg,.jpeg,.png"
                  list-type="picture-card">
                  <i class="el-icon-plus" />
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="岗位名称(工种)" prop="POST_ID" class="input-width">
                <el-input v-model="form.POST_ID" placeholder="这里输入岗位名称(工种)..."/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否参加三级安全培训" prop="IS_LEVEL_THREE" >
                <el-radio-group v-model="form.IS_LEVEL_THREE">
                  <el-radio v-model="form.IS_LEVEL_THREE" label="1">是</el-radio>
                  <el-radio v-model="form.IS_LEVEL_THREE" label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="form.IS_LEVEL_THREE === '1'" label="三级安全培训照片" prop="photosOfLevel" >
                <el-upload
                  ref="photosOfLevel"
                  :file-list="form.photosOfLevel"
                  :multiple="false"
                  :limit="5"
                  :class="{hide:photosOfLevel}"
                  :auto-upload="false"
                  :on-remove="handleLevelPhotoRemove"
                  :on-change="handleLevelPhotoChangeIMG"
                  action="#"
                  accept=".jpg,.jpeg,.png"
                  list-type="picture-card">
                  <i class="el-icon-plus" />
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否特殊工种" prop="IS_SPECIAL_JOB">
                <el-radio-group v-model="form.IS_SPECIAL_JOB" disabled>
                  <el-radio v-model="form.IS_SPECIAL_JOB" label="1">是</el-radio>
                  <el-radio v-model="form.IS_SPECIAL_JOB" label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-alert
                :closable="false"
                title="新增完成后请提示该用户去相关方app端完善特种证书信息"
                type="error"
                class="alertClass"
              />
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否流动人员" prop="ISFLOW" style="float:left">
                <el-radio-group v-model="form.ISFLOW">
                  <el-radio v-model="form.ISFLOW" label="1">是</el-radio>
                  <el-radio v-model="form.ISFLOW" label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <!--第八行-->
            <el-col :span="12"/>
            <el-col :span="12"/>
          </el-row>
        </el-row>
      </el-form>
    </div>
    <div class="ui-height"/>
    <div class="ui-foot">
      <el-button v-show="dialogType == 'saveUser'" :loading="buttonLoading" type="success" @click="confirm">保 存</el-button>
      <el-button plain type="info" @click="goBack">返 回</el-button>
    </div>
  </div>

</template>

<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
import SelectTree from '@/components/SelectTree'
import { upload } from '@/utils/upload'

export default {
  components: { Pagination, SelectTree },
  directives: { waves },
  data() {
    var hasContract = (rule, value, callback) => {
      if (this.form.IS_SIGN_LABOR == '0') {
        callback()
      } else {
        if (this.form.contractFileList.length == 0) callback(new Error('劳动合同附件不能为空'))
      }
      callback()
    }
    // 三级培训
    var hasLevelThree = (rule, value, callback) => {
      if (this.form.IS_LEVEL_THREE == '0') {
        this.form.photosOfLevel = []
        callback()
      } else {
        if (this.form.photosOfLevel.length == 0) callback(new Error('三级培训不为空'))
      }
      callback()
    }
    var hasCARD = (rule, value, callback) => {
      requestFN(
        '/user/hasUserCARD',
        {
          CARD_ID: value
        }
      ).then((data) => {
        if (data.pd) {
          callback(new Error('身份证号已存在'))
        }
        callback()
        // 获取出生年月
        this.form.DATE_OF_BIRTH = value.substring(6, 10) + '-' + value.substring(10, 12) + '-' + value.substring(12, 14)
        // 获取性别
        this.form.SEX = (parseInt(value.substr(16, 1)) % 2 == 1 ? '0' : '1')
        // 获取年龄
        {
          var ageDate = new Date()
          var month = ageDate.getMonth() + 1
          var day = ageDate.getDate()
          var age = ageDate.getFullYear() - value.substring(6, 10) - 1
          if (value.substring(10, 12) < month || value.substring(10, 12) == month && value.substring(12, 14) <= day) {
            age++
          }
          if (age <= 0) {
            age = 1
          }
          this.form.AGE = age
        }
      }).catch((e) => {
        callback()
      })
    }
    var hasName = (rule, value, callback) => {
      requestFN(
        '/user/hasUserName',
        {
          USERNAME: value

        }
      ).then((data) => {
        if (data.pd) {
          callback(new Error('用户名已存在'))
        }
        callback()
      }).catch((e) => {
        callback()
      })
      // 商业保险 0否1是
    }
    var hasInsurance = (rule, value, callback) => {
      if (this.form.ISPAY == '0') {
        this.form.ISPAY_NUMBER = ''
        callback()
      } else {
        if (this.form.ISPAY_NUMBER == '') callback(new Error('商业保险单号不为空'))
      }
      callback()
    }
    // 是否缴纳社保
    var hasSOCIAL = (rule, value, callback) => {
      if (this.form.IS_SOCIAL == '0') {
        this.form.SOCIAL_NUMBER = ''
        callback()
      } else {
        if (this.form.SOCIAL_NUMBER == '') callback(new Error('社会保障号码不为空'))
      }
      callback()
    }
    // 是否缴纳社保
    var hasSOCIALPHTOT = (rule, value, callback) => {
      if (this.form.IS_SOCIAL == '0') {
        this.form.zhebaoZhaopian = []
        callback()
      } else {
        if (this.form.zhebaoZhaopian.length == 0) callback(new Error('社会卡照片不为空'))
      }
      callback()
    }
    // 工伤保险 0否1是
    var hasWorkInsurance = (rule, value, callback) => {
      if (this.form.IS_INJURIES_PAY == '1') {
        callback()
      } else {
        if (this.form.IS_INJURIES_PAY_TIME == '') callback(new Error('请选择工伤保险有效期'))
      }
      callback()
    }
    // 安全告知培训合格日期
    var hasSafety = (rule, value, callback) => {
      if (this.form.IS_SAFETY_TELL == '0') {
        this.form.IS_SAFETY_TIME = ''
        callback()
      } else {
        if (this.form.IS_SAFETY_TIME == '') callback(new Error('请选择安全告知培训合格日期'))
      }
      callback()
    }
    // 入党时间
    var isCommunist = (rule, value, callback) => {
      console.log(12333)
      if (this.form.POLITICAL_STATUS != 'zhonggongdangyuan') {
        this.form.POLITICAL_TIME = ''
        callback()
      } else {
        if (this.form.POLITICAL_TIME == '') callback(new Error('请选择入党时间'))
      }
      callback()
    }
    return {
      buttonLoading: false,
      DEPARTMENT_NAME: '',
      dayTime: [],
      LevelsData: [],
      dialogFormEditDate: false,
      dialogFormLicenseInformation: false,
      listLoading: false,
      treeLoading: false,
      hideUpload: false,
      photosOfLevel: false, // 三级教育培训照片
      hideInsuranceUpload: false,
      hideContractUpload: false,
      hidegongshangUpload: false,

      add: false,
      del: false,
      edit: false,
      KEYWORDS: '',
      selectPeriod: [],
      tzzyry: '',
      periodList: [],
      DEPARTMENT_ID: '',
      varList: [],
      multipleSelectionAll: [], // 所有选中的数据包含跨页数据
      multipleSelection: [], // 当前页选中的数据
      dialogFormEdit: false,
      dialogType: 'saveUser',
      disabledLCSelect: false,
      displayLCSelect: 'display: block',
      disabledLCInput: true,
      displayLCInput: 'display: none',
      LearnerCategoryList: [],
      certificatenamearr: [
        { value: '主要负责人证', label: '主要负责人证' },
        { value: '安全管理人员证', label: '安全管理人员证' },
        { value: '特种作业人员证', label: '特种作业人员证' }
      ],
      sexList: [
        { ID: '0', NAME: '男' },
        { ID: '1', NAME: '女' }
      ],
      rules: {
        NAME: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        NATIONALITY: [{ required: false, message: '民族不能为空', trigger: 'blur' }],
        IS_BF: [{ required: true, message: '请选择是否缴纳保险', trigger: 'blur' }],
        IS_SOCIAL: [{ required: true, message: '请选择是否缴纳社保', trigger: 'blur' }],
        POLITICAL_STATUS: [{ required: true, message: '请选择政治面貌', trigger: 'blur' }],
        POLITICAL_TIME: [{ required: true, validator: isCommunist, message: '请选择入党时间', trigger: 'blur' }],
        USERNAME: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[0-9])\d{8}$/,
            message: '用户名为手机号，请正确输入'
          },
          { validator: hasName, trigger: 'blur' }
        ],
        contractFileList: [
          { type: 'array', required: false, message: '请上传合同图片', trigger: 'blur', validator: hasContract }
        ],
        insuranceFileList: [{ required: false, message: '请上传合保险图片', trigger: 'blur' }],
        userCardFile: [{ type: 'array', required: true, message: '请上传身份证图片', trigger: 'blur' }],
        zhebaoZhaopian: [{ type: 'array', required: false, message: '请上传社保卡照片', trigger: 'blur' }],
        photosOfLevel: [{ type: 'array', required: true, message: '请上传三级教育照片', trigger: 'blur', validator: hasLevelThree }],
        gongshangbaoxianFile: [{ type: 'array', required: false, message: '请上传工伤保险凭证', trigger: 'blur' }],
        SOCIAL_NUMBER: [{ required: true, message: '社会保障号码不能为空', trigger: 'blur' },
          { validator: hasSOCIAL }],
        ISPAY: [{ required: true, message: '请选择是否缴纳商业保险', trigger: 'blur' }],
        ISPAY_NUMBER: [{ required: true, message: '请输入商业保险单号', trigger: 'blur' },
          { validator: hasInsurance }],
        ISFLOW: [{ required: true, message: '请选择是否流动人员', trigger: 'blur' }],
        IS_LEVEL_THREE: [{ required: true, message: '请选择是否参加三级安全培训', trigger: 'blur' }],
        IS_BODY_ADAPT: [{ required: false, message: '请选择身体状况是否适应本岗位工作', trigger: 'blur' }],
        IS_SAFETY_TELL: [{ required: true, message: '请选择是否开展入场安全告知', trigger: 'blur' }],
        IS_SAFETY_TIME: [{ required: true, message: '请选择安全告知培训合格日期', trigger: 'blur' }, { validator: hasSafety, trigger: 'change' }],
        IS_SPECIAL_JOB: [{ required: true, message: '请选择是否特种工种', trigger: 'blur' }],
        IS_INJURIES_PAY: [{ required: false, message: '请选择是否按期缴纳工伤保险', trigger: 'blur' }],
        IS_INJURIES_PAY_TIME: [{ required: false, message: '请选择工伤保险有效期', trigger: 'blur' }, { validator: hasWorkInsurance }],
        IS_SIGN_LABOR: [{ required: false, message: '请选择是否签订劳动合同', trigger: 'blur' }],
        HKLOCAL: [{ required: false, message: '请输入户口所在地', trigger: 'blur' }],
        ADDRESS: [{ required: false, message: '请输入现住址', trigger: 'blur' }],
        DEGREE_OF_EDUCATION: [{ required: true, message: '请选择文化程度', trigger: 'blur' }],
        MARITALSTATUS: [{ required: true, message: '婚姻状况必选', trigger: 'blur' }],
        CORP_START_DATE: [{ required: false, message: '请选择日期', trigger: 'blur' }],
        POST_ID: [{ required: true, message: '请输入岗位名称(工种)', trigger: 'blur' }],
        ENTRY_DATE: [{ required: false, message: '请选择日期', trigger: 'blur' }],
        PHONE: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[0-9])\d{8}$/,
            message: '请输入正确的手机号码'
          }],
        ROLE_ID: [{ required: true, message: '请选择角色', trigger: 'change' }],
        DEPARTMENT_ID: [{ required: true, message: '请选择部门', trigger: 'change' }],
        CARD_ID: [{ required: true, message: '身份证号不能为空', trigger: 'blur' },
          {
            pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: '请输入正确的身份证号'
          },
          { validator: hasCARD, trigger: 'blur' }
        ],
        AGE: [{ required: true, message: '年龄不能为空', trigger: 'blur' },
          {
            pattern: /^\d{2}$/,
            message: '请输入两位数年龄'
          }
        ],
        PHOTO: [
          {
            type: 'array',
            required: true,
            message: '请上传照片',
            trigger: 'blur'
          }, { validator: hasSOCIALPHTOT }
        ],
        userImg: [
          {
            type: 'array',
            required: true,
            message: '请上传照片',
            trigger: 'blur'
          }
        ]
      },
      defaultProps: {
        children: 'nodes',
        label: 'name',
        value: 'id'
      },
      treeData: [],
      userCardIDUpload: false,
      zhebaoUpload: false,
      form: {
        userCardFile: [],
        photosOfLevel: [],
        POLITICAL_TIME: '',
        IS_BF: '1',
        zhebaoZhaopian: [],
        gongshangbaoxianFile: [],
        contractFileList: [], // 合同文件
        insuranceFileList: [], // 保险文件
        CARD_ID: '', // 身份证号
        DEPARTMENT_NAME: '', // 部门名称
        CORPINFO_ID: '', // 企业id
        HKLOCAL: '', // 户口所在地
        AGE: '',
        SEX: '',
        ADDRESS: '',
        PHONE: '',
        IS_SOCIAL: '1', // 是否 缴纳社保
        SOCIAL_NUMBER: '', // 社会保障号码
        IS_LEVEL_THREE: '1', // 是否参加三级安全培训
        IS_SPECIAL_JOB: '0', // 是否特殊工种
        ISFLOW: '', //
        PHOTO: [],
        IS_INJURIES_PAY: '',
        CORP_START_DATE: '',
        IS_BODY_ADAPT: '',
        IS_SAFETY_TELL: '',
        ISPAY: '',
        IS_SIGN_LABOR: '',
        IS_HAZARDCONFIRMER: 0,
        INFORPOST: '',
        INFORTITLE: '',
        INFORTITLEValue: '',
        infortitleType: 'select',
        INFORWORK: '',
        INFORWORKValue: '',
        inforworkType: 'select',
        ROLE_ID: [],
        ROLE_NAME: [],
        DEPARTMENT_ID: '',
        POST_ID: '',
        PERSON_WORK_TYPE: '', // 工种
        USERNAME: '',
        NAME: '',
        EMAIL: '',
        LEARNERCATEGORY: '',
        LEARNERCATEGORYSTATUS: 'select',
        SORT: '',
        JCR: '',
        BZ: '',
        PERSON_TYPE: '',
        PASSWORD: 'Aa@123456789',
        USERAVATARPREFIX: '',
        USERAVATARURL: '',
        USERAVATARURL_CONVERT: '',
        SHIFTDUTYONE: '',
        SHIFTDUTYTWO: '',
        DURATION: '',
        WORKSTATUS: '',
        WORKPERIOD: '',
        ISSTUDENT: false,
        NATION: '', // 民族

        POLITICAL_OUTLOOK: '', // 政治面貌
        DATE_OF_BIRTH: '', // 出生年月

        DEGREE_OF_EDUCATION: '', // 文化程度
        POST: '', // 职务
        TYPE_OF_WORK: '', // 工种
        ENTRY_DATE: '', // 入职日期
        WORK_DATE: '', // 参加工作日期
        INCUMBENCY: '', // 在职情况
        CERTIFICATE_INFORMATION: '', // 证书信息
        TITLE: '', // 职称
        DUTIESValue: '',
        DUTIES: '',
        inforpostType: 'select',
        INFORPOSTValue: '',
        letDutiesType: 'select',
        letPostType: 'select',
        letTitleValue: '',
        letTitleId: '',
        letTitleType: 'select',
        letTypeOfWorkValue: '',
        letTypeOfWorkId: '',
        letTypeOfWorkType: 'select',
        USER_ID_CARD: '',
        PERSONNEL_TYPE: '',
        userCerList: [],
        NATIONALITY: '',
        MARITALSTATUS: '0'
      },
      wenhuachengduList: [], // 文化程度 d7d80f08d73a4accbccf4fd3d8d1d867

      certificate_files: [],
      config: config,
      pdrelated: {},

      dialogImageUrl: [],
      dialogVisible: false,
      SchedulingFrom: false,
      roleList: [],
      roleList1: [],
      roleList_z: [],
      role1List: [],
      postList: [],
      workTypeList: [], // 工种
      oldPostId: '', // 原岗位ID（用于判断岗位是否变化）
      oldDepartId: '', // 原部门ID（用于判断部门是否变化）
      dialogFormDaoru: false,
      daoruFrom: {
        FFILE: '',
        FFILEName: ''
      },
      PARENTID: '0',
      shiftDutyListOne: [],
      shiftDutyListTwo: [],
      queryShiftOneList: [],
      queryShiftTwoList: [],
      datePage: 0,
      workDateList: [],
      USER_ID: '',
      minzuList: [],
      zhengzhimianmaoList: []
    }
  },
  watch: {
    'form.USERNAME': {
      handler: function() {
        if (this.form.USERNAME) {
          this.form.PHONE = this.form.USERNAME
        }
      }
    },
    'form.photosOfLevel': {
      handler: function() {
        if (this.form.photosOfLevel.length >= 4) {
          this.photosOfLevel = true
        } else {
          this.photosOfLevel = false
        }
      }
    }
  },
  async created() {
    await this.getTreeList()
    this.hasButton()
    this.getDict()
    // this.getPersonnelType()
    if (this.$parent.USER_ID != '') {
      // this.handleAdd()
      this.handleEdit(this.$parent.USER_ID)
    }
  },
  methods: {
    /** 三级教育培训 **/
    handleLevelPhotoRemove(file, fileList) {
      this.form.photosOfLevel = fileList
    },
    handleLevelPhotoChangeIMG(file, fileList) {
      const types = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = types.includes(file.raw.type)
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
        fileList.pop()
        return
      }
      this.form.photosOfLevel.push(file)
    },
    // 获取数据字典数据
    getDict() {
      requestFN(
        'dictionaries/getLevels',
        { DICTIONARIES_ID: 'd7d80f08d73a4accbccf4fd3d8d1d867' }
      ).then((data) => {
        this.wenhuachengduList = data.list
      }).catch((e) => {
        this.listLoading = false
      })

      requestFN(
        'dictionaries/getLevels',
        { DICTIONARIES_ID: '0a0e406f27f74ee698fe9979d25f62dd' }
      ).then((data) => {
        this.minzuList = data.list
      }).catch((e) => {
        this.listLoading = false
      })

      requestFN(
        'dictionaries/getLevels',
        { DICTIONARIES_ID: '6351efdd12dc4730952e5d195718e252' }
      ).then((data) => {
        this.zhengzhimianmaoList = data.list
      }).catch((e) => {
        this.listLoading = false
      })
    },
    changePersonType(e) {
      this.dialogFormLicenseInformation = true
    },
    getPersonnelType() {
      requestFN(
        '/dictionaries/getLevels',
        {
          DICTIONARIES_ID: '0b62f92b0b624aab8e89a77304a64d5e'
        }
      ).then((data) => {
        this.LevelsData = data.list
      }).catch((e) => {
      })
    },
    goConfirm() {
      this.dialogFormLicenseInformation = false
    },
    goBack() {
      this.$parent.activeName = 'List'
    },
    getTreeList() {
      return new Promise((resolve, reject) => {
        this.treeLoading = true
        requestFN(
          '/department/listzTree',
          {}
        ).then((data) => {
          this.treeLoading = false
          this.treeData = JSON.parse(data.zTreeNodes)
          resolve()
        }).catch((e) => {
          this.treeLoading = false
          reject()
        })
      })
    },
    getLearnerCategory() {
      requestFN(
        '/dictionariesCorp/getLevels',
        {
          DICTIONARIES_ID: '532282f9c48346b8b646531909c739df'
        }
      ).then((data) => {
        this.LearnerCategoryList = data.list
      }).catch((e) => {

      })
    },
    number() {
      this.form.SORT = this.form.SORT.replace(/[^\.\d]/g, '')

      this.form.SORT = this.form.SORT.replace('.', '')
    },
    // 保存
    confirm() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          console.info(valid)
          console.info('3')
        } else {
          if (this.form.userCardFile.length < 2) {
            this.$message.error('请上传身份证正反面照片')
            return false
          } else {
            this.listLoading = true
            this.buttonLoading = true
            // 校验社保和工伤保险必须有一个选是
            if (this.form.IS_BF === '0' && this.form.IS_SOCIAL === '0') {
              this.$message.error('保险或社保全无人员，不可进入本系统相关方人员管理！')
              this.listLoading = false
              this.buttonLoading = false
              return
            }
            const formData = new FormData()
            Object.keys(this.form).map(key => {
              formData.append(key, this.form[key])
            })
            if (this.$refs['photoUpload'].uploadFiles.length > 0) {
              for (let i = 0; i < this.$refs['photoUpload'].uploadFiles.length; i++) {
                if (this.$refs['photoUpload'].uploadFiles[i]) {
                  formData.append('userPhoto', this.$refs['photoUpload'].uploadFiles[i].raw)
                }
              }
            }

            if (this.$refs['userCardUpload'].uploadFiles.length > 0) {
              for (let i = 0; i < this.$refs['userCardUpload'].uploadFiles.length; i++) {
                if (this.$refs['userCardUpload'].uploadFiles[i]) {
                  formData.append('userCard', this.$refs['userCardUpload'].uploadFiles[i].raw)
                }
              }
            }
            if (this.form.IS_SOCIAL === '1') {
              if (this.$refs['zhenbaoUpload'].uploadFiles.length > 0) {
                for (let i = 0; i < this.$refs['zhenbaoUpload'].uploadFiles.length; i++) {
                  if (this.$refs['zhenbaoUpload'].uploadFiles[i]) {
                    formData.append('zhenbao', this.$refs['zhenbaoUpload'].uploadFiles[i].raw)
                  }
                }
              }
            }
            // 三级教育培训照片
            if (this.form.IS_LEVEL_THREE === '1') {
              if (this.$refs['photosOfLevel'].uploadFiles.length > 0) {
                for (let i = 0; i < this.$refs['photosOfLevel'].uploadFiles.length; i++) {
                  if (this.$refs['photosOfLevel'].uploadFiles[i]) {
                    formData.append('photosOfLevel', this.$refs['photosOfLevel'].uploadFiles[i].raw)
                  }
                }
              }
            }
            if (this.form.IS_INJURIES_PAY === '1') {
              if (this.$refs['gongshangFileList'].uploadFiles.length > 0) {
                for (let i = 0; i < this.$refs['gongshangFileList'].uploadFiles.length; i++) {
                  if (this.$refs['gongshangFileList'].uploadFiles[i]) {
                    formData.append('WORK_INSURANCE_LIST', this.$refs['gongshangFileList'].uploadFiles[i].raw)
                  }
                }
              }
            }
            if (this.form.ISPAY === '1') {
              if (this.$refs['insuranceFileList'].uploadFiles.length > 0) {
                for (let i = 0; i < this.$refs['insuranceFileList'].uploadFiles.length; i++) {
                  if (this.$refs['insuranceFileList'].uploadFiles[i]) {
                    formData.append('insuranceFile', this.$refs['insuranceFileList'].uploadFiles[i].raw)
                  }
                }
              }
            }
            if (this.form.IS_SIGN_LABOR === '1') {
              if (this.$refs['contractFileList'].uploadFiles.length > 0) {
                for (let i = 0; i < this.$refs['contractFileList'].uploadFiles.length; i++) {
                  if (this.$refs['contractFileList'].uploadFiles[i]) {
                    formData.append('contractFile', this.$refs['contractFileList'].uploadFiles[i].raw)
                  }
                }
              }
            }
            formData.append('CORPINFO_ID', JSON.parse(sessionStorage.getItem('user')).CORPINFO_ID)
            upload(
              '/user/' + this.dialogType,
              formData
            ).then((data) => {
              this.$parent.activeName = 'List'
              this.listLoading = false
              this.buttonLoading = false
            }).catch((e) => {
              this.listLoading = false
              this.buttonLoading = false
            })
          }
        }
      })
    },
    // 查看
    handleEdit(USER_ID) {
      this.USER_ID = ''
      this.dialogType = 'editUser'
      requestFN(
        '/user/goEdit',
        {
          USER_ID: USER_ID,
          CORPINFO_ID: this.$parent.CORPINFO_ID
        }
      ).then((data) => {
        this.form = Object.assign({}, data.pd) // copy obj
        this.pdrelated = Object.assign({}, data.pdrelated)
      }).catch((e) => {
        this.listLoading = false
      })
      this.dialogFormEdit = true
    },
    deleteImage() {
      this.$confirm('确定要移除吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.form.PHOTO = ''
        this.hideUpload = false
      }).catch(() => {
      })
    },
    beforeFileUpload(file) {
      const types = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = types.includes(file.type)
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
        return false
      } else {
        this.form.PHOTO.push(file.raw)
      }
    },
    getBase64(file) {
      return new Promise(function(resolve, reject) {
        const reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function() {
          imgResult = reader.result
        }
        reader.onerror = function(error) {
          reject(error)
        }
        reader.onloadend = function() {
          resolve(imgResult)
        }
      })
    },

    changeLearnerCategory() {
      this.form.LEARNERCATEGORY = ''
      if (this.form.LEARNERCATEGORYSTATUS === 'select') {
        this.disabledLCInput = false
        this.displayLCInput = 'display: block'
        this.disabledLCSelect = true
        this.displayLCSelect = 'display: none'
        this.form.LEARNERCATEGORYSTATUS = 'input'
      } else {
        this.disabledLCInput = true
        this.displayLCInput = 'display: none'
        this.disabledLCSelect = false
        this.displayLCSelect = 'display: block'
        this.form.LEARNERCATEGORYSTATUS = 'select'
      }
    },

    // 判断按钮权限，用于是否显示按钮
    hasButton() {
      var keys = 'user:add,user:del,user:edit'
      requestFN(
        '/head/hasButton',
        {
          keys: keys
        }
      ).then((data) => {
        this.add = data.userfhadminadd
        this.del = data.userfhadmindel
        this.edit = data.userfhadminedit
      }).catch((e) => {
        this.listLoading = false
      })
    },
    forceUpdate(item) {
      this.$forceUpdate()
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleChangeIMG(file, fileList) {
      const types = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = types.includes(file.raw.type)
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
        fileList.pop()
        this.form.PHOTO = []
        return
      }
      this.form.PHOTO = []
      this.form.PHOTO.push(file)
      this.hideUpload = fileList.length >= 1
    },
    handleRemove(file, fileList) {
      this.form.PHOTO = fileList
      this.hideUpload = fileList.length >= 1
    },
    // 保险图片change
    handleInsuranceFileChange(file, fileList) {
      const types = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = types.includes(file.raw.type)
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
        fileList.pop()
        this.form.insuranceFileList = []
        return
      }
      this.form.insuranceFileList.push(file)
      this.hideInsuranceUpload = fileList.length >= 4
    },
    // 保险图片remove
    handleInsuranceFileRemove(file, fileList) {
      this.form.insuranceFileList = fileList
      this.hideInsuranceUpload = fileList.length >= 4
    },
    // 合同图片change
    handleContractFileChange(file, fileList) {
      const types = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = types.includes(file.raw.type)
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
        fileList.pop()
        this.form.contractFileList = []
        return
      }
      this.form.contractFileList.push(file)
      this.hideContractUpload = fileList.length >= 4
    },
    // 合同图片remove
    handleContractFileRemove(file, fileList) {
      this.form.contractFileList = fileList
      this.hideContractUpload = fileList.length >= 4
    },
    /** 身份照片**/
    handleUserCardPhoneRemove(file, fileList) {
      this.form.userCardFile = fileList
      this.userCardIDUpload = fileList.length >= 2
    },
    handleUserCardPhoneZhengshu(file, fileList) {
      const types = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = types.includes(file.raw.type)
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
        fileList.pop()
        this.form.userCardFile = []
        return
      }
      this.form.userCardFile.push(file)
      this.userCardIDUpload = fileList.length >= 2
    },
    /** 社保照片 **/
    handleZhebaoRemove(file, fileList) {
      this.form.zhebaoZhaopian = fileList
      this.zhebaoUpload = fileList.length >= 2
    },
    handleZhebaoChangeIMG(file, fileList) {
      const types = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = types.includes(file.raw.type)
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
        fileList.pop()
        return
      }
      this.form.zhebaoZhaopian.push(file)
      this.zhebaoUpload = fileList.length >= 2
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    handlePictureCardRemove(file, fileList) {
      this.form.USERAVATARPREFIX = ''
      this.form.USERAVATARURL = ''
      this.form.USERAVATARURL_CONVERT = ''
    },
    handleChangeIMGZhengshu(file, fileList) {
      const types = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = types.includes(file.raw.type)
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
        fileList.pop()
      }
    },
    // 保险图片remove
    handleGongshangFileRemove(file, fileList) {
      this.form.gongshangbaoxianFile = fileList
      this.hidegongshangUpload = fileList.length >= 4
    },
    // 合同图片change
    handleGongshangFileChange(file, fileList) {
      const types = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = types.includes(file.raw.type)
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
        fileList.pop()
        this.form.gongshangbaoxianFile = []
        return
      }
      this.form.gongshangbaoxianFile.push(file)
      this.hidegongshangUpload = fileList.length >= 4
    }
  }
}
</script>

<style lang="scss" scoped>
.input-width {
  width: 500px;
}
.el-dialog__body {
  padding: 0;
  background: red;
}

.mark_up {
  margin-bottom: 20px;
  margin-left: 110px;
}

.icons-container {
  margin: 0;
  overflow: hidden;

  .grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .icon-item {
    margin-bottom: 10px;
    height: 70px;
    text-align: center;
    width: 100px;
    float: left;
    font-size: 24px;
    color: #24292e;
    cursor: pointer;

    span {
      display: block;
      font-size: 14px;
      margin-top: 10px;
    }
  }

  .disabled {
    pointer-events: none;
  }
}

.filter-btn-group {
  position: relative;
}

.filter-flot {
  position: absolute;
  right: 0;
  top: 0;
}

.uploader {
  width: 570px;
  display: flex;
  align-items: center;
}

.el-form-item__content {
  line-height: 1;
}

.uo-flex {
  display: flex;
}

.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 {
  border: 1px dashed #c0ccda;
  font-size: 28px;
  color: #8c939d;
  width: 110px;
  height: 110px;
  line-height: 110px;
  border-radius: 6px;
  text-align: center;
  background-color: #fbfdff;
}

.avatar-uploader-icon:hover,
.avatar-uploader-icon:focus {
  border-color: #1890ff;
  color: #1890ff;
}

.avatar {
  width: 110px;
  height: 110px;
  display: block;
  border: 1px dashed #c0ccda;
}
</style>
<style lang="sass" scoped>
.alertClass
  background-color: #FFFFFF
.el-row
  margin-bottom: 16px

  &:last-child
    margin-bottom: 0

    .form-group
      display: flex
      align-items: center
      margin-right: 20px

      .form-label
        padding: 9px 15px
        font-size: 14px
        width: 240px
        font-weight: 400
        line-height: 20px
        text-align: right
        margin-bottom: 0

        .star
          color: red
          padding-right: 4px

      .input-block
        flex: 1
        min-height: 36px
        position: relative

.disContent
  padding: 0 20px
  display: flex
  align-items: center
  flex-wrap: wrap

  .img-div
    position: relative
    margin: auto 10px 10px 10px
    width: 120px
    height: 120px
    border-radius: 4px

    & > img
      width: 100%
      height: 100%

    .disContent-hide
      position: absolute
      width: 100%
      height: 100%
      border-radius: 4px
      background-color: rgba(48, 48, 48, 0.59)
      display: none
      top: 0
      left: 0

      .Delete
        position: absolute
        bottom: 14px
        right: 10px
        font-size: 16px
        color: white
        cursor: pointer

        .editCss
          .Delete
            font-size: 16px
            right: 90px

      .yuLan
        position: absolute
        bottom: 23px
        right: 50px
        font-size: 16px
        color: white
        cursor: pointer

      .yuLanImg
        position: absolute
        bottom: 0
        right: 0
        width: 100%
        height: 100%
        opacity: 0

  .img-div:hover .disContent-hide
    display: block

  .pitchCss
    border: 1px solid #202e78
    transition: all linear 0.1s
    width: 116px
    height: 116px
</style>