<script setup lang="ts">
import { commonApi } from "@/api/common";
import { cloneDeep } from "lodash-es";
import { Asterisk, Trash } from "lucide-vue-next";
import type { FormInst } from "naive-ui";
import { computed, ref, watch } from "vue";

const message = useMessage();

// 可接受的文件类型
const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
});
const emit = defineEmits(["update:modelValue", "nextStep", "prevStep"]);
const acceptTypes =
  ".safetensors,.ckpt,.pt,.bin,.pth,.zip,.json,.flow,.lightflow,.yaml,.yml,.onnx,.gguf,.sft";
const acceptTypesList = [
  "safetensors",
  "ckpt",
  "pt",
  "bin",
  "pth",
  "zip",
  "json",
  "flow",
  "lightflow",
  "yaml",
  "yml",
  "onnx",
  "gguf",
  "sft",
];
const modelVersionItem = {
  objectKey: null,
  isEncrypt: 0, //0不加密
  delFlag: "0", // 0代表存在 2代表删除
  versionName: "", //	版本名称
  modelVersionType: null, // 基础模型
  versionDescription: "", // 版本描述
  filePath: "", // 文件路径
  fileName: "", //
  sampleImagePaths: [], // 第三部的图片路径最多20张,切割
  triggerWords: "", // 触发词
  isPublic: null, // 权限是否公
  isOnlineUse: 1, //在线使用
  allowFusion: 1, // 是否允许融合
  isFree: 0, // 0免费
  allowDownloadImage: 1, // 允许下载生图
  allowSoftwareUse: 1, // 允许在软件旗下使用
  allowCommercialUse: 1, // 是否允许商用
  allowUsage: 1, // 允许模型转售或者融合出售
  isExclusiveModel: 1, // 是否为独家模型这个字段
  hideImageGenInfo: 0, //隐藏图片生成信息
  id: null,
};

defineExpose({
  addVersion,
});
const loading = ref(false);
const localForm = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});

watch(
  () => localForm.value,
  (newVal) => {
    emit("update:modelValue", newVal);
  },
  { immediate: true, deep: true }
);

const formRefs = ref<(FormInst | null)[]>([]);
function setFormRef(el: FormInst | null, index: number) {
  if (el) {
    formRefs.value[index] = el;
  }
}
const rules = {
  versionName: {
    required: true,
    message: "",
    trigger: "blur",
  },
  modelVersionType: {
    required: true,
    message: "",
    trigger: "blur",
  },
};
function addVersion() {
  const param = cloneDeep(modelVersionItem);
  localForm.value.modelVersionList.unshift(param);
}
const originalBtnList = ref([
  {
    label: "免费",
    value: 1,
  },
  {
    label: "会员下载",
    value: 0,
  },
]);
function handleIsFree(index: number, value: number) {
  localForm.value.modelVersionList[index].isFree = value;
}
async function nextStep() {
  for (let i = 0; i < localForm.value.modelVersionList.length; i++) {
    if (
      localForm.value.modelVersionList[i].delFlag === "0" &&
      localForm.value.modelVersionList[i].fileName === ""
    ) {
      return message.error("请上传文件");
    }
    const regex = /[\u4E00-\u9FA5]/; // 匹配汉字的正则表达式
    if (
      localForm.value.modelVersionList[i].delFlag === "0" &&
      !regex.test(localForm.value.modelVersionList[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);
  }
}

// 获取上文件的信息
const uploadRef = ref<InstanceType<typeof FileUpload> | null>(null);
// const getFileInfo = () => {
//   if (uploadRef.value[0].validRequired()) {
//     const fileInfo = uploadRef.value[0].getUploadInfo()
//     console.log(fileInfo)
//   }
// }

const handleUploadSuccess = (fileInfo: {
  objectKey: string;
  objectUrl: string;
  fileName: string;
  currentFileSize: number;
  hashCode:string
}) => {
  localForm.value.modelVersionList[uploadFileIndex.value].filePath = fileInfo.objectUrl;
  localForm.value.modelVersionList[uploadFileIndex.value].objectKey = fileInfo.objectKey;
  localForm.value.modelVersionList[uploadFileIndex.value].fileName = fileInfo.fileName;
  localForm.value.modelVersionList[uploadFileIndex.value].fileSize = fileInfo.currentFileSize;
  localForm.value.modelVersionList[uploadFileIndex.value].fileHash = fileInfo.hashCode;
  // message.success('文件上传成功')
  // 这里可以处理文件上传成功后的逻辑
  // 比如更新表单数据等
};

// 上传文件
const uploadFileIndex = ref(0);
async function triggerFileInput(index: number) {
  uploadRef.value[0].triggerFileSelect()
  uploadFileIndex.value = index;
}

function prevStep() {
  emit("prevStep");
}

const baseModelTypeList = ref([]);
async function getDictType() {
  try {
    const res = await commonApi.dictType({ type: "mode_version_type" });
    if (res.code === 200) {
      baseModelTypeList.value = res.data;
    }
  } catch (error) {
    console.log(error);
  }
}
getDictType();

function computedDelFlag() {
  return localForm.value.modelVersionList.filter((item) => item.delFlag === "0");
}
function onDelete(index: number) {
  if (computedDelFlag().length === 1) return;
  localForm.value.modelVersionList[index].delFlag = "2";
}

function handledeleteFile(item:any){
  item.filePath = ''
  item.fileKey = ''
  item.fileName = ''
  item.fileSize = ''
  item.hashCode = ''
}
</script>

<template>
  <div>
    <template
      v-for="(item, index) in localForm.modelVersionList"
      :key="index"
      class="bg-gray-100 p-4 mt-4 rounded-lg"
    >
      <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.modelVersionList[index]"
          :rules="rules"
          size="large"
        >
          <n-form-item label="版本名称" path="versionName">
            <n-input v-model:value="item.versionName" placeholder="请输入版本名" />
          </n-form-item>
          <n-form-item label="基础模型" path="modelVersionType">
            <n-select
              v-model:value="item.modelVersionType"
              label-field="dictLabel"
              value-field="dictValue"
              placeholder="请选择基础模型"
              :options="baseModelTypeList"
            />
          </n-form-item>
          <div class="flex items-center justify-between">
            <div class="flex">
              上传文件 <Asterisk :size="10" color="#ff0000" class="mt-1" />
            </div>
            <div>
              <n-checkbox
                v-model:checked="item.isEncrypt"
                :checked-value="1"
                :unchecked-value="0"
                label="是否加密"
              />
            </div>
          </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="handledeleteFile(item)"
              />
            </div>
          </div>
          <div v-else>
            <n-spin :show="loading">
              <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">
                    .safetensors/.ckpt/.pt/.bin/.pth/.zip/.json/.flow/.lightflow/.yaml/.yml/.onnx/.gguf/.sft
                  </div>
                </div>
                <fileUpload
                  ref="uploadRef"
                  :verify-hash="true"
                  :verify-name="true"
                  type="model"
                  :accept="acceptTypesList"
                  @upload-success="handleUploadSuccess"
                  :required="true"
                  :file-size="30000"
                ></fileUpload>
              </div>
            </n-spin>
          </div>
          <div class="flex mt-6">
            版本介绍 <Asterisk :size="10" color="#ff0000" class="mt-1" />
          </div>
          <div class="bg-white p-3 mt-2 rounded-lg">
            <client-only>
              <WangEditor v-model="item.versionDescription" />
            </client-only>
          </div>
          <div class="mt-6">触发词</div>
          <div class="-mb-5 text-gray-400 text-[12px]">请输入您用来训练的单词</div>
          <n-form-item path="triggerWords">
            <n-input v-model:value="item.triggerWords" placeholder="例如:  1boy" />
          </n-form-item>

          <!-- <div v-if="localForm.modelProduct.modelType === '0'">
            <n-form-item label="采样方法" path="modelVersionType">
              <n-select
                v-model:value="item.modelVersionType"
                label-field="dictLabel"
                value-field="dictValue"
                placeholder="请选择采样方法"
                :options="baseModelTypeList"
              />
             </n-form-item>
             <div>
              <n-select v-model:value="item.modelVersionType" multiple :options="baseModelTypeList" />
             </div>
          </div> -->
        </n-form>
        <div v-if="item.isPublic === 1">
          <div class="mt-4 mb-1 text-gray-400 text-[12px]">付费设置</div>
          <div class="flex justify-center items-center bg-white h-10 rounded-lg">
            <div
              v-for="(subItem, subIndex) in originalBtnList"
              :key="subIndex"
              :style="{
                backgroundColor:
                  item.isFree === subItem.value ? 'rgba(49, 98, 255, 0.1)' : '#fff',
                color: item.isFree === subItem.value ? '#3162ff' : '#000',
              }"
              class="flex-1 rounded-lg h-full flex items-center justify-center cursor-pointer"
              @click="handleIsFree(index, subItem.value)"
            >
              {{ subItem.label }}
            </div>
          </div>
          <div class="mt-1 mb-2 text-gray-500 text-[12px]">
            选择会员专属或会员下载视为您已经阅读
            <span class="text-[#3162ff] cursor-pointer underline"
              >《会员模型许可协议》</span
            >
            并同意其中条款
          </div>
          <div v-if="item.isFree === 1" class="text-[12px]">
            <div>会员下载模型</div>
            <div class="text-gray-500">
              下载模型需购买会员，在线生图对所有人开放，无生图次数限制；会员下载的模型版本生成图片默认可商用。
            </div>
          </div>
        </div>
        <div class="text-gray-400 text-[12px] my-4">许可范围</div>
        <div class="flex flex-wrap">
          <div class="w-[50%] mb-2">
            <n-checkbox
              v-model:checked="item.isOnlineUse"
              :checked-value="1"
              :unchecked-value="0"
              disabled="true"
              label="允许在魔创未来在线使用"
            />
          </div>
          <div class="w-[50%] mb-2">
            <n-checkbox
              v-model:checked="item.allowDownloadImage"
              :checked-value="1"
              :unchecked-value="0"
              label="允许下载生图"
            />
          </div>
          <div class="w-[50%] mb-2">
            <n-checkbox
              v-model:checked="item.allowSoftwareUse"
              :checked-value="1"
              disabled="true"
              :unchecked-value="0"
              label="允许在魔创未来旗下其他产品在线使用"
            />
          </div>
          <div class="w-[50%] mb-2">
            <n-checkbox
              v-model:checked="item.allowFusion"
              :checked-value="1"
              :unchecked-value="0"
              label="允许进行融合"
            />
          </div>
        </div>

        <div class="text-gray-400 text-[12px] my-4">商用许可范围</div>
        <div class="flex flex-wrap">
          <div class="w-[50%] mb-2">
            <n-checkbox
              v-model:checked="item.allowCommercialUse"
              :checked-value="1"
              :unchecked-value="0"
              label="生成图片可出售或用于商业目的"
            />
          </div>
          <div class="w-[50%] mb-2">
            <n-checkbox
              v-model:checked="item.allowUsage"
              :checked-value="1"
              :unchecked-value="0"
              label="允许模型转售或融合后出售"
            />
          </div>
        </div>

        <div class="mb-4">
          <div class="text-gray-400 text-[12px] my-4">独家设置</div>
          <div class="flex items-center mb-2">
            <n-checkbox
              v-model:checked="item.isExclusiveModel"
              :checked-value="1"
              :unchecked-value="0"
            />
            <div class="ml-3 text-[12px] text-gray-500">
              此版本为魔创未来独家模型 *获取更多流量：独家模型规则
            </div>
          </div>
        </div>
      </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="prevStep"
      >
        上一步
      </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>
</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>
