<script setup lang="ts">
import { ref, computed, onBeforeUnmount, watchEffect, unref } from 'vue'
import { icon } from '@/plugins'
import { useDesignStore } from '@/store/modules/designStore/designStore'
import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
import { ChartDataMatchingAndShow } from '../../../external/components/ChartDataMatchingAndShow'
import { ChartDataPondControl } from '../ChartDataPond/components/ChartDataPondControl'
import { useTargetData } from '../../../../hooks/useTargetData.hook'
import { NButton, NSelect, NTooltip, NIcon, SelectOption } from 'naive-ui'
import { RequestInfoPanel } from '../RequestInfoPanel'
import { RequestModal } from '../RequestModal'
import { useFetchTargetData } from '@/hooks/external/useFetchTargetData'
import { useFilterFn } from '@/hooks/external/useFilterFn'
import { RequestDataTypeEnum } from '@/enums/external/httpEnum'

const { HelpOutlineIcon, FlashIcon } = icon.ionicons5
const { targetData } = useTargetData()

const requestModal = ref<InstanceType<typeof RequestModal>>()

const designStore = useDesignStore()

/**
 * ft 修改在公共接口下拉框里默认选择公共接口
 * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
 * 源代码 const selectedRequestType = ref(targetData.value.request.requestDataType || RequestDataTypeEnum.AJAX)
 * 修改后的代码 const selectedRequestType = ref(targetData.value.request.requestDataType || RequestDataTypeEnum.Pond)
 * 修改后代码在//ft之间
 */
const selectedRequestType = ref(targetData.value.request.requestDataType || RequestDataTypeEnum.Pond)

const getApiRequestType: SelectOption[] = [
  { label: '自定义请求', value: RequestDataTypeEnum.AJAX },
  { label: '公共接口', value: RequestDataTypeEnum.Pond }
]

// 是否展示数据分析
const loading = ref(false)
const showMatching = ref(false)

let firstFocus = 0
let lastFilter: any = undefined

const { fetchTargetData } = useFetchTargetData()

// 发送请求
const sendHandle = async () => {
  if (!targetData.value?.request || !targetData.value.request.requestUrl) {
    window['$message'].warning('请先配置请求')
    return
  }
  loading.value = true
  try {
    const res = await fetchTargetData()
    if (res) {
      const { value } = useFilterFn(targetData.value.filter, res)
      targetData.value.option.dataset = value
      showMatching.value = true
      return
    }
  } finally {
    loading.value = false
  }
}


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

const handleClickPanel = () => {
  unref(requestModal as any)?.openModal?.(true, unref(selectedRequestType))
  if (selectedRequestType.value === RequestDataTypeEnum.AJAX) {
    targetData.value.request.requestDataType = RequestDataTypeEnum.AJAX
  }
}

// TODO socket 请求时会触发
watchEffect(() => {
  const filter = targetData.value?.filter
  /**
   * FT 修改
   */
  if (!filter) return
  //ft
  if (lastFilter !== filter && firstFocus) {
    lastFilter = filter
    sendHandle()
  }
  firstFocus++
})

onBeforeUnmount(() => {
  lastFilter = null
})

const controlModel = ref(false)

const handleOpenChartDataPondModal = () => controlModel.value = true

</script>

<template>
  <div class="things-kit-chart-configurations-data-ajax">
    <SettingItemBox name="接口方式" :alone="true">
      <NSelect v-model:value="selectedRequestType" :options="getApiRequestType" />
    </SettingItemBox>

    <SettingItemBox v-if="selectedRequestType === RequestDataTypeEnum.AJAX" name="全局配置" :alone="true">
      <NButton @click="handleOpenChartDataPondModal" type="success">配置</NButton>
    </SettingItemBox>

    <RequestInfoPanel @clickPanel="handleClickPanel" />

    <SettingItemBox :alone="true">
      <template #name>
        测试
        <NTooltip trigger="hover">
          <template #trigger>
            <NIcon size="21" :depth="3">
              <HelpOutlineIcon />
            </NIcon>
          </template>
          默认赋值给 dataset 字段
        </NTooltip>
      </template>
      <NButton type="primary" ghost @click="sendHandle">
        <template #icon>
          <NIcon>
            <FlashIcon />
          </NIcon>
        </template>
        发送请求
      </NButton>
    </SettingItemBox>

    <!-- 底部数据展示 -->
    <ChartDataMatchingAndShow :show="showMatching && !loading" :ajax="true"></ChartDataMatchingAndShow>

    <!-- 骨架图 -->
    <go-skeleton :load="loading" :repeat="3"></go-skeleton>

    <RequestModal ref="requestModal" />

    <chart-data-pond-control v-model:modelShow="controlModel" @sendHandle="sendHandle"></chart-data-pond-control>
  </div>
</template>

<style lang="scss" scoped>
@include thingsKit('chart-configurations-data-ajax') {
  .n-card-shallow {
    &.n-card {
      @extend .go-background-filter;

      @include deep() {
        .n-card__content {
          padding: 10px;
        }
      }
    }

    .edit-text {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 325px;
      height: 270px;
      cursor: pointer;
      opacity: 0;
      transition: all 0.3s;
      @extend .go-background-filter;
      backdrop-filter: blur(2px) !important;
    }

    &:hover {
      border-color: v-bind('themeColor');

      .edit-text {
        opacity: 1;
      }
    }
  }
}
</style>