<script setup lang="ts">
import { NInput, NInputNumber, NInputGroup, NSelect, SelectOption, NTabs, NTabPane } from 'naive-ui'
import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
import { selectTimeOptions, selectTypeOptions } from '../../../index.d'
import {
  RequestBodyEnum,
  RequestContentTypeEnum,
  RequestHttpEnum,
  RequestHttpIntervalEnum,
  RequestParams
} from '@/enums/httpEnum'
import { ref, unref } from 'vue'
import DefaultRequestContent from './DefaultRequestContent.vue'
import SqlConfiguration from './SqlConfiguration.vue'
import { useTargetData } from '../../../../hooks/useTargetData.hook'

const { targetData } = useTargetData()

const pondRequestContentTypeRef = ref(RequestContentTypeEnum.DEFAULT)

const pondRequestHttpTypeRef = ref(RequestHttpEnum.GET)

const pondRequestIntervalRef = ref<number | undefined>(20)

const pondRequestIntervalUnitRef = ref(RequestHttpIntervalEnum.SECOND)

const pondRequestSQLContentRef = ref('select * from where')

const pondRequestParamsRef = ref({
  Header: {},
  Params: {},
  Body: { 'form-data': {}, json: '', 'x-www-form-urlencoded': {}, xml: '' }
} as RequestParams)

const pondRequestParamsBodyTypeRef = ref(RequestBodyEnum.NONE)

const pondRequestUrlRef = ref<string>()

const getConfigurationData = (): Recordable => {
  return {
    pondRequestInterval: unref(pondRequestIntervalRef),
    pondRequestIntervalUnit: unref(pondRequestIntervalUnitRef),
    pondRequestHttpType: unref(pondRequestHttpTypeRef),
    pondRequestUrl: unref(pondRequestUrlRef),
    pondRequestContentType: unref(pondRequestContentTypeRef),
    pondRequestSQLContent: unref(pondRequestSQLContentRef),
    pondRequestParamsBodyType: unref(pondRequestParamsBodyTypeRef),
    pondRequestParams: unref(pondRequestParamsRef)
  }
}

const setConfigurationData = (request: Recordable) => {
  const {
    pondRequestInterval,
    pondRequestIntervalUnit,
    pondRequestHttpType,
    pondRequestUrl,
    pondRequestContentType,
    pondRequestSQLContent,
    pondRequestParamsBodyType,
    pondRequestParams
  } = request
  pondRequestIntervalRef.value = pondRequestInterval
  pondRequestIntervalUnitRef.value = pondRequestIntervalUnit
  pondRequestHttpTypeRef.value = pondRequestHttpType
  pondRequestUrlRef.value = pondRequestUrl
  pondRequestContentTypeRef.value = pondRequestContentType
  pondRequestSQLContentRef.value = pondRequestSQLContent
  pondRequestParamsBodyTypeRef.value = pondRequestParamsBodyType
  pondRequestParamsRef.value = pondRequestParams
}

defineExpose({
  getConfigurationData,
  setConfigurationData
})
</script>

<template>
  <div v-if="targetData.request.pondRequestGlobalIsToken">
  <NDivider />
  <SettingItemBox
    name="地址"
    :itemRightStyle="{
      gridTemplateColumns: '5fr 2fr 1fr'
    }"
  >
    <SettingItem name="请求方式 & URL地址">
      <NInputGroup>
        <NSelect
          v-model:value="pondRequestHttpTypeRef"
          style="width: 150px"
          size="small"
          :options="(selectTypeOptions as SelectOption[])"
        />
        <NInput
          v-model:value="pondRequestUrlRef"
          class="select-time-number"
          size="small"
          min="0"
          :show-button="false"
          placeholder="请输入URL地址"
        />
      </NInputGroup>
    </SettingItem>
    <SettingItem name="更新间隔，为 0 只会初始化">
      <NInputGroup>
        <NInputNumber
          v-model:value="pondRequestIntervalRef"
          class="select-time-number"
          size="small"
          min="0"
          :show-button="false"
          placeholder="请输入数字"
        />
        <!-- 单位 -->
        <NSelect
          v-model:value="pondRequestIntervalUnitRef"
          class="select-time-options"
          size="small"
          :options="(selectTimeOptions as SelectOption[])"
        />
      </NInputGroup>
    </SettingItem>
  </SettingItemBox>
  <SettingItemBox name="选择方式">
    <NTabs v-model:value="pondRequestContentTypeRef" type="segment" size="small">
      <NTabPane :name="RequestContentTypeEnum.DEFAULT" tab="普通请求" />
      <NTabPane :name="RequestContentTypeEnum.SQL" tab="SQL请求" />
    </NTabs>
  </SettingItemBox>
  <SettingItemBox>
    <DefaultRequestContent
      v-if="pondRequestContentTypeRef === RequestContentTypeEnum.DEFAULT"
      v-model:value="pondRequestParamsRef"
      v-model:request-params-body-type="pondRequestParamsBodyTypeRef"
    />
    <SqlConfiguration
      v-model:value="pondRequestSQLContentRef"
      v-if="pondRequestContentTypeRef === RequestContentTypeEnum.SQL"
    />
  </SettingItemBox>
</div>
</template>