<script lang="ts" setup>
import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
import { icon } from '@/plugins'
import {
  NButton,
  NCard,
  NCollapseTransition,
  NIcon,
  NInput,
  NInputGroup,
  NInputNumber,
  NSelect,
  NSpace,
  NTag,
  NTooltip,
  SelectOption,
  NDivider,
  CascaderOption,
  NCascader,
} from 'naive-ui'
import { computed, onMounted, reactive, ref, unref } from 'vue'
import GlobalParamsConfiguration from './GlobalParamsConfiguration.vue'
import { ChevronDown, ChevronUp } from '@vicons/carbon'
import { useDesignStore } from '@/store/modules/designStore/designStore'
import { selectTimeOptions } from '../../../index.d'
import { useTargetData } from '../../../../hooks/useTargetData.hook'
import { RequestDataTypeEnum, RequestHttpIntervalEnum } from '@/enums/httpEnum'
import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'
import { convertToCascadingData } from '@/utils/external/utils'
import { customThirdInterfaceRequest, thirdInterfaceRequest } from '@/api/external/customRequest'

const { PencilIcon } = icon.ionicons5

const designStore = useDesignStore()

const editDisabled = ref(false)

const collapseHeaderTable = ref(false)

const { targetData, chartEditStore } = useTargetData()

const handleCollapse = () => {
  collapseHeaderTable.value = !unref(collapseHeaderTable)
}

const requestDataPondLength = computed(()=>chartEditStore.getRequestGlobalConfig.requestDataPond.length)

// 颜色
const themeColor = computed(() => {
  return designStore.getAppTheme
})

const selectGlobalPondValue = ref('')

const cacheSelectOption = ref<Recordable>({
  dataPondRequestConfig:{
    pondRequestOriginUrl:'',
    pondRequestUrl:'',
    pondRequestHttpType:'',
    pondRequestParams: {
      "Body": {
        "form-data": {},
        "x-www-form-urlencoded": {},
        "json": "",
        "xml": ""
      },
      "Header": {},
      "Params": {}
    }, 
    requestVerificationToken:'',
  }
})

const selectGlobalPondOptions = computed(() => {
  return chartEditStore.getRequestGlobalConfig.requestDataPond.map(dataPond=>({
    value:dataPond.dataPondId,
    label:dataPond.dataPondName,
    ...dataPond
  }))
})

const getTokenString = ref()

const resOptions = ref<CascaderOption[]>([])

const resValue = ref()

const cascaderConfig = reactive({
  hoverTrigger: true,
  checkStrategyIsChild: true,
  filterable: false,
  showPath: true
})

const handleResCascader = (value: string | number, options: Recordable) => {
  targetData.value.request.thirdSelectCascaderLabel = options.label
  getTokenString.value = value as string | number
  targetData.value.request.requestVerificationToken = value as string
  targetData.value.request.requestDataType = RequestDataTypeEnum.AJAX
}

const findCurrentPond = () => {
  return selectGlobalPondOptions.value.find((pondItem: RequestDataPondItemType & {label: string, value: string}) => pondItem.dataPondId === targetData.value?.request?.requestDataPondId)
}

const handleSelectGlobalPond = (_:string, options:RequestDataPondItemType & {label: string, value: string}) => {
  cacheSelectOption.value = options
  targetData.value.request = options.dataPondRequestConfig
  targetData.value.request.requestDataPondId = options.dataPondId
  getTokenString.value =''
  resOptions.value = []
  resValue.value=null
  handleExecuteRequest()
}

//执行请求获取三方Token
const handleExecuteRequest = async () => {
  try {
    const originUrlString =  cacheSelectOption.value?.dataPondRequestConfig?.pondRequestOriginUrl
    const requestUrlString = cacheSelectOption.value?.dataPondRequestConfig?.pondRequestUrl
    const body = cacheSelectOption.value?.dataPondRequestConfig?.pondRequestParams['Body']['json']
    if(originUrlString && requestUrlString){
      const request = {
        requestOriginUrl: `${originUrlString}${requestUrlString}`,
        body
      }
      const res = await customThirdInterfaceRequest(request as unknown as thirdInterfaceRequest)
      resOptions.value = convertToCascadingData(res) as unknown as CascaderOption[]
    }
  } catch (e) {
    getTokenString.value = JSON.stringify(e) as string
  }
}

onMounted(()=>{
  getTokenString.value = targetData.value?.request?.requestVerificationToken
  selectGlobalPondValue.value = findCurrentPond()?.dataPondId as string
  cacheSelectOption.value = findCurrentPond() as RequestDataPondItemType
  resValue.value = targetData.value?.request?.thirdSelectCascaderLabel
  handleExecuteRequest()
})
</script>

<template>
  <NCard>
    <template #header>
      <NTag type="info">全局公共配置</NTag>
    </template>
    <NSpace v-if="requestDataPondLength<=0"  vertical>
      <SettingItemBox
        name="服务"
        :itemRightStyle="{
          gridTemplateColumns: '5fr 2fr 1fr'
        }"
      >
        <!-- 源地址 -->
        <SettingItem name="前置 URL">
          <NInput
            v-model:value="chartEditStore.getRequestGlobalConfig.requestOriginUrl"
            default-value="http://127.0.0.1"
            :disabled="editDisabled"
            size="small"
            placeholder="例:http://127.0.0.1"
          ></NInput>
        </SettingItem>
        <SettingItem name="更新间隔，为 0 只会初始化">
          <NInputGroup>
            <NInputNumber
              v-model:value="chartEditStore.getRequestGlobalConfig.requestInterval"
              class="select-time-number"
              size="small"
              min="0"
              :show-button="false"
              :disabled="editDisabled"
              placeholder="请输入数字"
            >
            </NInputNumber>
            <!-- 单位 -->
            <NSelect
              v-model:value="chartEditStore.getRequestGlobalConfig.requestIntervalUnit"
              class="select-time-options"
              size="small"
              :default-value="RequestHttpIntervalEnum.SECOND"
              :options="selectTimeOptions as SelectOption[]"
              :disabled="editDisabled"
            />
          </NInputGroup>
        </SettingItem>
        <NButton v-show="editDisabled" type="primary" ghost @click="editDisabled = false">
          <template #icon>
            <NIcon>
              <PencilIcon />
            </NIcon>
          </template>
          编辑配置
        </NButton>
      </SettingItemBox>
      <NCollapseTransition :show="collapseHeaderTable">
        <GlobalParamsConfiguration />
      </NCollapseTransition>
      <section class="arrow">
        <NTooltip>
          <template #trigger>
            <NIcon @click="handleCollapse" size="30">
              <ChevronDown v-show="!collapseHeaderTable" />
              <ChevronUp v-show="collapseHeaderTable" />
            </NIcon>
          </template>
          <span>{{ collapseHeaderTable ? '收起' : '展开' }}</span>
        </NTooltip>
      </section>
    </NSpace>
    <div v-else>
      <NSelect
        v-model:value="selectGlobalPondValue"
        placeholder="请选择全局公共配置"
        class="select-time-options"
        size="small"
        clearable
        :options="selectGlobalPondOptions"
        @update:value="handleSelectGlobalPond"
        />
        <NDivider />
        <SettingItemBox name="配置信息" v-if="selectGlobalPondValue" :itemRightStyle="{
           gridTemplateColumns: '5fr 2fr 1fr'
        }">
           <SettingItem name="源地址">
              <NInput
                v-model:value="cacheSelectOption.dataPondRequestConfig.pondRequestOriginUrl"
                disabled
            ></NInput>
           </SettingItem>
           <SettingItem name="url地址">
              <NInput
                v-model:value="cacheSelectOption.dataPondRequestConfig.pondRequestUrl"
                disabled
            ></NInput>
           </SettingItem>
           <SettingItem name="请求方式">
              <NInput
                v-model:value="cacheSelectOption.dataPondRequestConfig.pondRequestHttpType"
                disabled
            ></NInput>
           </SettingItem>
        </SettingItemBox>
        <NDivider />
        <div style="margin:0 70px" v-if="selectGlobalPondValue">
          <n-space vertical>
            <n-button type="primary" @click="handleExecuteRequest">执行请求</n-button>
            <NCascader
              v-model:value="resValue"
              @update:value="handleResCascader"
              :expand-trigger="cascaderConfig.hoverTrigger ? 'hover' : 'click'"
              :check-strategy="cascaderConfig.checkStrategyIsChild ? 'child' : 'all'"
              :show-path="cascaderConfig.showPath"
              :filterable="cascaderConfig.filterable"
              placeholder="请选择"
              :options="resOptions"
            />
            <n-input
              :autosize="{
                minRows: 3,
                maxRows: 9
              }"
              v-model:value="getTokenString"
              type="textarea"
              placeholder="Token："
            />
          </n-space>
        </div>
    </div>
  </NCard>
</template>

<style lang="scss" scoped>
.arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  &:hover {
    color: v-bind('themeColor');
  }
}
</style>