<script setup>
import html2canvas from 'html2canvas';
import {jsPDF} from 'jspdf';
import {ElLoading, ElMessage} from "element-plus";
import request from "@/utils/request.js";

const props = defineProps({
  creditCode: String,
  closeDialog: Function,
});

const printContent = async () => {
  const loading = ElLoading.service({
    lock: true,
    text: '处理中',
    background: 'rgba(0, 0, 0, 0.7)',
  })

  try {
    const e = document.querySelectorAll(".page .page-content");
    let t = 0;
    for (let i = 0; i < e.length; i++) {
      t += e[i].scrollHeight;
      if (t > 1188) {
        if (e[i].lastElementChild.children.length <= 3) {
          const d = document.createElement("div");
          d.style.height = 1188 - (t - e[i].scrollHeight) + 'px';
          // d.style.backgroundColor = "#ff0000"
          e[i - 1].appendChild(d);
          t = e[i].scrollHeight;
          while(t>1188){
            let n = 1;
            let tempT = 0;
            tempT = t;
            for (let j = e[i].lastElementChild.children.length - 1; j >= 0; j--) {
              const child = e[i].lastElementChild.children[j];
              const height = child.scrollHeight; // 获取子元素的高度
              tempT = tempT - height;
              if(tempT>1188){
                n++
              }else {
                break;
              }
            }
            const c = e[i].querySelector(".table-title").cloneNode(true);
            c.setAttribute("style", "margin-top:30px")
            const q = document.createElement("div");
            q.setAttribute('class', "w-80% mx-a border-black border-solid border-1px")
            try {
              for (let k = 0; k < n; k++) {
                const l = e[i].lastElementChild.lastElementChild;
                q.appendChild(e[i].lastElementChild?.removeChild(l));
              }
            } catch (e) {

            }
            const children = Array.from(q.children);
            q.innerHTML = '';
            children.reverse().forEach(child => q.appendChild(child));
            e[i].append(c)
            e[i].append(q)
            t = c.scrollHeight + 30 + q.scrollHeight;
          }
          continue;
        }
        while(t>1188){
          let n = 1;
          let tempT = 0;
          tempT = t;
          for (let j = e[i].lastElementChild.children.length - 1; j >= 0; j--) {
            const child = e[i].lastElementChild.children[j];
            const height = child.scrollHeight; // 获取子元素的高度
            tempT = tempT - height;
            if(tempT>1188){
              n++
            }else {
              break;
            }
          }
          const c = e[i].querySelector(".table-title").cloneNode(true);
          c.setAttribute("style", "margin-top:30px")
          const q = document.createElement("div");
          q.setAttribute('class', "w-80% mx-a border-black border-solid border-1px")
          try {
            for (let k = 0; k < n; k++) {
              const l = e[i].lastElementChild.lastElementChild;
              q.appendChild(e[i].lastElementChild?.removeChild(l));
            }
          } catch (e) {

          }
          const children = Array.from(q.children);
          q.innerHTML = '';
          children.reverse().forEach(child => q.appendChild(child));
          e[i].append(c)
          e[i].append(q)
          t = c.scrollHeight + 30 + q.scrollHeight;
        }
      }
    }

    const elements = document.querySelectorAll('.page');
    const pdf = new jsPDF('p', 'mm', 'a4');
    const pdfWidth = pdf.internal.pageSize.getWidth();
    for (let i = 0; i < elements.length; i++) {
      const element = elements[i];
      // 使用 html2canvas 将 HTML 元素截图
      const canvas = await html2canvas(element, {
        scale: 2, // 提高截图质量
      });
      // 将 canvas 转换为图片数据 URL
      const imgData = canvas.toDataURL('image/png');
      // 计算图片在 PDF 中的位置
      const imgProps = pdf.getImageProperties(imgData);
      const pageHeight = (imgProps.height * pdfWidth) / imgProps.width;
      // 添加图片到 PDF
      if (i > 0) {
        pdf.addPage();
      }
      pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pageHeight);
      if (canvas.height / 2 > 1188) {
        //如果高度超过一页，则分页
        //将canvas对象分为(element.scrollHeight / 1188)份
        //每份高度1188
        //再转成图片 顺序添加进pdf中 每份一页
        for (let j = 1; j <= element.scrollHeight / 1188; j++) {
          //截取图片
          const canvas2 = await html2canvas(element, {
            scale: 2, // 提高截图质量
          });
          //将截取的图片转成图片数据 URL
          const imgData2 = canvas2.toDataURL('image/png');
          //添加图片到 PDF
          pdf.addPage();
          pdf.addImage(imgData2, 'PNG', 0, -297 * j, pdfWidth, pageHeight);
        }
      }
    }
    // 保存 PDF
    pdf.save('report.pdf');
    ElMessage.success("导出成功");
  } catch (e) {
    ElMessage.error("当前导出出现问题,请联系管理员或者重试");
  } finally {
    loading.close();
    props.closeDialog();
  }
}
const basicData = ref({
  a: [],
  b: {
    addr: null,
    site: null,
    weixin: null
  },
  c: {
    enterpriseName: null,
    uniCode: null,
    addr: null,
    registeredCapital: null,
    paidInCapital: null,
    legalRepresentative: null,
    companyType: null,
    establishedTime: null,
    businessTerm: null,
    sector: null,
    industryCode: null,
    compantStatus: null,
    registrationAuthority: null,
    businessScope: null
  },
  d: [],
  e: [],
  f: [],
  g: []
});
const CD1 = [
  {
    label: '序号',
    prop: 'id',
    width: '50'
  },
  {
    label: '职务',
    prop: 'position',
    width: '100'
  },
  {
    label: '姓名',
    prop: 'name',
    width: '100'
  },
  {
    label: '联系电话',
    prop: 'phone',
    width: '150'
  }
]
const CD2 = [
  {
    label: '股东名称',
    prop: 'shareholderName',
    width: '150'
  },
  {
    label: '股份比例',
    prop: 'ownershipInterest',
    width: '50'
  },
  {
    label: '认缴出资额',
    prop: 'subscribedCapital',
    width: '100'
  },
  {
    label: '认缴出资日期',
    prop: 'subscribedCapitalDate',
    width: '150'
  }
]
const CD3 = [
  {
    label: '序号',
    prop: 'index',
    width: '150'
  },
  {
    label: '变更项目',
    prop: 'changeProject',
    width: '50'
  },
  {
    label: '变更前内容',
    prop: 'beforeChangeContent',
    width: '100'
  },
  {
    label: '变更后内容',
    prop: 'afterChangeContent',
    width: '150'
  },
  {
    label: '变更日期',
    prop: 'changeDate',
    width: '150'
  }
]
const CD4 = [
  {
    label: '序号',
    prop: 'index',
    width: '150'
  },
  {
    label: '分支机构名称',
    prop: 'branchName',
    width: '50'
  },
  {
    label: '负责人',
    prop: 'head',
    width: '100'
  },
  {
    label: '登记状态',
    prop: 'regStatus',
    width: '150'
  }
]
const CD5 = [
  {
    label: '序号',
    prop: 'index',
    width: '150'
  },
  {
    label: '被投资企业名称',
    prop: 'investedEnterprise',
    width: '50'
  },
  {
    label: '被投资企业代码',
    prop: 'investedUniCode',
    width: '100'
  }
]
const getReport = async () => {
  const res = await request.get('/report/queryByUniCode', {
    params: {
      uniCode: props.creditCode
    }
  });
  // res.data.g = [...res.data.g,...res.data.g,...res.data.g]
  basicData.value = res.data;
}
const init = () => {
  getReport()
}
init()
</script>

<template>
  <el-row class="report-container w-840px w-100% h-full overflow-auto">
    <el-col :span="24"
            class="page w-840px h-1188px border p-20px pb-0  font-songti  border-black border-solid border-7px justify-between">
      <div
          class="w-full text-center h-150px line-height-150px mt-150px tracking-widest text-black font-black text-44px">
        性与暴力企业综合信用报告
      </div>
      <div class="w-full text-center h-150px line-height-150px mt-30px tracking-wider font-500 text-black text-30px">
        湖南性与暴力有限公司
      </div>
      <div class="w-full text-center h-100px mt-100px tracking-wider font-900 text-24px text-black">
        <div class="line-height-50px text-left pl-250px">企业信用等级: ZZZ级</div>
        <div class="line-height-50px text-left pl-250px">信用评分情况: 0分</div>
      </div>
      <div class="indent-2xl underline w-full mt-300px px-30px text-18px">
        标注:性与暴力性与暴力性与暴力性与暴力性与暴力
        性与暴力性与暴力性与暴力性与暴力性与暴力性与暴力
        性与暴力性与暴力性与暴力性与暴力性与暴力性与暴力
        性与暴力性与暴力性与暴力性与暴力性与暴力性与暴力
        性与暴力性与暴力性与暴力性与暴力性与暴力性与暴力
      </div>
    </el-col>
    <el-col :span="24" class="page w-840px text-black p-20px tracking-widest font-songti">
      <div class="page-content">
        <div class="text-center text-30px font-800">一、企业基本信息</div>
        <div class="w-80% mx-a line-height-50px text-24px text-black">1、联系信息</div>
        <div class="w-80% mx-a line-height-24px text-16px">1.1&nbsp;实际经营地址：<span
            class="underline">{{ basicData.b.addr }}</span></div>
        <div class="w-80% mx-a line-height-24px text-16px">1.2&nbsp;企业网址：<span
            class="underline">{{ basicData.b.site }}</span>&nbsp;微信公众号：<span
            class="underline">{{ basicData.b.weixin }}</span></div>
        <div class="w-80% mx-a line-height-24px text-16px">1.3&nbsp;主要人物联系信息</div>
        <div class="w-80% mx-a grid grid-cols-4 border-black border-solid border-1px">
          <div v-for="(item, index) in CD1" :key="index"
               class="border-black border-solid border-1px text-center bg-gray h-25px"><span
              class="line-height-25px">{{ item.label }}</span>
          </div>
        </div>
        <div class="w-80% mx-a">
          <div v-for="(item, index) in basicData.a" :key="index"
               class="grid grid-cols-4 border-black border-solid border-1px text-center">
            <div class="border-black border-b-solid border-l-solid border-r-solid border-0.1px h-25px"><span
                class="line-height-25px">{{ index + 1 }}</span></div>
            <div class="border-black border-b-solid border-l-solid border-r-solid border-0.1px h-25px"><span
                class="line-height-25px">{{ item.position }}</span></div>
            <div class="border-black border-b-solid border-l-solid border-r-solid border-0.1px h-25px"><span
                class="line-height-25px">{{ item.name }}</span></div>
            <div class="border-black border-b-solid border-l-solid border-r-solid border-0.1px h-25px"><span
                class="line-height-25px">{{ item.phone }}</span></div>
          </div>
        </div>
      </div>
      <div class="page-content pt-30px">
        <div class="w-80% mx-a line-height-50px text-24px text-black">2、工商注册信息</div>
        <div class="w-80% mx-a grid grid-cols-4 border-black border-solid border-1px">
          <div class="line-height-25px border-black border-solid border-1px text-center bg-gray">企业名称</div>
          <div class="line-height-25px border-black border-solid border-1px text-center">
            {{ basicData.c.enterpriseName }}
          </div>
          <div class="line-height-25px border-black border-solid border-1px text-center bg-gray">统一社会信用代码</div>
          <div class="line-height-25px border-black border-solid border-1px text-center">{{ basicData.c.uniCode }}</div>
          <div class="line-height-25px border-black border-solid border-1px text-center bg-gray">住所</div>
          <div class="line-height-25px border-black border-solid border-1px text-center col-span-3">
            {{ basicData.c.addr }}
          </div>
          <div class="line-height-25px border-black border-solid border-1px text-center bg-gray">注册资本</div>
          <div class="line-height-25px border-black border-solid border-1px text-center">
            {{ basicData.c.registeredCapital }}
          </div>
          <div class="line-height-25px border-black border-solid border-1px text-center bg-gray">实收资本</div>
          <div class="line-height-25px border-black border-solid border-1px text-center">
            {{ basicData.c.paidInCapital }}
          </div>
          <div class="line-height-25px border-black border-solid border-1px text-center bg-gray">法定代表人姓名</div>
          <div class="line-height-25px border-black border-solid border-1px text-center">
            {{ basicData.c.legalRepresentative }}
          </div>
          <div class="line-height-25px border-black border-solid border-1px text-center bg-gray">公司类型</div>
          <div class="line-height-25px border-black border-solid border-1px text-center">{{ basicData.c.companyType }}
          </div>
          <div class="line-height-25px border-black border-solid border-1px text-center bg-gray">成立日期</div>
          <div class="line-height-25px border-black border-solid border-1px text-center">
            {{ basicData.c.establishedTime }}
          </div>
          <div class="line-height-25px border-black border-solid border-1px text-center bg-gray">营业期限</div>
          <div class="line-height-25px border-black border-solid border-1px text-center">
            {{ basicData.c.businessTerm }}
          </div>
          <div class="line-height-25px border-black border-solid border-1px text-center bg-gray">所属行业</div>
          <div class="line-height-25px border-black border-solid border-1px text-center">{{ basicData.c.sector }}</div>
          <div class="line-height-25px border-black border-solid border-1px text-center bg-gray">行业代码</div>
          <div class="line-height-25px border-black border-solid border-1px text-center">
            {{ basicData.c.industryCode }}
          </div>
          <div class="line-height-25px border-black border-solid border-1px text-center bg-gray">企业状态</div>
          <div class="line-height-25px border-black border-solid border-1px text-center">
            {{ basicData.c.compantStatus }}
          </div>
          <div class="line-height-25px border-black border-solid border-1px text-center bg-gray">登记机关</div>
          <div class="line-height-25px border-black border-solid border-1px text-center">
            {{ basicData.c.registrationAuthority }}
          </div>
          <div class="line-height-25px border-black border-solid border-1px text-center bg-gray">经营范围</div>
          <div class="line-height-25px border-black border-solid border-1px text-center col-span-3">
            {{ basicData.c.businessScope }}
          </div>
        </div>
      </div>
      <div class="page-content pt-30px">
        <div class="w-80% mx-a line-height-50px text-24px text-black">3、股东信息</div>
        <div class="table-title w-80% mx-a grid grid-cols-[35%_15%_25%_25%] border-black border-solid border-1px">
          <div v-for="(item, index) in CD2" :key="index"
               class="flex-1 border-black border-solid border-1px text-center bg-gray h-25px"><span
              class="line-height-25px">{{ item.label }}</span>
          </div>
        </div>
        <div class="w-80% mx-a border-black border-solid border-1px">
          <div v-for="(item, index) in basicData.d" :key="index"
               class="grid grid-cols-[35%_15%_25%_25%]  text-center">
            <div class="border-black border-b-solid border-l-solid border-r-solid border-0.1px"><span
                class="line-height-25px">{{ item.shareholderName }}</span></div>
            <div class="border-black border-b-solid border-l-solid border-r-solid border-0.1px"><span
                class="line-height-25px">{{ item.ownershipInterest }}</span></div>
            <div class="border-black border-b-solid border-l-solid border-r-solid border-0.1px"><span
                class="line-height-25px">{{ item.subscribedCapital }}</span></div>
            <div class="border-black border-b-solid border-l-solid border-r-solid border-0.1px"><span
                class="line-height-25px">{{ item.subscribedCapitalDate }}</span></div>
          </div>
        </div>
      </div>
      <div class="page-content pt-30px">
        <div class="w-80% mx-a line-height-50px text-24px text-black">4、工商变更信息</div>
        <div class="table-title w-80% mx-a grid grid-cols-[6%_23.5%_23.5%_26.5%_20.5%] border-black border-solid border-1px">
          <div v-for="(item, index) in CD3" :key="index"
               class="flex-1 border-black border-solid border-1px text-center bg-gray h-25px"><span
              class="line-height-25px">{{ item.label }}</span>
          </div>
        </div>
        <div class="w-80% mx-a border-black border-solid border-1px">
          <div v-for="(item, index) in basicData.e" :key="index"
               class="grid grid-cols-[6%_23.5%_23.5%_26.5%_20.5%]  text-center">
            <div class="border-black border-b-solid border-l-solid border-r-solid border-0.1px"><span
                class="line-height-25px ">{{ index+1 }}</span></div>
            <div class="border-black border-b-solid border-l-solid border-r-solid border-0.1px"><span
                class="line-height-25px">{{ item.changeProject }}</span></div>
            <div class="border-black border-b-solid border-l-solid border-r-solid border-0.1px"><span
                class="line-height-25px">{{ item.beforeChangeContent }}</span></div>
            <div class="border-black border-b-solid border-l-solid border-r-solid border-0.1px"><span
                class="line-height-25px">{{ item.afterChangeContent }}</span></div>
            <div class="border-black border-b-solid border-l-solid border-r-solid border-0.1px"><span
                class="line-height-25px">{{ item.changeDate }}</span></div>
          </div>
        </div>
      </div>
      <div class="page-content pt-30px">
        <div class="w-80% mx-a line-height-50px text-24px text-black">5、分支机构</div>
        <div class="table-title w-80% mx-a grid grid-cols-[6%_44%_25%_25%] border-black border-solid border-1px">
          <div v-for="(item, index) in CD4" :key="index"
               class="flex-1 border-black border-solid border-1px text-center bg-gray h-25px"><span
              class="line-height-25px">{{ item.label }}</span>
          </div>
        </div>
        <div class="w-80% mx-a border-black border-solid border-1px">
          <div v-for="(item, index) in basicData.f" :key="index"
               class="grid grid-cols-[6%_44%_25%_25%]  text-center">
            <div class="border-black border-b-solid border-l-solid border-r-solid border-0.1px"><span
                class="line-height-25px ">{{ index+1 }}</span></div>
            <div class="border-black border-b-solid border-l-solid border-r-solid border-0.1px"><span
                class="line-height-25px">{{ item.branchName }}</span></div>
            <div class="border-black border-b-solid border-l-solid border-r-solid border-0.1px"><span
                class="line-height-25px">{{ item.head }}</span></div>
            <div class="border-black border-b-solid border-l-solid border-r-solid border-0.1px"><span
                class="line-height-25px">{{ item.regStatus }}</span></div>
          </div>
        </div>
      </div>
      <div class="page-content pt-30px">
        <div class="w-80% mx-a line-height-50px text-24px text-black">6、对外投资</div>
        <div class="table-title w-80% mx-a grid grid-cols-[36%_30%_34%] border-black border-solid border-1px">
          <div v-for="(item, index) in CD5" :key="index"
               class="flex-1 border-black border-solid border-1px text-center bg-gray h-25px"><span
              class="line-height-25px">{{ item.label }}</span>
          </div>
        </div>
        <div class="w-80% mx-a border-black border-solid border-1px">
          <div v-for="(item, index) in basicData.g" :key="index"
               class="grid grid-cols-[36%_30%_34%]  text-center">
            <div class="border-black border-b-solid border-l-solid border-r-solid border-0.1px"><span
                class="line-height-25px ">{{ index+1 }}</span></div>
            <div class="border-black border-b-solid border-l-solid border-r-solid border-0.1px"><span
                class="line-height-25px">{{ item.investedEnterprise }}</span></div>
            <div class="border-black border-b-solid border-l-solid border-r-solid border-0.1px"><span
                class="line-height-25px">{{ item.investedUniCode }}</span></div>
          </div>
        </div>
      </div>
      <div class="page-content pt-30px">
        <div class="text-center text-30px font-800">二、企业资产信息</div>
        <div class="w-80% mx-a line-height-50px text-24px text-black">1、行政许可信息</div>

      </div>
    </el-col>
    <el-button @click="printContent">导出 PDF</el-button>
  </el-row>
</template>
