<template>
  <div>
    <!-- <el-form-item label-width="110px" :prop="`${props.vaildRules}.files`" :rules="{ required: true, message: '请上传图纸', trigger: ['blur', 'change'] }">
      <KlUploader
        v-model:file-list="form.files"
        :limit="1000"
        :show-tip="false"
        :cad-show="true"
        :file-type="computFileType"
        @validate="formRef?.validateField(`${props.vaildRules}.files`)"
        @preview="handlePreview"
      >
      </KlUploader>
    </el-form-item> -->
    <el-form-item
      label-width="110px"
      label="标题："
      :prop="`${props.vaildRules}.title`"
      :rules="[
        { required: true, message: '10-25 字符，结构可用分类关键词+作品名/资源价值版本/使用场景', trigger: ['blur', 'change'] },
        {
          validator: (rule: any, value: any, callback: any) => {
            if (value && value.length < 10) {
              callback(new Error('10-25 字符，结构可用分类关键词+作品名/资源价值版本/使用场景'))
            }
            callback()
          },
          trigger: ['blur', 'change'],
        },
      ]"
    >
      <el-input v-model="form.title" placeholder="10-25 字符，结构可用分类关键词+作品名/资源价值版本/使用场景" minlength="20" maxlength="50"></el-input>
    </el-form-item>
    <el-form-item
      label-width="110px"
      label="专业分类："
      :prop="`${props.vaildRules}.projectType`"
      :rules="{ required: true, message: '请选择分类', trigger: ['blur', 'change'] }"
    >
      <!-- <el-select v-model="form.projectType" placeholder="请选择分类" class="w-361px!" multiple>
        <el-option v-for="(item, index) in projectTypeList" :key="index" :label="item.name" :value="item.id" />
      </el-select> -->
      <el-cascader v-model="form.projectType" class="w-[100%]!" :options="projectTypeList" :props="cascaderProps" clearable collapse-tags />
    </el-form-item>
    <el-form-item
      label-width="110px"
      label="软件分类："
      :prop="`${props.vaildRules}.editions`"
      :rules="{ required: true, message: '请选择软件版本', trigger: ['blur', 'change'] }"
    >
      <el-select v-model="form.editions" placeholder="请选择软件版本">
        <el-option v-for="(item, index) in editionsList" :key="index" :label="item.name" :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item
      label-width="110px"
      label="作品来源："
      :prop="`${props.vaildRules}.source`"
      :rules="{ required: true, message: '请选择作品来源', trigger: ['blur', 'change'] }"
    >
      <el-radio-group v-model="form.source">
        <el-radio :label="1">原创图纸</el-radio>
        <el-radio :label="2">转载分享</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      label-width="110px"
      label="作品标签："
      :prop="`${props.vaildRules}.labels`"
      :rules="{ required: false, message: '请选择标签', trigger: ['blur', 'change'] }"
    >
      <el-select v-model="form.labels" :remote-method="remoteMethod" :loading="loading" multiple filterable remote placeholder="请输入搜索标签">
        <el-option v-for="(item, index) in labelsList" :key="index" :label="item" :value="item" />
      </el-select>
    </el-form-item>
    <el-form-item
      label-width="110px"
      label="金币："
      :prop="`${props.vaildRules}.points`"
      :rules="{ required: true, message: '金币设置分销为0-15,设置0金币为专属资源可直接获利2-15金币', trigger: ['blur', 'change'] }"
    >
      <el-input-number v-model="form.points" :controls="false" :precision="0" :min="0" placeholder="金币设置分销为0-15,设置0金币为专属资源可直接获利2-15金币" class="w-[100%]! text-left!"></el-input-number>
    </el-form-item>
    <!-- <el-form-item
      label-width="110px"
      label="图形格式："
      :prop="`${props.vaildRules}.formatType`"
      :rules="{ required: true, message: '请选择图形格式', trigger: ['blur', 'change'] }"
    >
      <el-checkbox-group v-model="form.formatType">
        <el-checkbox v-for="(item, index) in formatTypeList" :key="index" :label="item" :value="item"></el-checkbox>
      </el-checkbox-group>
    </el-form-item> -->
    <el-form-item
      label-width="110px"
      label="上传封面："
      :prop="`${props.vaildRules}.coverImages`"
      :rules="{ required: true, message: '请上传上传封面', trigger: ['blur', 'change'] }"
    >
      <KlUploader
        v-model:file-list="form.coverImages"
        list-type="picture-card"
        :limit="1000"
        :size="1"
        tips="上传图片支持jpg/gif/png格式、第一张为封面图片、每张图片大小不得超过1M"
        @validate="formRef?.validateField(`${props.vaildRules}.coverImages`)"
      >
        <div class="h-[77px] w-[161px] flex items-center justify-center border border-[#cdd0d6] rounded-[1px] border-dashed bg-[#fafafa]">
          <el-icon class="text-[#999999]"><Plus /></el-icon>
          <div class="ml-[4px] mt-[2px] text-[14px] text-[#999999] font-normal">上传图纸</div>
        </div>
      </KlUploader>
    </el-form-item>
    <el-form-item
      v-if="form?.type === 3"
      label-width="110px"
      label="效果图："
      :prop="`${props.vaildRules}.renderings`"
      :rules="{ required: true, message: '请上传效果图', trigger: ['blur', 'change'] }"
    >
      <KlUploader
        v-model:file-list="form.renderings"
        list-type="picture-card"
        :limit="1000"
        :show-tip="false"
        @validate="formRef?.validateField(`${props.vaildRules}.renderings`)"
      >
        <div class="h-[77px] w-[161px] flex items-center justify-center border border-[#cdd0d6] rounded-[1px] border-dashed bg-[#fafafa]">
          <el-icon class="text-[#999999]"><Plus /></el-icon>
          <div class="ml-[4px] mt-[2px] text-[14px] text-[#999999] font-normal">上传图纸</div>
        </div>
      </KlUploader>
    </el-form-item>
    <el-form-item label-width="110px" label="上传附件：" :prop="`${props.vaildRules}.otherFiles`" :rules="{ required: true, message: '请上传附件', trigger: ['blur', 'change'] }">
      <KlUploader v-model:file-list="form.otherFiles" tips="请将系列文件分别压缩后上传，支持批量上传"> </KlUploader>
    </el-form-item>
    <el-form-item
      label-width="110px"
      label="作品描述："
      :prop="`${props.vaildRules}.description`"
      :rules="[
        { required: true, message: '简介字数限制30-75 字符，需包含用途、文件介绍、适用场景等', trigger: ['blur', 'change'] },
        {
          validator: (rule, value, callback) => {
            console.log(rule)
            if (value.length < 30) {
              callback(new Error('简介字数限制30-75 字符，需包含用途、文件介绍、适用场景等'))
            } else {
              callback()
            }
          },
          trigger: ['blur', 'change'],
        },
      ]"
    >
      <el-input v-model="form.description" type="textarea" :rows="6" placeholder="简介字数限制30-75 字符，需包含用途、文件介绍、适用场景等" minlength="60" maxlength="150" show-word-limit></el-input>
    </el-form-item>
  </div>
</template>

<script setup lang="ts">
  import type { PropType } from 'vue'
  import { ref, computed } from 'vue'
  import { Plus } from '@element-plus/icons-vue'
  import KlUploader from '~/components/kl-uploader/index.vue'
  import { parent, keywords, labels, indexTabs } from '~/api/upnew/index'
  import type { TcreateReq } from '~/api/upnew/types'

  const props = defineProps({
    vaildRules: {
      type: String as PropType<string>,
      required: true,
    },
    formRef: {
      type: Object as PropType<any>,
      required: true,
    },
  })

  const cascaderProps = { multiple: true, label: 'name', value: 'id', emitPath: false }
  const emit = defineEmits(['preview'])

  const form = defineModel<TcreateReq['draws'][0]>('modelValue', {
    required: true,
  })

  const computFileType = computed(() => {
    return form.value.type === 1 ? ['dwg'] : form.value.type === 2 ? ['pdf', 'xlsx', 'docx', 'xls'] : ['max', 'skp']
  })

  const loading = ref(false)
  /** 获取标签 */
  const labelsList = ref<any>([])
  const remoteMethod = (query: string) => {
    if (query) {
      loading.value = true
      keywords({
        type: 1,
        keywords: query,
      })
        .then((res) => {
          labelsList.value = res.data
        })
        .finally(() => {
          loading.value = false
        })
    } else {
      labelsList.value = []
    }
  }

  const formatTypeList = ref<any>([])
  const getFormatTypeList = () => {
    labels({
      type: 2,
    }).then((res) => {
      // @ts-ignore
      formatTypeList.value = res.data
    })
  }
  // getFormatTypeList()

  const projectTypeList = ref<any>([])
  /** 获取分类下拉框 */
  const getParent = () => {
    indexTabs().then((res) => {
      projectTypeList.value = res.data
    })
  }

  /** 版本 */
  const editionsList = ref<any>([])
  const getEditionsList = () => {
    parent({
      type: 2,
      parentId: 0,
    }).then((res) => {
      editionsList.value = res.data
    })
  }

  const handlePreview = (val: any) => {
    emit('preview', val)
  }

  onMounted(() => {
    getEditionsList()
    getParent()
  })
</script>

<style lang="scss" scoped>
  ::v-deep(.el-form-item__label) {
    // font-size: 16px;
  }
</style>
