<!--坐席列表-->
<template>
  <div>
    <div style="width:90%;">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>坐席列表</span>
        </div>
        <el-tree
          v-loading= "treeLoading"
          ref="tree"
          :data="tree"
          :props="defaultProps"
          :default-expand-all="expandAllNode"
          :expand-on-click-node="expandNodeClick"
          node-key="id"
          class="filter-tree"
          @node-click = "handleNodeClick"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { getUserSimpleList } from '@/api/system/user'

export default {
  name: 'UserList',
  data() {
    return {
      tree: null, // 树
      defaultProps: {
        children: 'children',
        label: 'name'
      }, // 配置项
      defaultChecked: ['1'],
      treeLoading: false, // 加载状态
      expandAllNode: true, // 是否展开所有节点
      expandNodeClick: false // 是否点击展开
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 获取组织结构树
    fetchData() {
      this.treeLoading = true
      const params = {
        roleTips: 'receiver,monitor'
      }
      getUserSimpleList(params).then(response => {
        this.tree = [{
          id: '1',
          name: '客服',
          disabled: true,
          children: response.data
        }]
        // this.handleNodeClick(response.data[0])
        this.treeLoading = false
      })
    },
    // 点击左侧组织结构项触发
    handleNodeClick(data) {
      console.log('userClick')
      if (data.id !== '1') {
        this.$emit('change', data)
      } else {
        data.id = ''
        this.$emit('change', data)
      }
    },
    // 添加模块
    add() {
      this.$refs.editdialog.initDialog('create', true)
    },
    // 刷新
    refreshTree() {
      this.fetchData()
    }
  }
}
</script>

<style scoped>

</style>