<script lang="ts" setup>
import { ref, watchEffect, shallowRef, nextTick } from "vue";
import { addition } from "/@/utils/calc";
import printStyle from "/@/assets/print-style"

const props = defineProps<{
  record:Record<string,any> // 对账单详情对象
}>();

const initialInfo = {
  createTime: "",
  supplierName: "",
  companyName: "",
  totalPrice: 0,
  totalNum: 0,
  payNo:""
}

const isGoodNum = shallowRef(false);
const cgdlist = ref<Array<Record<string, any>>>([])
const cgdInfo = ref({ ...initialInfo })


function handleRecord(data: any) {
  cgdInfo.value = { ...initialInfo };
  const { cgdlist: _cgdlist, payNo, companyName, supplierName, addtime } = data;


  cgdlist.value = _cgdlist;



  cgdInfo.value.totalPrice = (_cgdlist || []).reduce((prev, current) => { 
    return Number(addition(prev, current.post_fee)).toFixed(2);
  },0)

  cgdInfo.value.supplierName = supplierName;
  cgdInfo.value.companyName = companyName;
  cgdInfo.value.payNo = payNo;
  cgdInfo.value.createTime = addtime;
}

function print(isNum = false) {
  isGoodNum.value = isNum;

  nextTick(() => {
    const printInnerHTML = document.getElementById("print-template")!.innerHTML;
    const iframe = document.createElement('iframe');
    iframe.setAttribute('style', 'position: absolute; width: 0; height: 0;'); document.body.appendChild(iframe);
    const iframeDoc = iframe.contentWindow!.document;
    iframeDoc.write(printStyle);
    iframeDoc.write('<div>' + printInnerHTML + '</div>');

    setTimeout(function () {
      iframe.contentWindow!.print();
      document.body.removeChild(iframe);
    }, 50);
  })
}


watchEffect(() => { 
  if (!props.record || JSON.stringify(props.record) === "{}") {
    return;
  }

  handleRecord(props.record);
})

defineExpose({ print })
</script>

<template>
    <div id="print-template">
      <table>
          <div class="header">
            <div class="first">
              <div class="title">发货运单对账单</div>
               <div class="record" style="width:338px">对账单号：{{cgdInfo.payNo}}</div>
            </div>

            <div class="column">
               <div class="supplier">物流供货商：{{ cgdInfo.supplierName }}</div>
               <div class="create" style="width:338px">创建时间：{{cgdInfo.createTime}}</div>
            </div>
            
            <div class="column">
              <div class="company">业务公司： {{ cgdInfo.companyName }}</div>
              <div class="total" style="width:338px">运费总额：{{ cgdInfo.totalPrice }}</div>
            </div>
          </div>
        <thead>
          <tr>
            <th style="text-align: left;" width="35px">序号</th>
            <th style="text-align: left;" width="135px">发货运单号</th>
            <th style="text-align: left;" width="135px">发货工单号</th>
            <th style="text-align: left;" width="135px">发货单编号</th>
            <th style="text-align: left;">商品名称</th>
            
            <th style="text-align: left;" width="135px">销售单编号</th>
            <th style="text-align: left;" width="135px">采购单编号</th>
            <th style="text-align: left;" width="60px">物流费用</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in cgdlist" :key="index">
            <td>{{ (index + 1) }}</td>
            <td>{{ item.TrackCode }}</td>
            <td>{{ item.outChildCode }}</td>
            <td>{{ item.outCode }}</td>
            <td>{{ item.good_name }}</td>

            <td>{{ item.orderCode }}</td>
            <td>{{ item.cgdNo }}</td>
            <td>{{ item.post_fee }}</td>
          </tr>
        </tbody>
      </table>
    </div>
</template>


<style>
#print-template {
  display: none;

}
</style>
