<template>
  <div>
    <ele-table-select
      v-model="selectVal"
      :clearable="true"
      placeholder="请选择"
      value-key="id"
      label-key="loginName"
      :table-config="tableConfig"
      :popper-width="580"
    >
      <!-- 角色列 -->
      <template v-slot:roles="{ row }">
        <el-tag
          v-for="item in row.roleList"
          :key="item.id"
          size="mini"
          type="primary"
          :disable-transitions="true"
        >
          {{ item.name }}
        </el-tag>
      </template>
    </ele-table-select>
  </div>
</template>

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

  export default {
    model: {
      prop: 'value',
      event: 'updateVal'
    },
    props: {
      value: {
        type: [String, Number],
        default: ''
      }
    },
    data() {
      return {
        // 表格配置
        tableConfig: {
          datasource: [],
          columns: [
            {
              columnKey: 'index',
              type: 'index',
              width: 45,
              align: 'center',
              showOverflowTooltip: true,
              fixed: 'left'
            },
            {
              prop: 'loginName',
              label: '用户账号',
              sortable: 'custom',
              showOverflowTooltip: true,
              minWidth: 110
            },

            {
              columnKey: 'roles',
              label: '角色',
              showOverflowTooltip: true,
              minWidth: 110,
              slot: 'roles'
            }
          ],
          toolbar: false,
          pageSize: 5,
          pageSizes: [5, 10, 15, 20],
          size: 'small'
        }
      };
    },
    created() {
      this.getUserPage();
    },
    computed: {
      selectVal: {
        set(val) {
          this.$emit('updateVal', val);
        },
        get() {
          return this.value;
        }
      }
    },
    methods: {
      async getUserPage() {
        const res = await pageUsers({
          current: 1,
          size: 9999
        });
        console.log(res);
        this.tableConfig.datasource = res.list;
      }
    }
  };
</script>

<style></style>
