<template>
  <div ref="printArea" style="padding: 20px; font-size: 14px;" v-show="visible">
    <div v-for="(item, index) in data" :key="index" class="print-page">
      <h2 style="text-align: center; margin-bottom: 16px;">渠道服务记录</h2>
      <div style="display: flex;">
        <!-- 左侧 1/3 -->
        <div style="width: 33%;">
          <img crossorigin="anonymous" :src="item.locationImage" style="width: 100%; height: 120px;"  alt=""/>
          <p>业务员：{{ item.salesman }}</p>
          <p>服务数量：{{ item.serviceCount }}</p>
          <h4>拜访时间记录</h4>
          <ul>
            <li v-for="(time, i) in item.visitDate" :key="i">{{ formatDate(time) }}</li>
          </ul>
          <h4>主要服务内容</h4>
          <ul>
            <li v-for="(content, i) in item.serviceContent" :key="i">内容{{ i + 1 }}：{{ content }}</li>
          </ul>
        </div>
        <!-- 右侧 2/3 -->
        <div style="width: 67%; padding-left: 20px;">
          <p>客户名称：{{ item.companyName }}</p>
          <p>客户部门：{{ getDictLabel(DICT_TYPE.CUSTOMER_DEPT, item.department) }}</p>
          <p>推广产品：{{ item.visitProductNames }}</p>
          <div style="border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;">拜访签到实景图</div>
          <div style="display: flex; flex-wrap: wrap; gap: 10px;">
            <img
              crossorigin="anonymous"
              v-for="(url, i) in getSafeImages(item.serviceImages)"
              :key="i"
              :src="url"
              style="width: calc(50% - 5px); height: 100px; object-fit: cover; border: 1px solid #ccc;"
            />
          </div>
        </div>
      </div>
      <div style="page-break-after: always;"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {nextTick, ref} from 'vue'
import { getDictLabel, DICT_TYPE } from '@/utils/dict'

const props = defineProps<{ data: any[] }>()
const printArea = ref<HTMLElement | null>(null)
const visible = ref(false)

const formatDate = (date: string | Date) => {
  const d = new Date(date)
  return d.toLocaleString()
}
const getSafeImages = (val?: string) => {
  if (!val) return []
  return val.split(',').slice(0, 4)
}
const print = async () => {
  const printWindow = window.open('', '_blank')

  if (!printWindow) return

  let html = ''
  for (const item of props.data) {
    html += `
      <div class="print-page">
        <h2>渠道服务记录</h2>
        <div style="display: flex;">
          <div style="width: 33%;">
            <img src="${item.locationImage}" crossorigin="anonymous" style="width: 100%; height: 120px;" />
            <p>业务员：${item.salesman || ''}</p>
            <p>服务数量：${item.serviceCount || ''}</p>
            <h4>拜访时间记录</h4>
            <ul>
              ${(item.visitDate || []).map((t: string) => `<li>${formatDate(t)}</li>`).join('')}
            </ul>
            <h4>主要服务内容</h4>
            <ul>
              ${(item.serviceContent || []).map((c: string, i: number) => `<li>内容${i + 1}：${c}</li>`).join('')}
            </ul>
          </div>
          <div style="width: 67%; padding-left: 20px;">
            <p>客户名称：${item.companyName || ''}</p>
            <p>客户部门：${getDictLabel(DICT_TYPE.CUSTOMER_DEPT, item.department) || ''}</p>
            <p>推广产品：${item.visitProductNames || ''}</p>
            <div style="border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;">拜访签到实景图</div>
            <div style="display: flex; flex-wrap: wrap; gap: 10px;">
              ${(item.serviceImages || '')
      .split(',')
      .slice(0, 4)
      .map(url => `<img src="${url}" crossorigin="anonymous" style="width: calc(50% - 5px); height: 100px; object-fit: cover; border: 1px solid #ccc;" />`)
      .join('')}
            </div>
          </div>
        </div>
        <div style="page-break-after: always;"></div>
      </div>
    `
  }

  printWindow.document.write(`
    <html>
      <head>
        <title>打印</title>
        <meta charset="UTF-8">
        <style>
          body, html {
            margin: 0;
            padding: 0;
            width: 210mm;
            height: auto;
            font-size: 14px;
            -webkit-print-color-adjust: exact;
          }
          .print-page {
            width: 210mm;
            height: 297mm;
            padding: 20mm;
            box-sizing: border-box;
            page-break-after: always;
            overflow: hidden;
          }
          h2 {
            text-align: center;
            margin-bottom: 16px;
          }
          img {
            max-width: 100%;
            object-fit: cover;
          }
        </style>
      </head>
      <body>${html}</body>
    </html>
  `)
  printWindow.document.close()
  printWindow.focus()
  printWindow.print()
  printWindow.close()
}



defineExpose({ print })
</script>
<style scoped>
/* 普通预览样式 */
#printWrapper {
  width: 210mm;
  margin: 0 auto;
  font-size: 14px;
}

.print-page {
  width: 210mm;
  height: 297mm;
  padding: 20mm;
  box-sizing: border-box;
  page-break-after: always;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px dashed transparent;
}

.print-page h2 {
  text-align: center;
  margin-bottom: 16px;
}

.print-page img {
  max-width: 100%;
  object-fit: cover;
}

.print-page .images-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.print-page .images-wrapper img {
  width: calc(50% - 5px);
  height: 100px;
  border: 1px solid #ccc;
}

/* 打印样式 */
@media print {
  body, html {
    margin: 0;
    padding: 0;
    width: 210mm;
    height: auto;
    -webkit-print-color-adjust: exact;
  }

  #printWrapper {
    width: 210mm;
    margin: 0 auto;
  }

  .print-page {
    width: 210mm;
    height: 297mm;
    page-break-after: always;
    overflow: hidden;
    box-sizing: border-box;
    padding: 20mm;
  }

  .no-print {
    display: none !important;
  }
}
</style>

