<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, watch } 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'
import { JSONParse } from '@/utils/external/utils'
import { isArray } from '@/utils/external/is'
import {getDataView, saveDictItemByCode} from "@/api/external/common";

const t = window['$t']

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

const showModal = ref(false)
const requestContentType = ref<number>(0)

const chartEditStore = useChartEditStore()

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

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

const getRequestTypeName = computed(() => {
  return t(`enum.requestDataTypeName.${RequestDataTypeEnum[unref(requestDataType)] as keyof typeof RequestDataTypeEnum}`)
})

const { prefixCls } = useDesign('chart-data-request')
watch(
    () => componentConfigurationEl.value?.requestContentTypeRef,
    (newVal) => {
      requestContentType.value = newVal;
    },
    { immediate: true }
)

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 (requestContentType: number,id?: string) => {
  let res:any;
  if (requestContentType !== 1) {
    if (!targetData.value?.request || !targetData.value.request.requestUrl) {
      window['$message'].warning(t('external.data.configMethod'))
      return
    }
    res = await fetchTargetData()
  }else {
    res = await getDataView({id: id || ''})
  }
  if (res) {
    const { value } = useFilterFn(targetData.value.filter, res)
     //分组更新下面子组件
     if(targetData.value.isGroup) {
          if (isArray(targetData.value.saveHistoryInput!)) {
            const parseHistoryInput = JSONParse(targetData.value.saveHistoryInput!)
            parseHistoryInput?.forEach((historyItem:Recordable) => {
                const findCurrentItem =  targetData.value.groupList?.find((groupItem:CreateComponentType | CreateComponentGroupType) => groupItem.id === historyItem.id)
                if(findCurrentItem) {
                    findCurrentItem.option.dataset = value[historyItem.inputValue]
                }
            })
         }
      }
      //
    targetData.value.option.dataset = value
    return
  }
  showModal.value = false
}

const handleSaveAction = async () => {
  if (!(await validate())) return
  let value = getResult()
  let _dataId = ''
  if (value?.requestContentType === 1) {
    const params = {
      id: value?.requestSQLId || '',
      componentCode: value?.componentCode || 'componentCode',
      connectId: value?.sqlRequestHttpType || '',
      sql: value?.requestSQLContent?.sql || '',
    }
    const res:any = await saveDictItemByCode(params)
    showModal.value = false

    if (res) {
      _dataId = res?.id
      value = {
        ...value,
        id: res?.id
      }
    }
  }
  value.pondRequestGlobalTokenKey = targetData.value.request.pondRequestGlobalTokenKey
  value.pondRequestGlobalTokenSuffix = targetData.value.request.pondRequestGlobalTokenSuffix
  value.pondRequestInterval = targetData.value.request.pondRequestInterval
  value.pondRequestIntervalUnit=  targetData.value.request.pondRequestIntervalUnit
  value.pondRequestOriginUrl=  targetData.value.request.pondRequestOriginUrl
  value.requestVerificationToken =  targetData.value.request.requestVerificationToken
  value.requestDataPondId =  targetData.value.request.requestDataPondId
  value.thirdSelectCascaderLabel =  targetData.value.request.thirdSelectCascaderLabel
  value.requestDataType = targetData.value.request.requestDataType
  value.publicInterfaceSelectId = targetData.value.request.publicInterfaceSelectId
  value.pondRequestGlobalIsToken = targetData.value.request.pondRequestGlobalIsToken
  value.pondRequestGlobalIntervalUnit = targetData.value.request.pondRequestGlobalIntervalUnit
  value.pondRequestGlobalInterval = targetData.value.request.pondRequestGlobalInterval
  if (unref(selectTarget)) {
    chartEditStore.updateComponentList(chartEditStore.fetchTargetIndex(), {
      ...unref(selectTarget)!,
      request: value as RequestConfigType
    })
  }
  sendHandle(value?.requestContentType,_dataId)
}


createRequestModalContext({
  requestDataType
})

defineExpose({
  openModal
})
</script>

<template>
  <NModal :class="prefixCls" v-model:show="showModal" preset="card" style="width: 1000px" :title="t('common.requestConfig')">
    <GlobalPublicConfiguration v-if="requestDataType === RequestDataTypeEnum.AJAX && requestContentType === 0" />
    <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"
             class="truncate">{{ t('external.data.tag1') }}</NTag
          >
          <div style="height: 5px"></div>
          <NTag type="info"
            >{{t('external.data.tag2')}}</NTag
          >
          <div style="display: flex; align-items: center; margin-top: 10px">
            <span>{{t('common.moreText')}}</span>
            <span style="margin-right: 5px">——</span>
            <NTag type="info">{{ getRequestTypeName }}</NTag>
          </div>
        </div>
        <NButton type="primary" @click="handleSaveAndRequest">{{t('common.saveSendText')}}</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>