<template>
  <div :key="'edieForm_' + $route.name" class="ns-view">
    <ns-page-header class="ns-page-header" :sticky="sticky" :title="title">
      <template #extra>
        <!--      todo 隐藏取消-->
        <a-button type="primary" @click="submit" :disabled="!nsFormElRef?.validateResult"
          >提交</a-button
        >
        <a-button style="margin-left: 10px" @click="navigateBack">返回</a-button>
      </template>
    </ns-page-header>
    <div class="ns-add-form">
      <ns-form ref="nsFormElRef" v-bind="getBindValue" :model="data"
        ><template #[item]="data" v-for="item in Object.keys($slots)">
          <slot :name="item" v-bind="data || {}"></slot> </template
      ></ns-form>
    </div>
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent, ref } from 'vue';
  import { NsMessage } from '/nerv-lib/component/message';
  import { useRoute } from 'vue-router';
  import { formProps } from '/nerv-lib/component/form/form/props';
  import { PropTypes } from '/nerv-lib/util/type';
  import { useApi, HttpRequestConfig } from '/nerv-lib/use/use-api';
  import { useNavigate } from '/nerv-lib/use/use-navigate';

  export default defineComponent({
    name: 'NsViewEditForm',
    props: {
      ...formProps,
      api: PropTypes.string,
      getApi: PropTypes.string,
      title: PropTypes.string,
    },
    setup(props, { attrs }) {
      const nsFormElRef = ref();
      const { httpRequest } = useApi();
      const route = useRoute();
      const { navigateBack } = useNavigate();

      const data = ref<Recordable>({});

      const request = () => {
        const { api, getApi } = props;
        const { params, query } = route;
        const requestConfig: HttpRequestConfig = { method: 'get' };
        httpRequest({
          api: getApi ? getApi : api,
          params: query,
          pathParams: params,
          requestConfig,
        }).then((res: Recordable) => {
          data.value = res;
        });
      };

      request();
      function submit() {
        nsFormElRef.value
          .triggerSubmit()
          .then((data: Recordable) => {
            const { api } = props;
            const { params } = route;
            const requestConfig: HttpRequestConfig = { method: 'PUT' };
            httpRequest({ api, params: data, pathParams: params, requestConfig }).then(() => {
              NsMessage.success('操作成功', 1, () => {
                navigateBack();
              });
            });
          })
          .catch(() => ({}));
      }
      const getBindValue = computed(() => ({
        ...attrs,
        ...props,
      }));
      return { nsFormElRef, submit, data, getBindValue, navigateBack };
    },
  });
</script>
<style lang="less" scoped>
  :deep(.ns-page-header) {
    margin-bottom: 0 !important;
  }
  .ns-add-form {
    :deep(.ns-form) {
      padding: 32px 24px;
      // 第一个子表单Title距离顶部为0
      &.ns-flex-form-vertical
        .ns-form-body:first-child
        .ns-form-item:first-child
        .ns-form-body
        .ns-child-form-title {
        padding-top: 0;
      }
    }
  }
</style>