<template>
  <div style="display: inline-block;padding: 0px;">
    <div>
      <el-button
        type="text"
        size="mini"
        @click="openAddUser"
      >{{ title }}
      </el-button>
    </div>
    <div>
      <el-dialog :title="title" :visible.sync="open" width="1800px" append-to-body @cancel="cancel">
        <el-row :gutter="5" class="mb8">
          <el-col :span="12">
            <el-card>
              <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                  未添加列表
                </el-col>
              </el-row>
              <el-form :model="filesListDialog" ref="filesListDialog" :inline="true">
                <el-row :gutter="10" class="mb8">
                  <el-col :span="1.5">
                    <el-form-item label="姓名" prop="userName">
                      <el-input
                        v-model="filesListDialog.userName"
                        placeholder="请输入姓名"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="1.5">
                    <el-form-item label="工号" prop="userCode">
                      <el-input
                        v-model="filesListDialog.userCode"
                        placeholder="请输入工号"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="1.5">
                    <div class="grid-content bg-purple">
                      <el-form-item label="操作">
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索
                        </el-button>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
              </el-form>
              <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                  <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="addGroupUser"
                  >添加
                  </el-button>
                </el-col>
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getUserDialogList"></right-toolbar>
              </el-row>
              <el-row :gutter="10">
                <!--部门数据-->
                <el-col :span="10" :xs="24">
                  <div class="head-container">
                    <el-input
                      v-model="deptName"
                      placeholder="请输入部门名称"
                      clearable
                      size="small"
                      prefix-icon="el-icon-search"
                      style="margin-bottom: 20px"
                    />
                  </div>
                  <div class="head-container">
                    <el-tree
                      :data="deptOptions"
                      :props="defaultProps"
                      :expand-on-click-node="false"
                      :filter-node-method="filterNode"
                      ref="tree"
                      default-expand-all
                      @node-click="handleNodeClick"
                    />
                  </div>
                </el-col>
                <el-col :span="12" :xs="24">
                  <el-table :title="titleText" v-loading="filesListDialog.loading" :data="filesList" @cancel="cancel"
                            @selection-change="addConfigUser" height="507">
                    <el-table-column type="selection" width="55" align="center"/>
                    <el-table-column label="工号" align="center" prop="userCode"/>
                    <el-table-column label="姓名" align="center" prop="userName"/>
                  </el-table>
                  <div style="width: 620px">
                    <pagination
                      :total="filesListDialog.total"
                      :page.sync="filesListDialog.pageNum"
                      :limit.sync="filesListDialog.pageSize"
                      @pagination="getUserDialogList"
                    />
                  </div>

                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <div>
                <el-row :gutter="10" class="mb8">
                  <el-col :span="1.5">
                    未添加列表
                  </el-col>
                </el-row>
                <el-form :model="filesListDialog" ref="filesListDialog" :inline="true">
                  <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                      <el-form-item label="姓名" prop="userName">
                        <el-input
                          v-model="usersPage.userName"
                          placeholder="请输入姓名"
                          clearable
                          size="small"
                          @keyup.enter.native="handleQuery"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="1.5">
                      <el-form-item label="工号" prop="userCode">
                        <el-input
                          v-model="usersPage.userCode"
                          placeholder="请输入工号"
                          clearable
                          size="small"
                          @keyup.enter.native="handleQuery"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="1.5">
                      <div class="grid-content bg-purple">
                        <el-form-item label="操作">
                          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryBinding">搜索
                          </el-button>
                        </el-form-item>
                      </div>
                    </el-col>
                  </el-row>
                </el-form>
                <el-table :title="titleText" v-loading="usersPage.loading" :data="userActualList" @cancel="cancel"
                          height="545">
                  <el-table-column label="工号" align="center" prop="userCode"/>
                  <el-table-column label="姓名" align="center" prop="userName"/>
                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="deletePostUser(scope.row,scope.$index)"
                      >删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <pagination
                  :total="usersPage.total"
                  :page.sync="usersPage.pageNum"
                  :limit.sync="usersPage.pageSize"
                  @pagination="getUsersData"
                />
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>

import { listFiles } from '@/api/files/files'
import { treeselect } from '@/api/system/dept'
import Treeselect from '@riophae/vue-treeselect'

export default {
  name: 'index',
  components: { Treeselect },
  props: {
    data: {
      type: Object,
      default: undefined
    },
    title: {
      type: String,
      default: '管理'
    },
    propsName: {
      type: String,
      default: 'users'
    }
  },
  data() {
    return {
      // 部门树选项
      deptOptions: undefined,
      deptName: '',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      open: false,
      showSearch: false,
      titleText: undefined,
      userActualListData: [],
      userActualList: [],
      filesList: [],
      filesListDialog: {
        userName: '',
        userCode: '',
        department: '',
        open: false,
        total: 0,
        loading: true,
        pageNum: 1,
        pageSize: 10
      },
      usersPage: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        loading: true,
        userName: '',
        userCode: ''
      }
    }
  },
  created() {
    this.getTreeselect()
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.filesListDialog.pageNum = 1
      this.getUserDialogList()
    },
    handleQueryBinding() {
      this.getUsersData()
    },
    openAddUser() {
      this.open = true
      this.getUserDialogList()
      this.setUserActualList()
    },
    getUsersData() {
      this.usersPage.loading = true
      let i = (this.usersPage.pageNum - 1) * this.usersPage.pageSize
      let copyList = []
      for (let j = i; j < i + this.usersPage.pageSize; j++) {
        if (this.userActualListData[j]) {
          if (!this.usersPage.userName && !this.usersPage.userCode) {
            copyList.push(this.userActualListData[j])
          } else if (this.usersPage.userName === this.userActualListData[j].userName) {
            copyList.push(this.userActualListData[j])
          } else if (this.usersPage.userCode === this.userActualListData[j].userCode) {
            copyList.push(this.userActualListData[j])
          }
        }
      }
      this.userActualList = copyList
      this.usersPage.total = this.userActualListData.length
      this.usersPage.loading = false
    },
    /** 添加用户按钮 */
    addGroupUser() {
      var itemToString = this.ids.toString()
      if (this.data[this.propsName]) {
        this.data[this.propsName] += ',' + itemToString
      } else {
        this.data[this.propsName] = itemToString
      }
      this.setUserActualList()
      this.$emit('addGroupUser', this.data)
    },
    deletePostUser(item, index) {
      let reg = ''
      if (index > 0) {
        reg = new RegExp(',' + item.userName + item.userCode)
      } else if (index === 0 && this.userActualList.length === 1) {
        reg = new RegExp(item.userName + item.userCode)
      } else {
        reg = new RegExp(item.userName + item.userCode + ',')
      }
      this.data[this.propsName] = this.data[this.propsName].replace(reg, '')
      this.setUserActualList()
      this.$emit('deletePostUser', this.data)
    },
    setUserActualList() {
      this.userActualListData = []
      this.userActualList = []
      if (this.data[this.propsName]) {
        let ay = this.data[this.propsName].split(',')
        this.getConfigKey('user_no_prefix').then(result => {
          if (result.code === 200) {
            let prefix = result.msg
            if (ay) {
              for (let i = 0; i < ay.length; i++) {
                let of = ay[i].indexOf(prefix)
                if (of !== -1) {
                  this.userActualListData.push({
                    userName: ay[i].substring(0, of),
                    userCode: ay[i].substring(of)
                  })
                } else {
                  of = ay[i].indexOf('admin')
                  if (of !== -1) {
                    this.userActualListData.push({
                      userName: 'WILLALP',
                      userCode: 'admin'
                    })
                  }
                }
              }

              this.getUsersData()
            }
          }
        })
      }
      this.usersPage.total = 0
      this.usersPage.loading = false
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data
      })
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.filesListDialog.department = data.id
      this.handleQuery()
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 多选框选中数据
    addConfigUser(selection) {
      this.ids = selection.map(item => item.userName + item.userCode)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 查询机构人员档案列表 */
    getUserDialogList() {
      this.filesListDialog.loading = true
      listFiles(this.filesListDialog).then(response => {
        this.filesList = response.rows
        this.filesListDialog.total = response.total
        this.filesListDialog.loading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
