<template>
  <div style="max-height: calc(100vh - 200px); overflow: hidden auto">
    <div id="pdfDom" style="padding: 10px">
      <el-table :data="formData.data.items" style="width: 100%">
        <el-table-column label="交易时间" prop="tradingTime" width="110" />
        <el-table-column label="交易类型" width="110">
          <template v-slot="scope">
            <el-tag v-if="scope.row.type === 1" type="success">请款</el-tag>
            <el-tag v-else-if="scope.row.type === 2" type="warning">到账认领</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="交易金额" prop="tradingAmount" width="110" />
        <el-table-column label="摘要" prop="remark" />
        <el-table-column label="资金账户">
          <template v-slot="scope">
            <div>{{ scope.row.accountName }} ({{ scope.row.depositBank }})</div>
          </template>
        </el-table-column>
        <el-table-column label="对方账户">
          <template v-slot="scope">
            <div>{{ scope.row.targetAccountName }} ({{ scope.row.targetAccount }})</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align: center; padding: 8px">
      <el-button type="primary" v-print="printObj" size="large">打印</el-button>
    </div>
  </div>
</template>

<script setup>
import { getTransactionList } from '@/api/business/contract/info'
import { getPdf } from '@/utils/getPdf.js'

const { proxy } = getCurrentInstance()
const props = defineProps({
  rowData: Object
})
const formData = reactive({
  data: {
    items: []
  }
})
const printObj = ref({
  id: 'pdfDom',
  popTitle: '',
  extraCss: 'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css',
  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
})
onMounted(() => {
  getTransactionList({ id: props.rowData.id }).then((res) => {
    formData.data.items = res
  })
})
</script>

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