<template>
    <div class="edit-view">
        <page-title>
            <!-- <el-button @click="onDelete" :disabled="saving" type="danger" v-if="formData.id"> 删除 </el-button>
            <el-button @click="onSave" :loading="saving" type="primary">保存</el-button> -->
        </page-title>
        <div class="edit-view__content-wrapper">
            <div class="edit-view__content-section" @keyup.enter="query" v-loading="loading">
                <h4 style="margin-top: 0">订单查询</h4>
                <el-input v-model="orderId" placeholder="输入订单号" style="width: 350px">
                    <el-button slot="append" icon="el-icon-search" @click="query"></el-button>
                </el-input>

                <div v-if="info && info.exist" class="detail">
                    <div class="items">
                        <div class="row">
                            <div class="item-wrapper">
                                <div class="item">
                                    <div class="label">支付渠道</div>
                                    <div class="value">{{ payChannel[info.channel] }}</div>
                                </div>
                            </div>
                            <div class="item-wrapper">
                                <div class="item">
                                    <div class="label">金额</div>
                                    <div class="value">{{ info.amount }}</div>
                                </div>
                            </div>
                            <div class="item-wrapper">
                                <div class="item">
                                    <div class="label">状态</div>
                                    <div class="value">{{ payStatus[info.status] }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="item-wrapper">
                                <div class="item">
                                    <div class="label">交易ID</div>
                                    <div class="value">{{ info.transactionId }}</div>
                                </div>
                            </div>
                            <div class="item-wrapper">
                                <div class="item">
                                    <div class="label">支付时间</div>
                                    <div class="value">{{ info.payTime }}</div>
                                </div>
                            </div>
                            <div class="item-wrapper">
                                <div class="item">
                                    <div class="label">备注</div>
                                    <div class="value">{{ info.msg }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="row"></div>
                        <div class="item-wrapper"></div>
                    </div>
                    <el-button @click="refund" style="margin-top: 20px" type="warning">申请退款</el-button>
                </div>
            </div>
            <div class="edit-view__content-section">
                <h4 style="margin-top: 0">测试支付</h4>
                <el-select v-model="testPay.channel" class="test-pay-form-item">
                    <el-option v-for="(item, key) in payChannel" :label="item" :value="key" :key="key"></el-option>
                </el-select>
                <el-input v-model="testPay.orderId" placeholder="订单ID" class="test-pay-form-item">
                    <el-button
                        icon="el-icon-refresh"
                        slot="append"
                        @click="testPay.orderId = 'TEST' + new Date().getTime()"
                    ></el-button>
                </el-input>
                <el-input
                    v-model="testPay.bindCardId"
                    class="test-pay-form-item"
                    placeholder="绑卡ID"
                    v-if="testPay.channel === 'payEase'"
                ></el-input>
                <el-button @click="pay" class="test-pay-form-item" type="primary" plain :loading="testPayLoading">
                    发起支付
                </el-button>
                <el-input
                    placeholder="验证码"
                    class="test-pay-form-item"
                    style="width: 100px"
                    v-if="testPay.channel === 'payEase'"
                ></el-input>
                <el-button class="test-pay-form-item" type="primary" plain v-if="testPay.channel === 'payEase'">
                    确认支付
                </el-button>
            </div>
        </div>
    </div>
</template>
<script>
import VueQrcode from '@chenfengyuan/vue-qrcode';
export default {
    components: { VueQrcode },
    data() {
        return {
            orderId: '',
            info: null,
            loading: false,
            payStatus: {
                SUCCESS: '支付成功',
                PENDING: '等待支付',
                FAIL: '支付失败',
                CANCEL: '已取消',
                REFUNDED: '已退款',
                REFUNDING: '退款中'
            },
            payChannel: {
                sandQuick: '衫德快捷',
                sandPay: '衫德',
                hmPay: '河马',
                payEase: '首信易'
            },
            testPay: {
                channel: '',
                orderId: 'TEST' + new Date().getTime()
            },
            testPayLoading: false,
            payRes: null,
            qrCode: ''
        };
    },
    methods: {
        query() {
            if (!this.orderId) {
                this.$message.error('请输入订单号');
                return;
            }
            this.info = null;
            this.loading = true;
            this.$http
                .get('/payChannelMgmt/query', { orderId: this.orderId })
                .then(res => {
                    this.loading = false;
                    if (res && res.exist) {
                        this.info = res;
                    } else {
                        this.$message.error('订单不存在');
                    }
                })
                .catch(e => {
                    this.loading = false;
                    this.$message.error(e.error || '查询失败');
                });
        },
        refund() {
            this.$confirm('是否申请退款' + this.info.amount + '元', '确认退款', { type: 'warning' })
                .then(res => {
                    this.loading = true;
                    return this.$http.post('/payChannelMgmt/refund', {
                        orderId: this.orderId,
                        transactionId: this.info.transactionId,
                        amount: this.info.amount,
                        channel: this.info.channel
                    });
                })
                .then(res => {
                    this.loading = false;
                    this.$message.success('退款成功');
                    this.query();
                })
                .catch(e => {
                    this.loading = false;
                    if (e !== 'cancel') {
                        this.$message.error(e.error);
                    }
                });
        },
        pay() {
            if (!this.testPay.channel) {
                this.$message.error('请先选择支付渠道');
                return;
            }
            this.testPayLoading = true;
            this.$http
                .post('/payChannelMgmt/pay', this.testPay)
                .then(res => {
                    this.orderId = this.testPay.orderId;
                    this.testPayLoading = false;
                    if (this.testPay.channel === 'sandQuick') {
                        var newWindow = window.open('about:blank', '_blank', 'scrollbars=yes,width=1050,height=600');
                        newWindow.document.write(res);
                    } else if (this.testPay.channel === 'sandPay' || this.testPay.channel === 'hmPay') {
                        const h = this.$createElement;
                        this.$msgbox({
                            title: '支付宝扫码支付',
                            message: h('div', { style: { textAlign: 'center' } }, [
                                h(
                                    'vue-qrcode',
                                    {
                                        props: {
                                            options: { width: 300, margin: 2 },
                                            value: res
                                        }
                                    },
                                    []
                                )
                            ]),
                            confirmButtonText: '确定',
                            cancelButtonText: '取消'
                        });
                    }
                })
                .catch(e => {
                    console.log(e);
                    this.testPayLoading = false;
                    this.$message.error(e.error);
                });
        },
        confirmPay() {}
    }
};
</script>
<style lang="less" scoped>
.items {
    font-size: 14px;
    color: @text1;
    margin-top: 20px;
    border-top: 1px solid @border1;
    border-left: 1px solid @border1;
    font-size: 0;
    .row {
        .flex();
    }
    .item-wrapper {
        display: inline-block;
        flex-basis: 0;
        flex-grow: 1;
        .item {
            .flex();
            border-right: 1px solid @border1;
            border-bottom: 1px solid @border1;
            .label {
                width: 80px;
                line-height: 40px;
                padding: 0 10px;
                background: @bg;
                font-size: 14px;
            }
            .value {
                flex-grow: 1;
                flex-basis: 0;
                line-height: 40px;
                padding: 0 10px;
                font-size: 14px;
                .ellipsisLn(1);
            }
        }
    }
}
.test-pay-form-item {
    margin-right: 20px;
    margin-bottom: 20px;
    &.el-input {
        width: 300px;
    }
}
</style>
