<template>
  <a-modal
    :title="title"
    :maskClosable="true"
    :width="width"
    placement="right"
    :closable="true"
    @ok="handleOk"
    @cancel="handleCancel"
    :visible="visible"
    :confirm-loading="confirmLoading"
    style="height: 100%; overflow: auto; padding-bottom: 53px"
  >
    <template slot="title">
      <div style="width: 100%">
        <span>{{ title }}</span>
        <span style="display: inline-block; width: calc(100% - 51px); padding-right: 10px; text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height: 20px; width: 20px; border: 0px"></a-button>
        </span>
      </div>
    </template>

    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules" class="form" :hideRequiredMark="true">
        <a-row>
          <a-col :span="12">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="所属区划"
              prop="areaName"
              :hidden="false"
            >
              <a-input id="areaName" placeholder="请输入所属区划" v-model="model.areaName" :disabled="true"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="所在组织"
              prop="departName"
              :hidden="false"
            >
              <a-input
                id="departName"
                placeholder="请输入所在组织"
                v-model="model.departName"
                :disabled="true"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="登录账号"
              prop="username"
              :hidden="false"
              class="username"
            >
              <a-input
                id="username"
                placeholder="请输入登录账号"
                v-model="model.username"
                :disabled="isEditOrAdd == 'edit'"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item
              label="真实姓名"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="realname"
              :hidden="false"
            >
              <a-input id="realname" placeholder="请输入真实姓名" v-model="model.realname" />
            </a-form-model-item>
          </a-col>

          <a-col :span="12">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="性别" prop="sex">
              <j-dict-select-tag v-model="model.sex" placeholder="请选择性别" type="radio" dictCode="sex" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
              <a-input placeholder="请输入手机号码" id="phone" v-model="model.phone" />
            </a-form-model-item>
          </a-col>
  
          <a-col :span="12">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="证件类型" prop="documentType">
              <j-dict-select-tag
                v-model="model.documentType"
                placeholder="请选择证件类型"
                type="list"
                :disabled="true"
                dictCode="document_type"
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12" v-show="isEditOrAdd == 'add'">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="证件号码"
              prop="idCard"
              :hidden="false"
            >
              <a-input id="idCard" placeholder="请输入身份证号" v-model="model.idCard"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" v-show="isEditOrAdd == 'edit'">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="证件号码"
              prop="idCardCheck"
              :hidden="false"
            >
              <a-input
                id="idCardCheck"
                placeholder="请输入身份证号"
                v-model="model.idCardCheck"
                :disabled="true"
              ></a-input>
            </a-form-model-item>
          </a-col>
                  <a-col :span="12">
            <a-form-model-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="avatar" :hidden="false">
              <j-image-upload v-model="model.avatar"></j-image-upload>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" class="selectedroles">
            <a-form-model-item
              label="角色分配"
              class="type_one"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="selectedroles"
            >
              <a-select
                mode="multiple"
                v-model="model.selectedroles"
                placeholder="请选择角色"
                @deselect="deselectOptions"
                :disabled="isDisabledAuth('user:role:edit')"
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
              >
                <a-select-option
                  v-for="item in rolesOptions"
                  :key="item.value"
                  :value="item.value"
                  :disabled="item.disabled"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item class="type_one" :labelCol="labelCol" :wrapperCol="wrapperCol" label="租户">
              <j-multi-select-tag v-model="model.relTenantIds" :options="tenantsOptions" placeholder="请选择租户">
              </j-multi-select-tag>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="人员岗位"
              prop="userPosition"
              :hidden="false"
            >
              <a-input id="userPosition" placeholder="请输入人员岗位" v-model="model.userPosition"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="人员类型" prop="userType">
              <a-select
                v-model="model.userType"
                placeholder="请选择人员类型"
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
              >
                <a-select-option v-for="item in userTypeOptions" :key="item.value" :value="item.value">
                  {{ item.title }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="人员等级" prop="userLevel">
              <!-- <j-dict-select-tag
                v-model="model.userLevel"
                placeholder="请选择人员等级"
                type="list"
                dictCode="sex"/> -->
              <a-select
                v-model="model.userLevel"
                placeholder="请选择人员等级"
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
              >
                <a-select-option v-for="item in userLevelOptions" :key="item.value" :value="item.value">
                  {{ item.title }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="12">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="政务中心办公"
              prop="isResearchCenter">
              <j-dict-select-tag
                v-model="model.isResearchCenter"
                type="radio"
                dictCode="yn"/>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="12">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="工作邮箱" prop="email">
              <a-input v-model="model.email" placeholder="请输入工作邮箱"> </a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="24" class="aColUn">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userDescription" label="人员备注">
              <a-textarea placeholder="请输入人员备注" v-model="model.userDescription" :rows="4" resize="none" />
            </a-form-model-item>
          </a-col>

          <a-col :span="12" v-show="isEditOrAdd == 'edit'">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="人员状态" prop="status">
              <!-- <j-dict-select-tag
                v-model="model.isLegalDept"
                placeholder="请选择人员状态"
                type="list"
                dictCode="yn"/> -->
              <a-select
                v-model="model.status"
                placeholder="请选择人员状态"
                @change="statusChange"
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
              >
                <a-select-option v-for="item in statusOptions" :key="item.value" :value="item.value">
                  {{ item.title }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-col :span="12">
              <a-form-model-item label="创建人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createBy">
                <a-input v-model="model.createBy" :disabled="true"> </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">
                <a-input v-model="model.createTime" :disabled="true"> </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="最近更新人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="updateBy">
                <a-input v-model="model.updateBy" :disabled="true"> </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="最近更新时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="updateTime">
                <a-input v-model="model.updateTime" :disabled="true"> </a-input>
              </a-form-model-item>
            </a-col>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import moment from 'moment'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getAction } from '@/api/manage'
import { addUser, editUser, queryUserRole, queryall, queryRolePermissions } from '@/api/api'
import { disabledAuthFilter } from '@/utils/authFilter'
import { duplicateCheck } from '@/api/api'
import { IDNumberMatch } from '@/config/common'
import { initDictOptions } from '@/components/dict/JDictSelectUtil'
import { DisabledAuthFilterMixin } from '@/mixins/DisabledAuthFilterMixin'

export default {
  name: 'UserModal',
  components: {},
  mixins: ['DisabledAuthFilterMixin'],
  data() {
    return {
      departDisabled: false, //是否是我的部门调用该页面
      roleDisabled: false, //是否是角色维护调用该页面
      modalWidth: 800,
      width: 1300,
      modaltoggleFlag: true,
      confirmDirty: false,
      userId: '', //保存用户id
      disableSubmit: false,
      dateFormat: 'YYYY-MM-DD',
      validatorRules: {
        username: [{ required: true, validator: this.validateUsername }],
        password: [
          {
            required: true,
            pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
            message: '密码由8位数字、大小写字母和特殊符号组成!',
          },
          { validator: this.validateToNextPassword, trigger: 'change' },
        ],
        confirmpassword: [
          { required: true, message: '请重新输入登录密码!' },
          { validator: this.compareToFirstPassword },
        ],
        realname: [{ required: true, validator: this.realnameValidator }],
        sex: [{ required: true, message: '请选择性别' }],
        phone: [{ required: true, validator: this.validatePhone }],
        email: [{ validator: this.validateEmail }],
        roles: {},
        workNo: [{ required: true, message: '请输入工号' }, { validator: this.validateWorkNo }],
        telephone: [{ required: true, pattern: /^0\d{2,3}-[1-9]\d{6,7}$/, message: '请输入正确的座机号码' }],
        idCard: [{ required: true, validator: this.idCardValidator }],
        selectedroles: [{ required: true, message: '请分配角色' }],
        userPosition: [{ required: true, validator: this.userPositionValidator }],
        userType: [{ required: true, message: '请选择人员类型' }],
        userLevel: [{ required: true, message: '请选择人员等级' }],
        isResearchCenter: [{ required: true, message: '请选择是否政务中心办公' }],
      },
      departIdShow: false,
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      uploadLoading: false,
      confirmLoading: false,
      headers: {},
      url: {
        fileUpload: window._CONFIG['domianURL'] + '/sys/common/upload',
        userWithDepart: '/sys/user/userDepartList', // 引入为指定用户查看部门信息需要的url
        userId: '/sys/user/generateUserId', // 引入生成添加用户情况下的url
        syncUserByUserName: '/act/process/extActProcess/doSyncUserByUserName', //同步用户到工作流
        queryTenantList: '/sys/tenant/queryList',
        randName: '/sys/user/randName',
      },
      // 是否新增或者编辑,add为新增，edit为编辑
      isEditOrAdd: 'add',
      tenantsOptions: [],
      rolesOptions: [],
      nextDepartOptions: [],
      statusOptions: [],
      userTypeOptions: [],
      userLevelOptions: [],
      // 默认新增角色分配的对象
      defalutSelectedroles: [],
    }
  },
  created() {
    const token = Vue.ls.get(ACCESS_TOKEN)
    this.headers = { 'X-Access-Token': token }
    this.initRoleList()
    this.initTenantList()
  },
  computed: {
    uploadAction: function () {
      return this.url.fileUpload
    },
  },
  mounted() {
    let _this = this
    // 初始化人员状态
    _this.initStatusDictConfig('person_status')
    // 初始化人员类型
    _this.initUserTypeDictConfig('user_type')
    // 初始化人员等级
    _this.inituserLevelDictConfig('user_level')
  },
  methods: {
    // 初始化人员状态
    initStatusDictConfig(type) {
      let _this = this
      //初始化字典 - 行政区划类型
      initDictOptions(type).then((res) => {
        if (res.success) {
          _this.statusOptions = res.result
        }
      })
    },
    // 初始化人员类型
    initUserTypeDictConfig(type) {
      let _this = this
      //初始化字典 - 行政区划类型
      initDictOptions(type).then((res) => {
        if (res.success) {
          console.log(res.success)
          _this.userTypeOptions = res.result
        }
      })
    },
    // 初始化人员等级
    inituserLevelDictConfig(type) {
      let _this = this
      //初始化字典 - 行政区划类型
      initDictOptions(type).then((res) => {
        if (res.success) {
          _this.userLevelOptions = res.result
        }
      })
    },
    add(record, treeData) {
      let _this = this
      this.refresh()
      // console.log(record)
      this.modelUn = {}
      // this.edit({activitiSync:'1',userIdentity:1});
      this.isEditOrAdd = 'add'
      this.visible = true
      this.modelUn.selecteddeparts = treeData.id
      this.modelUn.sex = 1
      this.modelUn.documentType = '1'
      this.modelUn.status = '1'
      this.modelUn.documentType = 1
      this.modelUn.areaName = treeData.areaName
      this.modelUn.departName = treeData.departName
      // getAction(_this.url.randName,{}).then(res => {
      //   this.modelUn.username = res;
      //   this.model = this.modelUn;
      //   this.$forceUpdate();
      // });
      this.modelUn.selectedroles = this.defalutSelectedroles
      this.model = this.modelUn
      this.$forceUpdate()
    },
    edit(record, treeData) {
      let that = this
      that.visible = true
      this.isEditOrAdd = 'edit'
      //根据屏幕宽度自适应抽屉宽度
      this.resetScreenSize()
      that.userId = record.id
      // console.log(record)
      that.model = Object.assign({}, { selectedroles: '', selecteddeparts: '' }, record)
      that.model.status = String(record.status)
      that.model.documentType = 1
      that.model.departName = record.departName
      console.log(that.model)
      //身份为上级显示负责部门，否则不显示
      if (this.model.userIdentity == 2) {
        this.departIdShow = true
      } else {
        this.departIdShow = false
      }

      if (record.hasOwnProperty('id')) {
        that.getUserRoles(record.id)
        that.getUserDeparts(record.id)
      }
    },
    statusChange(value) {
      let _this = this
      if (value == '0') {
        console.log(value)
        this.$confirm({
          class: 'delete_qx',
          title: '警告',
          content: (
            <div>
              <div>
                <span style="color:red">您将此用户状态修改为“无效”</span>，“无效”的用户无法登录。
              </div>
            </div>
          ),
          okText: '确定',
          icon: 'exclamation-circle',
          onOk() {
            _this.model.status = '0'
            // _this.handleOk();
          },
          onCancel() {
            _this.model.status = '1'
          },
        })
      }
    },
    isDisabledAuth(code) {
      return disabledAuthFilter(code)
    },
    //窗口最大化切换
    toggleScreen() {
      if (this.modaltoggleFlag) {
        this.modalWidth = window.innerWidth
      } else {
        this.modalWidth = 800
      }
      this.modaltoggleFlag = !this.modaltoggleFlag
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth
      // if(screenWidth < 500){
      //   this.width = screenWidth;
      // }else{
      //   this.width = 700;
      // }
    },
    deselectOptions(value, option) {
      console.log(value)
      console.log(option)
    },
    //初始化租户字典
    initTenantList() {
      getAction(this.url.queryTenantList).then((res) => {
        if (res.success) {
          this.tenantsOptions = res.result.map((item, index, arr) => {
            let c = { label: item.name, value: item.id + '' }
            return c
          })
        }
      })
    },
    //初始化角色字典
    initRoleList() {
      queryRolePermissions().then((res) => {
        if (res.success) {
          // this.rolesOptions = res.result.map((item,index,arr)=>{
          //   let c = {label:item.roleName, value:item.id}
          //   return c;
          // })
          // console.log(res)
          let _str = ''
          res.result.forEach((item) => {
            this.rolesOptions.push({ label: item.roleName, value: item.id, disabled: item.isMust ? true : false })
            if (item.isMust) {
              this.defalutSelectedroles.push(item.id)
            }
            // if(item['roleCode'] == "scjg_003" || item['roleCode'] == "scjg_004"){
            //   this.rolesOptions.push({label:item.roleName, value:item.id,disabled:false})
            // }else if(item['roleCode'] == "scjg_999"){
            //   this.rolesOptions.push({label:item.roleName, value:item.id,disabled:true})
            //   this.defalutSelectedroles = item;
            // }
          })
          console.log(this.rolesOptions)
        }
      })
    },
    getUserRoles(userid) {
      queryUserRole({ userid: userid }).then((res) => {
        if (res.success) {
          this.model.selectedroles = res.result.roleId.split(',')
          // this.model.selectedroles = res.result.roleId
        }
      })
    },
    getUserDeparts(userid) {
      let that = this
      getAction(that.url.userWithDepart, { userId: userid }).then((res) => {
        if (res.success) {
          let departOptions = []
          let selectDepartKeys = []
          for (let i = 0; i < res.result.length; i++) {
            selectDepartKeys.push(res.result[i].key)
            //新增负责部门选择下拉框
            departOptions.push({
              value: res.result[i].key,
              label: res.result[i].title,
            })
          }
          that.model.selecteddeparts = selectDepartKeys.join(',')
          that.nextDepartOptions = departOptions
        }
      })
    },
    backDepartInfo(info) {
      this.model.departIds = this.model.selecteddeparts
      this.nextDepartOptions = info.map((item, index, arr) => {
        let c = { label: item.text, value: item.value + '' }
        return c
      })
    },
    refresh() {
      this.userId = ''
      this.nextDepartOptions = []
      this.departIdShow = false
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.disableSubmit = false
      this.nextDepartOptions = []
      this.departIdShow = false
      this.$refs.form.resetFields()
    },
    moment,
    handleSubmit() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          //如果是上级择传入departIds,否则为空
          if (this.model.userIdentity !== 2) {
            this.model.departIds = ''
          }
          let obj
          this.model.username = this.model.username.trim()
          if (!this.model.id) {
            this.model.id = this.userId
            obj = addUser(this.model)
          } else {
            obj = editUser(this.model)
          }
          console.log(this.model.selectedroles)
          console.log(this.model.selectedroles.join(','))
          this.model.selectedroles = this.model.selectedroles.join(',')
          obj
            .then((res) => {
              console.log(res)
              if (res.success) {
                console.log(res)
                if (res.result != null) {
                  that.$emit('newUserPas', res.result)
                }
                that.$message.success(res.message)
                // that.$emit('ok');
                that.$emit('recreateTableData')
                that.close()
              } else if (res.code == '10001') {
                this.$confirm({
                  class: 'delete_qx',
                  title: '身份证已被用户注册',
                  content: (
                    <div>
                      <div>{res.message}</div>
                    </div>
                  ),
                  okText: '确定',
                  type: 'error',
                  icon: 'close-circle',
                })
                // that.$message.warning(res.message);
              } else if (res.code == '10002') {
                this.$confirm({
                  class: 'delete_qx',
                  title: '管理员数量超出限制',
                  content: (
                    <div>
                      <div>{res.message}</div>
                    </div>
                  ),
                  okText: '确定',
                  type: 'error',
                  icon: 'close-circle',
                })
                // that.$message.warning(res.message);
              } else if (res.code == '10003') {
                this.$confirm({
                  class: 'delete_qx',
                  title: '角色权限分配有误',
                  content: (
                    <div>
                      <div>{res.message}</div>
                    </div>
                  ),
                  okText: '确定',
                  type: 'error',
                  icon: 'close-circle',
                })
                // that.$message.warning(res.message);
              } else if (res.code == '10006') {
                this.$confirm({
                  class: 'delete_qx',
                  title: '手机号码重复',
                  content: (
                    <div>
                      <div>{res.message}</div>
                    </div>
                  ),
                  okText: '确定',
                  type: 'error',
                  icon: 'close-circle',
                })
                // that.$message.warning(res.message);
              } else {
                this.$message.error(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              this.model.selectedroles = this.model.selectedroles.split(',')
              // that.close();
            })
        } else {
          return false
        }
      })
    },
    handleCancel() {
      this.close()
    },
    handleOk() {
      this.handleSubmit()
    },
    validateToNextPassword(rule, value, callback) {
      const confirmpassword = this.model.confirmpassword
      if (value && confirmpassword && value !== confirmpassword) {
        callback('两次输入的密码不一样！')
      }
      if (value && this.confirmDirty) {
        this.$refs.form.validateField(['confirmpassword'])
      }
      callback()
    },
    compareToFirstPassword(rule, value, callback) {
      if (value && value !== this.model.password) {
        callback('两次输入的密码不一样！')
      } else {
        callback()
      }
    },
    validatePhone(rule, value, callback) {
      if (!value || value.trim() == '') {
        callback(new Error('请输入手机号码'))
      } else {
        if (new RegExp(/^1[3|4|5|6|7|8|9][0-9]\d{8}$/).test(value)) {
          // var params = {
          //   tableName: 'sys_user',
          //   fieldName: 'phone',
          //   fieldVal: value,
          //   dataId: this.userId
          // };
          // duplicateCheck(params).then((res) => {
          //   if (res.success) {
          //     callback()
          //   } else {
          //     callback("手机号已存在!")
          //   }
          // })
          callback()
        } else {
          callback('请输入正确格式的手机号码!')
        }
      }
    },
    validateEmail(rule, value, callback) {
      // if(!value){
      //   callback()
      // }else{
      //   if(new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(value)){
      //     var params = {
      //       tableName: 'sys_user',
      //       fieldName: 'email',
      //       fieldVal: value,
      //       dataId: this.userId
      //     };
      //     duplicateCheck(params).then((res) => {
      //       if (res.success) {
      //         callback()
      //       } else {
      //         callback("邮箱已存在!")
      //       }
      //     })
      //   }else{
      //     callback("请输入正确格式的邮箱!")
      //   }
      // }
      callback()
    },
    validateUsername(rule, value, callback) {
      let _this = this
      // var params = {
      //   tableName: 'sys_user',
      //   fieldName: 'username',
      //   fieldVal: value,
      //   dataId: this.userId
      // };
      // duplicateCheck(params).then((res) => {
      //   if (res.success) {
      //   callback()
      //   } else {
      //     callback("用户名已存在!")
      //   }
      // })
      if (this.isEditOrAdd == 'edit') {
        callback()
      } else {
        if (!value || value.trim() == '') {
          callback(new Error('请输入登录账号'))
        } else if (value.trim().length < 5 || value.trim().length > 12) {
          callback(new Error('登录账号最短5位，最长12位'))
        } else {
          let reg = /^[A-Za-z0-9][A-Za-z0-9_]+$/
          if (!reg.test(value.trim())) {
            callback(new Error("请使用英文字母、数字和'_'（下划线），首字符必须为字母或数字"))
          } else {
            var params = {
              tableName: 'sys_user',
              fieldName: 'username',
              fieldVal: value,
              dataId: this.userId,
            }
            duplicateCheck(params).then((res) => {
              if (res.success) {
                _this.model.username = value.trim()
                callback()
              } else {
                callback('登录账号已存在!')
              }
            })
          }
        }
      }
    },
    validateWorkNo(rule, value, callback) {
      var params = {
        tableName: 'sys_user',
        fieldName: 'work_no',
        fieldVal: value,
        dataId: this.userId,
      }
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback()
        } else {
          callback('工号已存在!')
        }
      })
    },
    handleConfirmBlur(e) {
      const value = e.target.value
      this.confirmDirty = this.confirmDirty || !!value
    },
    beforeUpload: function (file) {
      var fileType = file.type
      if (fileType.indexOf('image') < 0) {
        this.$message.warning('请上传图片')
        return false
      }
      //TODO 验证文件大小
    },
    identityChange(e) {
      if (e.target.value === 1) {
        this.departIdShow = false
      } else {
        this.departIdShow = true
      }
    },
    realnameValidator(rule, value, callback) {
      let reg = /^[\u4e00-\u9fa5]+$/
      let _this = this
      if (!value || value.trim() == '') {
        callback(new Error('请输入真实姓名'))
      } else if (!reg.test(value.trim())) {
        callback(new Error('请输入中文姓名'))
      } else {
        _this.model.realname = value.trim()
        callback()
      }
    },
    idCardValidator(rule, value, callback) {
      let _this = this
      if (this.isEditOrAdd == 'edit') {
        callback()
      } else {
        if (!value || value.trim() == '') {
          callback(new Error('身份证号码格式错误'))
        } else if (IDNumberMatch(value.trim()) != 1) {
          callback(new Error('身份证号码格式错误'))
        } else {
          _this.model.idCard = value.trim()
          callback()
        }
      }
    },
    userPositionValidator(rule, value, callback) {
      let _this = this
      if (!value || value.trim() == '') {
        callback(new Error('请输入人员岗位'))
      } else {
        _this.model.userPosition = value.trim()
        callback()
      }
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/shaDow.less';

.type_one {
  ::v-deep .ant-form-item-control-wrapper {
    height: 40px;
  }
}

// /deep/.ant-tabs-nav .ant-tabs-tab-active {

// }

// /deep/.ant-tabs-ink-bar {

// }

/deep/.action-button .ant-btn-primary {
  border-radius: 2px;
}

/deep/ .ant-modal-footer {
  padding: 10px 16px 45px;
  box-sizing: border-box;
  border-top: 0;

  > div {
    display: flex;
    justify-content: center;
  }

  .ant-btn {
    width: 76px;
    height: 35px;
    line-height: 34px;
    border-radius: 2px;
    opacity: 1;

    padding: 0;
  }

  .ant-btn-primary {
    color: #fff;

    &:hover {
      color: #fff !important;
    }
  }
}

// 输入框
/deep/.ant-input {
  height: 38px;
}

/deep/ textarea.ant-input {
  height: auto;
}

// 下拉框
::v-deep.ant-select {
  .ant-select-selection--single {
    height: 38px;

    .ant-select-selection__rendered {
      line-height: 38px;
    }
  }

  // .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {

  // }
}

/deep/.ant-select-selection__rendered {
  height: 38px;

  ul {
    height: 100%;
    display: flex;
    align-items: center;

    li {
      margin-top: 0;

      i {
      }
    }
  }
}

// /deep/.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-selected .ant-select-selected-icon {

// }

::v-deep.ant-row {
  & > .ant-col:nth-child(3),
  & > .ant-col:nth-child(4),
  & > .ant-col:nth-child(6),
  & > .ant-col:nth-child(7),
  & > .ant-col:nth-child(8),
  & > .ant-col:nth-child(11),
  & > .ant-col:nth-child(12),
  & > .ant-col:nth-child(13),
  & > .ant-col:nth-child(14) {
    .ant-form-item {
      .ant-form-item-control-wrapper {
        position: relative;

        &::before {
          position: absolute;
          content: '*';
          color: #f10f0f;
          top: 0;
          right: -24px;
          font-size: 24px;
          line-height: 44px;
        }
      }
    }
  }
    & > .ant-col:nth-child(10){
      margin-bottom: -24px;
    }
}

// 滚动条
/deep/::-webkit-scrollbar-thumb {
  border-radius: 9px;
}
</style>
<style scoped>
.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}

.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.drawer-bootom-button {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>
<style scoped>
.aColUn > div >>> .ant-col:first-child {
  width: 10.65%;
}

.aColUn > div >>> .ant-col:nth-child(2) {
  width: 89.35%;
}

.aColUn > div >>> .ant-col:nth-child(2) > .ant-form-item-control {
  width: 93%;
}

/* .form >>> .ant-form-explain{
    margin-bottom: 1px !important;
  }
  .selectedroles >>> .ant-form-item-with-help{
    margin-bottom: 3px;
  }
  .username >>> .ant-form-explain{
    margin-bottom: -1px !important;
  } */
.username >>> .ant-form-explain {
  color: #f5222d;
}
</style>