<template>
  <el-dialog width="800px" title="添加用户" :visible.sync="dialogTableVisible">
    <LTable :dataSource="tableData" ref="Ltable" :options="options" :columns="columns" @select-all="selectAll" @selection-change="selection"></LTable>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="handerClick()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { useMessage } from '@/utils/element-ui'
import { columns, options } from './index'
import { getUnAuthRoleUser } from '@/api/system/user'
export default {
  name: 'AddUserDialog',
  components: {},
  props: {
    activeRow: {} // 已经存在的用户
  },
  data() {
    return {
      dialogTableVisible: false,
      columns: columns(this),
      options,
      tableData: [],
      activeArr: []
    }
  },
  mounted() {},
  methods: {
    opneDialog() {
      this.getUserList()
      this.dialogTableVisible = true
    },
    closeDialog() {
      this.tableData = []
      this.activeArr = []
      this.dialogTableVisible = false
      this.$refs.Ltable.clearSelection()
    },
    handerClick() {
      if (this.activeArr.length == 0) {
        return useMessage('warning', '请至少选择一个用户！')
      }
      this.$emit('handerClick', this.activeArr)
      this.tableData = []
      this.activeArr = []
      this.dialogTableVisible = false
      this.$refs.Ltable.clearSelection()
    },
    async getUserList() {
      const { data, code } = await getUnAuthRoleUser({ roleId: this.activeRow.roleId })
      if (code == 200) {
        this.tableData = data
      }
    },
    // 全选
    selectAll(data) {
      this.activeArr = []
      if (data.length > 0) {
        data.forEach((item) => {
          this.activeArr.push(item)
        })
      } else {
        this.activeArr = []
      }
    },
    // 单选
    selection(data) {
      this.activeArr = []
      data.forEach((item) => {
        this.activeArr.push(item)
      })
    }
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>
