<template>
  <el-dialog v-bind="$attrs" v-on="$listeners" append-to-body title="选择成员" width="60%">
    <app-list v-bind="tableOptions" ref="list" @select="select" @selection-change="handleSelectionChange"></app-list>
    <div class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handlePrimary">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getUserList } from '@/api/base.js'
export default {
  props: { multiple: { type: Boolean, default: true } },
  data() {
    return {
      dialogVisible: false,
      multipleSelection: [], // 选择的数据
      selected: [] // 确定选中的
    }
  },
  computed: {
    // 列表配置
    tableOptions() {
      return {
        remote: {
          httpRequest: getUserList,
          params: { app_id: this.$store.state.appid }
        },
        columns: [
          { type: 'selection' },
          { label: '姓名', prop: 'sso_user.realname' },
          { label: '昵称', prop: 'sso_user.nickname' },
          { label: '手机号', prop: 'sso_user.mobile' },
          { label: '邮箱', prop: 'sso_user.email' }
        ]
      }
    }
  },
  methods: {
    // 选择
    select(selection, row) {
      if (!this.multiple && selection.length > 1) {
        const selected = !!selection.find(item => item.id === row.id)
        this.$refs.list.table.clearSelection()
        this.$nextTick(function () {
          this.$refs.list.table.toggleRowSelection(row, selected)
        })
      }
    },
    // 选择
    handleSelectionChange(value) {
      this.multipleSelection = value
    },
    // 取消
    handleCancel() {
      this.$emit('update:visible', false)
    },
    // 确定
    handlePrimary() {
      this.$emit('primary', this.multipleSelection)
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  position: sticky;
  bottom: 0;
  text-align: center;
  z-index: 118;
  padding: 20px 0;
  border-top: 0.5px solid rgba(0, 0, 0, 0.05);
  background-color: rgba(255, 255, 255, 0.95);
}
</style>
