<script setup lang="ts">
import type { FormInst } from 'naive-ui'
import { commonApi } from '@/api/common'
import { computed, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
})
const emit = defineEmits(['update:modelValue', 'createModelsNext'])
const localForm = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  },
})

const options: any[] = [

]
watch(
  () => localForm.value,
  (newVal) => {
    emit('update:modelValue', newVal)
  },
  { immediate: true, deep: true },
)
// 处理用户输入
function handleUpdate(value: Array<string>) {
  if (value.length > 3) {
    return
  }
  localForm.value.modelProduct.tags = value.join(',')
}
const formRef = ref<FormInst | null>(null)
const rules = {
  'modelProduct.modelName': {
    required: true,
    message: '请输入模型名称',
    trigger: 'blur',
  },
  'modelProduct.modelType': {
    required: true,
    message: '请输入模型名称',
    trigger: 'blur',
  },
}

const modelChildCategory = ref([]) // 垂类二级
const model_category = ref([]) // 模型类型
const categoryList = ref([])
const work_flow_functions = ref([])
async function getDictType() {
  try {
    const [res1, res2, res3, res4] = await Promise.all([
      commonApi.dictType({ type: 'model_part_category' }),
      commonApi.dictType({ type: 'model_child_category' }),
      commonApi.dictType({ type: 'model_category' }),
      commonApi.dictType({ type: 'work_flow_functions' }),
    ])

    // modelPartCategory.value = res1.data
    modelChildCategory.value = res2.data
    model_category.value = res3.data
    work_flow_functions.value = res4.data
    categoryList.value = res1.data
    // 遍历第一个数据数组，检查是否有子项
    categoryList.value.forEach((item: any) => {
      // 给每个对象添加一个children属性，初始化为空数组
      item.children = []
      // 遍历第二个数据数组
      modelChildCategory.value.forEach((child) => {
        // 检查parentId是否与dictValue相等
        if (child.partId === item.dictCode) {
          // 将符合条件的子项放入children数组中
          item.children.push(child)
        }
      })
    })
  }
  catch (error) {
    console.log(error)
  }
}
getDictType()

const activityList = ref([])
async function getActivityList() {
  try {
    const res = await request.post('/ToActivity/list', {})
    activityList.value = res.rows
  }
  catch (error) {
    console.log(error)
  }
}
getActivityList()

const originalBtnList = ref([
  {
    label: '原创',
    value: 0,
  },
  {
    label: '转载',
    value: 1,
  },
])
function nextStep() {
  formRef.value?.validate((errors) => {
    if (!errors) {
      emit('createModelsNext')
    }
    else {
      console.log('error', errors)
    }
  })
}
function handleIsOriginal(value: number) {
  localForm.value.modelProduct.isOriginal = value
  if (value === 0) {
    localForm.value.modelProduct.originalAuthorName = ''
  }
}
</script>

<template>
  <div>
    <n-form
      ref="formRef"
      :label-width="80"
      :model="localForm"
      :rules="rules"
      size="large"
    >
      <n-form-item label="模型名称" path="modelProduct.modelName">
        <n-input v-model:value="localForm.modelProduct.modelName" placeholder="输入模型名" />
      </n-form-item>
      <n-form-item label="模型类型" path="modelProduct.modelType">
        <n-select
          v-model:value="localForm.modelProduct.modelType"
          label-field="dictLabel"
          value-field="dictValue"
          placeholder="请选择模型类型"
          :options="model_category"
        />
      </n-form-item>
      <div>
        内容类别
      </div>
      <div class="-mb-5 text-gray-400 text-[12px]">
        填写类别可让模型获得更精准的流量, 平台也有权基于标准修改你的类别标签
      </div>
      <n-form-item path="category">
        <n-cascader
          v-model:value="localForm.modelProduct.category"
          placeholder="垂类"
          :options="categoryList"
          label-field="dictLabel"
          value-field="dictValue"
          check-strategy="child"
        />
      </n-form-item>
      <n-form-item path="functions" class="-mt-12">
        <n-select
          v-model:value="localForm.modelProduct.functions"
          label-field="dictLabel"
          value-field="dictValue"
          placeholder="功能"
          :options="work_flow_functions"
        />
      </n-form-item>

      <div>
        标签
      </div>
      <div class="-mb-5 text-gray-400 text-[12px]">
        添加标签将自动推荐给可能感兴趣的人
      </div>
      <n-form-item path="category">
        <n-select
          v-model:value="localForm.modelProduct.tags"
          :options="options"
          filterable
          tag
          multiple
          placeholder="请选择或输入标签"
          @update:value="handleUpdate"
        />
      </n-form-item>
      <div>
        参与活动
      </div>
      <div class="-mb-5 text-gray-400 text-[12px]">
        参与特定活动或比赛,下拉选择
      </div>
      <n-form-item path="activityId">
        <n-select
          v-model:value="localForm.modelProduct.activityId"
          label-field="activityName"
          value-field="id"
          placeholder="请选择参与哪个活动"
          :options="activityList"
        />
      </n-form-item>
    </n-form>
    <div class="flex justify-center items-center mt-5 bg-white h-10 rounded-lg">
      <div
        v-for="(item, index) in originalBtnList"
        :key="index"
        :style="{
          backgroundColor:
            localForm.modelProduct.isOriginal === item.value
              ? 'rgba(49, 98, 255, 0.1)'
              : '#fff',
          color: localForm.modelProduct.isOriginal === item.value ? '#3162ff' : '#000',
        }" class="flex-1 rounded-lg h-full flex items-center justify-center cursor-pointer" @click="handleIsOriginal(item.value)"
      >
        {{ item.label }}
      </div>
    </div>
    <div v-if="localForm.modelProduct.isOriginal === 0" class="text-[12px]">
      <div class="my-3">
        魔创未来原创模型加密保护计划
      </div>
      <div class="text-gray-400">
        原创模型加密保护计划是魔创未来推出的,为维护创作者权益、保障平台健康发展,通过技术手段遏制爬取、盗版、侵权等不法行为,保证创作者的劳动成果得到合理回报,进而激励更多优秀原创模型的诞生。
      </div>
      <div class="text-gray-400">
        谁能加入？ 所有发布原创模型的作者,均可以加入本计划
      </div>
      <div class="my-3 text-gray-400">
        加入后有何好处？ 1.模型加密能力 2.流量扶持 3.创作激励
      </div>
      <div class="text-gray-400">
        详情查看 <a href="" class="text-[#3162ff] underline">魔创未来原创模型加密保护计划</a>
      </div>
      <div class="my-3 ">
        原创声明
      </div>
      <div class="text-gray-400">
        本人声明并承诺模型是由本人原创,相关的权利和义务由本人承担。
      </div>
    </div>
    <div v-else>
      <n-form-item path="modelProduct.originalAuthorName" size="large">
        <n-input v-model:value="localForm.modelProduct.originalAuthorName" placeholder="输入原创作者" />
      </n-form-item>
    </div>
    <div class="flex justify-center items-center mt-5 text-white w-30 h-10 rounded-lg bg-[#3162ff] cursor-pointer" @click="nextStep">
      下一步
    </div>
  </div>
</template>

<style lang="scss" scoped>

</style>
