<template>
    <div>
        <div class="doc-title">信保融资可损信息</div>
        <div style="margin: 20px;">
            <table align="center" width="100%" cellspacing="0" style="border: none;">
                <tr style="border: none;">
                    <td class="doc-label" style="width: 170px;border: none;">案件编号：</td>
                    <td class="doc-label" style="width: 170px;border: none;">{{info.claimno}}</td>
                </tr>
                <tr style="border: none;">
                    <td class="doc-label" style="width: 170px;border: none;">报损主体：</td>
                    <td class="doc-label" style="width: 170px;border: none;">{{info.reportlosssubject}}</td>
                </tr>
                <tr style="border: none;">
                    <td class="doc-label" style="width: 170px;border: none;">开证行名称：</td>
                    <td class="doc-label" style="width: 170px;border: none;">{{info.openbankname}}</td>
                </tr>
                <tr style="border: none;">
                    <td class="doc-label" style="width: 170px;border: none;">被保险人中文名称：</td>
                    <td class="doc-label" style="width: 170px;border: none;">{{info.companychnname}}</td>
                </tr>
                <tr style="border: none;">
                    <td class="doc-label" style="width: 170px;border: none;">保兑行名称：</td>
                    <td class="doc-label" style="width: 170px;border: none;">{{info.exchangebankname}}</td>
                </tr>
                <tr style="border: none;">
                    <td class="doc-label" style="width: 170px;border: none;">保险单号：</td>
                    <td class="doc-label" style="width: 170px;border: none;">{{info.policyno}}</td>
                </tr>
                <tr style="border: none;">
                    <td class="doc-label" style="width: 170px;border: none;">开证行代码：</td>
                    <td class="doc-label" style="width: 170px;border: none;">{{info.openbankno}}</td>
                </tr>
                <tr style="border: none;">
                    <td class="doc-label" style="width: 170px;border: none;">买方代码：</td>
                    <td class="doc-label" style="width: 170px;border: none;">{{info.buyerno}}</td>
                </tr>
                <tr style="border: none;">
                    <td class="doc-label" style="width: 170px;border: none;">保兑行代码：</td>
                    <td class="doc-label" style="width: 170px;border: none;">{{info.exchangebankno}}</td>
                </tr>
                <tr style="border: none;">
                    <td class="doc-label" style="width: 170px;border: none;">致损原因：</td>
                    <td class="doc-label" style="width: 170px;border: none;">{{info.possiblereason}}</td>
                </tr>
                <tr style="border: none;">
                    <td class="doc-label" style="width: 170px;border: none;">收到可损日期：</td>
                    <td class="doc-label" style="width: 170px;border: none;">{{info.headrecdate}}</td>
                </tr>
                <tr style="border: none;">
                    <td class="doc-label" style="width: 170px;border: none;">买方名称：</td>
                    <td class="doc-label" style="width: 170px;border: none;">{{info.buyername}}</td>
                </tr>
                <tr style="border: none;">
                    <td class="doc-label" style="width: 170px;border: none;">案件状态：</td>
                    <td class="doc-label" style="width: 170px;border: none;">{{info.fianlstate}}</td>
                </tr>
            </table>
        </div>
        <div>
            <table align="center" width="100%" cellspacing="0">
                <tr>
                    <td style="border: none; border-left: 1px solid #000000;border-top: 1px solid #000000;"></td>
                    <td class="doc-label" style="border: none; border-top: 1px solid #000000; text-align: center;">发票信息</td>
                    <td style="border: none; border-top: 1px solid #000000;"></td>
                </tr>
                <tr v-for="(item,index) in info.invoiceInfo" :key="index">
                    <td class="doc-label" style="text-align: left; padding-left: 10px;">发票号码：{{item.invoiceno}}</td>
                    <td class="doc-val">发票金额：{{item.invoicesum}}</td>
                    <td class="doc-val">可损金额：{{item.possibleloss}}</td>
                </tr>
                <!-- <tr v-if="!info.invoiceInfo || info.invoiceInfo.length<=0">
                    <td class="doc-label" style="text-align: left;">此节点返回数据格式错误</td>
                    <td class="doc-val" style="border: none; border-top: 1px solid #000000;"></td>
                    <td style="border: none; border-top: 1px solid #000000;"></td>
                </tr> -->
                <tr v-if="!info.invoiceInfo || info.invoiceInfo.length<=0">
                    <td class="doc-label" style="text-align: left;">此节点返回数据为空</td>
                    <td class="doc-val" style="border: none; border-top: 1px solid #000000;"></td>
                    <td style="border: none; border-top: 1px solid #000000;"></td>
                </tr> 
            </table>
        </div>

        <div style="margin: 20px;">
            <table align="center" width="100%" cellspacing="0" style="border: none;">
                <tr style="border: none;">
                    <td class="doc-label" style="width: 170px;border: none;">查询人员：{{username}}</td>
                    <td class="doc-label" style="width: 170px;border: none;">时间：{{today}}</td>
                </tr>
            </table>
        </div>
    </div>
</template>
<script>
export default {
  props: ["info"],
  data() {
    return {
      username: this.$store.state.common.username,
      today: new Date().Format("yyyy-MM-dd")
    };
  }
};
</script>
<style  scoped>
body {
  font-family: SimSun;
  font-size: 14px;
}

.doc-box {
  width: 180mm;
  height: auto;
  /*margin: 0 auto;*/
  /*border: 1px solid red;*/
  padding: 0mm;
}

.doc-title {
  width: 100%;
  margin: 10px auto;
  font-size: 28px;
  text-align: center;
}

table {
  border-collapse: collapse;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  text-align: center;
}

table th {
  border-left: 1px solid #000000;
  border-top: 1px solid #000000;
}

table tr {
  height: 30px;
  border-left: 1px solid #000000;
  border-top: 1px solid #000000;
}

table td {
  border-left: 1px solid #000000;
  border-top: 1px solid #000000;
}

.doc-label {
  width: 33.33%;
  font-weight: normal;
}

.doc-val {
  text-align: left;
  padding-left: 10px;
  font-weight: normal;
}
</style>