<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">
      <div class="flex items-center justify-between">
        <div class="copyRightTitle">茶小Y</div>
        <div>
          <syButton mode="elementBtn" type="default" size="large"
            >编辑</syButton
          >
          <syButton mode="elementBtn" type="default" size="large"
            >删除</syButton
          >
          <syButton
            mode="elementBtn"
            type="default"
            size="large"
            @click="showCert = true"
            >查看证书</syButton
          >
          <syButton
            mode="elementBtn"
            type="default"
            size="large"
            @click="
              saveAs(
                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                '证书.png'
              )
            "
            >下载tsa证书</syButton
          >
          <ImageDisplay
            v-model:visible="showCert"
            url="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
          >
            <div class="flex mt-7">
              <div
                class="imgBtn mr-2.5"
                @click="
                  saveAs(
                    'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    '证书.png'
                  )
                "
              >
                保存证书
              </div>
              <div class="imgBtn" @click="printJS('imageDisplay', 'html')">
                打印证书
              </div>
            </div>
          </ImageDisplay>
        </div>
      </div>
      <div class="time">2022-06-27 12:12:20</div>
      <div
        class="flex"
        style="font-size: 12px; font-weight: 400; line-height: 40px"
      >
        <div class="w-1/2">
          <span style="color: var(--sy-gray)">审核意见：</span>
          <span>资料不完整</span>
        </div>
        <div>
          <span style="color: var(--sy-gray)">备注说明：</span>
          <span style="color: #ff6268">审核不通过</span>
          <span style="color: #379e0e">审核通过</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">杭州苦练科技公司</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.svg"
            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)">茶小Y</span>
          </div>
          <div class="w-1/2 content">
            创作/制作完成日期：
            <span style="color: var(--sy-black)">2022-06-27</span>
          </div>
          <div class="w-1/2 content">
            作品创作性质：
            <span style="color: var(--sy-black)">插画</span>
          </div>
          <div class="w-1/2 content">
            首次发表时间：
            <span style="color: var(--sy-black)">-</span>
          </div>
          <div class="w-1/2 content">
            发表状态：
            <span style="color: var(--sy-black)">未发表</span>
          </div>
          <div class="w-1/2 content">
            作品附件：
            <span style="color: var(--sy-black)"><img src="" alt="" /></span>
          </div>
          <div class="w-1/2 content">
            其他备注说明：
            <span style="color: var(--sy-black)">没有备注了</span>
          </div>
          <div class="w-1/2 content">
            创作/制作完成地点：
            <span style="color: var(--sy-black)">杭州</span>
          </div>
          <div class="w-1/2 content">
            作品类型：
            <span style="color: var(--sy-black)">文字</span>
          </div>
          <div class="w-1/2 content">
            权力取得方式：
            <span style="color: var(--sy-black)">原始</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)">茶小Y</span>
            </div>
            <div class="content">
              电子邮箱：
              <span style="color: var(--sy-black)">插画</span>
            </div>
            <div class="content">
              手机：
              <span style="color: var(--sy-black)">未发表</span>
            </div>
            <div class="content">
              电话：
              <span style="color: var(--sy-black)">没有备注了</span>
            </div>
          </div>
          <div class="w-1/2">
            <div class="content">
              邮编：
              <span style="color: var(--sy-black)">2022-06-27</span>
            </div>
            <div class="content">
              传真：
              <span style="color: var(--sy-black)">-</span>
            </div>
            <div class="content">
              联系地址：
              <span style="color: var(--sy-black)"
                >888888888888888888888888888888888888888888888888888888888888888888888888888888888888</span
              >
            </div>
          </div>
        </div>
      </div>
    </ModuleContainer>
  </div>
</template>

<script setup lang="ts">
import { syHeaderNavBar, syButton } from "cqk-sy-ui";
import ModuleContainer from "@/components/ModuleContainer/index.vue";
import ImageDisplay from "@/components/ImageDisplay/index.vue";
import { ref } from "vue";
import { saveAs } from "file-saver";
import printJS from "print-js";

const showCert = ref(false);
</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>
