<template>
  <div class="q-pa-md">
    <q-table flat bordered row-key="name" :selection="type"
    :selected="modelValue"
    @update:selected="$emit('update:modelValue', $event)"
    :columns="columns" :rows="rows" />
  </div>
</template>
<script lang="ts">
import { ref, reactive, PropType, compile } from 'vue';
import {IActionNode,IActionVariable} from '../types/ActionTypes';

export default {
  name: 'VariableList',
  props: {
    name: String,
    type: String,
    vars:{
      type:Array as PropType<IActionVariable[]>,
      reqired:true,
      default:()=>[]
    },
    modelValue:Array
  },
  emits:[
   'update:modelValue'
   ],
  setup(props) {
     const columns= [
    { name: 'actionName', label: 'アクション名',align: 'left',field: 'actionName',sortable: true},
    { name: 'displayName', label: '変数表示名', align: 'left',field: 'displayName', sortable: true },
    { name: 'name', label: '変数名', align: 'left',field: 'name',required: true, sortable: true }
    ];
    const rows= props.vars.map((v)=>{
      return {objectType:'variable',...v};
    });

    return {
      columns,
      rows:reactive(rows)
    }
  }
}
</script>
