<template>
  <div class="q-pa-md">
    <div v-if="!isLoaded" class="spinner flex flex-center">
      <q-spinner  color="primary" size="3em" />
    </div>
    <q-table v-else  row-key="index" :selection="type" v-model:selected="selected" :columns="columns" :rows="rows"
    class="action-table"
    flat bordered
    virtual-scroll
    :pagination="pagination"
    :rows-per-page-options="[0]"
    :filter="filter"
    >
    </q-table>
  </div>
</template>
<script>
import { ref,onMounted,reactive } from 'vue'
import { api } from 'boot/axios';

export default {
  name: 'actionSelect',
  props: {
    name: String,
    type: String,
    filter:String
  },
  setup(props) {
    const isLoaded=ref(false);
    const columns = [
    { name: 'name', required: true,label: 'アクション名',align: 'left',field: 'name',sortable: true},
    { name: 'desc', align: 'left', label: '説明', field: 'desc', sortable: true },
    // { name: 'content', label: '内容', field: 'content', sortable: true }
    ];
    const rows = reactive([])
    onMounted(async () => {
        const res =await api.get('api/actions');
        res.data.forEach((item,index) =>
        {
          rows.push({index,name:item.name,desc:item.title,outputPoints:item.outputpoints,property:item.property});
        });
        isLoaded.value=true;
      });
    return {
      columns,
      rows,
      selected: ref([]),
      pagination:ref({
        rowsPerPage:0
      }),
      isLoaded,
    }
  },

}
</script>
<style lang="scss">
.action-table{
  min-height: 10vh;
  max-height: 68vh;
}
</style>
