<template>
  <div class="icons-container">
    <el-container>
      <el-main>
        <el-form label-width="100px">
          <el-row>
            <el-col :span="4">
              <el-form-item label="姓名">
                <el-input v-model="KEYWORDS" style="width: 150px" placeholder="请输入关键字"/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="人员类型">
                <el-select v-model="ISFLOW" placeholder="请选择">
                  <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="160px">
                <el-select v-model="searchForm.keySpecialType" style="width: 100%;">
                  <el-option v-for="item in zuoyeleibieList" :key="item.DICTIONARIES_ID" :value="item.DICTIONARIES_ID" :label="item.NAME"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label-width="20px">
                <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-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table v-loading="listLoading" 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="NAME" label="姓名" />
          <el-table-column prop="DEPARTMENT_NAME" label="部门" />
<!--          <el-table-column prop="JOBS_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="CERTIFICATE" label="证书名称"/>
          <el-table-column prop="specialName" label="证书作业类别" />
          <el-table-column prop="operationName" label="操作项目" />
          <el-table-column prop="SPECIAL_NUMBER" label="证书编号" />
          <el-table-column prop="DEPART_STATE" label="就职状态">
            <template slot-scope="{row}">
              <el-tag v-if="row.DEPART_STATE == '1'" type="danger">离职</el-tag>
              <el-tag v-if="row.DEPART_STATE == '0'" type="success">在职</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="FILEPATH" label="图片">
            <template slot-scope="{row}">
              <viewer>
                <img :src="config.fileUrl + row.FILEPATH" width="100" height="100">
              </viewer>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100px">
            <template slot-scope="{row}">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(row.SPECIAL_USER_ID)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-btn-group">
          <div/>
          <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
        </div>
      </el-main>
    </el-container>
    <div/>
    <el-dialog :visible.sync="dialogFormEdit" :title="dialogType==='editUser'?'查看':'新增'" width="600px">
      <el-form ref="form" :rules="rules" :model="form" disabled label-width="150px" style="width: 500px;">
        <el-form-item label="姓名" prop="NAME">
          <el-input v-model="form.NAME" />
        </el-form-item>
        <el-form-item label="性别" prop="SEX">
          <el-select v-model="form.SEX" style="width: 100%">
            <el-option value="0" label="男"/>
            <el-option value="1" label="女"/>
          </el-select>
        </el-form-item>
        <el-form-item label="出生年月" prop="BIRTHDATE">
          <el-date-picker
            v-model="form.BIRTHDATE"
            style="width: 100%"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"/>
        </el-form-item>
        <el-form-item label="年龄" prop="AGE">
          <el-input v-model="form.AGE" />
        </el-form-item>
        <el-form-item label="身份证号码" prop="CARD_ID">
          <el-input v-model="form.CARD_ID" @blur="hasState(form.CARD_ID,'1')" />
        </el-form-item>
        <el-form-item label="手机号码" prop="PHONE">
          <el-input v-model="form.PHONE" />
        </el-form-item>
        <el-form-item label="证书名称" prop="CERTIFICATE">
          <el-input v-model="form.CERTIFICATE" />
        </el-form-item>
        <el-form-item label="作业类别" prop="SPECIAL_TYPE">
          <el-select v-model="form.SPECIAL_TYPE" style="width: 100%">
            <el-option v-for="item in zuoyeleibieList" :key="item.DICTIONARIES_ID" :value="item.DICTIONARIES_ID" :label="item.NAME"/>
          </el-select>
        </el-form-item>
        <el-form-item label="操作项目" prop="OPERATION_TYPE">
          <el-select v-model="form.operationName" style="width: 100%">
            <el-option v-for="item in caozuoxiangmuList" :key="item.DICTIONARIES_ID" :value="item.DICTIONARIES_ID" :label="item.NAME"/>
          </el-select>
        </el-form-item>
        <el-form-item label="特种作业证书编号" prop="SPECIAL_NUMBER">
          <el-input v-model="form.SPECIAL_NUMBER" @blur="hasState(form.SPECIAL_NUMBER,'2')" />
        </el-form-item>
        <el-form-item label="发证机关" prop="ISSUING_AUTHORITY">
          <el-input v-model="form.ISSUING_AUTHORITY" />
        </el-form-item>
        <el-form-item label="有效期" prop="VALIDITY_TIME">
          <el-date-picker
            v-model="form.VALIDITY_TIME"
            style="width: 100%"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"/>
        </el-form-item>
        <el-form-item label="复审时间" prop="REVIEW_TIME">
          <el-date-picker
            v-model="form.REVIEW_TIME"
            style="width: 100%"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormEdit = false">取 消</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'
export default {
  components: { Pagination, SelectTree },
  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,
            NAME: this.form.NAME
          }
        ).then((data) => {
          if (data.result == 'success') {
            callback()
          } else {
            callback(new Error('邮箱重复'))
          }
        }).catch((e) => {

        })
      } else {
        callback()
      }
    }
    return {
      dayTime: [],
      dialogFormEdit: false,
      dialogFormEditState: false,

      listLoading: true,
      treeLoading: false,
      add: false,
      del: false,
      edit: false,
      listQuery: {
        page: 1,
        limit: 10
      },
      form: {
        USER_TYPE: '',
        USER_ID: '',
        USER_NAME: '',
        UNIT_ID: '',
        NAME: '',
        SEX: '',
        PHONE: '',
        CARD_ID: '',
        SPECIAL_NUMBER: '',
        SPECIAL_TYPE: '',
        OPERATION_TYPE: '',
        ISSUING_AUTHORITY: '',
        VALIDITY_TIME: [],
        REVIEW_TIME: '',
        CORPINFO_ID: ''
      },
      filterText: '',
      total: 0,
      KEYWORDS: '',
      ISFLOW: '',
      DEPART_STATE: '',
      selectPeriod: [],
      periodList: [],
      DEPARTMENT_ID: '',
      pd: [],
      varList: [],
      multipleSelectionAll: [], // 所有选中的数据包含跨页数据
      multipleSelection: [], // 当前页选中的数据
      dialogType: 'saveUser',
      disabledLCSelect: false,
      displayLCSelect: 'display: block',
      disabledLCInput: true,
      displayLCInput: 'display: none',
      LearnerCategoryList: [],
      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'
      },
      searchForm: {
        keySpecialType: '',
        keyUserType: '',
        keyUnitName: '',
        keySpecialNumber: '',
        keyUserName: ''
      },
      zuoyeleibieList: [],
      caozuoxiangmuList: [],
      treeData: [],
      certificate_files: [],
      config: config,
      dialogImageUrl: [],
      dialogVisible: false,
      roleList: [],
      postList: [],
      oldPostId: '', // 原岗位ID（用于判断岗位是否变化）
      oldDepartId: '', // 原部门ID（用于判断部门是否变化）
      dialogFormDaoru: false,
      daoruFrom: {
        FFILE: '',
        FFILEName: ''
      },
      PARENTID: '0',
      shiftDutyListOne: [],
      shiftDutyListTwo: [],
      queryShiftOneList: [],
      queryShiftTwoList: [],
      datePage: 0,
      workDateList: [],
      USER_ID: '',
      LOGIN_USER: JSON.parse(sessionStorage.getItem('user')).USER_ID,
      keyCrelType: ''
    }
  },
  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.getZuoYeLeiBieList()
    this.getCaoZuoXiangMuList()
    this.hasButton()
    this.getTreeList()
  },
  methods: {
    detailShowDate() {
      this.showDate(this.form.SHIFTDUTYTWO)
    },
    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/listTree',
        {}
      ).then((data) => {
        this.treeLoading = false
        this.treeData = JSON.parse(data.zTreeNodes)
      }).catch((e) => {
        this.treeLoading = false
      })
    },
    getZuoYeLeiBieList() {
      this.treeLoading = true
      requestFN(
        'dictionaries/getLevels',
        {
          DICTIONARIES_ID: 'f4c3890d06d54904b32986cb6428ed4f'
        }
      ).then((data) => {
        this.treeLoading = false
        this.zuoyeleibieList = data.list
      }).catch((e) => {
        this.treeLoading = false
      })
    },
    getCaoZuoXiangMuList() {
      this.treeLoading = true
      requestFN(
        'dictionaries/getLevels',
        {
          DICTIONARIES_ID: 'f4adfaecb0b6427190876b8f0398a531'
        }
      ).then((data) => {
        this.treeLoading = false
        this.caozuoxiangmuList = data.list
      }).catch((e) => {
        this.treeLoading = false
      })
    },

    // 修改
    handleEdit(ID, dialogType) {
      this.dialogType = 'editUser'
      requestFN(
        '/specialUser/goEdit',
        {
          SPECIAL_USER_ID: ID
        }
      ).then((data) => {
        data.pd.VALIDITY_TIME = [data.pd.VALIDITY_TIME_START, data.pd.VALIDITY_TIME_END]
        this.form = data.pd
        console.log(this.form)
        this.form.USER_NAME = data.pd.unitName
        this.dialogFormEdit = true
      }).catch((e) => {
        this.listLoading = false
      })
    },
    getQuery() {
      this.$refs.multipleTable.clearSelection()
      this.getList()
    },
    goKeyReset() {
      this.KEYWORDS = ''
      this.ISFLOW = ''
      this.DEPART_STATE = ''
      this.searchForm.keySpecialType = ''
      this.getList()
    },

    beforeFileUpload(file) {
      this.daoruFrom.FFILE = file
      this.daoruFrom.FFILEName = file.name
      this.$forceUpdate()
      return false
    },
    getList() {
      this.listLoading = true
      this.keyCrelType = '7498057c4c1f4a11b9a960e66ea04a7a'
      requestFN(
        '/specialUser/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
        {
          ...this.searchForm,
          ISFLOW: this.ISFLOW,
          KEYWORDS: this.KEYWORDS,
          DEPART_STATE: this.DEPART_STATE,
          keyCrelType: this.keyCrelType
        }
      ).then((data) => {
        this.listLoading = false
        this.varList = data.varList
        console.log(this.varList)
        this.total = data.page.totalResult
      }).catch((e) => {
        this.listLoading = false
      })
    },

    getLearnerCategory() {
      requestFN(
        '/dictionaries/getLevels',
        {
          DICTIONARIES_ID: '532282f9c48346b8b646531909c739df'
        }
      ).then((data) => {
        this.LearnerCategoryList = data.list
      }).catch((e) => {

      })
    },
    changeLearnerCategory() {
      this.form.LEARNERCATEGORY = ''
      if (this.form.LEARNERCATEGORYSTATUS === 'select') {
        this.disabledLCInput = false
        this.displayLCInput = 'display: block'
        this.disabledLCSelect = true
        this.displayLCSelect = 'display: none'
        this.form.LEARNERCATEGORYSTATUS = 'input'
      } else {
        this.disabledLCInput = true
        this.displayLCInput = 'display: none'
        this.disabledLCSelect = false
        this.displayLCSelect = 'display: block'
        this.form.LEARNERCATEGORYSTATUS = 'select'
      }
    },
    // 判断按钮权限，用于是否显示按钮
    hasButton() {
      var keys = 'user:add,user:del,user:edit'
      requestFN(
        '/head/hasButton',
        {
          keys: keys
        }
      ).then((data) => {
        this.add = data.userfhadminadd
        this.del = data.userfhadmindel
        this.edit = data.userfhadminedit
      }).catch((e) => {
        this.listLoading = false
      })
    },
    ISSTUDENTCK() {
      if (this.form.ISSTUDENT) {
        if (this.uesrInfoDic.minzuList.length == 0) {
          this.getDicListByPID('0a0e406f27f74ee698fe9979d25f62dd', '', 'minzuList')
        }
        if (this.uesrInfoDic.zhengzhimianmaoList.length == 0) {
          this.getDicListByPID('6351efdd12dc4730952e5d195718e252', '', 'zhengzhimianmaoList')
        }
        if (this.uesrInfoDic.wenhuachengduList.length == 0) {
          this.getDicListByPID('d7d80f08d73a4accbccf4fd3d8d1d867', '', 'wenhuachengduList')
        }
        if (this.uesrInfoDic.renyuanleixingList.length == 0) {
          this.getDicListByPID('0b62f92b0b624aab8e89a77304a64d5e', '', 'renyuanleixingList')
        }
        if (this.uesrInfoDic.zaizhiqingkuangList.length == 0) {
          this.getDicListByPID('548764b5d4bf4bd7a18ef88274ef49e4', '', 'zaizhiqingkuangList')
        }
        if (this.uesrInfoDic.xingbieList.length == 0) {
          this.getDicListByPID('21501808bbc344d593fbf9ccfe6c4531', '', 'xingbieList')
        }
        this.getDicListByPID('09e36ac01e9540f8bc84eab1c1a78754', '', 'zhiwuList')
        this.getDicListByPID('945a6b10e59946078b500f0fbafa8679', '', 'zhichengList')
        this.getDicListByPID('55484e491a5e442d839c4595380713ec', '', 'gongzhongList')
      }
    },
    getDicListByPID(pId, id, listName) {
      var url = '/dictionaries/getLevels'
      if (listName == 'zhiwuList' || listName == 'zhichengList' || listName == 'gongzhongList') {
        url = '/dictionariesCorp/getLevels'
      }
      requestFN(url,
        {
          DICTIONARIES_ID: pId
        }
      ).then((data) => {
        this.uesrInfoDic[listName] = data.list
      }).catch((e) => {

      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    beforeFileUploadByZhengshu(file) {
      const types = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = types.includes(file.type)
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
      } else {
        this.certificate_files.push(file)
      }
    },
    uploadImgByZhengshu(userId) {
      this.$refs.upload.submit()
      const formData = new FormData()
      for (var i = 0; i < this.certificate_files.length; i++) {
        if (this.certificate_files[i]) {
          formData.append('FFILE', this.certificate_files[i])
        }
      }
      formData.append('FOREIGN_KEY', userId)
      formData.append('TYPE', 18)
      upload(
        '/imgfiles/add',
        formData
      ).then((data) => {
      }).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;
}

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