<script setup>
const props = defineProps({
  items: {
    type: Array,
    default: [],
  },
  menus: {
    type: Array,
    default: [],
  },

});

const form = ref({});
// onBeforeMount(() => {
//   console.log(props.items);
// })
</script>
<template>
  <!-- {{ props.items }} -->
  <div class="vf-element-layout vf-col-12 border border-gray-200 rounded-xl">
    <v-table style="min-width: 100%">
      <thead>
        <tr>
          <th class="text-h6 ps-6">Module</th>
          <th class="text-h6">Permission</th>
        </tr>
      </thead>
      <tbody>
        <!-- <div class="vf-element-layout vf-col-12"> -->
          <tr v-for="(item, index) in props.items" :key="index">
            <td>
              <SelectElement
                @select="onSelectSearch"
                :name="item.title"
                :model-value="form.title"
                :items="props.menus"
                :search="true"
                :native="false"
                label="Module"
                input-type="search"
                autocomplete="of"
                value-prop="title"
                label-prop="title"
                :create="true"
                :add-option-on="['enter', 'tab', 'space']"
                :columns="{
                  container: 6,
                }"
              />
            </td>

            <!-- <td>
              <CheckboxElement
                name="create"
                text="create"
                :columns="{
                  container: 6,
                }"
                trueValue="1"
                falseValue="0"
              />
            </td>
            <td>
              <CheckboxElement
                name="update"
                text="update"
                :columns="{
                  container: 6,
                }"
                trueValue="1"
                falseValue="0"
              />
            </td>
            <td>
              <CheckboxElement
                name="delete"
                text="delete"
                :columns="{
                  container: 6,
                }"
                trueValue="1"
                falseValue="0"
              />
            </td>
            <td>
              <CheckboxElement
                name="view"
                text="view"
                :columns="{
                  container: 6,
                }"
                trueValue="1"
                falseValue="0"
              />
            </td> -->
          </tr>
        <!-- </div> -->
      </tbody>
    </v-table>
  </div>
</template>
