<template>
  <PageWrapper v-bind="pageProps">
    <template #default>
        <<%= entityClass %>Form ref="<%= entityInstance %>FormRef" v-bind="formProps" @updateSaveButton="updateSaveButton"></<%= entityClass %>Form>
    </template>
    <template #rightFooter>
      <a-space>
        <basic-button
          v-for="operation in operations"
          :type="operation.type"
          @click="operation.click"
          <%_ if (cypressTests) { _%>
          v-bind="operation.attrs"
          <%_ } _%>
        >
          <Icon :icon="operation.icon" v-if="operation.icon"/>
          {{ operation.title }}
        </basic-button>
      </a-space>
    </template>
  </PageWrapper>
</template>
<script lang="ts" setup>
import <%= entityClass %>Form from './components/form-component.vue';
import { useGo } from '@/hooks/web/usePage';
import { useMultipleTabStore } from '@/store/modules/multipleTab';
<%_ if (addCustomMethod.indexOf('updateTemplate') !== -1) { _%>
  <%- include(`../common/entity-custom/${entityClass}.updateTemplate.ejs`, {position: 'import'}); -%>
<%_ } _%>
<%_ let apiModuleName = this._.camelCase(clientRootFolder || microserviceName); _%>

defineOptions({
  name: '<%= this._.upperFirst((moduleName || clientRootFolder) ? (moduleName || clientRootFolder) + entityAngularName : entityAngularName) %>Edit',
  inheritAttrs: false,
});

const props = defineProps({
  baseData: {
    type: Object,
    default: () => ({}),
  },
});

const route = useRoute();
const router = useRouter();
const go = useGo();
const tabStore = useMultipleTabStore();

const <%= entityInstance%>FormRef = ref<any>(null);
const pageProps = reactive({
  title: '编辑',
});
let <%= entityInstance %>Id = ref(route.params?.entityId as string);

<%_ if (addCustomMethod.indexOf('updateTemplate') !== -1) { _%>
<%- include(`../common/entity-custom/${entityClass}.updateTemplate.ejs`, {position: 'pageField'}); -%>
<%_ } _%>

async function saveOrUpdate() {
  const result = await <%= entityInstance %>FormRef.value.submit();
  if (result) {
    if (!<%= entityInstance %>Id.value) {
      const { fullPath } = route;
      tabStore.closeTabByKey(fullPath, router).then(() => {
        <%_ const moduleNameOrClientRootFolder = clientRootFolder; _%>
        go('/<%= moduleNameOrClientRootFolder ? (moduleNameOrClientRootFolder + '/') : '' %><%= entityUrl %>/' + result.id + '/edit', true);
      });
    }
  }
}

const formProps = reactive({
  entityId: <%= entityInstance %>Id.value,
  baseData: props.baseData,
});
const operationsConfig = ref<any>([
  {
    title: '关闭',
    type: 'default',
    name: 'close',
    skipValidate: true,
    click: async () => {
      const { fullPath } = route;
      await tabStore.closeTabByKey(fullPath, router);
    },
    <%_ if (cypressTests) { _%>
    attrs: {
      'data-cy': 'entityCreateCancelButton',
    }
    <%_ } _%>
  },
  {
    title: <%= entityInstance %>Id.value ? '更新' : '保存',
    icon: '',
    type: 'primary',
    name: 'save',
    click: saveOrUpdate,
    hide: () =>!showSaveButton.value,
    <%_ if (cypressTests) { _%>
    attrs: {
      'data-cy': 'entityCreateSaveButton',
    },
  <%_ } _%>
  },
]);
const showSaveButton = ref<boolean>(true);
function updateSaveButton(show: boolean) {
  showSaveButton.value = show;
}
const operations = ref<any[]>([]);
watch(() => showSaveButton.value, () => {
  operations.value = operationsConfig.value.filter((operation: any) => {
    if (operation.hide === undefined) {
      return true;
    }
    if (typeof operation.hide === 'function') {
      return !operation.hide();
    }
    return !operation.hide;
  });
}, {immediate: true, deep: true});
<%_ if (addCustomMethod.indexOf('updateTemplate') !== -1) { _%>
<%- include(`../common/entity-custom/${entityClass}.updateTemplate.ejs`, {position: 'pageMethod'}); -%>
<%_ } _%>
</script>
