<template>
  <div class="min-h-screen flow-root" style="background: #f9f9f9">
    <syHeaderNavBar @back="() => $router.back()" @close="() => $router.back()"
      >版权申请
    </syHeaderNavBar>
    <ModuleContainer
      class="mx-auto"
      style="width: 858px; margin-top: 17px"
      v-if="
        data?.record_work_status === eStatusOfCopyright.NOT_PASSED ||
        data?.record_work_status === eStatusOfCopyright.RECORD_SUCCESS
      "
    >
      <div class="flex items-center justify-between">
        <div class="copyRightTitle">{{ data?.record_work_name }}</div>
        <div>
          <syButton
            mode="elementBtn"
            type="default"
            size="large"
            @click="handleClickEdit(data!)"
            v-if="data?.record_work_status === eStatusOfCopyright.NOT_PASSED"
            >编辑</syButton
          >
          <syButton
            mode="elementBtn"
            type="default"
            size="large"
            @click="handleClickDel(data!)"
            v-if="data?.record_work_status === eStatusOfCopyright.NOT_PASSED"
            >删除</syButton
          >
          <syButton
            mode="elementBtn"
            type="default"
            v-if="
              data?.record_work_status === eStatusOfCopyright.RECORD_SUCCESS
            "
            size="large"
            @click="showCert = true"
            >查看证书</syButton
          >
          <syButton
            mode="elementBtn"
            type="default"
            v-if="
              data?.record_work_status === eStatusOfCopyright.RECORD_SUCCESS
            "
            size="large"
            @click="saveAs(data!.certificate)"
            >下载tsa证书</syButton
          >
          <ImageDisplay v-model:visible="showCert" :url="data!.certificate">
            <div class="flex mt-7">
              <div
                class="imgBtn mr-2.5"
                @click="
                  saveAs(
                    data!.certificate
                  )
                "
              >
                保存证书
              </div>
              <div
                class="imgBtn"
                @click="
                  printJS({
                    printable: data!.certificate,
                    type: 'image',
                  })
                "
              >
                打印证书
              </div>
            </div>
            <div class="flex-grow"></div>
          </ImageDisplay>
        </div>
      </div>
      <div class="time">{{ formatTime(data?.create_time) }}</div>
      <div
        class="flex"
        style="font-size: 12px; font-weight: 400; line-height: 40px"
      >
        <div
          class="w-1/2"
          v-if="data?.record_work_status === eStatusOfCopyright.NOT_PASSED"
        >
          <span style="color: var(--sy-gray)">审核意见：</span>
          <span>{{ data.record_audit_opinions }}</span>
        </div>
        <div>
          <span style="color: var(--sy-gray)">备注说明：</span>
          <span
            style="color: #ff6268"
            v-if="data?.record_work_status === eStatusOfCopyright.NOT_PASSED"
            >审核不通过</span
          >
          <span
            style="color: #379e0e"
            v-if="
              data?.record_work_status === eStatusOfCopyright.RECORD_SUCCESS
            "
            >审核通过</span
          >
        </div>
      </div>
    </ModuleContainer>
    <ModuleContainer class="mx-auto" style="width: 858px; margin-top: 17px">
      <div class="overflow-hidden">
        <div
          class="title"
          style="color: var(--sy-blue); font-size: 14px; font-weight: 600"
        >
          <img src="@/assets/img/auth.png" style="width: 20px" class="mr-2.5" />
          备案人
        </div>
        <div class="filingPersonBox">{{ data?.contact_person }}</div>
      </div>
      <div class="line"></div>
      <div class="overflow-hidden">
        <div
          class="title"
          style="color: var(--sy-blue); font-size: 14px; font-weight: 600"
        >
          <img
            src="@/assets/img/workMsg.png"
            style="width: 20px"
            class="mr-2.5"
          />
          作品资料
        </div>
        <div
          class="flex flex-wrap"
          style="color: var(--sy-gray); font-size: 12px; font-weight: 400"
        >
          <div class="w-1/2 content">
            作品名称：
            <span style="color: var(--sy-black)">{{
              data?.record_work_name
            }}</span>
          </div>
          <div class="w-1/2 content">
            创作/制作完成日期：
            <span style="color: var(--sy-black)">{{
              data?.record_work_finish_date || "-"
            }}</span>
          </div>
          <div class="w-1/2 content">
            作品创作性质：
            <span style="color: var(--sy-black)">{{
              data?.record_work_nature &&
              (workNatureMapping as any)[data?.record_work_nature]
            }}</span>
          </div>
          <div class="w-1/2 content">
            首次发表时间：
            <span style="color: var(--sy-black)">
              {{ data?.record_work_publish_date || "-" }}
            </span>
          </div>
          <div class="w-1/2 content">
            发表状态：
            <span style="color: var(--sy-black)">{{
              data?.record_work_publish_state ? "已发表" : "未发表"
            }}</span>
          </div>
          <div class="w-1/2 content flex items-center">
            作品附件：
            <span style="color: var(--sy-black)"
              ><img
                src="@/assets/img/link.png"
                class="cursor-pointer"
                @click="
                  data?.record_work_attachment.url &&
                    saveAs(data?.record_work_attachment.url)
                "
                style="height: 20px"
                alt=""
            /></span>
          </div>
          <div class="w-1/2 content">
            其他备注说明：
            <span style="color: var(--sy-black)">{{
              data?.record_work_description || "-"
            }}</span>
          </div>
          <div class="w-1/2 content">
            创作/制作完成地点：
            <span style="color: var(--sy-black)">{{
              data?.record_work_finish_address || "-"
            }}</span>
          </div>
          <div class="w-1/2 content">
            作品类型：
            <span style="color: var(--sy-black)">{{
              data?.record_work_type && (workTypeMapping as any)[data?.record_work_type]
            }}</span>
          </div>
          <div class="w-1/2 content">
            权力取得方式：
            <span style="color: var(--sy-black)">{{
              data?.record_work_gain_source && (gainSourceMapping as any)[data?.record_work_gain_source]
            }}</span>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="overflow-hidden">
        <div
          class="title"
          style="color: var(--sy-blue); font-size: 14px; font-weight: 600"
        >
          <img
            src="@/assets/img/contact.png"
            style="width: 20px"
            class="mr-2.5"
          />
          申请人及联系方式
        </div>
        <div
          class="flex"
          style="color: var(--sy-gray); font-size: 12px; font-weight: 400"
        >
          <div class="w-1/2">
            <div class="content">
              联系人：
              <span style="color: var(--sy-black)">{{
                data?.contact_person || "-"
              }}</span>
            </div>
            <div class="content">
              电子邮箱：
              <span style="color: var(--sy-black)">{{
                data?.contact_email || "-"
              }}</span>
            </div>
            <div class="content">
              手机：
              <span style="color: var(--sy-black)">{{
                data?.contact_mobile || "-"
              }}</span>
            </div>
            <div class="content">
              电话：
              <span style="color: var(--sy-black)">{{
                data?.contact_telephone || "-"
              }}</span>
            </div>
          </div>
          <div class="w-1/2">
            <div class="content">
              邮编：
              <span style="color: var(--sy-black)">{{
                data?.contact_post_code || "-"
              }}</span>
            </div>
            <div class="content">
              传真：
              <span style="color: var(--sy-black)">{{
                data?.contact_fax || "-"
              }}</span>
            </div>
            <div class="content">
              联系地址：
              <span style="color: var(--sy-black)">{{
                data?.contact_address || "-"
              }}</span>
            </div>
          </div>
        </div>
      </div>
    </ModuleContainer>
  </div>
</template>

<script setup lang="ts">
import { syHeaderNavBar, syButton, formatTime } from "cqk-sy-ui";
import ModuleContainer from "@/components/ModuleContainer/index.vue";
import ImageDisplay from "@/components/ImageDisplay/index.vue";
import { onMounted, ref } from "vue";
import { saveAs } from "file-saver";
import printJS from "print-js";
import { deleteCopyRights, getCopyRight } from "@/service/copyrightService";
import { useRoute } from "vue-router";
import { iCopyRight } from "@/types/copyright";
import { eStatusOfCopyright } from "@/components/ApproveStatus/status";
import {
  workTypeMapping,
  workNatureMapping,
  gainSourceMapping,
} from "../copyrightManagement/statusMapping";
import { router } from "@/router";

const showCert = ref(false);

const route = useRoute();
const data = ref<iCopyRight>();

onMounted(async () => {
  const res = await getCopyRight(Number(route.query.id));
  if (res?.code === 200) {
    data.value = res.data;
  }
});

function handleClickEdit(raw: iCopyRight) {
  router.push({
    name: "addCopyRight",
    query: {
      id: raw.id,
    },
  });
}

async function handleClickDel(raw: iCopyRight) {
  await deleteCopyRights([raw.id]);
  router.back();
}
</script>

<style lang="scss" scoped>
.copyRightTitle {
  font-size: 30px;
  font-weight: 600;
  color: var(--sy-black);
}
.time {
  font-size: 14px;
  font-weight: 400;
  color: var(--sy-gray);
  line-height: 40px;
}
.line {
  height: 2px;
  background: #f0f1f5;
  width: 100%;
  margin-top: 30px;
  margin-bottom: 30px;
}
.filingPersonBox {
  width: 244px;
  height: 37px;
  background: #ecf2ff;
  border-radius: 4px;
  border: 1px solid var(--sy-blue);
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  font-weight: 400;
  color: var(--sy-blue);
}
.title {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.content {
  line-height: 40px;
  word-break: break-all;
}
.imgBtn {
  width: 100px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid #ffffff;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>
