<template>
  <w-dialog
    ref="dialogRef"
    width="600px"
    height="500px"
    :can-maximize="false"
    :buttons="[
      {
        label: $t('confirm'),
        noCaps: true,
        click: () => {
          const tickeds = parameterGrid.getTickedRows();
          const parameterIds = [];
          tickeds.forEach((ticked) => {
            parameterIds.push(ticked.id);
          });
          axios
            .post(Environment.apiContextPath('/api/re/model/parameter/move'), {
              one: modelGridRef.getSelectedRows()[0].id,
              many: parameterIds,
            })
            .then((response) => {
              close();
              parameterGrid.refresh();
            });
        },
      },
    ]"
  >
    <div class="pt-2" style="height: 100%">
      <w-grid
        ref="modelGridRef"
        dense-body
        class="px-1"
        hide-bottom
        :config-button="false"
        selection="multiple"
        :checkbox-selection="false"
        :tree="true"
        :tree-icon="
          (row) => {
            return { name: 'folder', color: 'amber' };
          }
        "
        :fetch-data-url="Environment.apiContextPath('/api/re/model/findModelWithSubModelsByResourceId?resourceId=' + resource.id)"
        :data-url="Environment.apiContextPath('/api/re/model')"
        :pageable="false"
        :toolbar-configure="{ noIcon: false }"
        :columns="[
          { width: '100%', name: 'name', label: $t('name'), sortable: false },
          {
            width: 80,
            name: 'category',
            label: $t('category'),
            sortable: false,
            format: Formater.enum(Enums.ModelCategory),
          },
          {
            width: 80,
            name: 'executeMode',
            label: $t('re.resources.designer.model.grid.entity.executeMode'),
            align: 'center',
            sortable: false,
            format: (value) => {
              if (value === 'TOP_DOWN') {
                return {
                  componentType: 'QIcon',
                  attrs: { name: 'bi-arrow-down', size: '20px' },
                };
              }
              return '';
            },
          },
        ]"
      ></w-grid>
    </div>
  </w-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { axios, Environment, EnumTools, Formater } from 'platform-core';

const props = defineProps({
  parameterGrid: { type: Object, default: undefined },
  resource: { type: Object, default: undefined },
});

const dialogRef = ref();
const modelGridRef = ref();

const open = () => {
  dialogRef.value.show();
};

const close = () => {
  dialogRef.value.hide();
};

defineExpose({
  open,
  close,
});

const Enums = await EnumTools.fetch(['io.sc.engine.rule.core.enums.ModelCategory', 'io.sc.engine.rule.core.enums.ExecuteMode']);
</script>
