<template>
  <collapse-item name="信息" :expanded="true">
    <setting-item-box name="背景上传" :alone="true">
      <setting-item>
        <n-card class="upload-box">
          <n-upload
            :show-file-list="false"
            v-model:file-list="uploadFileListRef"
            :customRequest="customRequest"
            :onBeforeUpload="beforeUploadHandle"
          >
            <n-upload-dragger>
              <img v-if="optionData.backgroundImage" class="upload-show" :src="optionData.backgroundImage" alt="背景" />
              <div class="upload-img" v-show="!optionData.backgroundImage">
                <img src="@/assets/images/canvas/noImage.png" />
                <n-text class="upload-desc" depth="3">
                  背景图需小于 {{ backgroundImageSize }}M ，格式为 png/jpg/gif 的文件
                </n-text>
              </div>
            </n-upload-dragger>
          </n-upload>
        </n-card>
      </setting-item>
      <setting-item>
        <n-space>
          <n-text>背景控制</n-text>
          <n-button class="clear-btn" size="small" :disabled="!optionData.backgroundImage" @click="clearImage">
            清除上传背景
          </n-button>
        </n-space>
      </setting-item>
    </setting-item-box>
    <setting-item-box name="背景选择" :alone="true">
      <setting-item>
        <n-select
          size="small"
          placeholder="请选择您要使用的背景"
          style="width: 250px"
          v-model:value="selectValue"
          :options="selectBgOptions"
          @update:value="selectBgValueHandle"
        />
      </setting-item>
    </setting-item-box>
    <setting-item-box name="文字" :alone="true">
      <setting-item>
        <n-input v-model:value="optionData.dataset" size="small"></n-input>
      </setting-item>
    </setting-item-box>
  </collapse-item>
  <collapse-item name="样式" :expanded="true">
    <setting-item-box name="文字">
      <setting-item name="字体大小">
        <n-input-number v-model:value="optionData.fontSize" size="small" placeholder="字体大小"></n-input-number>
      </setting-item>
    </setting-item-box>
    <setting-item-box name="文字颜色">
      <setting-item name="颜色">
        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.textColor"></n-color-picker>
      </setting-item>
    </setting-item-box>
    <setting-item-box name="位置x轴">
      <setting-item name="字体位置x轴">
        <n-input-number v-model:value="optionData.x" size="small" placeholder="字体位置"></n-input-number>
      </setting-item>
    </setting-item-box>
    <setting-item-box name="位置y轴">
      <setting-item name="字体位置y轴">
        <n-input-number v-model:value="optionData.y" size="small" placeholder="字体位置"></n-input-number>
      </setting-item>
    </setting-item-box>
  </collapse-item>
  <collapse-item name="右侧" :expanded="true">
    <setting-item-box name="是否显示">
      <setting-item name="">
        <n-switch @change="handleChange" v-model:value="optionData.showRight" />
      </setting-item>
    </setting-item-box>
    <setting-item-box name="文字">
      <setting-item name="字体大小">
        <n-input-number
          v-model:value="optionData.textRightFontSize"
          size="small"
          placeholder="字体大小"
        ></n-input-number>
      </setting-item>
      <setting-item name="字体位置x轴">
        <n-input-number v-model:value="optionData.xT" size="small" placeholder="字体位置"></n-input-number>
      </setting-item>
      <setting-item name="字体位置y轴">
        <n-input-number v-model:value="optionData.yT" size="small" placeholder="字体位置"></n-input-number>
      </setting-item>
    </setting-item-box>
    <setting-item-box name="时间颜色">
      <setting-item name="颜色">
        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.textRightSizeColor"></n-color-picker>
      </setting-item>
    </setting-item-box>
  </collapse-item>
</template>

<script setup lang="ts">
import { PropType, ref, nextTick } from 'vue'
import { option } from './config'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { SelectOption, UploadCustomRequestOptions } from 'naive-ui'
import { backgroundImageSize } from '@/settings/designSetting'
import { uploadFile } from '@/api/external/contentSave/content'
import { FileTypeEnum } from '@/enums/fileTypeEnum'
import { fetchRouteParamsLocation } from '@/utils'

const props = defineProps({
  optionData: {
    type: Object as PropType<typeof option>,
    required: true
  }
})
const uploadFileListRef = ref()

const selectBgOptions = ref<Array<SelectOption>>([])

const selectValue = ref('')

// TODO待封装 成传文件夹名字获取下面所有图片
const getFetchImages = () => {
  const imagesModules = import.meta.globEager('@/assets/external/headbackground/*')
  selectBgOptions.value = Object.keys(imagesModules).map(item => ({
    label: imagesModules[item]?.default.split('/').at(-1),
    value: imagesModules[item]?.default
  }))
}
getFetchImages()

const selectBgValueHandle = (value: string) => {
  selectValue.value = value
  props.optionData.bgSrc = value
}

// 上传图片前置处理
//@ts-ignore
const beforeUploadHandle = async ({ file }) => {
  uploadFileListRef.value = []
  const type = file.file.type
  const size = file.file.size

  if (size > 1024 * 1024 * backgroundImageSize) {
    window['$message'].warning(`图片超出 ${backgroundImageSize}M 限制，请重新上传！`)
    return false
  }
  if (type !== FileTypeEnum.PNG && type !== FileTypeEnum.JPEG && type !== FileTypeEnum.GIF) {
    window['$message'].warning('文件格式不符合，请重新上传！')
    return false
  }
  return true
}

// 自定义上传操作
const customRequest = (options: UploadCustomRequestOptions) => {
  const { file } = options
  nextTick(async () => {
    if (file.file) {
      // 修改名称
      const newNameFile = new File([file.file], `${fetchRouteParamsLocation()}_index_background.png`, {
        type: file.file.type
      })
      let uploadParams = new FormData()
      uploadParams.append('file', newNameFile)
      const uploadRes = await uploadFile(uploadParams)
      if (uploadRes) {
        props.optionData.backgroundImage = uploadRes?.fileStaticUri
        props.optionData.bgSrc = uploadRes?.fileStaticUri
        window['$message'].success('添加图片成功！')
      }
    } else {
      window['$message'].error('添加图片失败，请稍后重试！')
    }
  })
}
const handleChange = (value: boolean) => {
  props.optionData.showRight = value
}
// 清除背景
const clearImage = () => {
  props.optionData.backgroundImage = ''
  props.optionData.bgSrc = ''
}
</script>
<style lang="scss" scoped>
$uploadWidth: 215px;
$uploadHeight: 193px;
.upload-box {
  cursor: pointer;
  margin-bottom: 20px;
  @include deep() {
    .n-card__content {
      padding: 0;
      overflow: hidden;
    }
    .n-upload-dragger {
      padding: 5px;
      width: $uploadWidth;
    }
  }
  .upload-show {
    width: -webkit-fill-available;
    height: $uploadHeight;
    border-radius: 5px;
  }
  .upload-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      height: 150px;
    }
    .upload-desc {
      padding: 10px 0;
    }
  }
}
</style>