<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="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 isLoaded=ref(false);
    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( async () => {
          const res = await api.get('api/v1/appfields', {
                params:{
                  app: props.appId
                }
            });
            let fields = res.data.properties;
            console.log(fields);
            Object.keys(fields).forEach((key) =>
            {
              const fld=fields[key];
              // rows.push({name:fields[key].label,code:fields[key].code,type:fields[key].type});
              rows.push({name:fld.label,...fld});
            });
            isLoaded.value=true;
        });

      return {
        columns,
        rows,
        selected: ref([]),
        isLoaded
      }
  },

}
</script>
