<!-- 用户信息组件 -->
<template>
  <div class="sui-slider">
    <div class="sui-slider-main">
      <div class="sui-slider-title">
        <h2><span class="sui-slider-title-text">用户信息</span></h2>
        <span @click="close" class="sui-icons sui-icons-close sui-slider-title-x"></span>
      </div>
      <div class="sui-slider-content">
        <el-row v-if="operate1 === 'index'">
          <div class="content">
            <div class="img_holder">
              <template v-if="operate === 'detail'">
                <img v-if="formItem.profilePhoto" :src="'data:image/'+ formItem.photoType +';base64,' + formItem.photo" style="margin-top: -15px;">
                <img v-else src="../../../assets/img/photo-default.png" style="margin-top: -15px;">
              </template>
              <template v-else>
                <input type="file" ref="avatarInput" accept="image/gif,image/jpeg,image/jpg,image/png" @change="loadImg" placeholder="请输入" size="small" style="display:none;" />
                <img v-if="headerSrc" :src="headerSrc" style="margin-top: -15px;" @click="headerInputClick">
                <img v-else-if="formItem.profilePhoto" :src="'data:image/'+ formItem.photoType +';base64,' + formItem.photo" @click="headerInputClick" style="margin-top: -15px;">
                <img v-else src="../../../assets/img/photo-default.png" @click="headerInputClick" style="margin-top: -15px;">
                <!-- <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="formItem.profilePhoto" :src="formItem.profilePhoto" class="avatar" style="margin-top: -15px;">
                  <img v-else src="../../../assets/img/photo-default.png" style="margin-top: -15px;">
                </el-upload> -->
              </template>
            </div>
          </div>
        </el-row>
        <el-form class="userModal" ref="formItem" :rules="ruleValidate" :model="formItem" label-width="80px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="账户" prop="userCode">
                <el-input v-model="formItem.userCode" placeholder="请输入" :disabled="operate === 'detail' || operate === 'edit'" size="small"></el-input>
              </el-form-item>
              <el-form-item label="用户ID" prop="userId" v-show="false">
                <el-input v-model="formItem.userId" placeholder="请输入" size="small"></el-input>
              </el-form-item>
              <el-form-item label="账户" prop="profilePhoto" v-show="false">
                <el-input v-model="formItem.profilePhoto" placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="姓名" prop="userName">
                <el-input v-model="formItem.userName" @focus="inputC.nameFocus = true" @blur="inputC.nameFocus = false" placeholder="请输入" :disabled="operate === 'detail'" size="small"></el-input>
                <span v-if="formItem.userName && charLength(formItem.userName) <= 25 && inputC.nameFocus" class="showLen">
                    剩余{{25 - charLength(formItem.userName)}}个字符
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属机构" prop="orgCode">
                <el-select v-model="formItem.orgCode" filterable :clearable="true" placeholder="请选择机构" size="small" :disabled="operate1 ==='index' || operate === 'detail'" @change="changeOrg">
                        <el-option
                            v-for="item in orgList"
                            :key="item.orgCode"
                            :label="item.orgName"
                            :value="item.orgCode">
                        </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
              <el-form-item label="二维码" prop="qrCode">
                <el-input v-model="formItem.qrCode" placeholder="请输入" :disabled="operate === 'detail'" size="small"></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="8">
              <el-form-item label="手机" prop="mobile">
                <el-input v-model="formItem.mobile" :disabled="operate === 'detail'" placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" style="height: 41px">
              <el-form-item label="角色" prop="qrRole">
                <!-- <el-input v-model="formItem.qrCode" placeholder="请选择角色" :disabled="operate === 'detail'" size="small"></el-input> -->
                <el-select v-model="qrRole" filterable multiple collapse-tags placeholder="请选择角色" size="small" :disabled="operate1 ==='index' || operate === 'detail'">
                    <el-option
                    v-for="item in roleList"
                    :key="item.roleId"
                    :label="item.roleName"
                    :value="item.roleId">
                    </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别" prop="sex">
                <el-select placeholder="请选择" v-model="formItem.sex" :disabled="operate === 'detail'" size="small" class="user-select">
                  <el-option value="1" label="男"></el-option>
                  <el-option value="0" label="女"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="年龄" prop="age">
                <el-input-number :max="100" :min="1" v-model="formItem.age" :disabled="operate === 'detail'" style="width:100%" size="small"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="IP" prop="ip">
                <el-input v-model="formItem.ip" :disabled="operate1 ==='index' || operate === 'detail'" placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="生日" prop="birthDate">
                <el-date-picker v-model="formItem.birthDate" value-format="yyyy-MM-dd" :disabled="operate === 'detail'" style="width: 100%;" type="date" placeholder="选择日期" size="small"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="籍贯" prop="nativePlace">
                <el-input v-model="formItem.nativePlace" :disabled="operate === 'detail'" @focus="inputC.nativePlace = true" @blur="inputC.nativePlace = false" placeholder="请输入" size="small"></el-input>
                <span v-if="formItem.nativePlace && charLength(formItem.nativePlace) <= 36 && inputC.nativePlace" class="showLen">
                    剩余{{36 - charLength(formItem.nativePlace)}}个字符
                </span>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
              <el-form-item label="所属机构" prop="orgCode">
                <el-input v-model="formItem.orgCode" :disabled="operate === 'detail'" placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="8">
              <el-form-item label="所在科室" prop="dep">
                <el-input v-model="formItem.dep" :disabled="operate === 'detail'" placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="8">
              <el-form-item label="班次" prop="workClass">
                <el-input v-model="formItem.workClass" :disabled="operate === 'detail'" placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="班组" prop="workTeam">
                <el-input v-model="formItem.workTeam" :disabled="operate === 'detail'" placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="8">
              <el-form-item label="QQ号" prop="qq">
                <el-input v-model="formItem.qq" :disabled="operate === 'detail'" placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="微信号" prop="wechat">
                <el-input v-model="formItem.wechat" :disabled="operate === 'detail'" placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系电话" prop="tel">
                <el-input v-model="formItem.tel" :disabled="operate === 'detail'" placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="8">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="formItem.email" :disabled="operate === 'detail'" @focus="inputC.email = true" @blur="inputC.email = false" placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
              <el-form-item label="家庭住址" prop="homeAddr">
                <el-input v-model="formItem.homeAddr" :disabled="operate === 'detail'" placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="8">
              <el-form-item label="入职日期" prop="entryDate">
                <el-date-picker v-model="formItem.entryDate" value-format="yyyy-MM-dd" :disabled="operate1 ==='index' || operate === 'detail'" style="width: 100%;" type="date" placeholder="选择日期" size="small"></el-date-picker>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
              <el-form-item label="参加工作时间" prop="workDate">
                <el-input v-model="formItem.workDate" :disabled="operate === 'detail'" placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="8">
              <el-form-item label="政治面貌" prop="political">
                <el-select placeholder="请选择" v-model="formItem.political" :disabled="operate === 'detail'" size="small" class="user-select">
                  <el-option
                    v-for="item in politicalList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="职务" prop="duty">
                <el-input v-model="formItem.duty" :disabled="operate === 'detail'" @focus="inputC.duty = true" @blur="inputC.duty = false" placeholder="请输入" size="small"></el-input>
                <span v-if="formItem.duty && charLength(formItem.duty) <= 50 && inputC.duty" class="showLen">
                    剩余{{50 - charLength(formItem.duty)}}个字符
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="职称" prop="title">
                <el-input v-model="formItem.title" :disabled="operate === 'detail'" @focus="inputC.title = true" @blur="inputC.title = false" placeholder="请输入" size="small"></el-input>
                <span v-if="formItem.title && charLength(formItem.title) <= 50 && inputC.title" class="showLen">
                    剩余{{50 - charLength(formItem.title)}}个字符
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="文化程度" prop="degree">
                    <el-select placeholder="请选择" v-model="formItem.degree" :disabled="operate === 'detail'" size="small" class="user-select">
                        <el-option
                            v-for="item in degreeList"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value">
                        </el-option>
                    </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="毕业院校" prop="gradSchool">
                <el-input v-model="formItem.gradSchool" :disabled="operate === 'detail'" @focus="inputC.gradSchool = true" @blur="inputC.gradSchool = false" placeholder="请输入" size="small"></el-input>
                <span v-if="formItem.gradSchool && charLength(formItem.gradSchool) <= 100 && inputC.gradSchool" class="showLen">
                    剩余{{100 - charLength(formItem.gradSchool)}}个字符
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="专业" prop="major">
                <el-input v-model="formItem.major" :disabled="operate === 'detail'" @focus="inputC.gradSchool = true" @blur="inputC.gradSchool = false" placeholder="请输入" size="small"></el-input>
                <span v-if="formItem.major && charLength(formItem.major) <= 100 && inputC.gradSchool" class="showLen">
                    剩余{{100 - charLength(formItem.major)}}个字符
                </span>
              </el-form-item>
            </el-col>            
            <!--
            <el-col :span="8">
              <el-form-item label="任职能力" prop="ability">
                <el-input v-model="formItem.ability" :disabled="operate === 'detail'" placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="8">
              <el-form-item label="培训记录" prop="tranHis">
                <el-input v-model="formItem.tranHis" :disabled="operate === 'detail'" placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="资质证书" prop="certificate">
                <el-input v-model="formItem.certificate" :disabled="operate === 'detail'" placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="8">
              <el-form-item label="特长" prop="special">
                <el-input v-model="formItem.special" :disabled="operate === 'detail'" placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="考核评价" prop="assessment">
                <el-input v-model="formItem.assessment" :disabled="operate === 'detail'" placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="8">
              <el-form-item label="密码有效期" prop="expireDays">
                <el-input class="expireDays" v-model="formItem.expireDays" :disabled="operate1 ==='index' || operate === 'detail'" placeholder="默认无限，单位(天)" size="small"></el-input>
                <span style="color:#6f6f6f; display:inline">天</span>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
              <el-form-item label="离职状态" prop="leaveStatus">
                <el-select placeholder="请选择" v-model="formItem.leaveStatus" :disabled="operate === 'detail'" size="small" style="height:30px;">
                  <el-option value="2" label="在职"></el-option>
                  <el-option value="1" label="离职"></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="8">
              <el-form-item label="状态" prop="status">
                <el-select placeholder="请选择" v-model="formItem.status" :disabled="operate === 'detail'" size="small" style="height:30px;">
                  <el-option value="1" label="启用"></el-option>
                  <el-option value="0" label="停用"></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="8">
              <el-form-item label="创建日期" prop="crtDate" v-show="operate === 'detail' || operate === 'edit'">
                <el-input v-model="formItem.crtDate" :disabled="true" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="在职状态" prop="leave" v-show="operate === 'detail' || operate === 'edit'">
                <el-select v-model="formItem.leave" :disabled="operate1 === 'index'" size="small" placeholder="请选择">
                    <el-option
                    v-for="item in leaveStatus"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value">
                    </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="地址" prop="homeAddr">
                <el-input v-model="formItem.homeAddr" :disabled="operate === 'detail'" @focus="inputC.homeAddr = true" @blur="inputC.homeAddr = false" placeholder="请输入" size="small"></el-input>
                <span v-if="formItem.homeAddr && charLength(formItem.homeAddr) <= 100 && inputC.homeAddr" class="showLen">
                    剩余{{100 - charLength(formItem.homeAddr)}}个字符
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="formItem.remark" :disabled="operate === 'detail'" @focus="inputC.remark = true" @blur="inputC.remark = false" placeholder="请输入" type="textarea" :autosize="{minRows: 2,maxRows: 5}" size="small"></el-input>
              </el-form-item>
              <span v-if="formItem.remark && charLength(formItem.remark) <= 512 && inputC.remark" class="showLen">
                    剩余{{512 - charLength(formItem.remark)}}个字符
                </span>
            </el-col>
          </el-row>
          <el-form-item v-if="operate !== 'detail'">
            <el-button type="primary" :loading="buttonLoading" :disabled="operate === 'detail'" style="float:right" @click="formSubmit" size="small">保 存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="sui-slider-cover" @click="close"></div>
  </div>
</template>
<script>
import { checkCharLength2, checkChar, checkIpAddress, checkTel, checkCharNoChinese, checkEmail, checkInteger} from '@/utils/validator.js';
import { objAssign, dgTree } from '@/utils/util.js';
import store from '@/store/index.js';
import moment from 'moment';
export default {
  props: {
    //  操作类型
    operate: {
      type: String,
      // 查看
      default: 'detail'
    },
    operate1: {
      type: String,
      default: '1'
    },
    //  数据
    item: Object
  },
  data () {
    return {
      store,
      buttonLoading: false,
      headerSrc: '',
      formItem: {
        userId: '',
        userCode: '',
        userName: '',
        qrCode: '',
        sex: '',
        age: null,
        cardNo: '',
        birthDate: '',
        nativePlace: '',
        orgCode: '',
        dep: '',
        workClass: '',
        workTeam: '',
        profilePhoto: '',
        photo: '',
        mobile: '',
        qq: '',
        wechat: '',
        tel: '',
        email: '',
        homeAddr: '',
        entryDate: '',
        workDate: '',
        political: '',
        duty: '',
        title: '',
        degree: '',
        major: '',
        gradSchool: '',
        ability: '',
        tranHis: '',
        certificate: '',
        special: '',
        assessment: '',
        leaveStatus: '',
        onlineStatus: '',
        status: '',
        remark: '',
        expireDays: '',
        leave: '',
        address: '',
        ip:''
      },
      orgTree: {
        tree: [],
        items: []
      },
      ruleValidate: {
        userCode: [
          {required: true, message: '用户编码不能为空', trigger: 'change'},
          {validator: checkCharLength2, max: 36, trigger: 'change'},
          {validator: checkCharNoChinese, trigger: 'change'}
        ],
        userName: [
          {required: true, message: '用户姓名不能为空', trigger: 'change'},
          {validator: checkCharLength2, max: 25, trigger: 'change'}
          
        ],
        orgCode: [
          {required: true, message: '所属机构不能为空', trigger: 'change'},
          {validator: checkCharLength2, max: 255, trigger: 'change'}
        ],
        mobile: [
          {validator: checkTel, required: true, trigger: 'change'}
        ],
        // entryDate: [
        //   {required: true, message: '入职时间不能为空', trigger: 'change'}
        // ],
        duty: [
        //   {required: true, message: '职务不能为空', trigger: 'change'},
          {validator: checkCharLength2, max: 50, trigger: 'change'},
          { validator: checkChar, trigger: 'change' }
        ],
        qrCode: [
          {validator: checkCharLength2, max: 255, trigger: 'change'}
        ],
        cardNo: [
          {validator: checkCharLength2, max: 18, trigger: 'change'}
        ],
        nativePlace: [
          {validator: checkCharLength2, max: 36, trigger: 'change'},
          { validator: checkChar, trigger: 'change' }
        ],
        dep: [
          {validator: checkCharLength2, max: 100, trigger: 'change'}
        ],
        workClass: [
          {validator: checkCharLength2, max: 10, trigger: 'change'}
        ],
        workTeam: [
          {validator: checkCharLength2, max: 10, trigger: 'change'}
        ],
        profilePhoto: [
          {validator: checkCharLength2, max: 255, trigger: 'change'}
        ],
        qq: [
          {validator: checkCharLength2, max: 36, trigger: 'change'}
        ],
        wechat: [
          {validator: checkCharLength2, max: 36, trigger: 'change'}
        ],
        tel: [
          {validator: checkCharLength2, max: 36, trigger: 'change'}
        ],
        email: [
          {validator: checkCharLength2, max: 100, trigger: 'change'},
          {validator: checkEmail, trigger: 'change'}
        ],
        homeAddr: [
          {validator: checkCharLength2, max: 100, trigger: 'change'},
          { validator: checkChar, trigger: 'change' }
        ],
        political: [
          {validator: checkCharLength2, max: 10, trigger: 'change'},
          { validator: checkChar, trigger: 'change' }
        ],
        title: [
          {validator: checkCharLength2, max: 50, trigger: 'change'},
          { validator: checkChar, trigger: 'change' }
        ],
        degree: [
          {validator: checkCharLength2, max: 50, trigger: 'change'},
          { validator: checkChar, trigger: 'change' }
        ],
        major: [
          {validator: checkCharLength2, max: 50, trigger: 'change'},
          { validator: checkChar, trigger: 'change' }
        ],
        gradSchool: [
          {validator: checkCharLength2, max: 100, trigger: 'change'},
          { validator: checkChar, trigger: 'change' }
        ],
        ability: [
          {validator: checkCharLength2, max: 100, trigger: 'change'}
        ],
        tranHis: [
          {validator: checkCharLength2, max: 512, trigger: 'change'}
        ],
        certificate: [
          {validator: checkCharLength2, max: 512, trigger: 'change'}
        ],
        special: [
          {validator: checkCharLength2, max: 100, trigger: 'change'}
        ],
        assessment: [
          {validator: checkCharLength2, max: 512, trigger: 'change'}
        ],
        workDate: [
          {validator: checkCharLength2, max: 200, trigger: 'change'}
        ],
        remark: [
          {validator: checkCharLength2, max: 512, trigger: 'change'},
          { validator: checkChar, trigger: 'change' }
        ],
        expireDays: [
            {validator: checkInteger, trigger:'change'},
            {validator: checkCharLength2, max: 4, trigger: 'change'}
        ],
        ip: [
            {validator: checkCharLength2, max: 20, trigger: 'change'},
            {validator: checkIpAddress, trigger: 'change'}
        ]
      },
      roleList: [],
      qrRole: [],
      userRoles: [], // 用户与角色关联信息
      orgList: [],
      leaveStatus:[
          {
              name:'在职',
              value:'0'
          },
          {
              name:'离退',
              value:'1'
          },
          {
              name:'离休',
              value:'2'
          }
      ],
      politicalList:[
          {
              name:'中共党员',
              value:'0'
          },
          {
              name:'中共预备党员',
              value:'1'
          },
          {
              name:'共青团员',
              value:'2'
          },
          {
              name:'民革党员',
              value:'3'
          },
          {
              name:'民盟盟员',
              value:'4'
          },
          {
              name:'民建会员',
              value:'5'
          },
          {
              name:'民进会员',
              value:'6'
          },
          {
              name:'农工党党员',
              value:'7'
          },
          {
              name:'致公党党员',
              value:'8'
          },
          {
              name:'九三学社社员',
              value:'9'
          },
          {
              name:'台盟盟员',
              value:'10'
          },
          {
              name:'无党派人士',
              value:'11'
          },
          {
              name:'群众',
              value:'12'
          }
      ],
      degreeList:[
          {
              name:'博士',
              value:'0'
          },
          {
              name:'硕士',
              value:'1'
          },
          {
              name:'本科',
              value:'2'
          },
          {
              name:'大专',
              value:'3'
          },
          {
              name:'中专',
              value:'4'
          },
          {
              name:'技工学校',
              value:'5'
          },
          {
              name:'高中',
              value:'6'
          },
          {
              name:'初中',
              value:'7'
          },
          {
              name:'小学',
              value:'8'
          },
          {
              name:'半文盲',
              value:'9'
          },
          {
              name:'文盲',
              value:'10'
          }
      ],
      inputC:{
          nameFocus: false,
          nativePlace: false,
          email:false,
          political:false,
      }
    }
  },

  created () {
    //  加入
    this.item.entryDate = this.item.entryDate ? moment(new Date(this.item.entryDate)).format('YYYY-MM-DD') : '';
    this.formItem = objAssign(this.formItem, this.item);
    this.formItem.photoType = this.formItem.profilePhoto ? this.formItem.profilePhoto.substr(this.formItem.profilePhoto.indexOf('.') + 1) : '';
    if (this.item.hasOwnProperty('sysUserLogin')) {
      this.formItem.leave = this.item.sysUserLogin.leave;
    }
    if (this.operate !== 'add') {
      this.formItem.crtDate = this.item.crtDate ? this.item.crtDate.substr(0, 10) : '';
      let num = this.item.sysUserLogin && this.item.sysUserLogin.expireDays ? this.item.sysUserLogin.expireDays : ''
      this.formItem.expireDays = this.item.sysUserLogin && this.item.sysUserLogin.expireDays && Number(this.item.sysUserLogin.expireDays) < 0 ? '密码已过期' : num;
    }
    if (this.formItem.userId) {
      this.getUserRole(this.formItem.userId)
    }
  },
  watch: {
    // 'orgTree.items' (newValue, oldValue) {
    //   console.log(newValue)
    //   if (newValue) {
    //     this.formItem.orgCode = newValue[newValue.length - 1];
    //   }
    // }
    'formItem.birthDate' (n, o) {
      let date = new Date();
      let dateBrith = new Date(n);
      let yearNow = date.getFullYear();
      let yearBirth = dateBrith.getFullYear();
      if (n) {
        this.formItem.age = parseInt(yearNow) - parseInt(yearBirth);
      }
    }
  },
  mounted () {
    this.initData();
  },
  methods: {
    // init
    initData () {
      this.getOrg().then(() => {
        //
        if (!this.item.orgCode) return false;
        //  取当前orgCode的id
        let orgCodeId = '';
        dgTree(this.orgTree.tree, 'children', item => {
          if (item.orgCode === this.item.orgCode) {
            orgCodeId = item.id;
          }
        });
        let items = [];
        this.dgPid(this.orgTree.tree, orgCodeId, item => {
          items.push(item);
        })
        //
        let orgCodeArr = [];
        for (let item of items.reverse()) {
          orgCodeArr.push(item.orgCode);
        }
        //
        this.orgTree.items = orgCodeArr;
      });
      // 获取角色
      this.getRoles();
      this.getOrgList();
    },
    //  添加用户
    addUser (form) {
      let data = new FormData();
      for (let key in form) {
        data.append(key, form[key] ? form[key] : '');
      }
      this.store.dispatch('system/usersManage/addUser', data).then(res => {
        if (res.code === '0') {

          this.$message.success('添加成功');
          if (this.qrRole.length > 0) {
            this.addRoleToUser(res.data.userId, res.data.userCode);
          }
          this.$emit('on-then', 'success', {});
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //  编辑用户
    editUser (form) {
      let data = new FormData();
      let that = this;
      if (this.operate1 === 'index') {
        data.append('file', this.$refs.avatarInput.files[0]);
      }
      for (let key in form) {
        if (key !== 'qrRole'){
            data.append(key, form[key] ? String.trim(form[key]) : '');
        }
      }
      this.store.dispatch('system/usersManage/editUser', {id: form.userId, form: data}).then(res => {
        if (res.code === '0') {
          this.$message.success('修改成功');
          that.$emit('editFinish', res.data)
          this.addRoleToUser(res.data.userId, res.data.userCode);
          this.$emit('on-then', 'success', {});
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 角色修改
    addRoleToUser (userId, userCode) {
      let that = this;
      if (that.qrRole && that.qrRole.length > 0) {
        let rolesId = ''
        for (let i = 0; i < that.qrRole.length; i++) {
          if (i === 0) {
            rolesId = rolesId + that.qrRole[i]
          } else {
            rolesId = rolesId + ',' + that.qrRole[i];
          }
        }
        that.axios.post('pass/v1/sysuserroles/batchInsert/' + userId + '/' + userCode + '/' + rolesId).then(res => {
          // do somthing
        }).catch((err) => {
          console.log(err);
        })
      } else {
        if (that.userRoles.length > 0) {
          for (let item of that.userRoles) {
            that.axios.delete('pass/v1/sysuserroles/' + item.id).then(res => {
              // do somthing
            }).catch((err) => {
              console.log(err);
            })
          }
        }
      }
    },
    // 获取当前用户角色
    getUserRole (userid) {
      let that = this;
      that.axios.get('pass/v1/sysuserroles/?userId=' + userid + '&pageNum=1&pageSize=100').then(res => {
        if (res) {
          for (let i = 0; i < res.data.list.length; i++) {
            that.qrRole.push(res.data.list[i].roleId)
          }
          that.userRoles = res.data.list; // 获取用户角色关联信息
        }
      })
    },
    changeOrg () {
      this.$forceUpdate();
      this.qrRole = [];
    },
    //  取机构树
    async getOrg () {
      //  查询机构树
      const promise = await this.store.dispatch('system/organizManage/tree').then(res => {
        if (res.code === '0') {
          //
          dgTree(res.data, 'children', item => {
            if ('children' in item && item.children.length < 1) {
              delete item.children;
            }
          });
          this.orgTree.tree = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
      return promise;
    },
    //  机构树选择
    cascaderChange (items) {
      // console.log(items);
    },
    //  上传头像完成
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //  save

    //  关闭
    close () {
      this.$refs['formItem'].resetFields();
      this.$emit('on-then', 'close', {});
    },
    //  提交
    formSubmit () {
      this.$refs['formItem'].validate((valid) => {
        if (valid) {
          if (this.operate === 'add') {
            this.addUser(this.formItem);
          } else if (this.operate === 'edit') {
            this.editUser(this.formItem);
          }
        }
      });
    },
    //  找父节点
    dgPid (tree, id, cb) {
      dgTree(tree, '', item => {
        if (item.id === id) {
          cb(item);
          if (item.pId) {
            this.dgPid(tree, item.pId, cb);
          }
        }
      });
    },
    //  选择图片
    headerInputClick () {
      this.$refs.avatarInput.click();
    },
    //  读取图片
    loadImg () {
      // 获取文件
      let file = this.$refs.avatarInput.files[0];
      // 创建读取文件的对象
      let reader = new FileReader();
      // 创建文件读取相关的变量
      let imgFile;
      // 为文件读取成功设置事件
      reader.onload = (e) => {
        imgFile = e.target.result;
        this.headerSrc = imgFile;
      };
      // 正式读取文件
      reader.readAsDataURL(file);
    },
    getRoles () {
      //
      this.store.dispatch('system/rolesManage/list').then(res => {
        if (res.code === '0') {
          this.roleList = res.data;
          if (this.operate1 === 'index') {
              let roleArr = [];
              for (let i = 0; i < this.roleList.length; i++){
                  for (let a = 0; a < this.qrRole.length; a++){
                      if (this.roleList[i].roleId === this.qrRole[a]){
                          roleArr.push(this.roleList[i])
                      }
                  }
              }
              this.roleList = roleArr;
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 获取机构树列表
    getOrgList () {
      let that = this;
      that.axios.get('pass/v1/sysorgs/?pageSize=' + 1000 +'&pageNum=' + 1).then(res => {
        if (res) {
          that.orgList = res.data.list;
        }
      })
    },
    //判断长度
    charLength (val) {
        var len = 0;
            for (var i = 0; i < val.length; i++) {
                 var a = val.charAt(i);
                 if (a.match(/[^\x00-\xff]/ig) != null) 
                {
                    len += 3;
                }
                else
                {
                    len += 1;
                }
            }
        return Number(len);
    }
  }
}
</script>
<style scoped lang="less">
  .sui-slider {
    display: block;
  

  .oa-usersManage-header {
    width: 100px;
    height: 100px;
    vertical-align: middle;
    margin: 0 auto;
    cursor: pointer;
    position: relative;
    bottom: 10px;
  }
  /deep/ .el-select__tags-text {
      text-overflow: ellipsis;
      max-width: 70px;
      display: inline-block;
      overflow: hidden;
  }

  /deep/ .el-select .el-tag__close.el-icon-close {
      top: -6px;
  }

  /deep/ .el-select__tags input {
      position: absolute;
  }
  .oa-usersManage-header > img {
    width: 55px;
    height: 55px;
    vertical-align: middle;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
  }

  .user_upload .ivu-upload {
    height: 50px;
  }

  .file_btn_upload {
    margin-top: -5px
  }

  .content {
    height: 50px;
    text-align: center;
  }

  .file_upload > div {
    width: 100%;
    height: 100%;
  }

  .file_btn_upload .hide {
    width: 120px;
    height: 30px;
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    display: none;
    z-index: 22;
  }

  .img_holder {
    display: inline-block;
    width: 55px;
    height: 55px;
    cursor: pointer;
  }

  .img_box {
    position: relative;
    height: 55px;
    top: -20px;
    display: inline-block;
    vertical-align: top;
    border: 1px transparent dashed;
    padding: 12px;
    box-shadow: 2px 2px 10px #ccc;
  }
  .el-select__tags-text {
    max-width: 60px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .el-select .el-tag__close.el-icon-close {
      top: -5px;
  }
  .showLen {
      position: absolute;
      bottom: -20px;
      color: #37C167;
      z-index: 80;
      left: 0;
  }
  .el-form-item__error {
      background: #fff !important;
      z-index: 81;
  }
  }
  .expireDays {
      width: 89%;
      margin-right: 2%;
  }
</style>
