<template>
  <div class="q-px-md" style=" min-width: 50vw; max-width: 85vw;">
    <div v-if="!isLoaded" class="spinner flex flex-center">
      <q-spinner color="primary" size="3em" />
    </div>
    <q-table  flat bordered v-else row-key="id" :selection="type" v-model:selected="selected" :columns="columns"
      :rows="rows" :pagination="pageSetting" :filter="filter" style="max-height: 55vh;"/>
  </div>
</template>
<script>
import { ref, onMounted, reactive, watchEffect } from 'vue'
import { api } from 'boot/axios';


export default {
  name: 'fieldSelect',
  props: {
    name: String,
    type: {
      type: String,
      default: 'single'
    },
    appId: Number,
    not_page: {
      type: Boolean,
      default: false,
    },
    selectedFields:{
      type:Array ,
      default:()=>[]
    },
    fieldTypes:{
      type:Array,
      default:()=>[]
    },
    filter: String,
    updateSelectFields: {
      type: Function
    },
    blackListLabel: {
      type:Array,
      default:()=>[]
    }
  },
  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 pageSetting = ref({
      sortBy: 'name',
      descending: false,
      page: 1,
      rowsPerPage: props.not_page ? 0 : 25
      // rowsNumber: xx if getting data from a server
    });
    const rows = reactive([]);
    const selected = ref((props.selectedFields && props.selectedFields.length>0)?props.selectedFields:[]);

    onMounted(async () => {
      const url = props.fieldTypes.includes('SPACER')?'api/v1/allfields':'api/v1/appfields';
      const res = await api.get(url, {
        params: {
          app: props.appId
        }
      });
      let fields = Object.values(res.data.properties);
      for (const index in fields) {
        const fld = fields[index]
        if(props.blackListLabel.length > 0){
          if(!props.blackListLabel.find(blackListItem => blackListItem === fld.label)){
            if(props.fieldTypes.length===0 || props.fieldTypes.includes(fld.type)){
              rows.push({id:index, name: fld.label || fld.code, ...fld });
            }else if(props.fieldTypes.includes('lookup') && ('lookup' in fld)){
              rows.push({id:index, name: fld.label || fld.code, ...fld });
            }
          }
        } else {
          if(props.fieldTypes.length===0 || props.fieldTypes.includes(fld.type)){
            rows.push({id:index, name: fld.label || fld.code, ...fld });
          }else if(props.fieldTypes.includes('lookup') && ('lookup' in fld)){
            rows.push({id:index, name: fld.label || fld.code, ...fld });
          }
        }
      }
      isLoaded.value = true;
    });

    watchEffect(()=>{
      if (selected.value && selected.value[0] && props.updateSelectFields) {
        props.updateSelectFields(selected)
      }
    });

    return {
      columns,
      rows,
      selected,
      isLoaded,
      pageSetting
    }
  },

}
</script>
