<!-- PrintContent.vue -->
<template>
  <div ref="printRef" style="padding: 20px; font-size: 14px;">
    <div v-for="(item, index) in dataList" :key="index"
         style="width: 210mm;
          height: 297mm;
          padding: 20mm;
          border: 1px solid #eee;
          margin: 20px auto;
          font-size: 14px;
          page-break-after: always;
          display: flex;
          flex-direction: column;
          justify-content: space-between;"
    >
      <h2 style="text-align: center; margin-bottom: 16px;">渠道服务记录</h2>
      <div
        style="display: flex;
            flex-direction: row;
            gap: 20px;
            flex: 1;"
      >
        <!-- 左侧 1/3 -->
        <div
             style="width: 40%;
                display: flex;
                flex-direction: column;
                gap: 8px;
                background-color: rgb(78,157,249) !important;;
                color: white !important;;
                padding: 10px;"
        >
          <div
            style="height: 160px;
            width: 100%;"
          >
            <img crossorigin="anonymous" :src="item.locationImage" class="main"  alt=""
            style=" width: 100%;
            height: 100%;
            object-fit: fill;
            border: 1px solid #ccc;"
            />
          </div>
          <div
               style="display: flex;
                align-items: center;
                justify-content: center;
                background-color: rgba(255, 255, 255, 0.1);
                padding: 12px 15px;
                margin-bottom: 12px;
                font-size: 16px;
                border-radius: 2px;
                border: rgb(95, 174, 251) 1px solid;
                height: 40px;"
          >业务员：{{ item.salesman }}</div>
          <div
            style="display: flex;
                align-items: center;
                justify-content: center;
                background-color: rgba(255, 255, 255, 0.1);
                padding: 12px 15px;
                margin-bottom: 12px;
                font-size: 16px;
                border-radius: 2px;
                border: rgb(95, 174, 251) 1px solid;
                height: 40px;"
          >服务数量：{{ item.serviceCount }}</div>
          <div
            style="display: flex;
                align-items: center;
                justify-content: center;
                background-color: rgba(255, 255, 255, 0.1);
                padding: 12px 15px;
                margin-bottom: 12px;
                font-size: 16px;
                border-radius: 2px;
                border: rgb(95, 174, 251) 1px solid;
                height: 40px;"
          >拜访时间记录</div>
          <ul
            style="list-style: none; /* 移除默认的列表符号 */
            padding: 0;
            margin: 0;
            display: flex; /* 启用 Flex 布局 */
            flex-direction: column; /* 垂直排列 */
            gap: 8px; /* 项间距 */
            height: 180px;"
          >
            <li v-for="(time, i) in item.visitDate" :key="i"
            style="display: flex; /* 启用 Flex 布局 */
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            height: 40px; /* 与其他 div 高度一致 */
            width: 100%;            /* 需要设定宽度 */"
            >{{ formatDate(time) }}</li>
          </ul>
          <div
            style="display: flex;
                align-items: center;
                justify-content: center;
                background-color: rgba(255, 255, 255, 0.1);
                padding: 12px 15px;
                margin-bottom: 12px;
                font-size: 16px;
                border-radius: 2px;
                border: rgb(95, 174, 251) 1px solid;
                height: 40px;"
          >主要服务内容</div>
          <ul
              style="list-style: none; /* 移除默认的列表符号 */
              padding: 0;
              margin: 0;
              display: flex; /* 启用 Flex 布局 */
              flex-direction: column; /* 垂直排列 */
              gap: 8px; /* 项间距 */
              height: 280px;"
          >
            <li v-for="(content, i) in item.serviceContent" :key="i"
                style="height:60px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 1.4;"
            >内容{{ i + 1 }}：{{ content }}</li>
          </ul>
        </div>
        <!-- 右侧 2/3 -->
        <div
          style="width: 60%;
          padding-left: 20px;
          display: flex;
          flex-direction: column;
          gap: 8px;"
        >
          <p>客户名称：{{ item.companyName }}</p>
          <p>客户部门：{{ getDictLabel(DICT_TYPE.CUSTOMER_DEPT, item.department) }}</p>
          <p>推广产品：{{ item.visitProductNames }}</p>
          <div style="border: 1px solid #ccc;background-color: #f9f9f9;; height: 40px; display: flex; align-items: center; justify-content: center;">
            拜访签到实景图
          </div>
          <div
            style="display: flex;
            flex-direction: column;
            height: 800px; /* 父容器高度，按需设置 */"
          >
            <img
              crossorigin="anonymous"
              v-for="(url, i) in getSafeImages(item.serviceImages)"
              :key="i"
              :src="url"
              style="width: 100%;
              height: 25%;
              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 { ref, defineExpose } from 'vue'
import {DICT_TYPE, getDictLabel} from "@/utils/dict";
const props = defineProps({ dataList: Array })
const printRef = ref(null)

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

defineExpose({ printRef })

</script>

<style>
* { box-sizing: border-box; margin: 0; padding: 0; }

.print-page {
  width: 210mm;
  height: 297mm;
  padding: 20mm;
  border: 1px solid #eee;
  margin: 20px auto;
  font-size: 14px;
  page-break-after: always;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.print-page > .content {
  display: flex;
  flex-direction: row;
  gap: 20px;
  flex: 1;
}

.left {
  width: 40%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: rgb(78,157,249);
  color: white;
  padding: 10px;
}

.right {
  width: 60%;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.image-grid {
  display: flex;
  flex-direction: column;
  height: 800px; /* 父容器高度，按需设置 */
}

.image-grid img {
  width: 100%;
  height: 25%;
  object-fit: contain;
  border: 1px solid #ccc;
}

/* 全局重置 ul/li 的默认样式 */
.print-page > ul {
  list-style: none; /* 移除默认的列表符号 */
  padding: 0;
  margin: 0;
  display: flex; /* 启用 Flex 布局 */
  flex-direction: column; /* 垂直排列 */
  gap: 8px; /* 项间距 */
}

.print-page > li {
  display: flex; /* 启用 Flex 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 40px; /* 与其他 div 高度一致 */
  width: 100%;            /* 需要设定宽度 */
}
/* 多行文本控制 */
.info-content {
  height:60px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
/* 通用 Flex 居中容器 */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 12px 15px;
  margin-bottom: 12px;
  font-size: 16px;
  border-radius: 2px;
  border: rgb(95, 174, 251) 1px solid;
}

/* 高度 40px 的容器 */
.box-40 {
  height: 40px;
}

/* 无边框、无背景的容器（可选） */
.clean-box {
  border: none;
  background-color: transparent;
}

</style>
