<script setup lang="ts">
import type { FormInst } from 'naive-ui'
import { uploadFileBatches } from '@/utils/uploadImg.ts'
import { Asterisk, Trash } from 'lucide-vue-next'
import { computed, ref, watch } from 'vue'

// 可接受的文件类型
const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
})
const emit = defineEmits(['update:modelValue', 'nextStep', 'preStep'])

const localForm = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  },
})

watch(
  () => localForm.value,
  (newVal) => {
    console.log('newVal', newVal)
    emit('update:modelValue', newVal)
  },
  { immediate: true, deep: true },
)
const message = useMessage()

const acceptTypes = '.json,.zip'

defineExpose({
  addVersion,
})

const modelVersionItem = {
  versionName: '',
  versionDescription: '', // 富文本
  filePath: '', // 文件路径
  fileName: '', // 文件名
  delFlag: '0',
  imagePaths: [],
}
const rules = {
  versionName: {
    required: true,
    message: '',
    trigger: 'blur',
  },
}
function addVersion() {
  localForm.value.workFlowVersionList.unshift(modelVersionItem)
}

const formRefs = ref<(FormInst | null)[]>([])
function setFormRef(el: FormInst | null, index: number) {
  if (el) {
    formRefs.value[index] = el
  }
}
async function nextStep() {
  for (let i = 0; i < localForm.value.workFlowVersionList.length; i++) {
    if (localForm.value.workFlowVersionList[i].delFlag === '0' && localForm.value.workFlowVersionList[i].fileName === '') {
      return message.error('请上传文件')
    }
    const regex = /[\u4E00-\u9FA5]/ // 匹配汉字的正则表达式
    if (localForm.value.workFlowVersionList[i].delFlag === '0' && !regex.test(localForm.value.workFlowVersionList[i].versionDescription)) {
      return message.error('请用中文填写版本介绍')
    }
  }
  try {
    const promises = formRefs.value
      .filter((form): form is FormInst => form !== null)
      .map(form => form.validate())

    await Promise.all(promises)
    emit('nextStep')
  }
  catch (errors) {
    console.error('部分表单验证失败:', errors)
  }
  // formRef.value?.validate((errors) => {
  //   if (!errors) {
  //     emit('nextStep')
  //   }
  //   else {
  //     console.log('error', errors)
  //   }
  // })
}
function preStep() {
  emit('preStep')
}
// 上传文件
const uploadFileIndex = ref(0)
const fileInput = ref<HTMLInputElement | null>(null)
function triggerFileInput(index: number) {
  (fileInput.value as HTMLInputElement)?.click()
  uploadFileIndex.value = index
}
async function handleFileChange(event: Event) {
  const target = event.target as HTMLInputElement
  const files = target.files

  if (files && files.length > 0) {
    const res = await uploadFileBatches(files)
    localForm.value.workFlowVersionList[uploadFileIndex.value].filePath = res[0].url
    localForm.value.workFlowVersionList[uploadFileIndex.value].fileName = res[0].fileName
  }
  target.value = ''
}

function computedDelFlag() {
  return localForm.value.workFlowVersionList.filter(item => item.delFlag === '0')
}
function onDelete(index: number) {
  if (computedDelFlag().length === 1)
    return
  localForm.value.workFlowVersionList[index].delFlag = '2'
}
</script>

<template>
  <div class="flex justify-center items-center">
    <div class="w-[960px]">
      <template v-for="(item, index) in localForm.workFlowVersionList" :key="index">
        <div v-if="item.delFlag === '0'" class="bg-gray-100 p-4 rounded-lg mt-4 relative">
          <div class="absolute -right-10 top-4 cursor-pointer">
            <Trash class="cursor-pointer" @click="onDelete(index)" />
          </div>
          <n-form
            :ref="(el) => setFormRef(el, index)"
            :label-width="80"
            :model="localForm.workFlowVersionList[index]"
            :rules="rules"
            size="large"
          >
            <n-form-item label="版本名称" path="versionName">
              <n-input v-model:value="item.versionName" placeholder="请输入版本名" />
            </n-form-item>
            <div class="flex">
              版本介绍 <Asterisk :size="10" color="#ff0000" class="mt-1" />
            </div>
            <div class="text-gray-400 text-[12px]">
              填写类别可让模型获得更精准的流量, 平台也有权基于标准修改你的类别标签
            </div>
            <div class="bg-white p-3 mt-2 rounded-lg">
              <client-only>
                <WangEditor v-model="item.versionDescription" />
              </client-only>
            </div>
            <div class="flex mt-4">
              上传文件 <Asterisk :size="10" color="#ff0000" class="mt-1" />
            </div>
            <div v-if="item.fileName" class="flex justify-between items-center bg-white p-3 mt-2 rounded-lg">
              <div class="bg-[#d8e5fd] text-[12px] text-[#3162ff] w-16 h-7 rounded-lg flex justify-center items-center">
                100%
              </div>
              <div class="flex-1 flex items-center line-clamp">
                {{
                  item.fileName
                }}
              </div>
              <div>
                <Trash class="cursor-pointer" @click="item.fileName = '', item.filePath = ''" />
              </div>
            </div>
            <div v-else>
              <div class="upload-content">
                <div class="flex flex-col justify-center items-center w-30 h-40 border border-dashed mt-2 rounded-lg bg-white">
                  <div class="w-24 bg-gradient-to-r from-[#2D28FF] to-[#1A7DFF] h-8 text-white rounded-sm bg-[#3162ff] cursor-pointer flex justify-center items-center" @click="triggerFileInput(index)">
                    上传文件
                  </div>
                  <div class="my-3">
                    点击上传文件
                  </div>
                  <div class="text-[#999999] text-xs">
                    .json/.zip
                  </div>
                </div>
              </div>
            </div>
          </n-form>
        </div>
      </template>
      <div class="flex items-center justify-center mt-5">
        <div class="flex justify-center items-center mt-5  w-[20%] mx-2 h-10 rounded-lg bg-[#f1f2f7] cursor-pointer" @click="preStep">
          上一步
        </div>
        <div class="flex justify-center items-center mt-5 text-white mx-2 w-[20%] h-10 rounded-lg bg-[#3162ff] cursor-pointer" @click="nextStep">
          下一步
        </div>
      </div>
    </div>
  </div>

  <input
    ref="fileInput"
    type="file"
    class="hidden"
    :accept="acceptTypes"
    @change="handleFileChange"
  >
</template>

<style lang="scss" scoped>
.line-clamp {
  margin: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: rgb(72, 71, 71);
}
</style>
