<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.forEach((item, index) => {
    cgdInfo.value.totalPrice = addition(cgdInfo.value.totalPrice, item.totalPrice)
    cgdInfo.value.totalNum = addition(cgdInfo.value.totalNum, item.goodNum)

    cgdlist.value.push({
      index: index + 1,
      qrdNo: item.qrdCode,
      tax: Number(item.tax) + "%",
      goodNum: item.goodNum,
      cgdNo: item.sequenceNo,
      goodUnit: item.goodUnit,
      goodName: item.goodName,
      goodPrice: item.goodPrice,
      totalPrice: item.totalPrice,
    })
  })

  cgdInfo.value.totalPrice = Number(cgdInfo.value.totalPrice.toFixed(2));
  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">{{isGoodNum ? "出库单" : "对账单"}}</div>
               <div class="record">对账单号：{{cgdInfo.payNo}}</div>
            </div>
            <div class="column">
               <div class="supplier">供货商：{{ cgdInfo.supplierName }}</div>
               <div class="create">创建时间：{{cgdInfo.createTime}}</div>
            </div>
            <div class="column">
              <div class="company">业务公司： {{ cgdInfo.companyName }}</div>
              <div class="total" v-if="isGoodNum"> 数量合计：{{cgdInfo.totalNum}}</div>
              <div class="total" v-else>货款总额：{{ 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;">商品名称</th>
            <th style="text-align: left;" width="25px">单位</th>
            <th style="text-align: left;" width="95px">数量</th>
            
            <template v-if="!isGoodNum">
              <th style="text-align: left;" width="95px">商品单价</th>
              <th style="text-align: left;" width="95px">总货款</th>
              <th style="text-align: left;" width="30px">税率</th>
            </template>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in cgdlist" :key="index">
            <td>{{ item.index }}</td>
            <td>{{ item.cgdNo }}</td>
            <td>{{ item.qrdNo }}</td>
            <td>{{ item.goodName }}</td>
            <td>{{ item.goodUnit }}</td>
            <td>{{ item.goodNum }}</td>

            <template v-if="!isGoodNum">
              <td>{{ item.goodPrice }}</td>
              <td>{{ item.totalPrice }}</td>
              <td>{{ item.tax }}</td>
            </template>
          </tr>
        </tbody>
      </table>
    </div>
</template>


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

}
</style>
