<template>
  <div class="house-list">
    <tables
      :data-api="dataApi"
      :columns="columns"
      @chooseSelection="chooseSelection"
      placeholder="输入名称"
      ref="table"
    />
  </div>
</template>

<script>
import tables from 'components/tables'
import { fetchViewerList, updateGuide } from 'api/'

const roleMap = {
  0: '超级管理员',
  1: '普通管理员',
  2: '讲解员',
}
export default {
  data() {
    return {
      // 传递给tables的表格列数据
      dataApi: fetchViewerList,
      roleList: [],
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          type: 'index',
          title: '序号',
          align: 'center',
          width: 80
        },
        {
          title: '头像',
          key: 'avatar',
          align: 'center',
          render: (h, params) => {
            return h('img', {
              domProps: {
                src: params.row.avatar,
                className: 'avatar'
              }
            })
          }
        },
        {
          title: '名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '授权时间',
          key: 'createTime',
          align: 'center',
          render: (h, params) => h('p', params.row.createTime.replace('T', ' '))
        }
      ],
      selecteds: []
    }
  },
  components: {
    tables
  },
  methods: {
    chooseSelection (selection) {
      this.selecteds = selection.map(item => item.viewerId)
      this.$emit('selected', this.selecteds)
    },
  }
}
</script>

<style lang="less" scoped>
.house-list {
  padding: 20px;
  background: #252828;
}
</style>

<style>
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.pic-upload .tips {
  bottom: auto;
}
</style>