<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--Header S-->
    <style>
        ul.info { margin: 0; padding: 0; }
        ul.info li { margin: 0; padding: 0.3em; list-style: none; background-color: #EFEFEF; border-bottom: solid 1px #FFF; }
        ul.info li span.title { font-weight: bold; width: 5em; display: inline-block; text-align: right; padding-right: 0.5em; margin-right: 0.5em; border-right: solid 1px #FFF; }

        .jambo_table .img { height: 50px; }
        .jambo_table ul.subdetail { margin: 0; padding: 0; }
        .jambo_table ul.subdetail li { display: block; }
        .jambo_table ul.subdetail li:first-child { font-weight: bold; }
        .jambo_table ul.subdetail li .img { border: solid 1px #CBCBCB; vertical-align: middle; display: inline-block; max-width: 20%; }
        .jambo_table ul.subdetail li .desc { vertical-align: middle; display: inline-block; width: 75%; }
        .jambo_table tr.notify td { background-color: #ffe4e4 !important; }
        .jambo_table tr.done td { background-color: #EFEFEF !important; color: #888; }
        .jambo_table tbody tr td { border-bottom: 1px solid #ddd; }
        .jambo_table tfoot tr td { border-top: none; padding-left: 0; padding-right: 0; }
        .jambo_table tfoot tr td i { margin-right: 0.5em; }

        .other-subtotal { margin: 0; }
        .other-subtotal i { margin: 0 10px; }

        .fees h4 .num { margin-left: 0.8em; font-weight: bold; }
        .fees .jambo_table tfoot tr td { padding-left: 8px; padding-right: 8px; }
        
        ul.receipts, ul.contracts { margin: 0; padding: 0; }
        ul.receipts li, ul.contracts li { margin: 1%; padding: 1.5%; width: 31.33333%; list-style: none; float: left;border-radius: 3px; border: solid 1px #EFEFEF; }
        ul.receipts li img, ul.contracts li img { max-width: 100%; max-height: 200px; }
        
        .summary ul { margin: 0; padding: 0.3em; font-weight: bold; border: solid 1px; color: #000; }
        .summary ul li { display: inline-block; list-style: none; margin: 0; padding: 0.5em; }
        .summary ul li.plus, .plus{ background-color: #F54134; color: #FFF; }
        .summary ul li.minus, .minus { background-color: #0221d0; color: #FFF; }

        .footer-action .float-right { line-height: 3; margin-right: 1em; }
    </style>
    <!--Header E-->
</head>
<body>
    <!--Content S-->
    <div class="col-md-4 col-sm-4 col-xs-12">
        <ul class="info">
            <li>
                <span class="title">直客帳號</span>
                <span>{{user.username}}</span>
            </li>
            <li>
                <span class="title">姓名</span>
                <span>{{user.name}}</span>
            </li>
        </ul>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
        <ul class="info">
            <li>
                <span class="title">訂單編號</span>
                {{orderObj.orderNum}}
            </li>
            <li>
                <span class="title">來源</span>
                <span class="label-status" :class="'om-source' + orderObj.enSource">{{orderObj.sourceString}}</span>
            </li>
        </ul>
    </div>
    <div class="col-md-4 col-sm-12 col-xs-12">
        <ul class="info">
            <li>
                <span class="title">承租人</span>
                {{orderObj.tenantName}} {{orderObj.tenantMobile}}
            </li>
            <li>
                <span class="title">使用人</span>
                {{orderObj.delivery.receiver}} {{orderObj.delivery.mobile}}
            </li>
            <li>
                <span class="title"></span>
                {{orderObj.delivery.county}}{{orderObj.delivery.city}} {{orderObj.delivery.address}}
            </li>
        </ul>
    </div>
    <div class="col-md-3 col-sm-2 col-xs-12"></div>
    <!--租賃品項-->
    <div class="col-md-12 col-sm-12 col-xs-12 x_panel">
        <div class="x_title">
            <h2>租賃品項</h2>
            <ul class="nav navbar-right panel_toolbox">
                <li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
            </ul>
            <div class="clearfix"></div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12 x_content">
            <table border="0" cellpadding="5" cellspacing="1" class="table jambo_table">
                <thead>
                    <tr>
                        <td></td>
                        <td class="text-center">輔具狀態</td>
                        <td class="text-center">#</td>
                        <td></td>
                        <td>輔具</td>
                        <td class="text-right">數量</td>
                        <td class="text-right">租金</td>
                        <td class="text-right">耗材</td>
                        <td class="text-right">押金</td>
                        <td class="text-right">運費</td>
                        <td class="text-center">付款方式</td>
                        <td class="text-center">付款狀態</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in orderObj.detail.list" :class="trCss(item)">
                        <td class="text-center">
                            <span v-if="item.enVerified == 1" class="label label-default">已對帳</span>
                        </td>
                        <td class="text-center">{{item.statusString}}</td>
                        <td class="text-center">{{index + 1}}</td>
                        <td class="text-center"><img class="img" :src="item.coverImage" /></td>
                        <td>
                            <div>{{item.productName}}</div>
                            <div v-if="item.seatWidthAttrId != null && item.seatWidthAttrId > 0">座寬：{{item.seatWidthAttrName}}</div>
                            <div>
                                <span v-for="(stock, idx) in item.stocks">
                                    <span v-if="idx > 0">、</span><u class="nobr">{{stock.propertyNo}}</u>
                                    <span v-if="item.enRecovery == 1 && stock.status == 400" title="出租中" data-toggle="tooltip" data-placement="right"><i class="fas fa-user-clock"></i></span>
                                </span>
                            </div>
                            <div>{{item.startDate}} ~ {{item.endDate}}</div>
                            <div>{{item.periodTypeString}} ({{item.days}}天)</div>
                            <ul class="subdetail" v-show="item.ltGifts != null && item.ltGifts.length > 0">
                                <li>耗材包含：</li>
                                <li v-for="sub in item.ltGifts">
                                    <img class="img" :src="sub.coverImage" v-if="sub.coverImage != null && sub.coverImage.length > 0" />
                                    <div class="desc">
                                        {{sub.productName}} x {{sub.qty}}件<br />
                                        <span v-for="(stock, idx) in sub.stocks">
                                            <span v-if="idx > 0">、</span><u class="nobr">{{stock.propertyNo}}</u>
                                            <span v-if="sub.enRecovery == 1 && stock.status == 400" title="出租中" data-toggle="tooltip" data-placement="right"><i class="fas fa-user-clock"></i></span>
                                        </span>
                                    </div>
                                </li>
                            </ul>
                            <ul class="subdetail" v-show="item.ltBundles != null && item.ltBundles.length > 0">
                                <li>組合包含：</li>
                                <li v-for="sub in item.ltBundles">
                                    <img class="img" :src="sub.coverImage" v-if="sub.coverImage != null && sub.coverImage.length > 0" />
                                    <div class="desc">
                                        {{sub.productName}} x {{sub.qty}}件<br />
                                        <span v-for="(stock, idx) in sub.stocks">
                                            <span v-if="idx > 0">、</span><u class="nobr">{{stock.propertyNo}}</u>
                                            <span v-if="sub.enRecovery == 1 && stock.status == 400" title="出租中" data-toggle="tooltip" data-placement="right"><i class="fas fa-user-clock"></i></span>
                                        </span>
                                    </div>
                                </li>
                            </ul>
                            <ul class="subdetail" v-show="item.ltSupplies != null && item.ltSupplies.length > 0">
                                <li>額外加租：</li>
                                <li v-for="sub in item.ltSupplies">
                                    <img class="img" :src="sub.coverImage" v-if="sub.coverImage != null && sub.coverImage.length > 0" />
                                    <div class="desc">
                                        {{sub.productName}} <nobr><span class="red" v-show="sub.unitPrice > 0">${{sub.unitPrice.toLocaleString()}}/件</span> x {{item.periodQty}}{{item.periodTypeString.substr(0,1)}} x {{sub.qty}}件</nobr><br />
                                        <span v-for="(stock, idx) in sub.stocks">
                                            <span v-if="idx > 0">、</span><u class="nobr">{{stock.propertyNo}}</u>
                                            <span v-if="sub.enRecovery == 1 && stock.status == 400" title="出租中" data-toggle="tooltip" data-placement="right"><i class="fas fa-user-clock"></i></span>
                                        </span>
                                    </div>
                                </li>
                            </ul>
                            <ul class="subdetail" v-show="item.ltAdditions != null && item.ltAdditions.length > 0">
                                <li>額外加購：</li>
                                <li v-for="sub in item.ltAdditions">
                                    <img class="img" :src="sub.coverImage" v-if="sub.coverImage != null && sub.coverImage.length > 0" />
                                    <div class="desc">
                                        {{sub.productName}} <nobr><span class="red" v-show="sub.unitPrice > 0">${{sub.unitPrice.toLocaleString()}}</span>/件 x {{sub.qty}}件</nobr><br />
                                        <span v-for="(stock, idx) in sub.stocks">
                                            <span v-if="idx > 0">、</span><u class="nobr">{{stock.propertyNo}}</u>
                                            <span v-if="sub.enRecovery == 1 && stock.status == 400" title="出租中" data-toggle="tooltip" data-placement="right"><i class="fas fa-user-clock"></i></span>
                                        </span>
                                    </div>
                                </li>
                            </ul>
                        </td>
                        <td class="text-right">{{item.qty}}</td>
                        <td class="text-right nobr">{{item.unitPrice.toLocaleString()}} x {{item.periodQty}}{{item.periodTypeString.substr(0,1)}}</td>
                        <td class="text-right">{{item.consumableFee.toLocaleString()}}</td>
                        <td class="text-right">
                            {{item.deposit.toLocaleString()}}
                            <i class="fas fa-exclamation-circle aero" v-show="orderObj.enSource != 200 && item.enStatus > 700 && item.deposit > 0 && item.depositRefund == 0" data-toggle="tooltip" data-placement="top" title="待退"></i>
                        </td>
                        <td class="text-right">{{item.freightage.toLocaleString()}}</td>
                        <td class="text-center">{{item.payMethodString}}</td>
                        <td class="text-center">
                            <label v-if="item.enPayMethod < 500" class="label"
                                   :class="{'label-default': item.enPaymentStatus == 100, 'label-warning': item.enPaymentStatus == 200, 'label-info': item.enPaymentStatus == 300}">{{item.paymentStatusString}}</label>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td class="text-right" colspan="6">合計</td>
                        <td class="text-right">{{orderObj.detail.subTotal.toLocaleString()}}</td>
                        <td class="text-right">{{orderObj.detail.consumableFee.toLocaleString()}}</td>
                        <td class="text-right">{{orderObj.detail.deposit.toLocaleString()}}</td>
                        <td class="text-right">{{orderObj.detail.freightage.toLocaleString()}}</td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr v-show="orderObj.detail.suppliesTotal > 0">
                        <td class="text-right" colspan="6"><i class="fas fa-plus"></i> 加租合計</td>
                        <td class="text-right">{{orderObj.detail.suppliesTotal.toLocaleString()}}</td>
                        <td colspan="5"></td>
                    </tr>
                    <tr v-show="orderObj.detail.additionsTotal > 0">
                        <td class="text-right" colspan="6"><i class="fas fa-plus"></i> 加購合計</td>
                        <td class="text-right">{{orderObj.detail.additionsTotal.toLocaleString()}}</td>
                        <td colspan="5"></td>
                    </tr>
                    <tr>
                        <td class="text-right" colspan="6"><i class="fas fa-equals"></i> 訂單總計</td>
                        <td class="text-right">{{orderObj.detail.total.toLocaleString()}}</td>
                        <td colspan="5"></td>
                    </tr>
                    <tr v-show="orderObj.detail.depositRefund != 0">
                        <td class="text-right" colspan="6"><i class="fas fa-minus"></i> 退還押金</td>
                        <td class="text-right">{{orderObj.detail.depositRefund.toLocaleString()}}</td>
                        <td colspan="5"></td>
                    </tr>
                    <tr v-show="orderObj.detail.depositRefund != 0">
                        <td class="text-right" colspan="6"><i class="fas fa-equals"></i> </td>
                        <td class="text-right">{{(orderObj.detail.total + orderObj.detail.depositRefund).toLocaleString()}}</td>
                        <td colspan="5"></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <!--其它費用-->
    <div class="col-md-12 col-sm-12 col-xs-12 x_panel" v-show="orderObj.other.list != null && orderObj.other.list.length > 0">
        <div class="x_title">
            <h2>其它費用</h2>
            <ul class="nav navbar-right panel_toolbox">
                <li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
            </ul>
            <div class="clearfix"></div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12 x_content">
            <table border="0" cellpadding="5" cellspacing="1" class="table jambo_table">
                <thead>
                    <tr>
                        <td></td>
                        <td class="text-center">#</td>
                        <td>類型</td>
                        <td>說明</td>
                        <td></td>
                        <td class="text-right">費用</td>
                        <td>付款日期</td>
                        <td class="text-center">付款狀態</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in orderObj.other.list">
                        <td class="text-center">
                            <span v-if="item.enVerified == 1" class="label label-default">已對帳</span>
                        </td>
                        <td class="text-center">{{index + 1}}</td>
                        <td>{{item.typeString}}</td>
                        <td>{{item.description}}</td>
                        <td>
                            <div v-if="item.enType == 100">
                                <div>
                                    [{{item.shippingMethodString}}]
                                    <div v-if="item.delivery != null">
                                        <span v-if="item.enShippingMethod == 500 || item.enShippingMethod == 600">{{item.delivery.county}}{{item.delivery.city}} {{item.delivery.address}}</span>
                                        <div v-else>
                                            <div v-for="item in ltStores" v-if="item.delivery.storeId == item.id">{{item.shortName}}<span v-if="item.zipCode != null && item.zipCode != ''">  ({{item.county}}{{item.city}}{{item.address}})</span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-if="item.enType == 200">
                                <u>維修日期</u>: {{item.repaireDate}}
                            </div>
                        </td>
                        <td class="text-right nobr">{{item.fee.toLocaleString()}}</td>
                        <td>
                            <span v-if="item.paymentDatetime == null">--</span>
                            <span v-else>{{item.paymentDatetime}}</span>
                        </td>
                        <td class="text-center">
                            <label class="label"
                                   :class="{'label-default': item.enPaymentStatus == 100, 'label-warning': item.enPaymentStatus == 200, 'label-info': item.enPaymentStatus == 300}">{{item.paymentStatusString}}</label>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr v-show="orderObj.other.total != 0">
                        <td colspan="6" class="text-right">
                            <span class="other-subtotal" v-if="orderObj.other.freightage != 0">
                                運費 {{orderObj.other.freightage.toLocaleString()}}
                            </span>
                            <span class="other-subtotal" v-if="orderObj.other.repair != 0">
                                <i class="fas fa-plus" v-if="orderObj.other.freightage != 0"></i>
                                維修費 {{orderObj.other.repair.toLocaleString()}}
                            </span>
                        </td>
                        <td colspan="2">
                            <span class="other-subtotal">
                                <i class="fas fa-equals"></i>
                                總計 {{orderObj.other.total.toLocaleString()}}
                            </span>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <!--費用明細-->
    <div class="col-md-12 col-sm-12 col-xs-12 x_panel fees">
        <div class="x_title">
            <h2>費用明細</h2>
            <ul class="nav navbar-right panel_toolbox">
                <li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
            </ul>
            <div class="clearfix"></div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12 x_content">
            <div class="col-md-6 col-sm-6 col-xs-12">
                <h4>應收費用<span class="num">${{orderObj.summary.receivableAmt.toLocaleString()}}</span></h4>
                <table border="0" cellpadding="5" cellspacing="1" class="table jambo_table">
                    <thead>
                        <tr>
                            <td>類型</td>
                            <td class="text-right">費用</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in orderObj.summary.charge.list" v-show="item.amount != 0">
                            <td>{{item.chargeTypeString}}</td>
                            <td class="text-right">{{item.amount.toLocaleString()}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12">
                <h4>應退費用<span class="num">${{orderObj.summary.refundableAmt.toLocaleString()}}</span></h4>
                <table border="0" cellpadding="5" cellspacing="1" class="table jambo_table">
                    <thead>
                        <tr>
                            <td>類型</td>
                            <td class="text-right">費用</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in orderObj.summary.refund.list" v-show="item.amount != 0">
                            <td>{{item.chargeTypeString}}</td>
                            <td class="text-right">{{item.amount.toLocaleString()}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!--收款記錄-->
    <div class="col-md-12 col-sm-12 col-xs-12 x_panel">
        <div class="x_title">
            <h2>收款記錄</h2>
            <ul class="nav navbar-right panel_toolbox">
                <li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
            </ul>
            <div class="clearfix"></div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12 x_content">
            <table border="0" cellpadding="5" cellspacing="1" class="table jambo_table">
                <thead>
                    <tr>
                        <td class="text-center">#</td>
                        <td class="text-center">收款日期</td>
                        <td class="text-right">收款金額</td>
                        <td class="text-center">發票日期</td>
                        <td class="text-right">發票金額</td>
                        <td class="text-center">發票號碼</td>
                        <td></td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in orderObj.paymentRecords">
                        <td class="text-center">{{index + 1}}</td>
                        <td class="text-center">{{item.paymentDate}}</td>
                        <td class="text-right">{{item.paymentAmount.toLocaleString()}}</td>
                        <td class="text-center">{{item.invoiceDate}}</td>
                        <td class="text-right">{{item.invoiceAmount.toLocaleString()}}</td>
                        <td class="text-center">{{item.invoiceNum}}</td>
                        <td>
                            <a :href="item.imgSrc" class="fancybox" v-if="(item.imgSrc != null && item.imgSrc != '')">
                                <div>
                                    <i v-if="item.imgSrc.indexOf('.pdf') >= 0" class="fas fa-file-pdf fa-2x"></i>
                                    <img v-else :src="item.imgSrc" />
                                </div>
                            </a>
                        </td>
                    </tr>
                    <tr v-show="orderObj.paymentRecords == null || orderObj.paymentRecords.length == 0">
                        <td colspan="4" class="text-center">No Data.</td>
                    </tr>
                </tbody>
                <tfoot v-show="orderObj.paymentRecords != null && orderObj.paymentRecords.length > 0">
                    <tr>
                        <td colspan="2" class="text-right">合計</td>
                        <td class="text-right">{{orderObj.summary.receivedAmt.toLocaleString()}}</td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <!--發票資訊-->
    <!--<div class="col-md-12 col-sm-12 col-xs-12 x_panel">
        <div class="x_title">
            <h2>發票資訊</h2>
            <ul class="nav navbar-right panel_toolbox">
                <li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
            </ul>
            <div class="clearfix"></div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12 x_content">
            <table border="0" cellpadding="5" cellspacing="1" class="table jambo_table">
                <thead>
                    <tr>
                        <td class="text-center">#</td>
                        <td class="text-center">發票格式</td>
                        <td>統一編號</td>
                        <td>公司名稱</td>
                        <td class="text-center">索取方式</td>
                        <td>收件姓名</td>
                        <td>收件電話</td>
                        <td>寄送地址</td>
                        <td>手機條碼載具</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in orderObj.invoice">
                        <td class="nobr">訂單{{index + 1}}</td>
                        <td class="text-center">{{item.invoiceTypeString}}</td>
                        <td>{{item.invoiceTaxNo}}</td>
                        <td>{{item.invoiceTitle}}</td>
                        <td class="text-center">{{item.billTypeString}}</td>
                        <td><span v-if="item.enBillType == 100">{{item.receiver}}</span></td>
                        <td><span v-if="item.enBillType == 100">{{item.mobile}}</span></td>
                        <td><span v-if="item.enBillType == 100">{{item.county}}{{item.city}} {{item.address}}</span></td>
                        <td><span v-if="item.enBillType == 200">{{item.mobileBarcode}}</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>-->
    <!--使用人資訊-->
    <!--<div class="col-md-12 col-sm-12 col-xs-12 x_panel">
        <div class="x_title">
            <h2>使用人資訊</h2>
            <ul class="nav navbar-right panel_toolbox">
                <li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
            </ul>
            <div class="clearfix"></div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12 x_content">
            <table border="0" cellpadding="5" cellspacing="1" class="table table-bordered">
                <tr>
                    <th>姓名</th>
                    <td colspan="3">{{orderObj.tenantName}}</td>
                </tr>
                <tr>
                    <th>手機號碼</th>
                    <td>{{orderObj.tenantMobile}}</td>
                    <th>電話</th>
                    <td>{{orderObj.tenantPhone}}</td>
                </tr>
                <tr>
                    <th>電子信箱</th>
                    <td colspan="3">{{orderObj.email}}</td>
                </tr>
                <tr>
                    <th>運送方式</th>
                    <td colspan="3">{{orderObj.shippingMethodString}}</td>
                </tr>
                <tr v-if="orderObj.enShippingMethod == 100 && orderObj.delivery.storeId > 0">
                    <th>取件門市</th>
                    <td colspan="3">
                        <span v-for="item in ltStores" v-if="orderObj.delivery.storeId == item.id">
                            {{item.shortName}}<span v-if="item.zipCode != null && item.zipCode != ''">  ({{item.county}}{{item.city}}{{item.address}})</span>
                        </span>
                    </td>
                </tr>
                <tr v-if="orderObj.enShippingMethod == 200">
                    <th>送貨地址</th>
                    <td colspan="3">{{orderObj.delivery.county}}{{orderObj.delivery.city}} {{orderObj.delivery.address}}</td>
                </tr>
                <tr v-if="orderObj.takeback.storeId > 0">
                    <th>歸還門市</th>
                    <td colspan="3">
                        <span v-for="item in ltStores" v-if="orderObj.takeback.storeId == item.id">
                            {{item.shortName}}<span v-if="item.zipCode != null && item.zipCode != ''">  ({{item.county}}{{item.city}}{{item.address}})</span>
                        </span>
                    </td>
                </tr>
                <tr v-else>
                    <th>收件地址</th>
                    <td colspan="3">{{orderObj.takeback.county}}{{orderObj.takeback.city}} {{orderObj.takeback.address}}</td>
                </tr>
                <tr v-if="orderObj.remark != null">
                    <th>備註</th>
                    <td colspan="3"><div v-html="orderObj.remark.replace(/\n/g,'<br />')"></div></td>
                </tr>
                <tr>
                    <th>內部備註</th>
                    <td colspan="3">
                        <div v-if="orderObj.memo != null" v-html="orderObj.memo.replace(/\n/g,'<br />')"></div>
                    </td>
                </tr>
            </table>
        </div>
    </div>-->
    <!--匯款單或轉帳交易明細-->
    <!--<div class="col-md-12 col-sm-12 col-xs-12 x_panel" v-if="orderObj.receipts != null && orderObj.receipts.length > 0">
        <div class="x_title">
            <h2>匯款單或轉帳交易明細</h2>
            <ul class="nav navbar-right panel_toolbox">
                <li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
            </ul>
            <div class="clearfix"></div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12 x_content">
            <ul class="receipts">
                <li class="text-center" v-for="imgSrc in orderObj.receipts">
                    <a :href="imgSrc" class="fancybox"><img :src="imgSrc" /></a>
                </li>
            </ul>
            <div class="clearfix"></div>
        </div>
    </div>-->
    <!--回簽合約-->
    <!--<div class="col-md-12 col-sm-12 col-xs-12 x_panel" v-if="orderObj.contracts != null && orderObj.contracts.length > 0">
        <div class="x_title">
            <h2>回簽合約</h2>
            <ul class="nav navbar-right panel_toolbox">
                <li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
            </ul>
            <div class="clearfix"></div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12 x_content">
            <ul class="contracts">
                <li class="text-center" v-for="imgSrc in orderObj.contracts">
                    <img :src="imgSrc" class="fancybox" :href="imgSrc" />
                </li>
            </ul>
            <div class="clearfix"></div>
        </div>
    </div>-->

    <div class="col-md-4 col-sm-4 col-xs-12">
        <ul class="info">
            <li>
                <span class="title">直客帳號</span>
                <span>{{user.username}}</span>
            </li>
            <li>
                <span class="title">姓名</span>
                <span>{{user.name}}</span>
            </li>
        </ul>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
        <ul class="info">
            <li>
                <span class="title">訂單編號</span>
                {{orderObj.orderNum}}
            </li>
            <li>
                <span class="title">來源</span>
                <span class="label-status" :class="'om-source' + orderObj.enSource">{{orderObj.sourceString}}</span>
            </li>
        </ul>
    </div>
    <div class="col-md-4 col-sm-12 col-xs-12">
        <ul class="info">
            <li>
                <span class="title">承租人</span>
                {{orderObj.tenantName}} {{orderObj.tenantMobile}}
            </li>
            <li>
                <span class="title">使用人</span>
                {{orderObj.delivery.receiver}} {{orderObj.delivery.mobile}}
            </li>
            <li>
                <span class="title"></span>
                {{orderObj.delivery.county}}{{orderObj.delivery.city}} {{orderObj.delivery.address}}
            </li>
        </ul>
    </div>
    <div class="col-md-3 col-sm-2 col-xs-12"></div>
    <div class="col-md-12 col-sm-12 col-xs-12"></div>
    <div class="footer-action">
        <div class="summary float-left">
            <ul>
                <li>訂單{{orderObj.orderNum}}：</li>
                <li>應收 {{orderObj.summary.receivableAmt.toLocaleString()}}</li>
                <li><i class="fas fa-minus"></i></li>
                <li>已收 {{orderObj.summary.receivedAmt.toLocaleString()}}</li>
                <li><i class="fas fa-equals"></i></li>
                <li :class="{'plus': orderObj.summary.unreceivedAmt > 0, 'minus': orderObj.summary.unreceivedAmt < 0}">未收 {{orderObj.summary.unreceivedAmt.toLocaleString()}}</li>
                <li></li>
                <li>應退 {{orderObj.summary.refundableAmt.toLocaleString()}}</li>
                <li><i class="fas fa-minus"></i></li>
                <li>已退 {{orderObj.summary.refundedAmt.toLocaleString()}}</li>
                <li><i class="fas fa-equals"></i></li>
                <li :class="{'minus': orderObj.summary.pendingRefundAmt > 0, 'plus': orderObj.summary.pendingRefundAmt < 0}">待退 {{orderObj.summary.pendingRefundAmt.toLocaleString()}}</li>
            </ul>
        </div>
        <div class="float-right">
            <a class="btn btn-info" @click="backToList()">返回直客訂單列表</a>
        </div>
    </div>
    <!--Content E-->
    <!--FinalScript S-->
    <script src="userbill.js" type="module"></script>
    <!--FinalScript E-->
</body>
</html>