<template>
  <el-dialog
    v-loading = "loading"
    v-if="dialogVisible"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :title="title"
    :append-to-body="appendToBody"
    width="60%">
    <el-input v-show="false" v-model="filterText" placeholder="输入关键字进行过滤"/>
    <el-scrollbar class="information" style="height: 500px; margin-top: 10px">
      <el-table
        ref="table"
        :data="data"
        border
        style="width: 100%">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="role_NAME" label="角色名称"/>
      </el-table>
    </el-scrollbar>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeWindow">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
export default {
  components: { Pagination },
  directives: { waves },
  props: {
    title: {
      type: String,
      default: ''
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      e: {},
      root: {},
      data: [],
      filterText: ''
    }
  },
  watch: {
    filterText(val) {
      this.data = this.data.filter(data => !val || data.name.includes(val))
    }
  },
  methods: {
    init(e) {
      this.dialogVisible = true
      this.e = e.e
      this.root = e.root
      this.getData()
    },
    handleClose() {
      this.dialogVisible = false
    },
    getData() {
      this.loading = true
      requestFN(
        '/role/listRegularEmployees'
      ).then((data) => {
        this.loading = false
        this.data = data.roleList
      }).catch((e) => {
        this.loading = false
        this.$message.error(e)
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    closeWindow() {
      this.dialogVisible = false
    },
    clear() {
      this.tree = []
    },
    save() {
      const list = this.$refs.table.selection
      if (list.length > this.limit) {
        this.$message.error('应该选择' + this.limit + '个,但是现在选择了' + list.length + '个')
        return
      }
      this.$emit('getResult', { info: this.$refs.table.selection, e: this.$refs.table.selection, root: this.root, post_flag: true })
      this.dialogVisible = false
    }
  }
}

</script>

<style scoped>
.information >>> .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
