<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 as any)?.setConfigurationData(unref(selectTarget)!.request || {})
  unref(publicInterfaceFormEl as any)?.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.getComponentList[chartEditStore.fetchTargetIndex()]
  return target as CreateComponentType | CreateComponentGroupType
})

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

const getResult = () => {
  if (unref(requestDataType) === RequestDataTypeEnum.AJAX) {
    return unref(componentConfigurationEl as any)?.getConfigurationData()
  } else if (unref(requestDataType) === RequestDataTypeEnum.Pond) {
    return unref(publicInterfaceFormEl as any)?.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 setRequestKey = (value: Recordable, key: string) => {
  value[key] =
    targetData.value.request.requestDataType === RequestDataTypeEnum.AJAX
      ? (targetData.value.request as unknown as Recordable)[key] ||
        (chartEditStore.getRequestGlobalConfig as unknown as Recordable)[key]
      : null
}

const handleSaveAction = async () => {
  if (!(await validate())) return
  const value = getResult()
  setRequestKey(value, 'requestTokenSuffix')
  setRequestKey(value, 'requestTokenKey')
  setRequestKey(value, 'requestVerificationToken')
  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; flex-direction: column">
          <NTag type="info"
            >当公共接口选择“实时轨迹或者获取设备经纬度历史数据”时，属性选择则选择经纬度即可（longitude，latitude）</NTag
          >
          <div style="height: 5px"></div>
          <NTag type="info"
            >如果是结构体属性的话，选择对应结构体属性即可，里面的经纬度，平台已经通过接口里面的过滤函数进行处理</NTag
          >
          <div style="display: flex; align-items: center; margin-top: 10px">
            <span>「 更多 」</span>
            <span style="margin-right: 5px">——</span>
            <NTag type="info">{{ getRequestTypeName }}</NTag>
          </div>
        </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>