<template>
  <div class="file">
    <ElForm
      :rules="rules"
      :model="modelValue"
      label-position="top"
      ref="formRef"
    >
      <CustomizeFormItem label="上传作品" prop="files">
        <FileUpload
          :model-value="modelValue.files"
          @update:model-value="
            (v) =>
              $emit('update:modelValue', {
                ...modelValue,
                files: v,
              })
          "
        ></FileUpload>
      </CustomizeFormItem>
      <CustomizeFormItem prop="powerOfAttorney">
        <PowerOfAttUpload
          :model-value="modelValue.powerOfAttorney"
          @update:model-value="
            (v) =>
              $emit('update:modelValue', {
                ...modelValue,
                powerOfAttorney: v,
              })
          "
        ></PowerOfAttUpload>
        <template #label>
          作品登记委托书
          <span
            style="color: var(--sy-blue); margin-left: 16px"
            class="cursor-pointer mr-3"
            >下载《作品登记委托书》附件</span
          >
          <HoverMe :margin-top="20" class="!absolute" style="margin-top: 3px">
            <Icon
              icon-name="iconshenpiweitongguo-chakanyuanyin"
              style="font-size: 17px"
            ></Icon>
            <template #message>
              1、您的作品将委托上链查进行代理登记，需要提交《作品登记代理委托书》。2、《作品登记代理委托书》需要加盖公章，法定代表人签字。文件请上传jpg、png、jpeg、pdf格式。
            </template>
          </HoverMe>
        </template>
      </CustomizeFormItem>
    </ElForm>
  </div>
</template>

<script setup lang="ts">
import { ElForm, ElFormItem, FormInstance } from "element-plus";
import { ref } from "vue";
import { iPropsFileUplaodForm } from "./types";
import FileUpload from "./FileUpload.vue";
import HoverMe from "@/components/HoverMe/index.vue";
import Icon from "@/components/Icon/index.vue";
import PowerOfAttUpload from "./powerOfAttUpload.vue";
import CustomizeFormItem from "@/components/Form/CustomizeFormItem.vue";

const props = defineProps<{
  modelValue: iPropsFileUplaodForm;
}>();
const formRef = ref<FormInstance>();

const rules = ref<Partial<Record<keyof iPropsFileUplaodForm, any>>>({
  files: [{ required: true, message: "请上传作品" }],
  powerOfAttorney: [
    {
      required: true,
      message: "请上传作品登记委托书",
    },
  ],
});

const emit = defineEmits(["update:modelValue"]);
defineExpose({
  formRef: formRef,
});
</script>

<style scoped>
.file {
  --sy-gray-text: #787d85;
}
</style>
