<script setup lang="ts">
import { toRefs, computed } from 'vue'
import { icon } from '@/plugins'
import { useDesignStore } from '@/store/modules/designStore/designStore'
import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { SelectHttpTimeNameObj } from '@/enums/httpEnum'
import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
import { NButton, NCard, NTag, NInput, NIcon } from 'naive-ui'
import { RequestContentTypeNameEnum, RequestContentTypeEnum } from '@/enums/external/httpEnum'

const emit = defineEmits(['clickPanel'])

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

const {
  requestOriginUrl,
  requestInterval: GlobalRequestInterval,
  requestIntervalUnit: GlobalRequestIntervalUnit
} = toRefs(chartEditStore.getRequestGlobalConfig)

const designStore = useDesignStore()

// 请求配置 model
const requestModelHandle = () => {
  emit('clickPanel')
}

const getContentName = (contentType: RequestContentTypeEnum) => {
  return RequestContentTypeNameEnum[RequestContentTypeEnum[contentType] as unknown as keyof typeof RequestContentTypeEnum]
}

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

</script>

<template>
  <NCard class="n-card-shallow">
    <SettingItemBox name="请求配置">
      <SettingItem name="类型">
        <NTag :bordered="false" type="primary" style="border-radius: 5px">
          {{ getContentName(targetData.request.requestContentType) }}
        </NTag>
      </SettingItem>

      <SettingItem name="方式">
        <NInput size="small" :placeholder="targetData.request.requestHttpType || '暂无'" :disabled="true"></NInput>
      </SettingItem>

      <SettingItem name="组件间隔">
        <NInput size="small" :placeholder="`${targetData.request.requestInterval || '暂无'}`" :disabled="true">
          <template #suffix> {{ SelectHttpTimeNameObj[targetData.request.requestIntervalUnit] }} </template>
        </NInput>
      </SettingItem>

      <SettingItem name="全局间隔（默认）">
        <NInput size="small" :placeholder="`${GlobalRequestInterval || '暂无'} `" :disabled="true">
          <template #suffix> {{ SelectHttpTimeNameObj[GlobalRequestIntervalUnit] }} </template>
        </NInput>
      </SettingItem>
    </SettingItemBox>

    <SettingItemBox name="源地址" :alone="true">
      <NInput size="small" :placeholder="requestOriginUrl || '暂无'" :disabled="true">
        <template #prefix>
          <NIcon :component="PulseIcon" />
        </template>
      </NInput>
    </SettingItemBox>

    <SettingItemBox name="组件地址" :alone="true">
      <NInput size="small" :placeholder="targetData.request.requestUrl || '暂无'" :disabled="true">
        <template #prefix>
          <NIcon :component="FlashIcon" />
        </template>
      </NInput>
    </SettingItemBox>

    <div class="edit-text" @click="requestModelHandle">
      <div class="go-absolute-center">
        <NButton type="primary" secondary>编辑配置</NButton>
      </div>
    </div>
  </NCard>
</template>

<style lang="scss" scoped>
.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>