<script lang="ts" setup>
import { RequestDataTypeEnum, RequestDataTypeNameEnum } from '@/enums/external/httpEnum';
import { useDesign } from '@/hooks/external/useDesign';
import { CreateComponentType } from '@/packages/index.d';
import { CreateComponentGroupType } from '@/packages/index.d';
import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
import { NButton, NDivider, NModal, NSpace, NTag } from 'naive-ui';
import { ref, unref, computed, nextTick } from 'vue';
import { PublicInterfaceForm } from '../PublicInterfaceForm';
import ComponentConfiguration from './ComponentConfiguration.vue';
import GlobalPublicConfiguration from './GlobalPublicConfiguration.vue';
import { createRequestModalContext } from './useRequestModalContext';
import { useTargetData } from '../../../../hooks/useTargetData.hook';
import { useFetchTargetData } from '@/hooks/external/useFetchTargetData';
import { useFilterFn } from '@/hooks/external/useFilterFn';


const requestDataType = ref<RequestDataTypeEnum>(RequestDataTypeEnum.AJAX)

const showModal = ref(false)

const chartEditStore = useChartEditStore()

const componentConfigurationEl = ref<InstanceType<typeof ComponentConfiguration>>()

const publicInterfaceFormEl = ref<InstanceType<typeof PublicInterfaceForm>>()

const getRequestTypeName = computed(() => {
  return RequestDataTypeNameEnum[RequestDataTypeEnum[unref(requestDataType)] as keyof typeof RequestDataTypeEnum]
})

const { prefixCls } = useDesign('chart-data-request')

const openModal = async (flag = true, type: RequestDataTypeEnum) => {
  requestDataType.value = type
  showModal.value = flag
  await nextTick()

  unref(componentConfigurationEl)?.setConfigurationData(unref(selectTarget)!.request || {})
  unref(publicInterfaceFormEl)?.setConfigurationData(unref(selectTarget)!.request || {})
}

const handleSaveAndRequest = () => {
  handleSaveAction()
}

const selectTarget = computed<CreateComponentType | CreateComponentGroupType | undefined>(() => {
  const selectId = chartEditStore.getTargetChart.selectId
  // 排除多个
  if (selectId.length !== 1) return undefined
  const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()]
  return target as CreateComponentType | CreateComponentGroupType
})

const validate = async () => {
  if (unref(requestDataType) === RequestDataTypeEnum.Pond) {
    return await unref(publicInterfaceFormEl)?.validate()
  }
  return true
}

const getResult = () => {
  if (unref(requestDataType) === RequestDataTypeEnum.AJAX) {
    return unref(componentConfigurationEl)?.getConfigurationData()
  } else if (unref(requestDataType) === RequestDataTypeEnum.Pond) {
    return unref(publicInterfaceFormEl)?.getConfigurationData()
  }

  return {} as unknown as RequestConfigType
}

const { targetData } = useTargetData()
const { fetchTargetData } = useFetchTargetData()
// 发送请求
const sendHandle = async () => {
  if (!targetData.value?.request || !targetData.value.request.requestUrl) {
    window['$message'].warning('请先配置请求')
    return
  }
  const res = await fetchTargetData()
  if (res) {
    const { value } = useFilterFn(targetData.value.filter, res)
    targetData.value.option.dataset = value
    return
  }

}

const handleSaveAction = async () => {
  if (!(await validate())) return
  const value = getResult()
  if (unref(selectTarget)) {
    chartEditStore.updateComponentList(chartEditStore.fetchTargetIndex(), {
      ...unref(selectTarget)!,
      request: value as RequestConfigType
    })
  }
  showModal.value = false
  sendHandle()
}

createRequestModalContext({
  requestDataType
})

defineExpose({
  openModal,
})

</script>

<template>
  <NModal :class="prefixCls" v-model:show="showModal" preset="card" style="width: 1000px;" title="请求配置">
    <GlobalPublicConfiguration v-if="requestDataType === RequestDataTypeEnum.AJAX" />
    <NDivider v-if="requestDataType === RequestDataTypeEnum.AJAX" />
    <ComponentConfiguration v-if="requestDataType === RequestDataTypeEnum.AJAX" ref="componentConfigurationEl" />
    <PublicInterfaceForm v-if="requestDataType === RequestDataTypeEnum.Pond" ref="publicInterfaceFormEl" />
    <template #action>
      <NSpace justify="space-between">
        <div style="display: flex; align-items: center;  ">
          <span>「 更多 」</span>
          <span style="margin-right: 5px;">——</span>
          <NTag type="info">{{ getRequestTypeName }}</NTag>
        </div>
        <NButton type="primary" @click="handleSaveAndRequest">保存 & 发送请求</NButton>
      </NSpace>
    </template>
  </NModal>
</template>


<style lang="scss" >
@include thingsKit('chart-data-request') {

  &.n-card.n-modal,
  .n-card {
    @extend .go-background-filter;
  }

  .n-card-shallow {
    background-color: rgba(0, 0, 0, 0) !important;
  }

  @include deep() {
    &>.n-card__content {
      padding-right: 0;
    }

    .n-card__content {
      padding-bottom: 5px;
    }
  }
}
</style>