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

const chartEditStore = useChartEditStore()

const requestContentTypeRef = ref(RequestContentTypeEnum.DEFAULT)

const requestHttpTypeRef = ref(RequestHttpEnum.GET)

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

const requestIntervalUnitRef = ref(RequestHttpIntervalEnum.SECOND)

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

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

const requestParamsBodyTypeRef = ref(RequestBodyEnum.NONE)

const requestUrlRef = ref<string>()

const getConfigurationData = (): RequestConfigType => {
  return {
    requestContentType: unref(requestContentTypeRef),
    requestHttpType: unref(requestHttpTypeRef),
    requestInterval: unref(requestIntervalRef),
    requestIntervalUnit: unref(requestIntervalUnitRef),
    requestDataType: RequestDataTypeEnum.AJAX,
    requestParamsBodyType: unref(requestParamsBodyTypeRef),
    requestSQLContent: {
      sql: unref(requestSQLContentRef)
    },
    requestParams: unref(requestParamsRef),
    requestUrl: `${chartEditStore.getRequestGlobalConfig.requestOriginUrl}${unref(requestUrlRef)}`
  }
}


const setConfigurationData = (request: RequestConfigType) => {
  const { requestContentType, requestHttpType, requestInterval, requestIntervalUnit, requestParamsBodyType, requestSQLContent, requestParams, requestUrl } = request
  requestContentTypeRef.value = requestContentType
  requestHttpTypeRef.value = requestHttpType
  requestIntervalRef.value = requestInterval
  requestIntervalUnitRef.value = requestIntervalUnit
  requestParamsBodyTypeRef.value = requestParamsBodyType
  requestSQLContentRef.value = requestSQLContent.sql
  requestParamsRef.value = requestParams 
  requestUrlRef.value = !requestUrl ? ``: 'h' + requestUrl?.split('h')[1] 
}

defineExpose({
  getConfigurationData,
  setConfigurationData
})

</script>

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