<template>
  <div class="addCopyRight">
    <syHeaderNavBar @back="() => $router.back()" @close="() => $router.back()"
      >版权申请
    </syHeaderNavBar>
    <ModuleContainer
      class="mx-auto"
      style="
        margin-top: 17px;
        padding-top: 60px;
        padding-left: 68px;
        padding-right: 68px;
      "
    >
      <div class="title text-center" ref="titleRef">填写版权信息</div>
      <div class="tip text-center">请仔细填写作品资料,审核通过后将不能修改</div>
      <AddFilingPerson
        v-model:visible="addFilingPersonVisible"
      ></AddFilingPerson>
      <ElForm :model="formModel" :rules="rules" ref="formRef">
        <CustomizeFormItem label="备案人" prop="filingPerson">
          <sySelect
            ref="selectRef"
            class="w-full"
            v-model="formModel.filingPerson"
            placeholder="请选择备案人"
          >
            <syOption label="option.name" value="option.value"></syOption>
            <syOption :value="1">
              <div
                @click.stop="handleClickAddFilingPersn"
                style="color: var(--sy-blue)"
                class="flex items-center"
              >
                <Icon iconName="icontianjialiucheng" class="mr-1"></Icon>
                添加备案人
              </div>
            </syOption>
          </sySelect>
        </CustomizeFormItem>
        <CustomizeFormItem label="作品名称" prop="titleOfWork">
          <syDialogInput
            v-model:value="formModel.titleOfWork"
            class="w-full"
            placeholder="请输入作品名称"
          ></syDialogInput>
        </CustomizeFormItem>
        <CustomizeFormItem label="作品类型" prop="typeOfWork">
          <ElRadioGroup v-model="formModel.typeOfWork">
            <syRadio label="文字">文字</syRadio>
            <syRadio label="音乐">音乐</syRadio>
            <syRadio label="摄影">摄影</syRadio>
            <syRadio label="美术">美术</syRadio>
            <syRadio label="视觉作品">视觉作品</syRadio>
            <syRadio label="其他">其他</syRadio>
          </ElRadioGroup>
        </CustomizeFormItem>
        <CustomizeFormItem label="创作类型" prop="typeOfCreation">
          <syRadio label="原创" v-model="formModel.typeOfCreation"
            >原创</syRadio
          >
          <syRadio label="改编" v-model="formModel.typeOfCreation"
            >改编</syRadio
          >
          <syRadio label="翻译" v-model="formModel.typeOfCreation"
            >翻译</syRadio
          >
          <syRadio label="注释" v-model="formModel.typeOfCreation"
            >注释</syRadio
          >
          <syRadio label="整理" v-model="formModel.typeOfCreation"
            >整理</syRadio
          >
          <syRadio label="其他" v-model="formModel.typeOfCreation"
            >其他</syRadio
          >
        </CustomizeFormItem>
        <CustomizeFormItem label="创作/制作完成日期" prop="dateOfCreation">
          <ElDatePicker
            class="datePicker"
            v-model="formModel.dateOfCreation"
            type="date"
            :clearable="false"
            placeholder="请选择日期"
          ></ElDatePicker>
        </CustomizeFormItem>
        <CustomizeFormItem label="创作/制作完成日期地点" prop="AddrOfCreation">
          <syDialogInput
            v-model:value="formModel.AddrOfCreation"
            class="w-full"
            placeholder="请输入创作/制作完成日期地点"
          ></syDialogInput
        ></CustomizeFormItem>
        <CustomizeFormItem label="发表状态" prop="postStatus">
          <syRadio label="已发表" v-model="formModel.typeOfCreation"
            >已发表</syRadio
          >
          <syRadio label="未发表" v-model="formModel.typeOfCreation"
            >未发表</syRadio
          ></CustomizeFormItem
        >
        <CustomizeFormItem label="权利取得方式" prop="wayOfObtainingPower">
          <syRadio label="原始" v-model="formModel.wayOfObtainingPower"
            >原始</syRadio
          >
          <syRadio label="继承" v-model="formModel.wayOfObtainingPower"
            >继承</syRadio
          >
          <syRadio label="承受" v-model="formModel.wayOfObtainingPower"
            >承受</syRadio
          >
          <syRadio label="其他" v-model="formModel.wayOfObtainingPower"
            >其他</syRadio
          >
          <syRadio label="整理" v-model="formModel.wayOfObtainingPower"
            >整理</syRadio
          >
          <syRadio label="其它" v-model="formModel.wayOfObtainingPower"
            >其它</syRadio
          >
        </CustomizeFormItem>
        <CustomizeFormItem label="其他备注说明" prop="remark">
          <syDialogInput
            v-model:value="formModel.remark"
            class="w-full"
            type="textarea"
            placeholder="请输入其他备注说明"
            rows="4"
          ></syDialogInput>
        </CustomizeFormItem>
        <CustomizeFormItem label="作品附件" prop="workAttachment">
          <UploadAttachment
            v-model="formModel.workAttachment"
          ></UploadAttachment>
          <div style="font-size: 14px; font-weight: 400; color: #353535">
            附件上传温馨提醒：允许上传格式为：txt,doc,docx,zip,rar,7z的文件
          </div>
        </CustomizeFormItem>
      </ElForm>
      <el-checkbox
        color="var(--sy-blue)"
        v-model="formModel.agreeToTheFilingStatement"
        label="我同意备案申明"
        @select="(v) => {}"
      />
      <div style="margin-top: 31px">
        <syButton
          mode="elementBtn"
          style="width: 113px"
          type="primary"
          size="large"
          :disabled="!formModel.agreeToTheFilingStatement"
          @click="handleSubmit"
          >提交版权</syButton
        >
        <syButton mode="elementBtn" style="width: 113px" size="large"
          >保存草稿箱</syButton
        >
      </div>
      <div
        style="font-size: 14px; font-weight: 400; color: #353535"
        class="mt-[35px]"
      >
        <div>收费说明：</div>
        <div>
          本次申请将收取总费用
          <span style="color: #ff6268">333积分（30元）</span>
        </div>
        <div>
          其中作品备案费<span style="color: #ff6268">333积分（30元）</span>
          ,文件存储费 <span style="color: #ff6268">0积分</span>
        </div>
        <div>备案申明：</div>
        <div>
          我为上述作品的申请人,拥有上述作品根据《中华人民共和国著作权法》所规定的权利,我保证以上作品及其内容绝不违反现行有关法律、法规的相关规定。如有不实或发现有侵犯他人著作权的行为,我承担由此引起的一切法律责任。特此声明。
        </div>
      </div>
    </ModuleContainer>
  </div>
</template>

<script setup lang="ts">
import {
  syHeaderNavBar,
  syRadio,
  sySelect,
  syOption,
  syDialogInput,
  syButton,
} from "cqk-sy-ui";
import ModuleContainer from "@/components/ModuleContainer/index.vue";
import {
  ElForm,
  ElInput,
  ElDatePicker,
  ElCheckbox,
  ElRadioGroup,
  UploadFile,
} from "element-plus";
import { ref } from "vue";
import Icon from "@/components/Icon/index.vue";
import CustomizeFormItem from "@/components/Form/CustomizeFormItem.vue";
import UploadAttachment from "./components/UploadAttachment/index.vue";
import AddFilingPerson from "../AddFilingPerson/index.vue";
const formRef = ref<InstanceType<typeof ElForm>>();

const addFilingPersonVisible = ref(false);
const formModel = ref({
  filingPerson: "",
  titleOfWork: "",
  typeOfWork: "",
  typeOfCreation: "",
  dateOfCreation: undefined as undefined | number,
  AddrOfCreation: "",
  postStatus: "",
  wayOfObtainingPower: "",
  remark: "",
  workAttachment: { name: "hah" } as UploadFile | undefined,
  agreeToTheFilingStatement: false,
});
const rules = ref({
  filingPerson: [{ required: true, message: "请选择备案人" }],
  titleOfWork: [{ required: true, message: "请输入作品名称" }],
  typeOfWork: [{ required: true, message: "请选择作品类型" }],
  typeOfCreation: [{ required: true, message: "请输入创作类型" }],
  dateOfCreation: [{ required: true, message: "请选择日期" }],
  AddrOfCreation: [{ required: true, message: "请输入创作/制作完成日期地点" }],
  postStatus: [{ required: true, message: "请选择发表状态" }],
  wayOfObtainingPower: [{ required: true, message: "" }],
  remark: [],
  workAttachment: [{ required: true, message: "请上传文件" }],
  agreeToTheFilingStatement: [],
});
const selectRef = ref();
function handleClickAddFilingPersn() {
  selectRef.value.blur();
  addFilingPersonVisible.value = true;
}

const handleSubmit = () => {
  formRef.value?.validate((isValid) => {
    if (isValid) {
    }
  });
};
</script>

<style lang="scss" scoped>
.addCopyRight {
  .title {
    font-size: 30px;
    font-weight: 600;
    color: #191919;
    line-height: 42px;
  }
  .tip {
    font-size: 14px;
    font-weight: 400;
    color: #ababab;
  }
}
</style>
