<script setup lang="ts">
import type { FormInst, FormItemRule } from 'naive-ui'
import CreateModels from '@/components/publishModel/CreateModels.vue'
import EditVersion from '@/components/publishModel/EditVersion.vue'

const step2Ref = ref(null)
const currentStep = ref(2)
const formData = ref({
  modelProduct: {
    modelName: '模型名称',
    modelType: null, // ,，模型类型
    category: null, // 垂类分类
    functions: null, // '模型功能',
    tags: null, // 标签（最多三个，切割）string
    activityId: null, // 参与活动string

    isOriginal: 1,
    originalAuthorName: '',
  },

  modelVersionList: [
    {
      versionName: '', //	版本名称
      modelId: null, // 基础模型
      versionDescription: '"<p>这是一个描述</p><p><img src=\"https://img1.baidu.com/it/u=3001150338,397170470&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422\" /></p><p>这是两张图片之间的一些文字说明</p><p><img src=\"https://img12.iqilu.com/10339/clue/202405/29/68ec17f5-9621-461f-ad22-a6820a3f9cf5.jpg\" /></p>"', // 版本描述
      filePath: 'https://ybl2112.oss-cn-beijing.aliyuncs.com/2025/JANUARY/2/19/4/877e449c-3c0d-4630-a304-91ec110499f2.png', // 文件路径
      fileName: '这是一个文件名文件名。。。。这是一个文件名文件这是一个文件名文件这是一个文件名文件这是一个文件名文件', // 文档里没有 ，表里没有
      sampleImagePaths: 'https://ybl2112.oss-cn-beijing.aliyuncs.com/2025/JANUARY/2/19/4/877e449c-3c0d-4630-a304-91ec110499f2.png,https://ybl2112.oss-cn-beijing.aliyuncs.com/2025/JANUARY/2/19/4/877e449c-3c0d-4630-a304-91ec110499f2.png,https://ybl2112.oss-cn-beijing.aliyuncs.com/2025/JANUARY/2/19/4/877e449c-3c0d-4630-a304-91ec110499f2.png', // 第三部的图片路径最多20张,切割
      triggerWords: '触发词', // 触发词
      isPublic: 1, // 权限是否公开权限 1公开 2自见
      isFree: 0, // 0免费
      allowFusion: 1, // 待确定
      allowDownloadImage: 1,	// 允许下载生图
      allowUsage: 1,	// 是否允许使用
      allowSoftwareUse: 1,	// 允许在软件旗下使用
      allowCommercialUse: 1,	// 是否允许商用
      // 允许模型转售或者融合手出售字段没找到？
      isExclusiveModel: 1, // 是否为独家模型这个字段
    },
  ],
})
async function addWorkflow() {
  try {
    const params = {
      modelProduct: {
        modelName: '模型名称',
        modelTypeId: 1, // ,，模型类型
        category: '1', // 垂类分类
        functions: '1', // '模型功能',
        tags: '11', // 标签（最多三个，切割）string
        activityId: '1', // 参与活动string

        isOriginal: 1, // ??? 0原创1非原创
        originalAuthorName: '作者名称',
      },

      modelVersionList: [
        {
          versionName: '1.0', //	版本名称
          modelId: 1, // 基础模型
          versionDescription: '"<p>这是一个描述</p><p><img src=\"https://img1.baidu.com/it/u=3001150338,397170470&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422\" /></p><p>这是两张图片之间的一些文字说明</p><p><img src=\"https://img12.iqilu.com/10339/clue/202405/29/68ec17f5-9621-461f-ad22-a6820a3f9cf5.jpg\" /></p>"', // 版本描述
          filePath: 'https://ybl2112.oss-cn-beijing.aliyuncs.com/2025/JANUARY/2/19/4/877e449c-3c0d-4630-a304-91ec110499f2.png', // 文件路径
          fileName: '', // 文档里没有 ，表里没有
          sampleImagePaths: 'https://ybl2112.oss-cn-beijing.aliyuncs.com/2025/JANUARY/2/19/4/877e449c-3c0d-4630-a304-91ec110499f2.png,https://ybl2112.oss-cn-beijing.aliyuncs.com/2025/JANUARY/2/19/4/877e449c-3c0d-4630-a304-91ec110499f2.png,https://ybl2112.oss-cn-beijing.aliyuncs.com/2025/JANUARY/2/19/4/877e449c-3c0d-4630-a304-91ec110499f2.png', // 第三部的图片路径最多20张,切割
          triggerWords: '触发词', // 触发词
          isPublic: 1, // 权限是否公开权限 1公开 2自见
          allowFusion: 1, // 待确定
          isFree: 0, // 0免费
          allowDownloadImage: 1,	// 允许下载生图
          allowUsage: 1,	// 是否允许使用
          allowSoftwareUse: 1,	// 允许在软件旗下使用
          allowCommercialUse: 1,	// 是否允许商用
          // 允许模型转售或者融合手出售字段没找到？
          isExclusiveModel: 1, // 是否为独家模型这个字段
        },
      ],
    }
    const res = await request.post('/model/insert', params)
  }
  catch (error) {
    console.log(error)
  }
}
function createModelsNext() {
  currentStep.value = 2
}
function handleAddVersion() {
  if (step2Ref.value) {
    step2Ref.value?.addVersion()
  }
}
// const handleValidateButtonClick = (e: MouseEvent) => {
//   e.preventDefault();
//   formRef.value?.validate((errors) => {
//     if (!errors) {
//       message.success("验证成功");
//     } else {
//       console.log(errors);
//       message.error("验证失败");
//     }
//   });
// };
</script>

<template>
  <div class="mx-auto py-6">
    <div class="container mx-auto w-[700px]">
      <div class="step-line flex">
        <div class="mr-10">
          1创建模版
        </div>
        <div class="mr-10">
          2编辑版本
        </div>
        <div class="mr-10">
          3上传图片
        </div>
        <div v-if="currentStep === 2" @click="handleAddVersion">
          添加版本
        </div>
      </div>
      <div class="form-container bg-gray-100 p-4 rounded-lg">
        <div v-if="currentStep === 1" class="first-step">
          <CreateModels v-model="formData" @create-models-next="createModelsNext" />
        </div>

        <div v-if="currentStep === 2" class="second-step">
          <EditVersion ref="step2Ref" v-model="formData" />
        </div>

        <div v-if="currentStep === 3" class="third-step">
          3
        </div>
      </div>
    </div>
    <!-- <n-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-placement="left"
      label-width="auto"
      require-mark-placement="right-hanging"
      size="large"
      :style="{
        maxWidth: '640px',
      }"
    >
      <n-form-item label="模型名称" path="inputValue">
        <n-input v-model:value="formData.inputValue" placeholder="Input" />
      </n-form-item>
      <n-form-item label="模型类型" path="inputValue">
        <n-select v-model:value="formData.value" :options="cuileioptions" />
      </n-form-item>
      <n-form-item label="Checkbox Group" path="checkboxGroupValue">
        <n-checkbox-group v-model:value="formData.checkboxGroupValue">
          <n-space>
            <n-checkbox value="Option 1">
              Option 1
            </n-checkbox>
            <n-checkbox value="Option 2">
              Option 2
            </n-checkbox>
            <n-checkbox value="Option 3">
              Option 3
            </n-checkbox>
          </n-space>
        </n-checkbox-group>
      </n-form-item>
      <n-form-item label="Radio Group" path="radioGroupValue">
        <n-radio-group v-model:value="formData.radioGroupValue" name="radiogroup1">
          <n-space>
            <n-radio value="Radio 1">
              Radio 1
            </n-radio>
            <n-radio value="Radio 2">
              Radio 2
            </n-radio>
            <n-radio value="Radio 3">
              Radio 3
            </n-radio>
          </n-space>
        </n-radio-group>
      </n-form-item>
      <n-form-item label="Radio Button Group" path="radioGroupValue">
        <n-radio-group v-model:value="formData.radioGroupValue" name="radiogroup2">
          <n-radio-button value="Radio 1">
            Radio 1
          </n-radio-button>
          <n-radio-button value="Radio 2">
            Radio 2
          </n-radio-button>
          <n-radio-button value="Radio 3">
            Radio 3
          </n-radio-button>
        </n-radio-group>
      </n-form-item>
      <div style="display: flex; justify-content: flex-end">
        <n-button round type="primary" @click="addWorkflow">
          验证
        </n-button>
      </div>
    </n-form> -->
  </div>
  <!-- <pre
    >{{ JSON.stringify(model, null, 2) }}
  </pre> -->
</template>
