<template>
  <div class="icons-container">
    <el-container>
      <el-aside width="300px" style="background-color:#fff">
        <el-input
          v-model="filterText"
          placeholder="输入关键字进行过滤"
          style="margin:10px 0"/>
        <el-tree
          v-loading="treeLoading"
          ref="tree"
          :data="treeData"
          :props="defaultProps"
          :filter-node-method="filterNode"
          class="filter-tree"
          @node-click="handleNodeClick"/>
      </el-aside>
      <el-main>
        <el-form>
          <el-row :gutter="16">
            <el-col :span="4">
              <el-form-item label="用户名" label-width="180px">
                <el-input v-model="KEYWORDS" style="width: 150px" placeholder="请输入用户名"/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="身份证" label-width="180px">
                <el-input v-model="ID_CARD" style="width: 125px" placeholder="请输入用户身份证"/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="就职状态" label-width="180px">
                <el-select v-model="DEPART_STATE" placeholder="请选择" style="width: 125px">
                  <el-option label="在职" value="0" />
                  <el-option label="离职" value="1" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="人员类型" label-width="180px">
                <el-select v-model="ISFLOW" placeholder="请选择" style="width: 125px" >
                  <el-option label="非流动人员" value="0" />
                  <el-option label="流动人员" value="1" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="入职审核状态" label-width="180px">
                <el-select v-model="AUDIT_STATE" placeholder="请选择">
                  <el-option label="已打回" value="0" />
                  <el-option label="待审核" value="1" />
                  <el-option label="审核通过" value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="基础信息填报状态" label-width="185px">
                <el-select v-model="BASIC_STATE" placeholder="请选择" style="width: 125px" >
                  <!--                  <el-option label="完成基础信息" value="0" />-->
                  <!--                  <el-option label="完成企业信息" value="1" />-->
                  <el-option label="已完善" value="1" />
                  <el-option label="未完善" value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="10px" >
                <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
                  搜索
                </el-button>
                <el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="goKeyReset">
                  重置
                </el-button>
                <el-button v-waves class="filter-item" type="info" icon="el-icon-bottom-right" size="mini" plain @click="dialogFormDaoru = true;daoruFrom.FFILEName = ''">
                  导入
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table ref="multipleTable" :data="varList" :row-key="getRowKey" :header-cell-style="{'font-weight': 'bold','color': '#000'}" tooltip-effect="dark" border fit highlight-current-row>
          <el-table-column :reserve-selection="true" type="selection" width="55" align="center" />
          <el-table-column type="index" label="序号" width="50" align="center" />
          <el-table-column prop="USERNAME" label="用户名" />
          <el-table-column prop="NAME" label="姓名" />
          <el-table-column prop="DEPARTMENT_NAME" label="部门" />
          <!--          <el-table-column prop="PERSON_WORK_TYPE" label="工种" />-->
          <el-table-column prop="ISFLOW" label="人员类型" >
            <template slot-scope="{row}">
              <el-tag v-if="row.ISFLOW == '1'" type="danger">流动人员</el-tag>
              <el-tag v-if="row.ISFLOW == '0'" type="success">非流动人员</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="DEPART_STATE" label="就职状态" >
            <template slot-scope="{row}">
              <span v-if="row.USER_ID != userId">
                <!--<el-tag v-if="row.DEPART_STATE == '1'" type="danger">离职</el-tag>-->
                <el-tag v-if="row.DEPART_STATE == '0'" type="success">在职</el-tag>
                <el-tag v-if="row.DEPART_STATE == '-1'" type="danger">离职申请中</el-tag>
              </span>
              <span v-else />
            </template>
          </el-table-column>
          <el-table-column prop="AUDIT_STATE" label="入职审核状态" >
            <template slot-scope="{row}">
              <span v-if="row.USER_ID != userId">
                <el-tag v-if="row.AUDIT_STATE == '1'" type="danger">待审核</el-tag>
                <el-tag v-if="row.AUDIT_STATE == '0'" type="success">已打回</el-tag>
                <el-tag v-if="row.AUDIT_STATE == '2'" type="success">审核通过</el-tag>
              </span>
              <span v-else />
            </template>
          </el-table-column>
          <el-table-column prop="STATUS" label="培训状态" >
            <template slot-scope="{row}">
              <span v-if="row.USER_ID != userId">
                <el-tag v-if="row.STATUS == 1" type="warning">培训中</el-tag>
                <el-tag v-if="row.STATUS == 0" type="info">未培训</el-tag>
                <el-tag v-if="row.STATUS == 2" type="success">已培训</el-tag>
                <el-tag v-if="row.STATUS == 9">申请中</el-tag>
              </span>
              <span v-else />
            </template>
          </el-table-column>
          <el-table-column prop="BASIC_STATE" label="基础信息填报状态" >
            <template slot-scope="{row}">
              <el-tag v-if="row.BASIC_STATE == 1" type="warning">已完善</el-tag>
              <el-tag v-if="row.BASIC_STATE == 2" type="info">未完善</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="700px">
            <template slot-scope="{row}">
              <div style="display: flex;">
                <div style="margin-right: 13px;">
                  <el-button v-if="row.USER_ID != userId" type="primary" icon="el-icon-view" size="mini" @click="handleShow(row)">查看</el-button>
                  <el-button v-if="row.AUDIT_STATE == 1 && row.USER_ID != userId" type="success" icon="el-icon-s-check" size="mini" @click="handleEditState(row)">审核</el-button>
                </div>
                <template v-show="loginUser.ACCOUNT_TYPE === '0'">
                  <el-button v-show="edit && row.ACCOUNT_TYPE == '1'" type="success" icon="el-icon-edit" size="mini" @click="handleUserEdit(row)">编辑</el-button>
                  <el-button v-show="edit" type="success" icon="el-icon-refresh" size="mini" @click="resetPwd(row.USER_ID)">重置密码</el-button>
                  <el-button v-if="false && del && row.ACCOUNT_TYPE == '1'" type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(row)">删除</el-button>
                  <el-button v-if="row.ISUSE == 1 && row.ACCOUNT_TYPE == '1'" type="success" icon="el-icon-check" size="mini" @click="enableORDisable('0', row)">启用</el-button>
                  <el-button v-if="row.ISUSE == 0 && row.ACCOUNT_TYPE == '1'" type="danger" icon="el-icon-close" size="mini" @click="enableORDisable('1', row)">禁用</el-button>
                </template>
                <el-button v-if="row.ACCOUNT_TYPE == '1'" type="info" icon="el-icon-postcard" size="mini" @click="handlePrinting(row)">打印</el-button>
                <el-button v-if="row.ISPUSH == '0'" type="primary" icon="el-icon-position" size="mini" @click="goPush(row)">推送</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-btn-group">
          <div>
            <el-button v-show="add" type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
          </div>
          <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList(USER_ID)" />
        </div>
      </el-main>
    </el-container>
    <div>
      <el-dialog :visible.sync="dialogFormEditState" title="审核结果" width="600px">
        <el-form ref="auditForm" :rules="auditRules" :model="auditForm" style="width: 500px;">
          <el-form-item label="审核结果" prop="auditState">
            <el-select v-model="auditForm.auditState">
              <el-option label="通过" value="2"/>
              <el-option label="不通过" value="0"/>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormEditState = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <el-dialog v-loading="importLoading" :visible.sync="dialogFormDaoru" z-index="1000" title="导入" width="800px">
      <template>
        <div class="app-container">
          <el-form ref="form" :model="daoruFrom" label-width="110px" class="in-uploader">
            <el-form-item label="上传附件" prop="FIELDS">
              <div class="uploader">
                <el-input v-model="daoruFrom.FFILEName" :disabled="true" />
                <el-upload :show-file-list="false" :before-upload="beforeFileUpload" class="avatar-uploader" action="">
                  <el-button type="primary" icon="el-icon-upload" style="margin-left:10px">上传附件</el-button>
                </el-upload>
                <el-button v-waves type="success" icon="el-icon-right" style="margin-left:10px;width:150px" @click="getExcelModel">
                  导出模板
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormDaoru = false">取 消</el-button>
        <el-button type="primary" @click="readExcelDebounce">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="printDialog.visible" title="打印" width="800px">
      <div id="printTest" style="margin-top: 30px;">
        <table class="table-ui">
          <tr>
            <td colspan="4" style="font-weight: 700;font-size: 18px">安全培训合格证</td>
            <td rowspan="4">
              <img :src="printDialog.info.imgUrl" alt="" width="100" height="150">
            </td>
          </tr>
          <tr>
            <td>姓名</td>
            <td colspan="3">{{ printDialog.info.NAME }}</td>
            <!--            <td>入场时间</td>-->
            <!--            <td>2022-02-02</td>-->
          </tr>
          <tr>
            <td>引进单位</td>
            <td colspan="3">{{ printDialog.info.DEPARTMENT_NAME }}</td>
          </tr>
          <tr>
            <td>单位</td>
            <td colspan="3">{{ printDialog.info.RELEVANT_UNIT_NAME }}</td>
          </tr>
          <tr>
            <td>岗位</td>
            <td colspan="3">{{ printDialog.info.POST_ID }}</td>
            <td rowspan="4">
              <vue-qr :text="printDialog.qrcodeStr" :margin="0" :size="100" color-dark="#000" color-light="#fff" />
              <br>
              请使用微信扫码
            </td>
          </tr>
          <tr>
            <td>移动电话</td>
            <td colspan="3">{{ printDialog.info.PHONE }}</td>
          </tr>
          <tr>
            <td>身份证号</td>
            <td colspan="3">{{ printDialog.info.CARD_ID }}</td>
          </tr>
          <tr>
            <td>资质情况</td>
            <td colspan="3">无</td>
          </tr>
        </table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="printDialog.visible = false">取 消</el-button>
        <el-button v-print="'#printTest'" type="primary">打 印</el-button>
      </div>
    </el-dialog>
  </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'
import { debounce } from 'throttle-debounce'
import vueQr from 'vue-qr'
export default {
  components: { Pagination, SelectTree, vueQr },
  directives: { waves },
  data() {
    var hasUser = (rule, value, callback) => {
      requestFN(
        '/user/hasUser',
        {
          USERNAME: value,
          VERIFYUSER_ID: this.form.USER_ID
        }
      ).then((data) => {
        if (data.result == 'success') {
          if (data.pd.USER_ID) {
            callback(new Error('用户名重复'))
          }
          callback()
        }
      }).catch((e) => {
        callback()
      })
    }
    var hasEmail = (rule, value, callback) => {
      if (value) {
        requestFN(
          '/user/hasEmail',
          {
            EMAIL: value,
            USERNAME: this.form.USERNAME
          }
        ).then((data) => {
          if (data.result == 'success') {
            callback()
          } else {
            callback(new Error('邮箱重复'))
          }
        }).catch((e) => {

        })
      } else {
        callback()
      }
    }
    return {
      auditForm: {
        auditState: '',
        USER_ID: ''
      },
      auditRules: {
        auditState: [{ required: true, message: '请选择审核状态', trigger: 'blur' }]
      },
      userId: JSON.parse(sessionStorage.getItem('user')).USER_ID,
      loginUser: JSON.parse(sessionStorage.getItem('user')),

      dialogFormEditState: false,
      ISUSE: '',
      listLoading: true,
      importLoading: false,
      treeLoading: false,
      add: false,
      del: false,
      edit: false,
      listQuery: {
        page: 1,
        limit: 10
      },
      filterText: '',
      total: 0,
      KEYWORDS: '',
      ID_CARD: '',
      DEPARTMENT_ID: '',
      CORPINFO_ID: '',
      pd: [],
      varList: [],
      dialogType: 'saveUser',
      rules: {
        NAME: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        USERNAME: [
          { 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: '请输入正确的手机号码'
          },
          { validator: hasUser, trigger: 'blur' }
        ],
        EMAIL: [
          { required: false, message: '请输入邮箱', trigger: 'blur' },
          {
            pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/,
            message: '请输入正确的邮箱'
          },
          { validator: hasEmail, trigger: 'blur' }
        ],
        ROLE_ID: [{ required: true, message: '请选择角色', trigger: 'change' }],
        DEPARTMENT_ID: [{ required: true, message: '请选择部门', trigger: 'change' }],
        DUTIES_ID: [{ required: true, message: '请选择岗位', trigger: 'change' }],
        SORT: [{ required: true, message: '请输入排序', trigger: 'blur' }],
        NATION: [{ required: true, message: '民族不能为空', trigger: 'blur' }],
        SEX: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
        POLITICAL_OUTLOOK: [{ required: true, message: '政治面貌不能为空', trigger: 'blur' }],
        DATE_OF_BIRTH: [{ required: true, message: '请选择出生年月', trigger: 'blur' }],
        DEGREE_OF_EDUCATION: [{ required: true, message: '文化程度不能为空', trigger: 'blur' }],
        POST: [{ required: true, message: '职务不能为空', trigger: 'blur' }],
        TYPE_OF_WORK: [{ required: true, message: '工种不能为空', trigger: 'blur' }],
        ENTRY_DATE: [{ required: true, message: '请选择入职日期', trigger: 'blur' }],
        WORKING_DATE: [{ required: true, message: '请选择参加工作日期', trigger: 'blur' }],
        INCUMBENCY: [{ required: true, message: '在职情况不能为空', trigger: 'blur' }],
        TITLE: [{ required: true, message: '职称不能为空', trigger: 'blur' }],
        DUTIES: [{ required: true, message: '职务不能为空', trigger: 'blur' }],
        USER_ID_CARD: [{ required: true, message: '身份证号不能为空', trigger: 'blur' }]
      },
      defaultProps: {
        value: 'id',
        children: 'nodes',
        label: 'name'
      },
      treeData: [],
      workTypeList: [], // 工种
      form: {
        ISFLOW: '',
        USER_ID: '',
        ROLE_ID: '',
        DEPARTMENT_ID: '',
        POST_ID: '',
        USERNAME: '',
        NAME: '',
        EMAIL: '',
        LEARNERCATEGORY: '',
        LEARNERCATEGORYSTATUS: 'select',
        SORT: '',
        BZ: '',
        PASSWORD: 'Aa@123456789',
        USERAVATARPREFIX: '',
        USERAVATARURL: '',
        USERAVATARURL_CONVERT: '',
        ISSTUDENT: false,
        NATION: '', // 民族
        SEX: '', // 性别
        POLITICAL_OUTLOOK: '', // 政治面貌
        DATE_OF_BIRTH: '', // 出生年月
        DEGREE_OF_EDUCATION: '', // 文化程度
        POST: '', // 职务
        TYPE_OF_WORK: '', // 工种
        ENTRY_DATE: '', // 入职日期
        WORKING_DATE: '', // 参加工作日期
        INCUMBENCY: '', // 在职情况
        CERTIFICATE_INFORMATION: '', // 证书信息
        TITLE: '', // 职称
        DUTIESValue: '',
        DUTIES: '',
        letPostType: 'select',
        letTitleValue: '',
        letTitleId: '',
        letTitleType: 'select',
        letTypeOfWorkValue: '',
        letTypeOfWorkId: '',
        letTypeOfWorkType: 'select',
        USER_ID_CARD: ''
      },
      ISFLOW: '',
      BASIC_STATE: '',
      DEPART_STATE: '',
      AUDIT_STATE: '',

      dialogFormDaoru: false,
      daoruFrom: {
        FFILE: '',
        FFILEName: ''
      },
      USER_ID: '',
      printDialog: {
        visible: false,
        info: {},
        qrcodeStr: ''
      }
    }
  },
  watch: {
    'form.DEPARTMENT_ID': {
      handler(newVal, oldVal) {
        if (this.dialogType == 'saveUser' || (oldVal != null && oldVal != '')) { // 编辑初始化时，不监听
          // this.form.POST_ID = ''
          // this.getPostList()
        }
      },
      immediate: false

    },
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getList('')
    this.hasButton()
    this.getTreeList()
  },
  methods: {
    goPush(row) {
      requestFN(
        'user/goPush',
        {
          USER_ID: row.USER_ID,
          STATUS: row.STATUS,
          BZ: row.BZ,
          SKIN: row.SKIN,
          PHONE: row.PHONE,
          NUMBER: row.NUMBER,
          CARD_NO: row.CARD_ID,
          USERNAME: row.USERNAME,
          NAME: row.NAME,
          CORPINFO_ID: row.CORPINFO_ID,
          CORPINFO_NAME: row.CORPINFO_NAME || '',
          DEPARTMENT_ID: row.DEPARTMENT_ID,
          DEPARTMENT_NAME: row.DEPARTMENT_NAME,
          IMGFILES_ID: row.IMGFILES_ID,
          FOREIGN_KEY: row.FOREIGN_KEY,
          FILEPATH: row.FILEPATH,
          EMAIL: row.EMAIL || '',
          CARD_TYPE: '111',
          CARD_TYPE_NAME: '身份证',
          NATION: row.NATIONALITY || '',
          SEX: row.SEX || '',
          USER_TYPE: '2',
          ISUSE: row.ISUSE,
          ISDELETE: row.ISDELETE
        }
      ).then((data) => {
        if (data.result === 'success') {
          this.$message.success('推送成功')
          this.getList()
        } else {
          this.$message.error('推送失败，' + data.msg)
          this.getList()
        }
      }).catch((e) => {
        this.listLoading = false
      })
    },
    getRowKey(row) {
      return row.USER_ID
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    handleNodeClick(node, data, value) {
      this.form.DEPARTMENT_ID = node.id
      this.getList(node.id)
    },
    getTreeList() {
      this.treeLoading = true
      requestFN(
        '/department/listzTree',
        {
        }
      ).then((data) => {
        this.treeLoading = false
        this.treeData = JSON.parse(data.zTreeNodes)
      }).catch((e) => {
        this.treeLoading = false
      })
    },
    handleAdd() {
      this.$parent.activeName = 'Add'
      this.$parent.USER_ID = ''
    },

    handleShow(row) {
      this.$parent.USER_ID = row.USER_ID
      this.$parent.CORPINFO_ID = row.CORPINFO_ID
      this.$parent.EMPLOYMENT_APPLY_MANAGEMENT_ID = row.EMPLOYMENT_APPLY_MANAGEMENT_ID
      this.$parent.activeName = 'ViewData'
    },
    // 编辑
    handleUserEdit(row) {
      this.$parent.USER_ID = row.USER_ID
      this.$parent.CORPINFO_ID = row.CORPINFO_ID
      this.$parent.EMPLOYMENT_APPLY_MANAGEMENT_ID = row.EMPLOYMENT_APPLY_MANAGEMENT_ID
      this.$parent.activeName = 'Edit'
    },
    // 审核
    handleEditState(row) {
      this.auditForm.USER_ID = row.USER_ID
      this.dialogFormEditState = true
    },
    // 审核结果
    submit() {
      this.$refs.auditForm.validate(valid => {
        if (valid) {
          this.listLoading = true
          requestFN(
            '/user/editState',
            {
              USER_ID: this.auditForm.USER_ID,
              AUDIT_STATE: this.auditForm.auditState,
              CORPINFO_ID: JSON.parse(sessionStorage.getItem('user')).CORPINFO_ID
            }
          ).then((data) => {
            this.$message({
              message: '审核成功！',
              type: 'success'
            })
            this.listLoading = false
            this.dialogFormEditState = false
            this.getList()
          }).catch((e) => {
            this.listLoading = false
          })
        } else {
          return false
        }
      })
    },
    getQuery() {
      this.$refs.multipleTable.clearSelection()
      this.getList()
    },
    goKeyReset() {
      this.KEYWORDS = ''
      this.ISFLOW = ''
      this.AUDIT_STATE = ''
      this.DEPART_STATE = ''
      this.DEPARTMENT_ID = ''
      this.BASIC_STATE = ''
      this.ID_CARD = ''
      this.getList('')
    },
    confirm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.listLoading = true
          requestFN(
            '/user/' + this.dialogType,
            {
              USER_ID: this.pd.USER_ID,
              ROLE_ID: this.pd.ROLE_ID,
              DEPARTMENT_ID: this.pd.DEPARTMENT_ID,
              USERNAME: this.pd.USERNAME,
              NAME: this.pd.NAME,
              PHONE: this.pd.PHONE,
              EMAIL: this.pd.EMAIL,
              BZ: this.pd.BZ,
              tm: new Date().getTime()
            }
          ).then((data) => {
            this.listLoading = false
            this.dialogFormEdit = false
            this.varList = []
            this.listQuery.page = 1
            this.getList()
          }).catch((e) => {
            this.listLoading = false
          })
        } else {
          return false
        }
      })
    },
    // 删除
    handleDelete(row) {
      this.$confirm('确定要解除与[' + row.NAME + ']的关系吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/user/clearRelation',
          {
            USER_ID: row.USER_ID,
            NAME: row.NAME,
            PHONE: row.PHONE,
            CARD_ID: row.CARD_ID,
            DEPARTMENT_NAME: row.DEPARTMENT_NAME,
            CORPINFO_ID: row.CORPINFO_ID,
            ISPUSH: row.ISPUSH
          }
        ).then((data) => {
          if (data.result == 'success') {
            this.listLoading = false
            this.$message({
              message: '操作成功！',
              type: 'success'
            })
            this.getList()
          }
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },

    getList(DEPARTMENT_ID) {
      console.info(DEPARTMENT_ID)
      this.listLoading = true
      if (DEPARTMENT_ID) {
        this.DEPARTMENT_ID = DEPARTMENT_ID
      }
      this.CORPINFO_ID = JSON.parse(sessionStorage.getItem('user')).CORPINFO_ID
      requestFN(
        '/user/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
        {
          KEYWORDS: this.KEYWORDS,
          DEPARTMENT_ID: this.DEPARTMENT_ID,
          CORPINFO_ID: this.CORPINFO_ID,
          ISFLOW: this.ISFLOW,
          AUDIT_STATE: this.AUDIT_STATE,
          DEPART_STATE: this.DEPART_STATE,
          BASIC_STATE: this.BASIC_STATE,
          CARD_ID: this.ID_CARD,
          USER_ID: this.USER_ID
        }
      ).then((data) => {
        this.listLoading = false
        this.varList = data.userList
        console.log(this.varList)
        for (let i = 0; i < this.varList.length; i++) {
          if (this.varList[i].cardImgCount) {
            this.varList[i].BASIC_STATE = 1
          } else if (this.varList[i].ROLE_ID == '362add4102cd4d1ebe3768a8e58c737f') {
            this.varList[i].BASIC_STATE = ''
          } else {
            this.varList[i].BASIC_STATE = 2
          }
        }
        this.total = data.page.total
      }).catch((e) => {
        this.listLoading = false
      })
    },
    // 禁用 启用
    enableORDisable(ISUSE, row) {
      this.$confirm(ISUSE === '0' ? '确定要启用该账户吗?' : '确定要禁用该账户吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/user/editisuse',
          {
            USER_ID: row.USER_ID,
            ISUSE: ISUSE
          }
        ).then(() => {
          this.$message({
            message: ISUSE === '0' ? '启用成功' : '禁用成功',
            type: 'success'
          })
          this.listLoading = false
          this.varList = []
          this.listQuery.page = 1
          row.ISUSE = ISUSE
          this.goPush(row)
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {})
    },
    /* 重置密码  */
    resetPwd(id, name) {
      this.$confirm('是否重置密码为Aa@123456789?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/user/resetPwd',
          {
            USER_ID: id
          }
        ).then(() => {
          this.$message({
            message: '重置成功',
            type: 'success'
          })
          this.listLoading = false
          this.varList = []
          this.getList()
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },

    // 判断按钮权限，用于是否显示按钮
    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
      })
    },
    beforeFileUpload(file) {
      this.daoruFrom.FFILE = file
      this.daoruFrom.FFILEName = file.name
      this.$forceUpdate()
      return false
    },
    readExcelDebounce: debounce(
      1000, true, function() {
        const formData = new FormData()
        Object.keys(this.daoruFrom).map(key => {
          formData.append(key, this.daoruFrom[key])
        })
        this.importLoading = true
        upload(
          'user/readExcel',
          formData
        ).then((data) => {
          this.importLoading = false
          if (data.code !== '0') {
            this.$message({
              message: data.errorMsg,
              type: 'error',
              dangerouslyUseHTMLString: true
            })
          } else {
            console.log(data.uncheckMsg)
            if (data.uncheckMsg) {
              this.$message({
                message: '导入成功，但部分数据验重或推送失败</br>一共解析了' + data.importCount + '条数据。</br>其中新增' + data.saveCount + '条数据。' + '修改' + data.updCount + '条数据。</br>' + data.pushMsg + '</br>' + data.uncheckMsg + '</br>',
                duration: 5000,
                showClose: true,
                dangerouslyUseHTMLString: true,
                type: 'error'
              })
            } else {
              this.$message({
                message: '导入成功。</br>一共解析了' + data.importCount + '条数据。</br>其中新增' + data.saveCount + '条数据。' + '修改' + data.updCount + '条数据。</br>' + data.pushMsg + '</br>',
                duration: 5000,
                showClose: true,
                dangerouslyUseHTMLString: true,
                type: 'success'
              })
            }
            this.dialogFormDaoru = false
            this.getList()
          }
        }).catch((e) => {
          this.importLoading = false
        })
      }
    ),
    getExcelModel() {
      this.$confirm('确定要下载excel模板吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = false
        window.location.href = config.httpurl + '/user/excelModel'
      }).catch(() => {
        this.listLoading = false
      })
      this.listLoading = false
    },
    handlePrinting(row) {
      requestFN(
        'user/getDetailByUserIdAndCorpInfoId',
        {
          USER_ID: row.USER_ID,
          CORPINFO_ID: row.CORPINFO_ID
        }
      ).then((data) => {
        data.pd.imgUrl = data.userPhotoFile.length > 0 ? config.fileUrl + data.userPhotoFile[0].FILEPATH : ''
        this.printDialog.info = data.pd
        // console.log(config.weburl + 'static/qrcode/views/electronic_work_card/info.html?USER_ID=' + data.pd.USER_ID)
        this.printDialog.qrcodeStr = config.weburl + 'static/qrcode/views/electronic_work_card/info.html?USER_ID=' + data.pd.USER_ID
        this.printDialog.visible = true
      }).catch((e) => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.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 #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.table-ui{
  text-align: center;
}

</style>

<style lang="sass" scoped>
.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: 20px
      height: 20px
      border-radius: 4px
      &>img
        width: 2%
        height: 3%

      .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>
