<template>
    <!--  支付过程 控制  -->
    <div 
    v-bind="$attrs" 
    v-on="$listeners"
    :style="{ zIndex: payStatus ? 999 : 0 }" 
    class="increase-viewers-pay-status">
        <div v-if="payStatus && !loading" class="increase-viewers-pay-status-info">
            <span style="font-weight: 600;font-size: 20px;">提示</span>
            <span style="padding: 10px 0;">
                {{ tipFun(payStatus) }}
            </span>
            <span v-if="payStatus == 2">需支付{{ rebookForm.payAmount }}元</span>
            <!-- 重新生成订单 1  -->
            <div v-if="payStatus == 1" style="display: flex;">
                <el-button @click="payStatus = null" type="success">修改信息</el-button>
                <el-button @click="orderInfoSubmitFun()" style="margin-left: 20px;" type="primary">重新生成订单</el-button>
            </div>
            <!--  生成订单成功 选择支付方式  -->
            <div>
                <!-- 扫码支付 2 -->
                <el-button v-if="payStatus == 2" @click="vbar_open(orderId)" type="success">扫码支付</el-button>
                <!-- 扫码支付 4 -->
                <el-button v-if="payStatus == 4" @click="vbar_open(orderId)" type="success">重新扫码支付</el-button>
                <!-- 重新支付 3 -->
                <el-button v-if="payStatus == 3" @click="gotoCashPayFun(orderId)" type="success">重新提交入库</el-button>
                <!-- 重新支付 6  7 -->
                <el-button v-if="payStatus == 6 || payStatus == 7" @click="vbar_open(orderId)"
                    type="success">重新连接扫码支付</el-button>

                <!--   现金支付  -->
                <el-button v-if="payStatus == 2" @click="vbar_open(orderId)" type="success">扫码支付</el-button>

                <!--   现金支付  -->
                <el-button v-if="payStatus == 2" @click="vbar_open(orderId)" type="success">扫码支付</el-button>

            </div>

            <!-- 打印 8  -->
            <div v-if="payStatus == 8">
                <el-select v-model="printListId" placeholder="选择打印机">
                    <el-option :label="item.deviceName" :key="item.id" :value="item.id"
                        v-for="(item) in printList"></el-option>
                </el-select>
                <el-button style="margin-left: 15px" @click="print" type="success">打印门票</el-button>
                <el-button style="margin-left: 15px" @click="goTicketingCollections" type="success">跳转取票界面</el-button>
            </div>
            <!-- 支付超时 9  -->
            <div v-if="payStatus == 9">
                <!-- <el-button @click="print" type="danger">取消支付</el-button> -->
                <el-button @click="orderInfoSubmitFun()" type="primary">重新扫码</el-button>
            </div>
            <!-- 订单被关闭 10  -->
            <div v-if="payStatus == 10">
                <!-- <el-button @click="print" type="danger">取消支付</el-button> -->
                <el-button @click="handleClose()" type="primary">关闭</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import { getDateTimeAll } from '@/api/windowTicketSales/rebook'
import {
    orderInfoSubmit,
    gotoMicroPay,
    gotoCashPay,
    gotoCorporatePay,
    gotoBalancePay,
    gotoQuotaPay,
    payQuery,
    selectRegion,
    orderInfoCancel,
    factorAuth,
    selectMarketTeamBySourceApi,
    querySeatListNew,
    querySeatList,
} from '@/api/windowTicketSales/ticketingSales'
import { pageList as getPrintListApi } from "@/api/device/pda";
import { printApi } from '@/api/windowTicketSales/ticketingCollection'
import { rebookApi } from '@/api/windowTicketSales/rebook'
import { countBySeatTyp } from '@/api/ticketMr/InventoryTemplate'
import { pageList as getSeatType } from '@/api/seatTypeMr/seatTypeMr'
import seatBox from '@/components/seatBox/index.vue';
const mathM = require('mathjs')
const https = require('https');
const axios = require('axios');
export default {
    name: "PaymentBox",
    components: { seatBox },
    data() {
        return {
            loading: false,
            rules: {
                performDate: [{ required: true, message: '请选择日期', trigger: ['blur', 'change'] }],
                performTimeId: [{ required: true, message: '请选择场次', trigger: ['blur', 'change'] }]
            },
            // 场次列表
            intervalList: [],
            intervalListLoading: false,
            // 支付相关
            payDialog: false,
            payStatus: null,
            code: '',
            websocketData: null,
            codeTime: null,
            // 成功对话框
            successDialog: false,
            newOrderId: '',
            printList: [],

            configStockNumObj: {},
            countBySeatTypList: [],
            seatTypeListAll: [],

            seatLoading: false,
            seatLoadText: '获取座位中...',
            setList: [],
        }
    },
    created() {
        this.getSeatTypeAllList()
    },
    methods: {
        async initData(row) {
            this.payStatus = null
        },
        /**  取消订单   */
        async orderInfoCancelFun(type) {
            try {
                this.loading = true
                this.loadingText = "取消订单中..."
                orderInfoCancel({
                    orderId: this.orderId
                }).then((res) => {
                    if (res.code == 200) {
                        if (type) { // 关闭弹窗
                            if (this.codeTime) {
                                clearInterval(this.codeTime)
                            }
                            this.orderId = null
                            this.payStatus = null
                            this.$emit('clearDialogVisible')
                            this.rebookDialog = false
                        } else {
                            this.payStatus = 9
                            this.loading = false
                        }

                    } else {

                    }
                }).catch(() => {
                    this.$message.error('订单关闭失败!!!');
                })
            } catch (error) {

            }
        },
        /**  生成订单  */
        async orderInfoSubmitFun() {
            this.loading = true
            try {
                this.orderId = null
                this.loadingText = "生成订单中..."
                let res = await rebookApi({
                    ...this.rebookForm
                })
                if (res.code == 200) {
                    this.orderId = res.data.orderId
                    if (this.ruleForm.paymentType == 2) { // 现金支付
                        this.gotoCashPayFun(this.orderId)
                    } else if (this.ruleForm.paymentType == 3) { // 对公支付
                        this.gotoCorporatePayFun(this.orderId)
                    } else if (this.ruleForm.paymentType == 4) { // 账户余额
                        this.gotoBalancePayFun(this.orderId)
                    } else if (this.ruleForm.paymentType == 5) { // 授信余额
                        this.gotoQuotaPayFun(this.orderId)
                    } else {
                        // 扫码支付
                        this.loading = false
                        this.payStatus = 2
                    }
                } else {
                    this.$message.error('生成订单失败!!!');
                    this.loading = false
                    this.payStatus = 1
                }
            } catch (error) {
                this.$message.error('生成订单失败!!!');
                this.loading = false
                this.payStatus = 1
            }
        },
        /** 调取 订单支付码支付  */
        async gotoMicroPayFun(orderId, code) {
            this.loading = true
            try {
                this.loadingText = "订单支付中..."
                this.payStatus = ''
                let res = await gotoMicroPay({
                    "orderId": orderId, // 订单编号-提交订单返回
                    "authCode": code // 微信扫码支付-支付码
                })
                if (res.code == 200) {
                    this.payTimeNum = 0
                    this.websocketClear()
                    if (this.payTime) {
                        clearInterval(this.payTime)
                    }
                    this.payTime = setInterval(() => {
                        this.payQueryFun(this.orderId)
                    }, 1500)
                } else {
                    this.$message.error('支付失败!!!');
                    this.payStatus = ''
                    this.loading = false
                    this.payStatus = 6
                }
            } catch (error) {
                this.$message.error('支付失败!!!');
                this.loading = false
                this.payStatus = 6
            }
        },
        /**  对公支付  */
        async gotoCorporatePayFun(orderId) {
            this.loading = true
            try {
                this.loadingText = "订单入库中..."
                let res = await gotoCorporatePay({
                    "orderId": orderId, // 订单编号-提交订单返回
                    "payAmount": this.ruleForm.realPrice
                })
                if (res.code == 200) {
                    if (this.payTime) {
                        clearInterval(this.payTime)
                    }
                    this.payTimeNum = 0
                    this.payTime = setInterval(() => {
                        this.payQueryFun(this.orderId)
                    }, 1000)
                } else {
                    this.$message.error('订单入库中失败!!!');
                    this.loading = false
                    this.payStatus = 3
                }
            } catch (error) {
                this.$message.error('订单入库中失败!!!');
                this.loading = false
                this.payStatus = 3
            }
        },
        /**  授信额度支付  */
        async gotoQuotaPayFun(orderId) {
            this.loading = true
            try {
                this.loadingText = "订单入库中..."
                let res = await gotoQuotaPay({
                    "orderId": orderId, // 订单编号-提交订单返回
                })
                if (res.code == 200) {
                    if (this.payTime) {
                        clearInterval(this.payTime)
                    }
                    this.payTimeNum = 0
                    this.payTime = setInterval(() => {
                        this.payQueryFun(this.orderId)
                    }, 1000)
                } else {
                    this.$message.error('订单入库中失败!!!');
                    this.loading = false
                    this.payStatus = 3
                }
            } catch (error) {
                this.$message.error('订单入库中失败!!!');
                this.loading = false
                this.payStatus = 3
            }
        },
        /**  余额支付  */
        async gotoBalancePayFun(orderId) {
            this.loading = true
            try {
                this.loadingText = "订单入库中..."
                let res = await gotoBalancePay({
                    "orderId": orderId, // 订单编号-提交订单返回
                })
                if (res.code == 200) {
                    if (this.payTime) {
                        clearInterval(this.payTime)
                    }
                    this.payTimeNum = 0
                    this.payTime = setInterval(() => {
                        this.payQueryFun(this.orderId)
                    }, 1000)
                } else {
                    this.$message.error('订单入库中失败!!!');
                    this.loading = false
                    this.payStatus = 3
                }
            } catch (error) {
                this.$message.error('订单入库中失败!!!');
                this.loading = false
                this.payStatus = 3
            }
        },
        /**  订单现金支付  */
        async gotoCashPayFun(orderId) {
            this.loading = true
            try {
                this.loadingText = "订单入库中..."
                let res = await gotoCashPay({
                    "orderId": orderId, // 订单编号-提交订单返回
                    "payAmount": this.ruleForm.realPrice
                })
                if (res.code == 200) {
                    if (this.payTime) {
                        clearInterval(this.payTime)
                    }
                    this.payTimeNum = 0
                    this.payTime = setInterval(() => {
                        this.payQueryFun(this.orderId)
                    }, 1000)
                } else {
                    this.$message.error('订单入库中失败!!!');
                    this.loading = false
                    this.payStatus = 3
                }
            } catch (error) {
                this.$message.error('订单入库中失败!!!');
                this.loading = false
                this.payStatus = 3
            }
        },
        // 跳转取票界面
        goTicketingCollections() {
            this.$router.push({
                path: "/windowTicketSales/ticketingCollections",
                query: {
                    orderId: this.orderId
                }
            })
        },
        /**  查看支付 状态  */
        async payQueryFun(orderId) {
            this.loading = true
            try {
                this.payTimeNum = this.payTimeNum + 1
                if (this.payTimeNum == 15) {
                    if (this.payTime) {
                        clearInterval(this.payTime)
                    }
                    this.orderInfoCancelFun()
                    return
                }
                if (this.ruleForm.paymentType == 2) {
                    this.loadingText = "订单入库中..."
                } else {
                    this.loadingText = "订单支付中..."
                }
                this.payStatus = ''
                let res = await payQuery({
                    orderId: orderId
                })
                if (res.code == 200) {
                    if (res.data) {
                        if (res.data.payStatus == 0) {
                            if (this.payTime) {
                                clearInterval(this.payTime)
                            }
                            if (this.ruleForm.paymentType == 2) {
                                this.$message.error('"订单入库中失败"');
                                this.loading = false
                                this.payStatus = 3
                            } else {
                                if (res.data.orderStatus == 9 || res.data.orderStatus == 4 || res.data.orderStatus == 5) {
                                    this.$message.error('订单已关闭，请重新选择座位，再购买!!!');
                                    this.loading = false
                                    this.payStatus = 10
                                } else {
                                    this.$message.error('用户未支付!!!');
                                    this.loading = false
                                    this.payStatus = 7
                                }
                            }

                        } else if (res.data.payStatus == 1) {
                            if (this.payTime) {
                                clearInterval(this.payTime)
                            }
                            if (this.ruleForm.paymentType == 2) {
                                this.$message({
                                    message: '订单入库成功',
                                    type: 'success'
                                });
                                this.loading = false
                                // this.payStatus = 8
                                // this.getPrintListApi()
                                this.goTicketingCollections()

                            } else {
                                this.$message({
                                    message: '用户已支付成功,请打印门票',
                                    type: 'success'
                                });
                                // 开始 打印
                                this.loading = false
                                // this.payStatus = 8
                                // this.getPrintListApi()
                                this.goTicketingCollections()
                            }


                        } else if (res.data.payStatus == 2) {

                        } else if (res.data.payStatus == 3) {
                            if (this.payTime) {
                                clearInterval(this.payTime)
                            }
                            if (this.ruleForm.paymentType == 2) {
                                this.$message.error('"订单入库中失败"');
                                this.loading = false
                                this.payStatus = 3
                            } else {
                                if (res.data.orderStatus == 9 || res.data.orderStatus == 4 || res.data.orderStatus == 5) {
                                    this.$message.error('订单已关闭，请重新选择座位，再购买!!!');
                                    this.loading = false
                                    this.payStatus = 10
                                } else {
                                    this.$message.error('用户支付失败!!!');
                                    this.loading = false
                                    this.payStatus = 7
                                }
                            }
                        } else if (res.data.payStatus == 4) {
                            if (this.payTime) {
                                clearInterval(this.payTime)
                            }

                            if (this.ruleForm.paymentType == 2) {
                                this.$message.error('"订单入库中失败"');
                                this.loading = false
                                this.payStatus = 3
                            } else {
                                if (res.data.orderStatus == 9 || res.data.orderStatus == 4 || res.data.orderStatus == 5) {
                                    this.$message.error('订单已关闭，请重新选择座位，再购买!!!');
                                    this.loading = false
                                    this.payStatus = 10
                                } else {
                                    this.$message.error('支付退款!!!');
                                    this.loading = false
                                    this.payStatus = 7
                                }
                            }

                        }
                    }

                } else {
                    this.$message.error('支付失败!!!');
                    this.loading = false
                    this.payStatus = 7
                }

            } catch (error) {
                this.$message.error('支付失败!!!');
                this.loading = false
                this.payStatus = 7
            }
        },

        /**  连接VBarServer  */
        vbar_open() {
            this.loading = true
            this.loadingText = "连接扫码盒子中!!!"
            this.payStatus = null
            this.code = ''
            this.websocketClear()
            this.payStatus = 5 // 连接成功
            document.addEventListener('keydown', this.keydownAdd);
            this.loading = false
        },
        /**  连接结果 */
        websocket_open_state(message) {
            console.log("连接结果 ===== ", message)
            this.codeTime = setInterval(() => {
                console.log("检测是否连接")
                if (this.websocketData.readyState != WebSocket.OPEN) {
                    this.payStatus = 6
                }
            }, 3000)
            //document.getElementById('wsocket').value = "已连接";
        },
        // 拼接字符串
        keydownAdd(e) {
            console.log("e=====", e)
            console.log("this.code=====", this.code)
            if (this.payStatus == 5 && e.key != 'Enter') {
                this.code = this.code + e.key
            }

            if (e.key == 'Enter') {
                document.removeEventListener('keydown', this.keydownAdd);
                let codeCopy = this.code
                this.payStatus == 5.5
                this.code = ''
                this.gotoMicroPayFun(this.orderId, codeCopy)
            }
        },
        //接收扫码完整结果处理
        websocket_decode(code) {
            console.log("orderId=========", this.orderId)
            console.log("code=========", code)
            if (this.orderId && this.payStatus == 5.5 && regex.test(code)) {
                this.payStatus = 5.6 // 支付中
                let codeCopy = code.replace("%%%", "").replace("%%%", "")
                this.gotoMicroPayFun(this.orderId, codeCopy)
            } else if (!code) {
                this.payStatus = 5
                this.code = ''
            }
        },
        /** 关闭通讯 */
        websocketClear() {
            document.removeEventListener('keydown', this.keydownAdd);
        },
        /**  读取身份证 */
        readCert() {
            this.idcardLoading = true
            var result = "";
            try {
                let xmlHttp = new XMLHttpRequest();
                let Protocol = window.location.protocol.split(':')[0];
                //获取当前协议，并且分割字符串，得到http或者https
                if (Protocol === 'https') {
                    //创建请求 第一个参数是代表以post方式发送；第二个是请求端口和地址；第三个表示是否异步
                    xmlHttp.open("POST", "http://127.0.0.1:18889/api/readCert?ReadSN=" + 0, false);	  //readCert读卡，生成正反面仿复印件	
                } else {
                    //创建请求 第一个参数是代表以post方式发送；第二个是请求端口和地址；第三个表示是否异步
                    xmlHttp.open("POST", "http://127.0.0.1:18889/api/readCert?ReadSN=" + 0, false);	  //readCert读卡，生成正反面仿复印件	
                }
                //发送请求
                xmlHttp.send();
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    result = xmlHttp.responseText;
                    xmlHttp.readyState = 1;
                }
            } catch (e) {
                console.error("e====", e)
            }
            let obj = JSON.parse(result)
            if (obj.resultContent && obj.resultContent.certNumber) {
                this.$set(this.tableForm, "idcard", obj.resultContent.certNumber)
                this.$set(this.tableForm, "name", obj.resultContent.partyName)
            } else {
                this.$message.error('读取失败!!!');
            }

            this.idcardLoading = false
            //return result;
            console.log(result, obj)
        },
        /** 查询打印机列表 */
        getPrintListApi() {
            getPrintListApi({
                deviceType: 5, pageNum: 1,
                pageSize: 999,
            })
                .then(response => {
                    this.printList = response.data.rows;
                }).catch((error) => {
                    console.log("error===", error)
                }
                );
        },
        // 打印 
        async print(list = []) {
            if (!this.printListId) {
                this.$message.error('请选择打印机!!');
                return
            }
            this.loading = true
            this.loadingText = '打印中...'
            this.payStatus = ''
            try {
                let res = await printApi({
                    orderId: this.orderId,
                    source: 2,
                    deviceId: this.printListId
                })
                if (res.code == 200) {
                    let url = res.data.linkIp
                    let printInfo = res.data.printInfo
                    this.connectPrint(url, printInfo)
                } else {
                    throw new Error(res)
                }
            } catch (error) {
                this.loading = false
                this.payStatus = 8
                console.error("error=====", error)
            }

        },
        /**  连接打印机  */
        connectPrint(url, data) {
            // 创建忽略 SSL 的 axios 实例
            const ignoreSSL = axios.create({
                httpsAgent: new https.Agent({
                    rejectUnauthorized: false
                }),
                withCredentials: true, // 跨域请求时发送Cookie
                timeout: 60000, // 请求超时
                headers: {
                    "Content-Type": "application/json; charset=UTF-8;"
                }
            });
            ignoreSSL.post(url,
                { ...data }
            ).then(() => {
                this.rebookDialog = false
                this.loading = false
            }).catch(() => {
                this.loading = false
                this.payStatus = 8
                // this.rebookDialog = false
                // this.loading = false
            })
            // 在 axios 请求时，选择性忽略 SSL
            // const agent = new https.Agent({  
            //   rejectUnauthorized: false
            // });
            // axios.post(
            //   url, 
            //   { httpsAgent: agent,...data }
            //   ).then(()=>{
            //   this.rebookDialog = false
            //   this.loading = false
            // })
            // .catch(()=>{
            //   this.rebookDialog = false
            //   this.loading = false
            // })
        },
        /** 获取授信余额和账户余额  */
        async selectMarketTeamBySourceFun(value) {
            console.log("value===", value)
            try {
                if (!['10', '11', '13', '14', '18', '19'].includes(value)) return
                let res = await selectMarketTeamBySourceApi({
                    source: value
                })
                this.balance = res.data.balance
                if (res.data.grantQuota && res.data.grantUsed) {
                    this.grantQuota = res.data.grantQuota - res.data.grantUsed
                } else if (res.data.grantQuota) {
                    this.grantQuota = res.data.grantQuota
                } else {
                    this.grantQuota = 0
                }

            } catch (error) {
                this.balance = null
                this.grantQuota = null
            }
        },

        /**  获取座位  */
        async querySeatListFun(type) {
            try {
                let res = await querySeatListNew({
                    auditoriumId: this.rebookForm.auditoriumId,
                    timeId: this.rebookForm.performTimeId,
                    goodsId: this.rebookForm.goodsId,
                })
                if (res.code == 200) {
                    this.setList = res.data;
                    let list = []
                    let list3 = []
                    this.countBySeatTypList.forEach((item, index) => {
                        list3.push(item.seatTypeId)
                    })
                    let list4 = []
                    this.seatTypeListAll.forEach((item, index) => {
                        if (list3.includes(item.id)) {
                            list4.push({ ...item })
                        }
                    })
                    this.$nextTick(() => {
                        this.$refs.seatBox.querySeatListFun(true, this.setList, list, list4)
                    })
                }

                this.loading = false
            } catch (error) {
                this.loading = false
                console.error("error===", error)
            }
        },
        /** 获取座位类型  */
        async countBySeatTypFun(value) {
            try {
                if (!value) return
                let res = await countBySeatTyp({ auditoriumId: value })
                this.countBySeatTypList = res.data ? res.data : []
                let obj = {}
                this.countBySeatTypList.forEach((item, index) => {
                    obj['seatNum_' + item.seatTypeId] = {
                        stockTotal: item.stock,
                        stockSelect: item.stock,
                        stockYes: item.stock,
                        stockNo: 0,
                        isNoSelect: true,
                    }
                    if (item.seatTypeId == this.rebookForm.seatTypeId) {
                        obj['seatNum_' + item.seatTypeId].stockYes = item.stock - this.rebookForm.touristNum
                        obj['seatNum_' + item.seatTypeId].isNoSelect = false
                    }
                })
                this.configStockNumObj = obj
            } catch (error) {
                console.error("error1====", error)
            }
        },
        /** 获取座位类型 说明 */
        async getSeatTypeAllList() {
            try {
                let res = await getSeatType({
                    pageNum: 1,
                    pageSize: 999,
                })
                if (res.code == 200) {
                    this.seatTypeListAll = res.data.rows || [];
                }
            } catch (error) {

            }
        },
        /** 选择座位  */
        selectSeat(list) {
            let list1 = []
            list.forEach((item) => {
                list1.push({
                    seatId: item.id
                })
            })
            this.rebookForm.seatList = list1
            console.log("已选择的====", list)
        },
        tipFun(payStatus) {
            return  payStatus == 1 ? '生成订单失败!!!' :
                    payStatus == 2 ? '生成订单生成成功,请点击调取扫码盒子' :
                    payStatus == 4 ? '扫码支付失败!!!' :
                    payStatus == 5 ? '请出示付款码!!!' :
                    payStatus == 5.5 ? '扫码成功，支付中...' :
                    payStatus == 5.6 ? '扫码成功，支付中...' :
                    payStatus == 6 ? '连接扫码器失败!!!' :
                    payStatus == 7 ? '用户支付失败或未支付,请重新连接支付!!!' :
                    payStatus == 8 ? '用户支付成功,请点击打印票!!!' :
                    payStatus == 9 ? '支付超时!!!' :
                    payStatus == 10 ? '订单已关闭，请重新选择座位，再购买!!!' :
                    payStatus == 3 ? '现金支付记录入库失败,请重新提交' : '未知状态'
        }
    }
}
</script>
<style lang="scss" scoped>
.rebook1_dialog ::v-deep .el-dialog__body {
    padding: 0 !important;
}

.rebook1_box {
    width: 100%;
    height: 100%;
    padding-bottom: 10px;

    .rebook1_from-box {
        display: flex;
        width: 100%;
        height: 80vh;
        box-sizing: border-box;
        padding: 0 20px 20px;
    }

    .rebook1_from {
        width: 100%;
        height: 100%;
        padding: 0 20px 0 0;
        width: 400px;
        box-sizing: border-box;
    }

    .rebook1_seat {
        width: calc(100% - 400px);
        height: 100%;
    }
}

.increase-viewers-pay-status {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.3);
    top: 0;
    left: 0;

    .increase-viewers-pay-status-info {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
    }
}
</style>