<template>
  <q-table :rows="rows" :columns="columns" row-key="id" :filter="filter" :loading="loading" :pagination="pagination">

    <template v-slot:top>
      <q-btn color="primary" :disable="loading" label="新規" @click="addRow" />
      <q-space />
      <q-input borderless dense filled debounce="300" v-model="filter" placeholder="検索">
        <template v-slot:append>
          <q-icon name="search" />
        </template>
      </q-input>
    </template>

    <template v-slot:body-cell-name="p">
      <q-td class="flex justify-between items-center" :props="p">
        {{ p.row.name }}
        <q-badge v-if="!p.row.domainActive" color="grey">未启用</q-badge>
        <q-badge v-if="p.row.id == currendDomainId" color="primary">現在</q-badge>
      </q-td>
    </template>

    <template v-slot:body-cell-actions="p">
      <q-td :props="p">
        <q-btn-group flat>
          <q-btn flat color="primary" padding="xs" size="1em" icon="edit_note" @click="editRow(p.row)" />
          <q-btn flat color="negative" padding="xs" size="1em" icon="delete_outline" @click="removeRow(p.row)" />
        </q-btn-group>
      </q-td>
    </template>

  </q-table>
</template>

