<script lang="ts" setup>
import QRCode from 'qrcode';
import logourl from "@/assets/logo_text.png";
import { useUserStore } from '@/store/modules/user';

export interface fieldTree{
  field?:string;
  name?:string;
  type:string;
  checked?:number;
  data?:[];
  child?:fieldTree[]
}

export interface PageConfig{
  width:string;
  height:string;
  horizontal:string;//横向
  pagesize:string;

  //页脚页眉
  pagebrow:string[];
  founder:string;
  founderTime:string;
  deptOrg:string;
  serialNumber:string;
  qrcode:boolean;
}

const props = withDefaults(defineProps<{
    name:string,
    pageConfig:PageConfig,
    fieldTree:fieldTree[],
    qrcode?:string,
}>(),{})

const qrdata=ref("")
const userName=useUserStore().nickname;

function parseDataPicker(val:string){
  if(val==""|| val.match(/[a-z]/) ) return val;
  let str=new Date(parseInt(val)).toISOString()
  return str.slice(0,10)+" "+str.slice(11,16)
}

const generateQrCode= ()=>{
  var opts = {
    errorCorrectionLevel: 'M',
    type: 'image/png',
    quality: 0.3,
    margin: 1,
    color: {
      dark:"#000",
      light:"#fff"
    }
  }

   QRCode.toDataURL(props.qrcode, opts, function (err, url) {
    if (err) throw err
    qrdata.value=url
  })
}

</script>

<template>
<div class="page_brow" >
  <img height="50px" :src="logourl" />
  <span v-if="props.pageConfig.pagebrow.includes('serialNumber')">表单编号:{{ props.pageConfig.serialNumber }}</span>
</div>
<div id="printContainer" :style="{width: props.pageConfig.width}" >
  <h3>{{props.name}}</h3> 
  <div style="display: flex;justify-content: space-between; margin-bottom: 10px;">
    <span v-if="props.pageConfig.pagebrow.includes('founder')">创建人:{{ props.pageConfig.founder }}</span>
    <span v-if="props.pageConfig.pagebrow.includes('founderTime')">创建时间:{{ props.pageConfig.founderTime }}</span>
    <span v-if="props.pageConfig.pagebrow.includes('deptOrg')">所属部门:{{ props.pageConfig.deptOrg }}</span>
  </div>
  <div v-for="group in props.fieldTree">
    <div v-if="Array.isArray(group) && group.length>0" class="auto_table">
        <template v-for="item in group"  >
          <div v-if="item.checked!=2" class="cell_box">
            <span class="box_name">
              {{item.name}}
            </span>
            <span v-if="item.type !=='datePicker'" class="content">{{item.field}}</span>
            <span v-else class="content">{{parseDataPicker(item.field)}}</span>
          </div>
        </template>
    </div>
    <div v-else-if="group.type=='divider'" class="title" v-if="group.checked!=2">{{ group.name }}</div>
    <div v-else-if="group.type=='textarea'" class="section" v-if="group.checked!=2">
      <h5>{{ group.name }}</h5>
      <div class="text_area">{{ group.field }}</div>
    </div>
    <div v-else-if="group.type=='table'" class="section_table" v-if="group.checked!=2">
      <h5>{{ group.name }}</h5>
      <div class="bder_table" >
        <el-table class="table" :data="group.data" border >
          <template v-for="child in group.child">
            <el-table-column  :prop="child.field" :label="child.name" v-if="child.checked!=2" />
          </template>
        </el-table>
      </div>
    </div>
    <div v-else-if="group.type=='tabs'" class="section_tabs" v-if="group.checked!=2">
      <h5>{{ group.name }}</h5>
      <div v-for="tabs in group.child" class="tabs_item">
        <div v-if="Array.isArray(tabs)" class="auto_table">
            <template v-for="item in tabs"  >
              <div v-if="item.checked!=2" class="tabs_cell_box" style="width: auto;">
                <span class="box_name">
                  {{item.name}}
                </span>
                <span v-if="item.type !=='datePicker'" class="content">{{item.field}}</span>
                <span v-else class="content">{{parseDataPicker(item.field)}}</span>
              </div>
            </template>
        </div>
        <div v-else-if="tabs.type=='divider'" class="title" v-if="tabs.checked!=2"
          style="font-size: 12px; margin-top: 20px;">{{ tabs.name }}</div>
        <div v-else-if="tabs.type=='textarea'" class="section" v-if="tabs.checked!=2">
          <h5>{{ tabs.name }}</h5>
          <div class="text_area">{{ tabs.field }}</div>
        </div>
        <div v-else-if="tabs.type=='table'" class="section" v-if="tabs.checked!=2">
          <h5>{{ tabs.name }}</h5>
          <div class="bder_table" >
            <el-table class="table" border >
              <template v-for="child in tabs.child">
                <el-table-column :prop="child.field" :label="child.name" v-if="child.checked!=2" />
              </template>
            </el-table>
          </div>
        </div>
        <div v-else class="tabs_cell_box" v-if="tabs.checked!=2">
          <span class="box_name">
            {{tabs.name}}
          </span>
          <span v-if="tabs.type !=='datePicker'" class="content">{{tabs.field}}</span>
          <span v-else class="content">{{parseDataPicker(tabs.field??'')}}</span>
        </div>

      </div>
    </div>
    <div v-else v-if="group.checked!=2">{{ group }}</div>
    
  </div>
  <div v-if="props.pageConfig.qrcode" style="display: flex; justify-content: space-between; ">
    {{ generateQrCode() }}
    <div style="display: inherit; align-items: center;">
      <img id="qrcode"  width="100px" :src="qrdata"/>
      <div style="text-align: left;padding-left: 5px;">使用手机企业微信<br>扫一扫</div>
    </div>
    <div style="display: flex;flex-direction: column;text-align: left;justify-content: center;">
      <p>打印日期：{{ new Date().toLocaleString() }}</p>
      <p>打印人： {{userName}}</p>
    </div>
  </div>
</div>
</template>
<style lang="scss" scoped>
#printContainer{
  padding: 0px 57px 30px 57px;
  text-align: center;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  scrollbar-width: none;
}
//没有元素时，隐藏
div:empty {
  display: none;
}
.page_brow{
  padding: 24px 57px 0 57px; 
  display: flex;
  justify-content: space-between; 
  align-items: center;
}

.auto_table{
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgb(226, 226, 226);
}
h3{
  width: 100%;
  font-size: 25px;
  font-weight: bold;
}

h5{
  font-weight: bold;
  width: 100%;
  margin: 5px;
}

.title{
  margin-left:10px;
  text-align: left;
  font-size: 15px;
  font-weight: bold;
}
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin: 10px;
}

.section_title{
  width:100%
}

.normal_cell,.normal_cell_field{
  width: 23%;
  height: 20px;
}


.section{
  display: flex;
  flex-direction: column;
}

.section_tabs{
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
}

.text_area{
  border: 1px solid rgb(182, 181, 181);
  border-radius: 3px;
  min-height: 40px;
  margin: 5px 0px 10px 0px;
}
//////////////自动伸缩
.tabs_item {
  display: inline-flex;
  min-height: 40px;
  min-width: 50%; /* 默认最小宽度 */
  margin-right: -1px;/* 解决边框重合问题*/
  /* 默认情况：没有 title/section 时宽度 50% */
  width: 50%;
  .section{
    width: 100%;
  }
}

/* 当直接子元素包含 title 或 section 时，宽度变为 100% */
.tabs_item:has(> .title),
.tabs_item:has(> .section) {
  width: 100%;
}

.bder_table{
  border: 1px solid rgb(182, 181, 181);
  margin:5px 0px 10px 0px;
  width: 100% !important; /* 确保表格不超出父容器 */
  overflow-x: hidden;
}

/* 原有样式（稍作优化） */
.cell_box, .tabs_cell_box {
  border: 1px solid rgb(182, 181, 181);
  margin-right: -1px; /* 水平排列时用右负margin */
  margin-bottom: -1px; /* 垂直排列时用下负margin */
  display: inline-flex;

  .box_name {
    padding: 8px 2px;
    width: 30%;
    text-wrap: wrap;
    max-height: 80px;
    overflow: hidden; /* 配合 ellipsis 需要 */
  }
  
  .content {
    padding: 8px 2px;
    width: 70%;
    text-wrap: wrap;
    word-break: break-all;
    border-left: 1px solid rgb(182, 181, 181);
  }
}
.tabs_cell_box{
  width: 100%;
}
</style>

<style>
  #printContainer table{
    display: block;
    border: 0px solid;
    border-spacing: 1px;
    border-collapse: collapse;
  }
  #printContainer .el-table th.el-table__cell{
    background: none !important;
    word-wrap: break-word;
  }

  #printContainer .el-table .cell{
      padding: 0 5px;
      text-align: center;
      max-width: max-content;
  }

  #printContainer table  th{
      font-weight: normal;
      border-right: 1px solid rgb(182, 181, 181);
      text-align: center;
    }
  #printContainer table td{
      border: 1px solid rgb(182, 181, 181);
    }
 
</style>
