<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <!--Content S-->
    <div class="col-md-12 col-sm-12 col-xs-12">
        <h3>訂單編號: {{orderObj.orderNum}}</h3>
    </div>
    <table border="0" cellpadding="5" cellspacing="1" class="table table-bordered">
        <tr>
            <th class="required">收款日期</th>
            <td>
                <date-picker value-type="YYYY-MM-DD"
                             format="YYYY-MM-DD"
                             :default-value="new Date()"
                             type="date"
                             input-class="form-control"
                             :input-attr="{id: 'paymentDate'}"
                             v-model="modifyObj.paymentDate">
                </date-picker>
            </td>
            <th>發票日期</th>
            <td>
                <date-picker value-type="YYYY-MM-DD"
                             format="YYYY-MM-DD"
                             :default-value="new Date()"
                             type="date"
                             input-class="form-control"
                             :input-attr="{id: 'invoiceDate'}"
                             v-model="modifyObj.invoiceDate">
                </date-picker>
            </td>
        </tr>
        <tr>
            <th class="required">收款金額</th>
            <td>
                <input type="number" class="form-control" ref="paymentAmount" v-model="modifyObj.paymentAmount" />
            </td>
            <th>發票金額</th>
            <td>
                <input type="number" class="form-control" ref="invoiceAmount" v-model="modifyObj.invoiceAmount" />
            </td>
        </tr>
        <tr>
            <th>檔案</th>
            <td>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <div>
                        <a class="hlkUploadMulti" @click="triggerUpload('#fuImg')">
                            <div class="btn-upload-single-img">
                                <img src="/assets/img/drive_upload.png" width="30" border="0" align="middle" />上傳檔案<br /> gif, jpg, jpeg, png, webp, pdf only
                            </div>
                            <div style="display: none;">
                                <input type="file" id="fuImg" accept=".gif, .jpg, .jpeg, .png, .webp, .pdf" ref="fuImg" @change="onFileChange" />
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-md-4 col-sm-4 col-xs-12" v-if="(modifyObj.imgSrc != null && modifyObj.imgSrc != '')">
                    <div v-if="modifyObj.imgSrc.indexOf('.pdf') >= 0">
                        <a :href="modifyObj.imgSrc" class="fancybox"><i class="fas fa-file-pdf fa-4x"></i></a>
                        <a class="btn btn-danger btn-sm" @click="modifyObj.imgSrc = null;"><i class="fas fa-trash-alt"></i></a>
                    </div>

                    <div class="img-with-remove" v-else>
                        <img :src="modifyObj.imgSrc" />
                        <a class="btn btn-danger btn-sm" @click="modifyObj.imgSrc = null;"><i class="fas fa-trash-alt"></i></a>
                    </div>
                </div>
            </td>
            <th>發票號碼</th>
            <td>
                <input type="text" class="form-control" ref="invoiceNum" v-model="modifyObj.invoiceNum" />
            </td>
        </tr>
        <tr>
            <th>備註</th>
            <td colspan="3">
                <textarea class="form-control" v-model="modifyObj.memo"></textarea>
            </td>
        </tr>
        <tr>
            <th></th>
            <td colspan="3" class="tdModify">
                <button class="btn btn-success" @click="createItem();" v-if="modifyObj.id <= 0">新增</button>
                <button class="btn btn-success" @click="updateItem();" v-if="modifyObj.id > 0">修改</button>
                <button class="btn btn-primary" @click="resetItem();">重填</button>
                <button class="btn btn-danger" @click="deleteItem();" v-if="modifyObj.id > 0">刪除</button>

                <div class="modifylog" v-if="modifyObj.id > 0">
                    <div>{{modifyObj.creatorName}} {{modifyObj.createDate}} 建檔</div>
                    <div v-show="modifyObj.modifyDatetime != null">{{modifyObj.modifierName}} {{modifyObj.modifyDate}} 異動</div>
                </div>
            </td>
        </tr>
    </table>
    <!--Content E-->
    <!--FinalScript S-->
    <script src="_paymentrecordedit.js" type="module"></script>
    <!--FinalScript E-->
</body>
</html>