<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="3" :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="20" :xs="24">
        <div class="filter-container" style="margin-bottom: 15px">
          <el-input
            v-model="search.keyWord"
            placeholder="关键字"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="handleFilter"/>

          <el-select v-model="search.idData">
            <el-option v-for="item in moduleOption" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
            搜索
          </el-button>
        </div>
        <el-table
          :data="tableData"
          border
          v-loading="listLoading"
          style="width: 100%;margin-bottom: 20px;"
          ref="userList"
          row-key="id"
        >
          <!--      <el-table-column-->
          <!--        prop="id"-->
          <!--        label="用户ID">-->
          <!--      </el-table-column>-->
          <el-table-column
            prop="loginName"
            label="登录名称">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="用户名">
          </el-table-column>
          <el-table-column
            prop="deptName"
            label="部门">
          </el-table-column>
          <el-table-column
            prop="workInCount"
            label="权限数">
          </el-table-column>
          <el-table-column fixed="left" label="操作" align="center" width="230" class-name="small-padding fixed-width">
            <template slot-scope="{row}">
             <el-button type="primary" size="mini" @click="purviewPerson(row)">查看人员</el-button>
            </template>
          </el-table-column>

        </el-table>
        <pagination v-show="listData.total>0" :total="listData.total" :page.sync="listData.page" :limit.sync="listData.pageSize" @pagination="getListInfo" />

      </el-col>
    </el-row>
    <el-dialog :close-on-click-modal="false" title="查看人员" :visible.sync="dialogVisible" width="800px">
      <el-dialog
        title="选择人员"
        :visible.sync="innerVisible"
        width="1000px"
        append-to-body
      @open="openInner">
        <user ref="userDialog" :key="timer" :is-choose="true" :type="1"  @chooseUser='chooseUser' :table-size="'mini'"></user>
      </el-dialog>
      <div class="filter-container" style="margin-bottom: 15px">
<!--        <el-input-->
<!--          v-model="personSearch.keyWord"-->
<!--          placeholder="关键字"-->
<!--          style="width: 200px;"-->
<!--          class="filter-item"-->
<!--          size="mini"-->
<!--          @keyup.enter.native="searchBtn"/>-->
<!--        <el-button  size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="searchBtn">-->
<!--          搜索-->
<!--        </el-button>-->
        <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="green"
        size="mini"
        @click="addPerson">增加</el-button>
        <el-button
          class="filter-item"
          style="margin-left: 10px;"
          type="danger"
          size="mini"
          @click="deletePerson">删除</el-button>
      </div>
      <el-table
        :data="purviewListInfo"
        border
        v-loading="purviewListLoading"
        style="width: 100%;margin-bottom: 20px;"
        ref="userList"
        size="mini"
        row-key="id"
        @selection-change="selectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          :reserve-selection="true"
        ></el-table-column>
        <el-table-column
          prop="createUserName"
          label="用户名">
        </el-table-column>
        <el-table-column
          prop="createUserDeptName"
          label="部门">
        </el-table-column>
      </el-table>
      <pagination v-show="purviewListData.total>0" :total="purviewListData.total" :page.sync="purviewListData.page" :limit.sync="purviewListData.pageSize" @pagination="getPurviewList" />

    </el-dialog>
    <cancledialog @tableRefresh="tableRefresh" ref="confirmDialog"></cancledialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getDeptTreeData } from '@/api/system/user.js'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import Cancledialog from '@/components/Dialog/Cancledialog.vue'
import {
  getDataPurviewModuleList,
  getDataPurviewControlerList,
  getDataPurviewList,
  addDataPurview, deleteDataPurview
} from '@/api/system/purviewControler'
import User from '@/views/system/user/user'
const form = {
  idUser: '',
  idCreateUser: '',
  idData: ''
}

export default {
  name: 'PurviewControler',
  components: {
    Pagination,
    Cancledialog,
    User
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val)
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  data() {
    return {
      total: 0,
      listLoading: false,
      tableData: [],

      // 部门树数据
      deptOptions: undefined,
      deptName: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      moduleOption: [],

      personSearch:{
        keyWord: '',
      },
      dialogVisible: false,
      oldPassword: '',
      newPassword: '',
      search: {
        keyWord: '',
        idData: 1
      },
      listData: {
        total: 0,
        page: 1,
        pageSize: 10
      },
      chooseRow: {},
      purviewListInfo: [],
      purviewListLoading: false,
      purviewListData: {
        total: 0,
        page: 1,
        pageSize: 10
      },
      innerVisible: false,
      timer: '',
      deleteList: [],
    }
  },
  mounted() {
    this.getMould()
    this.getListInfo()
    this.getDeptTree()
  },
  methods: {
    // 获取列表信息
    getListInfo() {
      const _that = this
      var params = _that.search
      var page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize
      }
      var data = {
        'params': JSON.stringify(params),
        'page': JSON.stringify(page)
      }
      getDataPurviewControlerList(data).then(response => {
        var data = response
        _that.tableData = response.data
        _that.listData.total = response.total
      })
    },
    // 获取模块
    getMould() {
      var _that = this
      getDataPurviewModuleList({}).then(res => {
        // console.log(res)
        _that.moduleOption = res.data
      })
    },
    // 获取部门树
    getDeptTree() {
      var _that = this
      var data = {}
      getDeptTreeData(data).then(res => {
        const deptData = _that.getDeptsData(res.data)
        var all = {
          title: '全部',
          name: '全部',
          id: 0
        }
        deptData.unshift(all)
        _that.deptOptions = deptData
      })
    },
    getDeptsData(data) {
      var deptData = data
      deptData.forEach((item, index) => {
        const parentId = item.pId
        if (parentId === 0) {
          // 是根元素的hua ,不做任何操作,如果是正常的for-i循环,可以直接continue.
        } else {
          // 如果ele是子元素的话 ,把ele扔到他的父亲的child数组中.
          deptData.forEach(d => {
            if (d.id === parentId) {
              let childArray = d.children
              if (!childArray) {
                childArray = []
              }
              childArray.push(item)
              d.children = childArray
              deptData.splice(index, 1)
            }
          })
        }
      })
      return deptData
    },
    // 关键字筛选部门树
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },

    // 部门树选中
    handleNodeClick(data) {
      var _that = this
      _that.search.deptId = data.id
      _that.getListInfo()
    },

    tableRefresh() {
      // 刷新表格
      this.getListInfo()
    },
    handleFilter() {
      this.listData.page = 1
      this.getListInfo()
    },
    searchBtn() {
      this.getPurviewList()
    },

    // 查看人员
    purviewPerson(row) {
      const _that = this
      _that.dialogVisible = true;
      _that.chooseRow = row
      _that.getPurviewList()
    },
    // 获取人员列表
    getPurviewList() {
      const _that = this;
      _that.deleteList = [];
      _that.$refs.userList.clearSelection();
      _that.purviewListInfo = [];
      var params = {
        idData: _that.search.idData,
        idUser: _that.chooseRow.id
      }
      var data = {
        'params': JSON.stringify(params)
      }
      getDataPurviewList(data).then(res => {
        _that.purviewListInfo = res.data
        _that.purviewListData.total = res.total
      })
    },

    addPerson() {
      const _that = this
      _that.innerVisible = true
      _that.timer = new Date().getTime()
    },
    openInner() {
      const _that = this
      _that.$nextTick(() => {
        _that.$refs.userDialog.chooseInfoList = _that.purviewListInfo
      })
    },

    // 添加人员
    addPurview(userList) {
      var _that = this
      var data = {
        purviewList: JSON.stringify(userList)
      }
      addDataPurview(data).then(res => {
        // console.log(res)
        if (res.httpCode == 200) {
          _that.innerVisible = false
          _that.$message.success('添加成功')
          _that.getPurviewList()
        }
      })
    },
    chooseUser(row) {
      var _that = this
      var userList = []
      row.forEach(item => {
        var form = Object.assign({}, form)
        form.idUser = _that.chooseRow.id
        form.idCreateUser = item.id
        form.idData = _that.search.idData
        userList.push(form)
      })
      _that.addPurview(userList)
    },

    // 删除人员
    deletePerson() {
      const _that = this
      var data = JSON.stringify(_that.deleteList);
      // console.log(_that.deleteList);
      deleteDataPurview(data).then(res =>{
        if (res.httpCode == 200) {
          _that.$message.success('删除成功')
          _that.getPurviewList()
        }
      })
    },

    selectionChange(val) {
      const _that = this
      _that.deleteList = val
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.operateBtn {
  margin: 5px 0;
}
</style>
