<template>
  <section class="AppOnlineManager">
    <ai-detail list>
      <ai-title slot="title" :title="menuName" isShowBottomBorder/>
      <template #content>
        <ai-search-bar>
          <template #right>
            <el-input placeholder="姓名/手机号" size="small" clearable v-model="search.name" @change="page.current=1,getTableData()"/>
          </template>
        </ai-search-bar>
        <el-row type="flex" class="fill">
          <div flex v-for="item in tableData" :key="item.id" class="itemCard">
          </div>
        </el-row>
      </template>
    </ai-detail>
  </section>
</template>

<script>
const label = "在线管理"
export default {
  name: "AppOnlineManager",
  label,
  props: {
    menuName: {default: label},
    instance: Function,
    dict: Object,
    permissions: Function,
  },
  data() {
    return {
      tableData: [],
      search: {name: ""},
      page: {current: 1, size: 10, total: 0}
    }
  },
  methods: {
    getTableData() {

    }
  },
  created() {
    this.getTableData()
  }
}
</script>

<style lang="scss" scoped>
.AppOnlineManager {
  height: 100%;

  .itemCard {
    padding: 8px 16px;
    border: 1px solid #eee;
    box-shadow: 0 4px 6px -2px rgb(15 15 21 / 15%);
  }
}
</style>
