<template>
  <el-dialog v-if="visible" :title = "title" :visible.sync="visible" width="80%" append-to-body>
    <el-container>
      <el-aside width="300px" style="background-color:#fff; height: 500px">
        <el-input
          v-model="filterText"
          placeholder="输入关键字进行过滤"
          style="margin:10px 0"/>
        <el-tree
          v-loading="treeLoading"
          ref="tree"
          :data="treeData"
          :props="defaultProps"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          default-expand-all
          class="filter-tree"
          @node-click="handleNodeClick"/>
      </el-aside>
      <el-main style="height: 500px">
        <el-form label-width="50px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="姓名">
                <el-input v-model="searchForm.KEYWORDS" placeholder="请输入关键字"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属岗位" label-width="80px">
                <el-select v-model="searchForm.POST_ID" placeholder="请选择" class="filter-item" style="width: 100%;">
                  <el-option v-for="item in translate.postList" :key="item.POST_ID" :label="item.NAME" :value="item.POST_ID" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="职务">
                <el-select v-model="searchForm.POSITION" placeholder="请选择" style="width: 100%;" @change="$forceUpdate()">
                  <el-option v-for="item in translate.positionList" :key="item.dictionaries_ID" :label="item.name" :value="item.dictionaries_ID" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <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-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table v-loading="listLoading" ref="multipleTable" :data="list" :row-key="getRowKey" :header-cell-style="{'font-weight': 'bold','color': '#000'}" height="350px" 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="POST_NAME" label="岗位" />
          <el-table-column prop="POSITIVETIME" label="转正时间" />
          <el-table-column prop="ROLE_NAME" label="角色" width="150"/>
          <el-table-column prop="POSITIONNAME" label="职务" width="150"/>
        </el-table>
        <div class="page-btn-group">
          <el-row :gutter="20">
            <el-col :span="22">
              <el-button icon="el-icon-share" type="primary" @click="confirm">确定</el-button>
              <el-button icon="el-icon-help" type="info" @click="handleClose">返回</el-button>
            </el-col>
            <el-col :span="2">
              <pagination :total="page.total" :page.sync="page.page" :limit.sync="page.limit" @pagination="getList" />
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </el-dialog>
</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'
export default {
  components: { Pagination, SelectTree },
  directives: { waves },
  props: {
    title: {
      type: String,
      default: ''
    },
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      visible: false,
      heirloom: {},
      page: {
        total: 0,
        page: 0,
        limit: 10
      },
      filterText: '',
      treeLoading: false,
      treeData: [],
      defaultProps: {
        children: 'nodes',
        label: 'name'
      },

      listLoading: false,
      list: [],
      searchForm: {
        KEYWORDS: '',
        POST_ID: '',
        POSITION: '',
        DEPARTMENT_ID: '',
        STATE: '1'
      },
      translate: {
        postList: [],
        positionList: []
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    init(e) {
      this.visible = true
      this.warmUp()
      this.getList()
      this.heirloom = e
    },
    getList(DEPARTMENT_ID) {
      this.listLoading = true
      if (DEPARTMENT_ID) {
        this.searchForm.DEPARTMENT_ID = DEPARTMENT_ID
      }
      requestFN(
        '/employee/list?showCount=' + this.page.limit + '&currentPage=' + this.page.page,
        this.searchForm
      ).then((data) => {
        this.listLoading = false
        this.list = data.userList
        this.page.total = data.page.totalResult
      }).catch((e) => {
        this.listLoading = false
      })
    },
    getDic(e) {
      this.treeLoading = true
      requestFN(
        '/magicMirror/getInfo', e
      ).then((data) => {
        if (data.code !== '0') {
          this.$message.error('系统异常，请联系管理员')
          this.visible = false
        }
        if (data.departmentList) { this.treeData = JSON.parse(data.departmentList) }
        if (data.postList) this.translate.postList = data.postList
        if (data.positionList) this.translate.positionList = data.positionList
        this.treeLoading = false
      }).catch((e) => {
        this.treeLoading = false
      })
    },
    getPostList() {
      this.getDic({
        postType: '1',
        positionType: '1',
        DEPARTMENT_ID: this.searchForm.DEPARTMENT_ID
      })
    },
    warmUp() {
      this.getDic({
        departmentType: '1'
      })
    },
    getRowKey(row) {
      return row.USER_ID
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    handleNodeClick(node, data, value) {
      this.searchForm.DEPARTMENT_ID = node.id
      this.getList(node.id)
      this.getPostList()
    },
    getQuery() {
      this.$refs.multipleTable.clearSelection()
      this.getList()
    },
    goKeyReset() {
      this.searchForm = {
        KEYWORDS: '',
        POST_ID: '',
        POSITION: '',
        DEPARTMENT_ID: '',
        STATE: '1'
      }
      this.translate.postList = []
      this.translate.positionList = []
      this.getList()
    },
    confirm() {
      const chooseList = this.$refs.multipleTable.selection
      if (this.limit < chooseList.length) {
        this.$message.error('系统规定只能选择' + this.limit + '条数据，现在选择' + chooseList.length + '条数据')
        return
      }
      this.$emit('getResult', { heirloom: this.heirloom, list: chooseList })
      this.handleClose()
    },
    handleClose() {
      this.searchForm = {
        KEYWORDS: '',
        POST_ID: '',
        POSITION: '',
        DEPARTMENT_ID: '',
        STATE: '1'
      }
      this.visible = false
      this.$refs.multipleTable.clearSelection()
    }
  }
}
</script>
