<template>
  <div>
    <div id="pdfDom" style="width: 776px">
      <div style="padding: 60px; font-size: 12px !important; color: black">
        <div style="font-size: 16px; text-align: center; padding: 8px">
          <span>采购付款</span>
        </div>
        <div style="padding: 8px 0">
          <span>创建时间: {{ printDetails.createTime }}</span>
        </div>
        <div style="border: 1px solid black">
          <div style="display: flex; border-bottom: 1px solid black">
            <div style="width: 150px; border-right: 1px solid black; padding: 8px">创建人</div>
            <div style="width: calc(100% - 150px); padding: 8px">
              {{ dictValueLabel(printDetails.createUser, userList) }}
            </div>
          </div>
          <div style="display: flex; border-bottom: 1px solid black">
            <div style="width: 150px; border-right: 1px solid black; padding: 8px">创建人部门</div>
            <div style="width: calc(100% - 150px); padding: 8px">
              {{ dictValueLabel(printDetails.deptId, deptList) }}
            </div>
          </div>
          <div style="display: flex; border-bottom: 1px solid black">
            <div style="width: 150px; border-right: 1px solid black; padding: 4px 8px; display: flex; align-items: center">费用明细</div>
            <div style="width: calc(100% - 150px)">
              <div style="border-bottom: 1px solid black; display: flex">
                <div style="width: 120px; padding: 4px 8px; border-right: 1px solid black; text-align: center">采购合同</div>
                <div style="width: calc(100% - 340px); padding: 4px 8px; border-right: 1px solid black; text-align: center">款项说明</div>
                <div style="width: 80px; padding: 4px 8px; border-right: 1px solid black; text-align: center">货币</div>
                <div style="width: 140px; padding: 4px 8px; text-align: center">付款金额</div>
              </div>
              <template v-if="printDetails.payDetailVoList && printDetails.payDetailVoList.length > 0">
                <div v-for="(item, index) in printDetails.payDetailVoList" :key="index">
                  <div :style="index + 1 !== printDetails.payDetailVoList.length ? 'border-bottom: 1px solid black;  display: flex' : ' display: flex'">
                    <div style="width: 120px; padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">
                      {{ item.purchaseCode }}
                    </div>
                    <div style="width: calc(100% - 340px); padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">
                      {{ item.remark }}
                    </div>
                    <div style="width: 80px; padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">人民币</div>
                    <div style="width: 140px; padding: 4px 8px; display: flex; align-items: center">
                      {{ item.money }}
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <div style="display: flex; border-bottom: 1px solid black">
            <div style="width: 150px; border-right: 1px solid black; padding: 8px">总报销金额</div>
            <div style="width: calc(100% - 150px); display: flex">
              <div style="width: calc(100% - 140px); padding: 8px; border-right: 1px solid black">{{ NumberToChinese(computeMoney()) }}</div>
              <div style="width: 140px; padding: 8px">{{ computeMoney() }}</div>
            </div>
          </div>
          <div style="display: flex; border-bottom: 1px solid black">
            <div style="width: 150px; border-right: 1px solid black; padding: 8px">单据数量</div>
            <div style="width: calc(100% - 150px); padding: 8px">
              {{ printDetails.receiptsNum }}
            </div>
          </div>
          <div style="display: flex; border-bottom: 1px solid black">
            <div style="width: 150px; border-right: 1px solid black; padding: 0 8px; display: flex; align-items: center">收款信息</div>
            <div style="width: calc(100% - 150px)">
              <div style="border-bottom: 1px solid black; display: flex">
                <div style="width: 19%; padding: 0 8px; border-right: 1px solid black; text-align: center">支付方式</div>
                <div style="width: 27%; padding: 0 8px; border-right: 1px solid black; text-align: center">收款方户名</div>
                <div style="width: 27%; padding: 0 8px; border-right: 1px solid black; text-align: center">开户行</div>
                <div style="width: 27%; padding: 0 8px; text-align: center">收款方账号</div>
              </div>
              <div style="display: flex">
                <div style="width: 19%; padding: 0 8px; border-right: 1px solid black; display: flex; align-items: center">
                  {{ dictValueLabel(printDetails.payType, fundsPaymentMethod) }}
                </div>
                <div style="width: 27%; padding: 0 8px; border-right: 1px solid black; display: flex; align-items: center">
                  {{ printDetails.name }}
                </div>
                <div style="width: 27%; padding: 0 8px; border-right: 1px solid black; display: flex; align-items: center">
                  {{ printDetails.openingBank }}
                </div>
                <div style="width: 27%; padding: 0 8px; display: flex; align-items: center">
                  {{ printDetails.accountOpening }}
                </div>
              </div>
            </div>
          </div>
          <div style="display: flex; border-bottom: 1px solid black">
            <div style="width: 150px; border-right: 1px solid black; padding: 8px">电子发票(PDF/JPG)</div>
            <div style="width: calc(100% - 150px); padding: 8px">{{ printDetails.electronicInvoiceText }}</div>
          </div>
          <div style="display: flex">
            <div style="width: 150px; border-right: 1px solid black; padding: 4px 8px; display: flex; align-items: center">审批流程</div>
            <div style="width: calc(100% - 150px)">
              <template v-if="printDetails.recordList && printDetails.recordList.length > 0">
                <div v-for="(item, index) in printDetails.recordList" :key="index">
                  <div
                    :style="
                      index + 1 !== printDetails.recordList.length
                        ? 'border-bottom: 1px solid black; padding: 4px 8px; display: flex'
                        : 'padding: 4px 8px; display: flex'
                    ">
                    <div style="width: calc(100% - 120px); word-wrap: break-word">
                      <span>{{ item.nodeName }}: </span>
                      <span style="padding-left: 4px">{{ item.processedUser }}</span>
                      <span style="padding-left: 4px">{{ item.remark }}</span>
                    </div>
                    <div style="width: 120px">{{ item.processedDate }}</div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
        <div style="padding-top: 16px">
          <span>打印时间: {{ presentTime }}</span>
          <span style="padding-left: 32px">打印人: {{ useUserStore().user.nickName }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import useUserStore from "@/store/modules/user";
import moment from "moment";
import { NumberToChinese } from "@/utils/util.js";

const { proxy } = getCurrentInstance();
const fundsPaymentMethod = ref([]);
const userList = ref([]);
const deptList = ref([]);
const getDict = () => {
  proxy
    .post("/dictTenantData/page", {
      pageNum: 1,
      pageSize: 999,
      dictCode: "funds_payment_method",
      tenantId: useUserStore().user.tenantId,
    })
    .then((res) => {
      if (res.rows && res.rows.length > 0) {
        fundsPaymentMethod.value = res.rows.map((item) => {
          return {
            label: item.dictValue,
            value: item.dictKey,
          };
        });
      }
    });
  proxy
    .get("/tenantUser/list", {
      pageNum: 1,
      pageSize: 10000,
      tenantId: useUserStore().user.tenantId,
    })
    .then((res) => {
      if (res.rows && res.rows.length > 0) {
        userList.value = res.rows.map((item) => {
          return {
            deptId: item.deptId,
            label: item.nickName,
            value: item.userId,
          };
        });
      }
    });
  proxy
    .get("/tenantDept/list", {
      pageNum: 1,
      pageSize: 999,
      tenantId: useUserStore().user.tenantId,
    })
    .then((res) => {
      if (res.data && res.data.length > 0) {
        deptList.value = res.data.map((item) => {
          return {
            label: item.deptName,
            value: item.deptId,
          };
        });
      }
    });
};
getDict();
const printDetails = ref({});
const presentTime = ref(moment().format("yyyy-MM-DD HH:mm:ss"));
const computeMoney = () => {
  let money = 0;
  if (printDetails.value.payDetailVoList && printDetails.value.payDetailVoList.length > 0) {
    for (let i = 0; i < printDetails.value.payDetailVoList.length; i++) {
      if (printDetails.value.payDetailVoList[i].money) {
        money = Number(parseFloat(Number(money) + Number(printDetails.value.payDetailVoList[i].money)).toFixed(2));
      }
    }
  }
  return money;
};
const props = defineProps({
  rowData: Object,
});
onMounted(() => {
  if (props.rowData && props.rowData.id) {
    proxy.post("/pay/detail", { id: props.rowData.id }).then((res) => {
      printDetails.value = res;
      if (printDetails.value.createUser) {
        let data = userList.value.filter((item) => item.value == printDetails.value.createUser);
        if (data && data.length > 0) {
          printDetails.value.deptId = data[0].deptId;
        }
      }
      proxy.post("/fileInfo/getList", { businessIdList: [props.rowData.id] }).then((resFile) => {
        let electronicInvoiceText = "";
        if (resFile[props.rowData.id] && resFile[props.rowData.id].length > 0) {
          for (let i = 0; i < resFile[props.rowData.id].length; i++) {
            if (i === 0) {
              electronicInvoiceText = resFile[props.rowData.id][0].fileName;
            } else {
              electronicInvoiceText = electronicInvoiceText + ", " + resFile[props.rowData.id][i].fileName;
            }
          }
        }
        printDetails.value.electronicInvoiceText = electronicInvoiceText;
      });
      if (res.flowExampleId) {
        proxy.post("/flowExample/getApprovalRecord", { id: res.flowExampleId }).then((record) => {
          printDetails.value.recordList = record.recordList;
        });
      }
    });
  }
});
</script>

<style lang="scss" scoped></style>
