<template>
  <div class="workmsgupload">
    <ElForm
      :rules="rules"
      :model="modelValue"
      label-position="top"
      ref="formRef"
    >
      <CustomizeFormItem label="作品名称" prop="name">
        <syDialogInput
          class="w-full"
          v-model:value="modelValue.name"
          placeholder="请输入作品名称"
        ></syDialogInput>
      </CustomizeFormItem>
      <CustomizeFormItem label="作品类型" prop="type">
        <sySelect
          class="w-full"
          v-model="modelValue.type"
          placeholder="请选择作品类型"
        >
          <syOption
            :key="option.name"
            :label="option.name"
            :value="option.value"
            v-for="option in typeOfTheWork"
          ></syOption>
        </sySelect>
      </CustomizeFormItem>
      <CustomizeFormItem prop="nature">
        <template #label>
          作品性质
          <HoverMe
            :margin-top="20"
            class="!absolute"
            style="margin-top: 3px; margin-left: 13px"
          >
            <Icon
              icon-name="iconshenpiweitongguo-chakanyuanyin"
              style="font-size: 17px"
            ></Icon>
            <template #message>
              原创：作者未使用其他已有作品创作的作品；改编、翻译、汇编、注释、整理、其他：作者使用已有作品衍生创作的作品。
            </template>
          </HoverMe>
        </template>
        <sySelect
          class="w-full"
          v-model="modelValue.nature"
          placeholder="请选择作品性质"
        >
          <syOption
            :key="option.name"
            :label="option.name"
            :value="option.value"
            v-for="option in natureOfTheWork"
          ></syOption>
        </sySelect>
      </CustomizeFormItem>
      <CustomizeFormItem prop="desc">
        <template #label>
          内容简介
          <HoverMe
            :margin-top="20"
            class="!absolute"
            style="margin-top: 3px; margin-left: 13px"
          >
            <Icon
              icon-name="iconshenpiweitongguo-chakanyuanyin"
              style="font-size: 17px"
            ></Icon>
            <template #message>
              请填写中心内容及作品特点：对作品进行简述，包括主要内容、章节编排、部分划分、与同类作品相比的独特之处等。如美术作品需对作品本身的表现形式和审美特征进行描述（颜色、形态、表情等）。（注：若提交的作品样本中含有外文请在内容简介中附中文解释。）
            </template>
          </HoverMe>
        </template>
        <TextArea
          class="w-full"
          rows="5"
          :max-length="1000"
          v-model="modelValue.desc"
          placeholder="请填写作品的内容简介（限1000字）：
·作品简述：主要内容、章节编排、部分划分等；
·与同类作品相比的独特之处；"
        ></TextArea>
      </CustomizeFormItem>
      <CustomizeFormItem prop="progress">
        <template #label>
          创作过程
          <HoverMe
            :margin-top="20"
            class="!absolute"
            style="margin-top: 3px; margin-left: 13px"
          >
            <Icon
              icon-name="iconshenpiweitongguo-chakanyuanyin"
              style="font-size: 17px"
            ></Icon>
            <template #message>
              （1）著作权人简介：著作权人为个人，须包含本人的工作单位相关情况，无工作单位者写明“无工作单位，现从事……”。著作权人为单位，写明单位的基本情况。
              （2）创作过程：创作意图，策划和准备，创作开始时间，创作方式（手绘、使用电脑、具体的艺术手法、软件及具体操作等），经过几次修改，每次都修改了哪些内容，最终完成日期，页数，字数等。
              （3）使用情况：发表情况、许可他人专有使用情况。
              （注：1.摄影作品须在创作过程中写明具体拍摄设备、光圈值、快门等详细参数。2.如作品中有参考、引用他人作品的情况需说明，作品中的文字、图案与他人权利有关联的要做出说明、解释。）
            </template>
          </HoverMe>
        </template>
        <TextArea
          class="w-full"
          rows="5"
          :max-length="1000"
          v-model="modelValue.progress"
          placeholder="请填写作品的内容简介
著作权人简介：本人的工作情况等；
创作过程：创作意图、策划和准备、创作开始时间、创作方式等；
使用情况：发表情况、许可他人专有使用情况等。"
        ></TextArea>
      </CustomizeFormItem>
      <CustomizeFormItem label="作品完成日期" prop="date">
        <ElDatePicker
          class="datePicker"
          v-model="modelValue.date"
          type="date"
          :clearable="false"
          placeholder="请选择日期"
        ></ElDatePicker>
      </CustomizeFormItem>
      <CustomizeFormItem label="作品完成地点" prop="address">
        <syDialogInput
          class="w-full"
          v-model:value="modelValue.address"
          placeholder="请输入作品完成地点"
        ></syDialogInput>
      </CustomizeFormItem>
      <CustomizeFormItem prop="status">
        <template #label>
          发表状态
          <HoverMe
            :margin-top="20"
            class="!absolute"
            style="margin-top: 3px; margin-left: 13px"
          >
            <Icon
              icon-name="iconshenpiweitongguo-chakanyuanyin"
              style="font-size: 17px"
            ></Icon>
            <template #message>
              作品如果已“已发表”，需要填写作品的首次发表的时间及地点。
            </template>
          </HoverMe>
        </template>
        <syRadio label="已发表" v-model="modelValue.status">已发表</syRadio>
        <syRadio label="未发表" v-model="modelValue.status">未发表</syRadio>
      </CustomizeFormItem>
      <CustomizeFormItem
        label="首次发表日期"
        prop="firstDate"
        required
        v-show="modelValue.status === '已发表'"
      >
        <ElDatePicker
          class="datePicker"
          v-model="modelValue.firstDate"
          type="date"
          :clearable="false"
          placeholder="请选择日期"
        ></ElDatePicker>
      </CustomizeFormItem>
      <CustomizeFormItem
        required
        label="首次发表地点"
        prop="firstAddress"
        v-show="modelValue.status === '已发表'"
        ><syDialogInput
          class="w-full"
          v-model:value="modelValue.firstAddress"
          placeholder="请输入首次发表地点"
        ></syDialogInput>
      </CustomizeFormItem>
    </ElForm>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

import { ElForm, FormInstance, ElDatePicker } from "element-plus";
import { syDialogInput, sySelect, syOption, syRadio } from "cqk-sy-ui";

import HoverMe from "@/components/HoverMe/index.vue";
import Icon from "@/components/Icon/index.vue";
import CustomizeFormItem from "@/components/Form/CustomizeFormItem.vue";
import TextArea from "@/components/Input/TextArea.vue";

import { iPropsWorkMsgUploadForm } from "./types";
import { natureOfTheWork, typeOfTheWork } from "./constants";

const props = defineProps<{
  modelValue: iPropsWorkMsgUploadForm;
}>();
const formRef = ref<FormInstance>();
const emit = defineEmits(["update:modelValue"]);

const rules = ref<Partial<Record<keyof iPropsWorkMsgUploadForm, any>>>({
  name: [{ required: true, message: "请上传作品" }],
  type: [{ required: true, message: "请选择作品类型" }],
  nature: [{ required: true, message: "请选择作品性质" }],
  desc: [{ required: true, message: "请填写作品的内容简介" }],
  progress: [{ required: true, message: "请填写作品的创作过程" }],
  date: [{ required: true, message: "请选择日期" }],
  address: [{ required: true, message: "请输入作品完成地点" }],
  firstDate: [
    {
      validator(rule: any, value: any, callback: any) {
        if (props.modelValue.status === "已发表") {
          value ? callback() : callback("请选择日期");
        } else {
          callback();
        }
      },
    },
  ],
  firstAddress: [
    {
      validator(rule: any, value: any, callback: any) {
        if (props.modelValue.status === "已发表") {
          value ? callback() : callback("请输入首次发表地点");
        } else {
          callback();
        }
      },
    },
  ],
});

defineExpose({
  formRef: formRef,
});
</script>

<style scoped lang="scss">
.file {
  --sy-gray-text: #787d85;
}
:deep(.datePicker) {
  width: 100%;
  flex-shrink: 0;
  .el-input__inner {
    padding-left: 18px !important;
    height: 36px;
    color: #353535;
    &:hover {
      box-shadow: 0 0 0 1px #c4c4c4 inset;
    }
    &:focus {
      box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
        inset !important;
    }
    .el-input__inner::placeholder {
      color: #a3a7aa;
    }
  }
  .el-input__prefix {
    position: absolute;
    top: 0;
    left: calc(100% - 32px);
    text-align: center;
    height: 100%;
    color: #c0c4cc;
  }
}
</style>
