<template>
  <div @click.stop="open">
    <InputModel
      :value="state.apiConfigInfo.path"
      :placeholder="t('配置API')"
      style="width: 100%; min-width: 100px"
    />
  </div>
  <a-modal
    :width="900"
    v-model:visible="state.apiConfigDia"
    :title="t('API配置')"
    :maskClosable="false"
    :bodyStyle="state.modalBodyStyle"
    destroyOnClose
    @cancel="handleClose"
  >
    <NodeHead nodeName="API信息" />
    <a-row type="flex" align="middle" gutter="20" class="mt-2.5">
      <a-col flex="90px"><em class="required-icon">*</em>{{ t('接口地址') }}</a-col>
      <a-col flex="auto">
        <a-input
          v-model:value="state.apiConfigInfo.path"
          :placeholder="t('点击选择接口')"
          @click="state.apiSelectDialog = true"
        >
          <template #addonAfter>
            <Icon icon="ant-design:ellipsis-outlined" />
          </template>
        </a-input>
      </a-col>
      <a-col flex="90px">{{ t('请求方式') }}</a-col>
      <a-col flex="auto">
        <a-input
          v-model:value="state.apiConfigInfo.method"
          :placeholder="t('选择接口后自动显示接口请求方式')"
          disabled
        />
      </a-col>
    </a-row>
    <InputParams v-if="visible" :apiParams="state.apiConfigInfo.apiParams" :needPageData="false" />
    <template #footer>
      <div class="footer-container">
        <div>
          <a-button key="back" @click="handleCancel" class="cancel-api">{{
            '取消API配置'
          }}</a-button>
          <a-button key="back" @click="handleClose">{{ t('取消') }}</a-button>
          <a-button key="submit" type="primary" @click="handleSubmit">{{ t('确定') }}</a-button>
        </div>
      </div>
    </template>
  </a-modal>
  <ApiSelect
    v-if="state.apiSelectDialog"
    v-model:apiSelectDialog="state.apiSelectDialog"
    v-model:selectedApiId="state.apiConfigInfo.apiId"
    @success="handleSuccess"
  />
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { Icon } from '/@/components/Icon';
  import { ColumnProps } from 'ant-design-vue/lib/table/Column';
  import ApiSelect from '/@/components/ApiConfig/src/components/ApiConfigSelect.vue';
  import { cloneDeep } from 'lodash-es';

  import { useI18n } from '/@/hooks/web/useI18n';
  import { NodeHead } from '/@/components/ModalPanel/index';
  import InputParams from './InputParams.vue';

  import { InputModel } from '/@/components/ApiConfig';

  const { t } = useI18n();

  const props = defineProps({
    apiConfig: {
      type: Object as PropType<any>,
    },
  });
  const emit = defineEmits(['update:apiConfig', 'save']);
  const visible = ref<boolean>(false);

  const state = reactive({
    apiSelectDialog: false as boolean,
    apiConfigDia: false as boolean,
    activeKey: '1' as string,
    modalBodyStyle: {
      padding: '15px 15px 10px 10px',
      minHeight: '400px',
    },
    apiConfigColumns: [
      {
        title: t('API入参名称'),
        dataIndex: 'name',
        key: 'name',
        align: 'center',
      },
      {
        title: t('API入参类型'),
        dataIndex: 'dataType',
        key: 'dataType',
        align: 'center',
      },
      {
        title: t('赋值类型'),
        dataIndex: 'bindType',
        key: 'bindType',
        align: 'center',
      },
      {
        title: t('赋值配置'),
        dataIndex: 'value',
        key: 'value',
        align: 'center',
      },
    ] as ColumnProps[],

    interfaceInfo: [
      {
        key: '1',
        title: 'Query Params',
        tableInfo: [],
      },
      {
        key: '2',
        title: 'Header',
        tableInfo: [],
      },
      {
        key: '3',
        title: 'Body',
        tableInfo: [],
      },
    ],
    apiConfigInfo: props.apiConfig,
  });

  function open() {
    if (!!props.apiConfig) {
      state.apiConfigInfo = cloneDeep(props.apiConfig);
      if (!props.apiConfig?.apiParams?.length) {
        state.apiConfigInfo.apiParams = [];
        state.apiConfigInfo.apiParams = state.interfaceInfo;
      }
    }
    state.apiConfigDia = true;
    visible.value = true;
  }

  const handleCancel = () => {
    state.apiConfigInfo.apiId = '';
    state.apiConfigInfo.path = '';
    state.apiConfigDia = false;
    visible.value = false;
    emit('update:apiConfig', state.apiConfigInfo);
  };

  const handleClose = () => {
    state.apiConfigDia = false;
    visible.value = false;
  };

  const handleSubmit = () => {
    state.apiConfigDia = false;
    visible.value = false;
    emit('update:apiConfig', state.apiConfigInfo);
    emit('save', state.apiConfigInfo);
  };

  const handleSuccess = (config) => {
    state.apiConfigInfo = config;
    state.apiConfigInfo?.apiParams.forEach((para) => {
      if (!!para.tableInfo && para.tableInfo.length) {
        para.tableInfo?.map((item) => {
          return (item.bindType = !!item.value && !item.bindType ? 'value' : '');
        });
      }
    });
  };
</script>

<style lang="less" scoped>
  .required-icon {
    color: red;
  }

  .footer-container {
    display: flex;
    justify-content: flex-end;
  }

  :deep(.ant-tabs-nav) {
    margin: 10px 0 5px 10px;
  }

  .editor-box {
    width: 300px;
    position: absolute;
    height: 350px;
    left: 140px;
    bottom: 13px;
    border: 1px solid #ccc;
    box-shadow: 0 0 6px 3px #ccc;

    .editor-close {
      position: absolute;
      top: -3px;
      right: 13px;
      font-size: 16px;
      cursor: pointer;
    }

    .editor-copy {
      position: absolute;
      bottom: 5px;
      right: 15px;
      cursor: pointer;
      z-index: 999;
      color: #5e95ff;
    }
  }

  .cancel-api {
    background: #f70;
    border-color: #f70;
    color: #fff;
  }

  .table-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .ant-table-thead > tr > th {
    background: #f7fbff;
    border-bottom: 1px solid #ddd;
    font-weight: bold;

    &:not(
        :last-child,
        .ant-table-selection-column,
        .ant-table-row-expand-icon-cell,
        [colspan]
      )::before {
      background-color: #ddd;
    }
  }

  :deep(.ant-table-empty .ant-table-tbody > tr.ant-table-placeholder td) {
    border-bottom: 0;
  }
</style>
