<template>
  <div>
    <div id="pdfDom" style="width: 776px">
      <div style="padding: 60px 30px; font-size: 12px !important; color: black">
        <div style="font-size: 16px; text-align: center; padding: 8px">
          <span>{{ dictValueLabel(printDetails.type, paymentType) }}审批单</span>
        </div>
        <div style="padding: 8px 0">
          <span>{{ dictValueLabel(printDetails.corporationId, companyData) }}</span>
          <span style="padding-left: 32px">创建时间: {{ printDetails.createTime }}</span>
        </div>
        <div style="border: 1px solid black">
          <div style="display: flex; border-bottom: 1px solid black">
            <div
                style="
                max-width: 140px;
                min-width: 140px;
                border-right: 1px solid black;
                padding: 8px;
              "
            >
              创建人
            </div>
            <div style="width: calc(100% - 140px); padding: 8px">
              {{ printDetails.userName }}
            </div>
          </div>
          <div style="display: flex; border-bottom: 1px solid black">
            <div
                style="
                max-width: 140px;
                min-width: 140px;
                border-right: 1px solid black;
                padding: 8px;
              "
            >
              创建人部门
            </div>
            <div style="width: calc(100% - 140px); padding: 8px">
              {{ printDetails.deptName }}
            </div>
          </div>
          <div
              style="display: flex; border-bottom: 1px solid black"
              v-if="printDetails.type != '3'"
          >
            <div
                style="
                max-width: 140px;
                min-width: 140px;
                border-right: 1px solid black;
                padding: 4px 8px;
                display: flex;
                align-items: center;
              "
            >
              费用明细
            </div>
            <div style="width: calc(100% - 140px)">
              <div style="border-bottom: 1px solid black; display: flex">
                <div
                    style="
                    max-width: 140px;
                    min-width: 140px;
                    padding: 4px 8px;
                    border-right: 1px solid black;
                    text-align: center;
                  "
                >
                  费用类型
                </div>
                <div
                    style="
                    width: calc(100% - 300px);
                    padding: 4px 8px;
                    border-right: 1px solid black;
                    text-align: center;
                  "
                >
                  款项说明
                </div>
                <div
                    style="
                    width: 60px;
                    padding: 4px 8px;
                    border-right: 1px solid black;
                    text-align: center;
                  "
                >
                  货币
                </div>
                <div style="width: 100px; padding: 4px 8px; text-align: center">付款金额</div>
              </div>
              <template
                  v-if="
                  printDetails.paymentRequestsDetailList &&
                  printDetails.paymentRequestsDetailList.length > 0
                "
              >
                <div v-for="(item, index) in printDetails.paymentRequestsDetailList" :key="index">
                  <div
                      :style="
                      index + 1 !== printDetails.paymentRequestsDetailList.length
                        ? 'border-bottom: 1px solid black;  display: flex'
                        : ' display: flex'
                    "
                  >
                    <div
                        style="
                        max-width: 140px;
                        min-width: 140px;
                        padding: 4px 8px;
                        border-right: 1px solid black;
                        text-align: center;
                      "
                    >
                      {{ dictValueLabel(item.expenseType, expenseType) }}
                    </div>
                    <div
                        style="
                        width: calc(100% - 300px);
                        padding: 4px 8px;
                        border-right: 1px solid black;
                        display: flex;
                        align-items: center;
                      "
                    >
                      {{ item.remark }}
                    </div>
                    <div
                        style="
                        width: 60px;
                        padding: 4px 8px;
                        border-right: 1px solid black;
                        display: flex;
                        align-items: center;
                      "
                    >
                      人民币
                    </div>
                    <div style="width: 100px; padding: 4px 8px; display: flex; align-items: center">
                      {{ item.amount }}
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <div style="display: flex; border-bottom: 1px solid black" v-else>
            <div
                style="
                max-width: 140px;
                min-width: 140px;
                border-right: 1px solid black;
                padding: 4px 8px;
                display: flex;
                align-items: center;
              "
            >
              费用明细
            </div>
            <div style="width: calc(100% - 140px)">
              <div style="border-bottom: 1px solid black; display: flex">
                <div
                    style="
                    max-width: 140px;
                    min-width: 140px;
                    padding: 4px 8px;
                    border-right: 1px solid black;
                    text-align: center;
                  "
                >
                  费用类型
                </div>
                <div
                    style="
                    width: calc(100% - 360px);
                    padding: 4px 8px;
                    border-right: 1px solid black;
                    text-align: center;
                  "
                >
                  款项说明
                </div>
                <div
                    style="
                    width: 60px;
                    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: 80px; padding: 4px 8px; text-align: center">付款金额</div>
              </div>
              <template
                  v-if="
                  printDetails.paymentRequestsDetailList &&
                  printDetails.paymentRequestsDetailList.length > 0
                "
              >
                <div v-for="(item, index) in printDetails.paymentRequestsDetailList" :key="index">
                  <div
                      :style="
                      index + 1 !== printDetails.paymentRequestsDetailList.length
                        ? 'border-bottom: 1px solid black;  display: flex'
                        : ' display: flex'
                    "
                  >
                    <div
                        style="
                        max-width: 140px;
                        min-width: 140px;
                        padding: 4px 8px;
                        border-right: 1px solid black;
                        text-align: center;
                      "
                    >
                      {{ dictValueLabel(item.expenseType, expenseType) }}
                    </div>
                    <div
                        style="
                        width: calc(100% - 360px);
                        padding: 4px 8px;
                        border-right: 1px solid black;
                        display: flex;
                        align-items: center;
                      "
                    >
                      {{ item.remark }}
                    </div>
                    <div
                        style="
                        width: 60px;
                        padding: 4px 8px;
                        border-right: 1px solid black;
                        display: flex;
                        align-items: center;
                      "
                    >
                      人民币
                    </div>
                    <div
                        style="
                        width: 80px;
                        padding: 4px 8px;
                        border-right: 1px solid black;
                        display: flex;
                        align-items: center;
                      "
                    >
                      {{ item.advanceAmount }}
                    </div>
                    <div style="width: 80px; padding: 4px 8px; display: flex; align-items: center">
                      {{ item.amount }}
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <div
              style="display: flex; border-bottom: 1px solid black"
              v-if="printDetails.type !== '3'"
          >
            <div
                style="
                max-width: 140px;
                min-width: 140px;
                border-right: 1px solid black;
                padding: 8px;
              "
            >
              总报销金额
            </div>
            <div style="width: calc(100% - 140px); display: flex">
              <div style="width: calc(100% - 100px); padding: 8px; border-right: 1px solid black">
                {{ NumberToChinese(computeMoney('amount')) }}
              </div>
              <div style="width: 100px; padding: 8px">
                {{ computeMoney('amount') }}
              </div>
            </div>
          </div>
          <div v-else>
            <div style="display: flex; border-bottom: 1px solid black">
              <div
                  style="
                  max-width: 140px;
                  min-width: 140px;
                  border-right: 1px solid black;
                  padding: 8px;
                "
              >
                核销总金额
              </div>
              <div style="width: calc(100% - 140px); display: flex">
                <div style="width: calc(100% - 80px); padding: 8px; border-right: 1px solid black">
                  {{ NumberToChinese(computeMoney('amount')) }}
                </div>
                <div style="width: 80px; padding: 8px">
                  {{ computeMoney('amount') }}
                </div>
              </div>
            </div>
            <div style="display: flex; border-bottom: 1px solid black">
              <div
                  style="
                  max-width: 140px;
                  min-width: 140px;
                  border-right: 1px solid black;
                  padding: 8px;
                "
              >
                预支总金额
              </div>
              <div style="width: calc(100% - 140px); display: flex">
                <div style="width: calc(100% - 80px); padding: 8px; border-right: 1px solid black">
                  {{ NumberToChinese(computeMoney('advanceAmount')) }}
                </div>
                <div style="width: 80px; padding: 8px">
                  {{ computeMoney('advanceAmount') }}
                </div>
              </div>
            </div>
            <div style="display: flex; border-bottom: 1px solid black">
              <div
                  style="
                  max-width: 140px;
                  min-width: 140px;
                  border-right: 1px solid black;
                  padding: 8px;
                "
              >
                差额 (核销 - 预支)
              </div>
              <div style="width: calc(100% - 140px); display: flex">
                <div style="width: calc(100% - 80px); padding: 8px; border-right: 1px solid black">
                  {{ NumberToChinese(computeBalance()) }}
                </div>
                <div style="width: 80px; padding: 8px">
                  {{ computeBalance() }}
                </div>
              </div>
            </div>
          </div>
          <div style="display: flex; border-bottom: 1px solid black">
            <div
                style="
                max-width: 140px;
                min-width: 140px;
                border-right: 1px solid black;
                padding: 8px;
              "
            >
              单据数量
            </div>
            <div style="width: calc(100% - 140px); padding: 8px">
              {{ printDetails.documentQuantity }}
            </div>
          </div>
          <div style="display: flex; border-bottom: 1px solid black">
            <div
                style="
                max-width: 140px;
                min-width: 140px;
                border-right: 1px solid black;
                padding: 0 8px;
                display: flex;
                align-items: center;
              "
            >
              收款信息
            </div>
            <div style="width: calc(100% - 140px)">
              <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, payType) }}
                </div>
                <div
                    style="
                    width: 27%;
                    padding: 0 8px;
                    border-right: 1px solid black;
                    display: flex;
                    align-items: center;
                  "
                >
                  {{ printDetails.accountName }}
                </div>
                <div
                    style="
                    width: 27%;
                    padding: 0 8px;
                    border-right: 1px solid black;
                    display: flex;
                    align-items: center;
                  "
                >
                  {{ printDetails.depositBank }}
                </div>
                <div style="width: 27%; padding: 0 8px; display: flex; align-items: center; word-break: break-all">
                  {{ printDetails.account }}
                </div>
              </div>
            </div>
          </div>
          <div style="display: flex; border-bottom: 1px solid black">
            <div
                style="
                max-width: 140px;
                min-width: 140px;
                border-right: 1px solid black;
                padding: 8px;
              "
            >
              电子发票(PDF/JPG)
            </div>
            <div style="width: calc(100% - 140px); padding: 8px">
              {{ getAtts(printDetails.atts) }}
            </div>
          </div>
          <div style="display: flex">
            <div
                style="
                max-width: 140px;
                min-width: 140px;
                border-right: 1px solid black;
                padding: 4px 8px;
                display: flex;
                align-items: center;
              "
            >
              审批流程
            </div>
            <div style="width: calc(100% - 140px)">
              <template v-if="recordList && recordList.length > 0">
                <div v-for="(item, index) in recordList" :key="index">
                  <div
                      :style="
                      index + 1 !== 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.approver }}</span>
                      <span style="padding-left: 4px">（{{ getStatus(item) }}）</span>
                      <span style="padding-left: 4px">{{ item.message }}</span>
                    </div>
                    <div style="width: 120px">{{ item.updateTime }}</div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
        <div style="padding-top: 16px">
          <span>打印时间: {{ presentTime }}</span>
          <span style="padding-left: 32px">打印人: {{ userStore.nickname }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {getDoneListTwoApi} from '@/api/flow/execute'
import {getDetailApi} from '@/api/business/payment/requests'
import {getDictByCode} from '@/utils/dict'
import {getPageApi as getCorporationPageApi} from '@/api/business/corporation/corporation'
import {useUserStore} from '@/stores/modules/user'

const props = defineProps({
  rowData: Object
})
const userStore = useUserStore()
const paymentType = ref([])
const payType = ref([])
const companyData = ref([])
const expenseType = ref([])
const printDetails = ref({})
const recordList = ref({})
const presentTime = ref('')

function formatDate(date) {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，所以需要加1
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

function dictValueLabel(value, arr) {
  if ((value || value === 0) && arr) {
    const current = arr.filter((x) => x.value == value)
    if (current && current.length > 0) {
      return current[0].label
    }
    return ''
  }
  return ''
}

function getDictData() {
  getDictByCode('payment_requests_type').then((res) => {
    paymentType.value = res
  })
  getDictByCode('pay_type').then((res) => {
    payType.value = res
  })
  getDictByCode('expense_type').then((res) => {
    expenseType.value = res
  })
  getCorporationPageApi({searchAll: true}).then((res) => {
    if (res?.records && res.records.length > 0) {
      companyData.value = res.records.map((item) => {
        return {
          label: item.name,
          value: item.id
        }
      })
    } else {
      companyData.value = []
    }
  })
}

getDictData()
const computeMoney = (label) => {
  let amount = 0
  if (
      printDetails.value.paymentRequestsDetailList &&
      printDetails.value.paymentRequestsDetailList.length > 0
  ) {
    for (let i = 0; i < printDetails.value.paymentRequestsDetailList.length; i++) {
      if (printDetails.value.paymentRequestsDetailList[i][label]) {
        amount = Number(
            parseFloat(
                Number(amount) + Number(printDetails.value.paymentRequestsDetailList[i][label])
            ).toFixed(2)
        )
      }
    }
  }
  return amount
}

function toDx(n) {
  //阿拉伯数字转换函数
  switch (n) {
    case '0':
      return '零'
    case '1':
      return '壹'
    case '2':
      return '贰'
    case '3':
      return '叁'
    case '4':
      return '肆'
    case '5':
      return '伍'
    case '6':
      return '陆'
    case '7':
      return '柒'
    case '8':
      return '捌'
    case '9':
      return '玖'
  }
}

// 金额转大写
function NumberToChinese(m) {
  let unit = ['仟', '佰', '拾', '', '仟', '佰', '拾', '', '角', '分', '厘']
  m *= 1000
  m = Number(parseFloat(m).toFixed(0))
  m += ''
  var x = m.length
  var result = ''
  for (var i = 0; i < x; i++) {
    if (i == 3) {
      result = '元' + result
    } else if (i == 7) {
      result = '万' + result
    }
    if (m.charAt(x - i - 1) == 0) {
      if (i != 0 && i != 1 && i != 2) {
        if (result.charAt(0) != '零' && result.charAt(0) != '元' && result.charAt(0) != '万') {
          result = '零' + result
        }
      }
      continue
    }
    result = toDx(m.charAt(x - i - 1)) + unit[unit.length - i - 1] + result
  }
  result += result.charAt(result.length - 1) == '元' ? '整' : ''
  return result
}

const computeBalance = () => {
  let balance = 0
  let advanceAmount = computeMoney('advanceAmount')
  let amount = computeMoney('amount')
  if (amount) {
    balance = Number(amount)
  }
  if (advanceAmount) {
    balance = Number(parseFloat(Number(balance) - Number(advanceAmount)).toFixed(2))
  }
  return balance
}
const getAtts = (atts) => {
  let text = ''
  if (atts) {
    let att = JSON.parse(atts)
    if (att && att.length > 0) {
      text = att.map((item) => item.name).join('，')
    }
  }
  return text
}
const getStatus = (row) => {
  if (row.skipType == 'PASS') {
    return '审批通过'
  }

  switch (row.flowStatus) {
    case '0':
      return '待提交'
    case '1':
      return '审批中'
    case '2':
      return '审批通过'
    case '4':
      return '驳回'
    case '6':
      return '撤销'
    case '7':
      return '取回'
    default:
      return ''
  }
}
onMounted(() => {
  presentTime.value = formatDate(new Date())
  if (props?.rowData?.id) {
    getDetailApi({id: props.rowData.id}).then((res) => {
      printDetails.value = res
    })
    getDoneListTwoApi(props.rowData.id).then((res) => {
      recordList.value = res
    })
  }
})
</script>

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