<template>
    <div class="app-container">
        <div class="flexBet searchTop">
            <div class="title flex m20">
                <div class="bar"></div>
                <div class="text">{{ $route.meta.title }}</div>
            </div>
        </div>
        <!-- v-loading="loading" -->
        <div class="bg">
            <div class="bottom form controls">
                <el-form ref="form" :model="form" :rules="rules" label-width="140px">
                    <el-form-item label="版本号" prop="version">
                        <el-input v-model="form.version" placeholder="" style="width: 315px;border-color: #E6F1FF;" />
                    </el-form-item>
                    <el-form-item label="字符集" prop="charset">
                        <el-input v-model="form.charset" placeholder="" style="width: 315px;border-color: #E6F1FF;" />
                    </el-form-item>

                    <!-- <el-form-item label="商户号" prop="spid">
                        <el-input v-model="form.spid" placeholder="" style="width: 315px;border-color: #E6F1FF;"
                            v-hasPermi="['pay:test:query']" />
                    </el-form-item> -->


                    <el-form-item label="商户号" prop="spid">
                        <el-select v-model="form.spid" placeholder="请选择商户" size="medium" v-hasPermi="['pay:test:query']"
                            style="width: 315px">
                            <el-option v-for="dict in allstore" :key="dict.storeNo" :label="dict.storeName"
                                :value="dict.storeNo" />
                        </el-select>
                    </el-form-item>


                    <!-- <el-form-item label="签名key" prop="payKey">
                        <el-input v-model="form.payKey" placeholder="" style="width: 315px;border-color: #E6F1FF;"
                            v-hasPermi="['pay:test:query']" />
                    </el-form-item> -->

                    <el-form-item label="交易金额" prop="tranAmt">
                        <el-input v-model="form.tranAmt" placeholder="" style="width: 315px;border-color: #E6F1FF;" />
                    </el-form-item>
                    <!-- payerName -->
                    <el-form-item label="付款人姓名" prop="">
                        <el-input v-model="form.payerName" placeholder="" style="width: 315px;border-color: #E6F1FF;" />
                    </el-form-item>

                    <el-form-item label="支付类型" prop="payType">
                        <el-select v-model="form.payType" placeholder="请选择支付类型" clearable size="medium">
                            <el-option v-for="(item, i) in sortLevType" :key="i" :label="item.typeName"
                                :value="item.payType"></el-option>
                        </el-select>
                    </el-form-item>


                    <el-form-item label="商品名称" prop="productName">
                        <el-input v-model="form.productName" placeholder="" style="width: 315px;border-color: #E6F1FF;" />
                    </el-form-item>

                    <el-form-item label="商品描述" prop="productDesc">
                        <el-input v-model="form.productDesc" placeholder="" style="width: 315px;border-color: #E6F1FF;" />
                    </el-form-item>

                    <el-form-item label="保留字段" prop="attach">
                        <el-input v-model="form.attach" placeholder="" style="width: 315px;border-color: #E6F1FF;" />
                    </el-form-item>
                    <el-form-item label="回调地址" prop="notifyUrl">
                        <el-input v-model="form.notifyUrl" placeholder="" style="width: 315px;border-color: #E6F1FF;" />
                    </el-form-item>
                    <el-form-item label="商户返回地址" prop="backUrl">
                        <el-input v-model="form.backUrl" placeholder="" style="width: 315px;border-color: #E6F1FF;" />
                    </el-form-item>
                    <el-form-item label="请求类型" prop="mediaType">
                        <el-select v-model="form.mediaType" placeholder="请选择请求类型" clearable size="medium">
                            <el-option v-for="(item, i) in list" :key="i" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="签名类型" prop="signType">
                        <el-input v-model="form.signType" placeholder="" style="width: 315px;border-color: #E6F1FF;" />
                    </el-form-item>

                    <el-form-item label="签名" prop="req_data">
                        <el-input v-model="form.req_data" type="textarea" :disabled="true" placeholder=""
                            style="width: 315px;border-color: #E6F1FF;" />
                        <el-button type="primary" plain icon="" size="medium" style="color:#fff;margin-left:10px"
                            @click="handleSay" v-hasPermi="['pay:test:paySign']">获取签名</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" plain icon="" size="medium" style="color:#fff;margin-left:10px"
                            @click="payCode">支付</el-button>
                    </el-form-item>
                    <el-form-item label="扫码支付响应" prop="resp">
                        <el-input type="textarea" v-model="resMsg" placeholder=""
                            style="width:80%;border-color: #E6F1FF;" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" plain icon="" :disabled="!this.form.resp" size="medium"
                            style="color:#fff;margin-left:10px" @click="getCode">查看二维码</el-button>
                    </el-form-item>
                </el-form>

            </div>
        </div>


        <el-dialog v-dialogDrag title="二维码" :visible.sync="open" width="400px" append-to-body :close-on-click-modal="false">
            <div id="qrCode" ref="qrCodeDiv" class="flex" style="justify-content: center;" v-if="showCode"></div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="cancel">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
    
<script>
import {
    payTest,
    common_api
} from "@/api/form";
import QRCode from 'qrcodejs2';
export default {
    name: "add",

    data() {
        return {
            // 返回信息
            resMsg: null,

            showCode: false,
            rules: {
                payerName: [
                    { required: true, message: "请输入付款人", trigger: "blur" },
                ],
                version: [
                    { required: true, message: "请输入版本号", trigger: "blur" },
                ],
                charset: [
                    { required: true, message: "请输入字符集", trigger: "blur" },
                ],
                spid: [
                    { required: true, message: "请输入商户号", trigger: "blur" },
                ],
                tranAmt: [
                    { required: true, message: "请输入交易金额", trigger: "blur" },
                ],
                payType: [
                    { required: true, message: "请选择支付类型", trigger: "blur" },
                ],
                productName: [
                    { required: true, message: "请输入商品名称", trigger: "blur" },
                ],
                productDesc: [
                    { required: true, message: "请输入商品描述", trigger: "blur" },
                ],
                attach: [
                    { required: true, message: "请输入保留字段", trigger: "blur" },
                ],
                notifyUrl: [
                    { required: true, message: "请输入回调地址", trigger: "blur" },
                ],
                mediaType: [
                    { required: true, message: "请选择请求类型", trigger: "blur" },
                ],
            },
            sortLevType: [],
            // 所有商户
            allstore: [],

            form: {
                resp: null,
                signType: 'MD5',
                backUrl: '/admin/paytest/native',
                notifyUrl: 'http://localhost:8082/pay/nativePayNotify2Store',
                attach: 'test',
                version: '2.0',
                charset: 'UTF-8',
                spid: null,
                payKey: null,
                tranAmt: 1,
                payType: null,
                productName: '商品',
                productDesc: '商品描述',
                req_data: null,
                mediaType: null,
                payerName:null,
            },
            list: [
                {
                    label: 'JSON',
                    value: 'json',
                },
                {
                    label: 'XML',
                    value: 'xml',
                }
            ],
            radio: '',
            // 遮罩层
            loading: false,
            dialogVisible: false,
            // 是否显示弹出层
            open: false,

            val: {},
            infoList: {},
            // 二维码对象
            qrcode: null,

            keys: {},
        };
    },

    created() {
        this.getList()
        this.init();
    },
    methods: {
        // 表单重置
        reset() {
            this.form = {};
            this.resetForm("form");
        },
        cancel() {
            this.open = false;
            this.showCode = false;
        },
        // 查看二维码
        getCode() {
            this.open = true
            this.showCode = true;
            this.$nextTick(function () {
                new QRCode(this.$refs.qrCodeDiv, {
                    text: this.form.resp,
                    width: 200,
                    height: 200,
                    colorDark: "#333333", //二维码颜色
                    colorLight: "#ffffff", //二维码背景色
                    correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
                })

            })

        },
        // 代扣支付
        payCode() {
            if (!this.form.req_data) {
                this.$message.error('请先获取签名');
                return;
            }
            let form = {
                reqData: this.form.req_data,
                mediaType: this.form.mediaType,
            }

            payTest
                .payCode(form)
                .then((response) => {
                    this.resMsg = response.msg
                    let s = JSON.parse(response.msg)
                    this.form.resp = s.codeImgUrl
                });


        },
        //代扣支付签名
        handleSay() {
            this.form.payKey=this.keys[this.form.spid]
            payTest
                .paySign(this.form)
                .then((response) => {
                    this.form.req_data = response.msg
                });

        },
        init() {
            common_api.getAllPayTestStore().then((response) => {
                this.allstore = response.data
                for (var i = 0; i < this.allstore.length; i++) {
                    this.keys[this.allstore[i].storeNo] = this.allstore[i].storeKey
                }
            });
            common_api.payTypeAll().then((response) => {
                this.sortLevType = response.data
                this.form.payType = this.sortLevType[0].payType
                this.form.mediaType = 'json'
            });
        },
        back() {
            this.$router.go(-1)
        },
        // 获取商户配置
        getList() {
            this.loading = true;
            payTest
                .paytest()
                .then((response) => {
                    // response.data.storeNo  response.data.storeKey C1553225808762 127c01e48c11412aadb453cef8fac426
                    this.form.spid = response.data.storeNo
                    this.form.payKey = response.data.storeKey
                    this.loading = false
                });
        },
        /** 提交按钮 */
        // savePayConfig() {
        //     if (!this.infoList.googleCode) {
        //         this.$message.error("请填写谷歌动态验证码");
        //         return;
        //     }
        //     this.loading = true
        //     this.infoList.storeId = this.val;
        //     this.infoList.id = this.infoList.id < 1 ? null : this.infoList.id;
        //     payAgentUser
        //         .updateStoreConfig(this.infoList)
        //         .then((response) => {

        //             this.msgSuccess("编辑成功");
        //             this.getList(this.val)
        //             this.loading = false;
        //         })
        //         .catch((err) => {
        //             this.loading = false;
        //         });
        // },

    },
};
</script>
    
<style scoped lang="scss">
.dialog-footer {
    margin-left: 130px;
}

.bg {
    padding: 0 0px 30px 0px !important;
}

.bottom {
    padding: 30px
}

.top {
    background: #F2F2F2;
    color: #006EFF;
    font-size: 18px;
    padding: 20px;
}
</style>
    
<style></style>
    