<template>
  <div class="q-pa-md">
    <div v-if="!isLoaded" class="spinner flex flex-center">
      <q-spinner  color="primary" size="3em" />
    </div>
    <q-splitter
      v-model="splitterModel"
      style="height: 100%"
      before-class="tab"
      unit="px"
      v-else
    >
      <template v-slot:before>
        <q-tabs
          v-model="tab"
          vertical
          active-color="white"
          indicator-color="primary"
          active-bg-color="primary"
          class="bg-grey-2 text-grey-8"
          @update:model-value="() => selected = []"
          dense
        >
          <q-tab :name="cate"
                :label="cate"
                 v-for="(cate,) in categorys"
                 :key="cate"
                 ></q-tab>
        </q-tabs>
      </template>
      <template v-slot:after>
        <q-table row-key="index" :selection="type" v-model:selected="selected" :columns="columns" :rows="actionForTab"
        class="action-table"
        flat bordered
        virtual-scroll
        :pagination="pagination"
        :rows-per-page-options="[0]"
        :filter="filter"></q-table>
      </template>
    </q-splitter>
  </div>
</template>
<script>
import { ref,onMounted,reactive,watchEffect,computed,watch } from 'vue'
import { api } from 'boot/axios';
import { useFlowEditorStore } from 'stores/flowEditor';

export default {
  name: 'actionSelect',
  props: {
    name: String,
    type: String,
    filter:String
  },
  emits:[
    'clearFilter'
  ],
  setup(props,{emit}) {
    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 store = useFlowEditorStore();
    let actionData =reactive([]);
    const categorys = ref('');
    const tab=ref('');
    const actionForTab=computed(()=>{
       const rows=[];
       const actions= props.filter? actionData:actionData.filter(x=>x.categoryname===tab.value);
       actions.forEach((item,index) =>{
            rows.push({index,
                 name:item.name,
                 desc:item.title,
                 outputPoints:item.outputpoints,
                 property:item.property});
       });
       return rows;
    });
    onMounted(async () => {
        let eventId='';
        if(store.selectedEvent ){
          eventId=store.selectedEvent.header!=='DELETABLE'? store.selectedEvent.eventId : store.selectedEvent.parentId;
        }
        const res =await api.get(`api/eventactions/${eventId}`);
        actionData= res.data;
        const categoryNames = Array.from(new Set(actionData.map(x=>x.categoryname)));
        categorys.value=categoryNames;
        tab.value = categoryNames.length>0? categoryNames[0]:'';
        isLoaded.value=true;
      });
      // watch(props.filter,()=>{
      //   if(props.filter && props.filter!==''){
      //     tab.value='';
      //   }
      // });
      watch(tab,()=>{
        if(tab.value!==''){
          emit('clearFilter','');
        }
      });
      // watchEffect(()=>{
      //   if(props.filter && props.filter!==''){
      //     tab.value='';
      //   }
      //   if(tab.value!==''){
      //     emit('update:filter','');
      //   }
      // });
    return {
      columns,
      selected: ref([]),
      pagination:ref({
        rowsPerPage:0
      }),
      isLoaded,
      tab,
      actionData,
      categorys,
      splitterModel: ref(150),
      actionForTab
    }
  },

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