<template>
  <div class="min-h-screen flow-root" style="background: #f9f9f9">
    <syHeaderNavBar @back="() => $router.back()" @close="() => $router.back()"
      >{{ data?.authentication_name }}
    </syHeaderNavBar>
    <ModuleContainer class="mx-auto" style="width: 1200px; 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/filingPerson.png"
            style="width: 20px"
            class="mr-2.5"
          />
          备案人
        </div>
        <div class="filingPersonBox">{{ data?.authentication_name }}</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/auth.png" style="width: 20px" class="mr-2.5" />
          认证信息
        </div>
        <div
          class="flex flex-wrap"
          style="color: var(--sy-gray); font-size: 14px; font-weight: 400"
        >
          <div class="w-1/2 content">
            姓名/名称：
            <span style="color: var(--sy-black)">{{
              data?.authentication_name
            }}</span>
          </div>
          <div class="w-1/2 content">
            主体性质：
            <span style="color: var(--sy-black)">{{
              data?.authentication_subject_nature === 1 ? "自然人" : "企业组织"
            }}</span>
          </div>
          <div
            class="w-1/2 content"
            v-if="typeofFilingPerson === 'naturePerson'"
          >
            身份证号码：
            <span style="color: var(--sy-black)">{{
              data?.authentication_subject_nature_code
            }}</span>
          </div>
          <div
            class="w-1/2 content"
            v-if="typeofFilingPerson === 'businessOrganization'"
          >
            统一社会信用代码/营业执照号码：
            <span style="color: var(--sy-black)">{{
              data?.authentication_subject_nature_code
            }}</span>
          </div>
          <div class="w-1/2 content">
            所在城市：
            <span style="color: var(--sy-black)"
              >{{ data?.authentication_province }} -
              {{ data?.authentication_city }} -
              {{ data?.authentication_district }}</span
            >
          </div>
          <div
            class="w-1/2 content flex items-center"
            v-if="typeofFilingPerson === 'naturePerson'"
          >
            身份证正反面：
            <div style="color: var(--sy-black)" class="flex">
              <img
                :src="data?.authentication_held_front_id_card?.url"
                alt=""
                class="cursor-pointer"
                style="height: 20px"
                @click="showIdImg1 = true"
              />
              <img
                class="ml-2 cursor-pointer"
                :src="data?.authentication_held_back_id_card?.url"
                alt=""
                style="height: 20px"
                @click="showIdImg2 = true"
              />
              <ImageDisplay
                v-model:visible="showIdImg1"
                :url="data?.authentication_held_front_id_card?.url || ''"
              >
              </ImageDisplay>
              <ImageDisplay
                v-model:visible="showIdImg2"
                :url="data?.authentication_held_back_id_card?.url || ''"
              >
              </ImageDisplay>
            </div>
          </div>
          <div
            class="w-1/2 content flex items-center"
            v-if="typeofFilingPerson === 'businessOrganization'"
          >
            营业执照或副本：
            <span style="color: var(--sy-black)">
              <img
                style="height: 23px"
                @click="showLicense = true"
                :src="data?.authentication_business_license?.url"
                class="cursor-pointer"
                alt=""
              />
            </span>
            <ImageDisplay
              v-model:visible="showLicense"
              :url="data?.authentication_business_license?.url || ''"
            />
          </div>
          <div class="w-1/2 content">
            备案属性：
            <span style="color: var(--sy-black)">授权备案</span>
          </div>
          <div class="w-1/2 content flex items-center">
            授权书图像：
            <span style="color: var(--sy-black)">
              <img
                style="height: 23px"
                :src="
                  data?.authentication_certificate_of_authorization_image?.url
                "
                class="cursor-pointer"
                @click="showAuthImg = true"
              />
            </span>
            <ImageDisplay
              v-model:visible="showAuthImg"
              :url="
                data?.authentication_certificate_of_authorization_image?.url ||
                ''
              "
            />
          </div>
          <div class="w-1/2 content">
            授权有效期：
            <span style="color: var(--sy-black)">{{
              data?.authentication_certificate_of_authorization_date
            }}</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: 14px; 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_mobile
              }}</span>
            </div>
            <div class="content">
              邮编：
              <span style="color: var(--sy-black)">{{
                data?.contact_post_code
              }}</span>
            </div>
            <div class="content whitespace-nowrap">
              <div class="">
                联系地址：
                <span style="color: var(--sy-black)">{{
                  data?.contact_address
                }}</span>
              </div>
            </div>
          </div>
          <div class="w-1/2">
            <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_telephone
              }}</span>
            </div>
            <div class="content">
              传真：
              <span style="color: var(--sy-black)">{{
                data?.contact_fax
              }}</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 { onMounted, ref } from "vue";
import { saveAs } from "file-saver";
import printJS from "print-js";
import { useRoute } from "vue-router";
import { getAuth } from "@/service/copyrightService";
import { iAuth } from "@/types/copyright";

const route = useRoute();

const data = ref<iAuth>();

onMounted(async () => {
  const res = await getAuth(Number(route.query.id));
  if (res?.code === 200) {
    data.value = res.data;
    if (res.data.authentication_subject_nature === 2) {
      typeofFilingPerson.value = "businessOrganization";
    }
  }
});

const props = defineProps<{}>();

//   typeofFilingPerson?: "naturePerson" | "businessOrganization";
const typeofFilingPerson = ref("naturePerson");
const showIdImg1 = ref(false);
const showIdImg2 = ref(false);
const showAuthImg = ref(false);
const showLicense = 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>
