<script lang="ts" setup name="PondPublicConfiguration">
import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
import { icon } from '@/plugins'
import {
  NButton,
  NCard,
  NCollapseTransition,
  NIcon,
  NInput,
  NInputGroup,
  NInputNumber,
  NSelect,
  NSpace,
  NTag,
  NTooltip,
  SelectOption,
} from 'naive-ui'
import { computed, 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 { RequestHttpIntervalEnum } from '@/enums/httpEnum'

const { PencilIcon } = icon.ionicons5

const designStore = useDesignStore()

const editDisabled = ref(false)

const collapseHeaderTable = ref(false)

const pondRequestOriginUrlRef= ref('')

const pondRequestIntervalRef = ref()

const pondRequestIntervalUnitRef = ref('')

const pondRequestGlobalTokenSuffixRef = ref('')

const pondRequestGlobalTokenKeyRef = ref('')

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

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

const getConfigurationData = (): Recordable => {
  return {
    pondRequestOriginUrl: unref(pondRequestOriginUrlRef),
    pondRequestInterval: unref(pondRequestIntervalRef),
    pondRequestIntervalUnit: unref(pondRequestIntervalUnitRef),
    pondRequestGlobalTokenSuffix: unref(pondRequestGlobalTokenSuffixRef),
    pondRequestGlobalTokenKey: unref(pondRequestGlobalTokenKeyRef),
  }
}

const setConfigurationData = (request: Recordable) => {
  const { pondRequestOriginUrl, pondRequestInterval, pondRequestIntervalUnit, pondRequestGlobalTokenSuffix, pondRequestGlobalTokenKey } = request
  pondRequestOriginUrlRef.value = pondRequestOriginUrl
  pondRequestIntervalRef.value = pondRequestInterval
  pondRequestIntervalUnitRef.value = pondRequestIntervalUnit
  pondRequestGlobalTokenSuffixRef.value = pondRequestGlobalTokenSuffix
  pondRequestGlobalTokenKeyRef.value = pondRequestGlobalTokenKey
}

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

<template>
  <NCard>
    <template #header>
      <NTag type="info">全局公共配置</NTag>
    </template>
    <NSpace vertical>
      <SettingItemBox
        name="服务"
        :itemRightStyle="{
          gridTemplateColumns: '5fr 2fr 1fr'
        }"
      >
        <!-- 源地址 -->
        <SettingItem name="前置 URL">
          <NInput
            v-model:value="pondRequestOriginUrlRef"
            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="pondRequestIntervalRef"
              class="select-time-number"
              size="small"
              min="0"
              :show-button="false"
              :disabled="editDisabled"
              placeholder="请输入数字"
            >
            </NInputNumber>
            <!-- 单位 -->
            <NSelect
              v-model:value="pondRequestIntervalUnitRef"
              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>
      <!-- 针对第三方接口 -->
      <SettingItemBox name="配置">
        <SettingItem name="Token前缀">
          <n-input v-model:value.trim="pondRequestGlobalTokenSuffixRef" type="text" placeholder="例如：Bearer" />
        </SettingItem>
        <SettingItem name="Token键值">
          <n-input v-model:value.trim="pondRequestGlobalTokenKeyRef" type="text" placeholder="例如：Token" />
        </SettingItem>
      </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>
  </NCard>
</template>

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

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