<template>
  <div id="container">
      <el-col :span="5" class="userManagement">
        <div>
          <el-tree
            class="filter-tree"
            :data="depotIdList"
            node-key="depotCode"
            highlight-current
            :props="defaultProps"
            ref="userManageTree"
            default-expand-all
            :expand-on-click-node="false"
            :filter-node-method="filterNode" 
            @node-click="getNodeData"
            >        
          </el-tree>
        </div>
      </el-col>
      <el-col :span="19">
        <div>
          <el-row>
            <el-form :inline="true" :model="query" class="demo-form-inline" style="float:left">
              <el-form-item label="角色">
                <el-select v-model="query.roleName" placeholder="请选择" style="width:200px" >
                  <el-option
                    v-for="item in roleList"
                    :key="item.roleCode"
                    :label="item.roleName"
                    :value="item.roleName">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="用户名">
                <el-input v-model="query.uName" style="width:200px" />
              </el-form-item>
              <el-form-item label="真实姓名">
                <el-input v-model="query.personnelName" style="width:200px" />
              </el-form-item>
              <el-form-item>
                <el-button type="success" plain @click="clear()">清空</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="success" plain @click="search()">查询</el-button>
              </el-form-item>
            </el-form>
            <div style="float:right">
              <el-button type="success" @click="addUser">新增用户</el-button>
            </div>
          </el-row>
        </div>
          <el-table  border  stripe  :data="tableData"  highlight-current-row>
            <el-table-column type="index"  align="center"  label="序号"  width="50px"/>
            <el-table-column prop="uname" label="用户名" align="center" />
            <el-table-column prop="personnelName" label="人员名称" align="center" />
            <el-table-column prop="depotName" label="公司" align="center" />
            <el-table-column prop="ppost" label="职位" align="center" />
            <el-table-column prop="uphone" label="电话" align="center" />
            <el-table-column prop="roleName" label="角色" align="center" />
            <el-table-column prop="ustatus" label="启用" align="center" width="200px" auto-expand-parent="false">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.ustatus"
                  on-color="#5B7BFA"
                  off-color="#dadde5"
                  :active-value="active"
                  :inactive-value="inactive"
                  @change="ustatusChange(scope.row)"
                />
              </template>
            </el-table-column>
            <el-table-column  label="操作"  align="center" fixed="right" width="200px">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleCheck(scope.row)"
                >查看</el-button>
                <el-button
                  size="mini"
                  @click="handleEdit(scope.row)"
                >编辑</el-button>   
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              class="right"
              :current-page.sync="listQuery.page"
              :page-size="listQuery.limit"
              :page-sizes="[10,20,30,40]"
              :total="total"
              @size-change="sizeChange"
              @current-change="pageChange"
              layout="total, sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
      </el-col>
  </div>
</template>
<script>
import { getAllPerson,getPersonById,getAllRole,getDepotAll,getWarehouseAll,getList,deleteByIdFn } from '@/api/system/userManagement/user.js'
import { getUser } from '@/utils/auth'
export default {
  data() {
    return {
      depotIdList:[],
      defaultProps: {
        children: 'children',
        label: 'depotName',
        value:'depotCode'
      },
      depotName:'',
      depotId:'',
      // 查询条件
      query: {
        depotName:'',
        roleName:'',
        uName:'',
        personnelName:'',
        depotId:''
      },
      // 分页
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
      },
      tableData: [],
      inactive:3,
      active:1,
      roleList:[],
    }
  },
  created() {
    this.getRoleList()
    this.getDepotList()
    this.depotId = JSON.parse(getUser()).depotId
    this.depotName = JSON.parse(getUser()).depotName
    this.getList()
    
  },
  mounted() {
  },
  methods: {
    getRoleList() {
      getAllRole().then(res => {
        this.roleList = res.data
      })
    },
    getDepotList() {
      let depotId = JSON.parse(getUser()).depotId
      getDepotAll(depotId).then(res => {
        this.depotIdList = res.data
        this.$nextTick(() => {
            this.$refs.userManageTree.setCurrentKey(JSON.parse(getUser()).depotId);
          });
      })
    },
    filterNode(value, treeData) {
      if (!value) return true;
      return treeData.label.indexOf(value) !== -1;
    },

    getNodeData(treeData) {
      console.log(treeData);
      this.depotName = ''
      this.depotId = ''
      this.depotName = treeData.depotName
      this.depotId = treeData.depotCode
      this.query.depotName = ''
      this.query.roleName = ''
      this.query.uName = ''
      this.query.personnelName = ''

      let condition = {
        depotName:'',
        roleName:'',
        uName:'',
        personnelName:'',
        depotId:this.depotId
      }
      let data = { 
        pageIndex: this.listQuery.page,
        pageSize: this.listQuery.limit,
        condition: JSON.stringify(condition)
      }
      getList(data).then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.records
            this.listQuery.limit = res.data.size
            this.total = res.data.total
          }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 清空
    clear() {
      this.query = {
        depotName:'',
        roleName:'',
        uName:'',
        personnelName:'',
      }
    },
    // 查询
    search() {
      this.getList()
    },
    getList() {
      let condition = {
        depotName:this.query.depotName,
        roleName:this.query.roleName,
        uName:this.query.uName,
        personnelName:this.query.personnelName,
        depotId:this.depotId
      }
      let data = { 
        pageIndex: this.listQuery.page,
        pageSize: this.listQuery.limit,
        condition: JSON.stringify(condition)
      }
      getList(data).then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.records
            this.listQuery.limit = res.data.size
            this.total = res.data.total
          }
      }).catch((err) => {
          console.log(err)
        })
    },
    sizeChange(v) {
      this.listQuery.limit = v;
      this.getList();
    },
    pageChange(v) {
      this.listQuery.page = v;
      this.getList();
    },
    ustatusChange(row) {
      let title = '禁用'
      if(row.ustatus == '1'){
        title = '启用'
      }else if(row.ustatus == '3'){
        title = '禁用'
      }
      deleteByIdFn(row.uid,row.ustatus)
        .then((res) => {
          if (res.code == 200) {
            this.getList()
            this.$message({
              type: 'success',
              message: `${title}成功!`
            })
          }
        })
        .catch(() => {
          this.getList()
          this.$message({
            type: 'info',
            message: `${title}失败!`
          })
        })
    },
    // 新增用户
    addUser() {
      if(this.depotId){
        this.$router.push({ name: 'AddUser',query: { state:'add',depotId: this.depotId,depotName: this.depotName } })
      }else{
        this.$message.error('请先在左侧组织架构树中选择相应节点')
      }
    },
    handleCheck(row) {
      this.$router.push({ name: 'AddUser',query: { state: 'detail',id: row.uid,depotId: row.depotId }})
    },
    handleEdit(row) {
      this.$router.push({ name: 'AddUser',query: { state: 'edit',id: row.uid,depotId: row.depotId }})
    }
  }
}
</script>
<style lang="scss" scoped>
#container{
    width:100%;
    //   .top{
    //     height:50px;
    //     line-height:50px;
    //     text-align: right;
    //     margin-bottom:20px;
    // }
}
.userManagement {
  padding-right:10px
}
.pagination-container {
  margin-top:10px;
  margin-right:20px;
  text-align: right;
}
</style>
