<template>
  <div class="q-pa-md">
    <q-table :title="name+'一覧'"  row-key="name"  :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
  </div>
</template>
<script>
import { ref,onMounted,reactive } from 'vue'
import { api } from 'boot/axios';

export default {
  name: 'fieldSelect',
  props: {
    name: String,
    type: String,
    appId:Number
  },
  setup(props) {
  const columns = [
  { name: 'name', required: true,label: 'フィールド名',align: 'left',field: row=>row.name,sortable: true},
  { name: 'code', label: 'フィールドコード', align: 'left',field: 'code', sortable: true },
  { name: 'type', label: 'フィールドタイプ', align: 'left',field: 'type', sortable: true }
  ]
  const rows = reactive([])
    onMounted( () => {
        api.get('appfields', {
              params:{
                app: props.appId
              }
          }).then(res =>{
         let fields = res.data.properties;
         console.log(fields);
         Object.keys(fields).forEach((key) =>
        {
          rows.push({name:fields[key].label,code:fields[key].code,type:fields[key].type});
        }
        )
      });
      });
    return {
      columns,
      rows,
      selected: ref([]),
    }
  },

}
</script>
