<template>
    <div class="app-container">
        <el-card style="background-color: #5298f8; width: 99%; margin: 0 auto">
            <div class="boxmain">
                <div class="" style="width: 170px; line-height: 38px; color: white">
                    <span class="ksmzjzzzbs">姓名:</span>
                    <span style="margin-left: 10px"> {{ price_data.patient.name }}</span>
                </div>
                <div class="" style="width: 250px; line-height: 38px; color: white">
                    <span class="ksmzjzzzbs">挂号类型:</span>
                    <span style="margin-left: 10px"> {{ price_data.item_name }}</span>
                </div>
                <div style="width: 200px; line-height: 38px; margin-left: 20px; color: white">
                    <span class="ksmzjzzzbs">总价格:</span>
                    <span style="margin-left: 10px">{{ price_data.amount }}</span>
                </div>
                <div style="width: 200px; line-height: 38px; color: white">
                    <span class="ksmzjzzzbs">状态:</span>
                    <span style="margin-left: 10px">{{ price_data.status.name }}</span>
                </div>
                <div class="btslist" style="width: 150px">
                    <el-button @click="Withdrawal()" style="color: #3d7ff5; width: 97px; font-size: 17px; font-weight: 600" round>退号</el-button>
                </div>
            </div>
        </el-card>
        <div class="medadmin">
            <div class="medbox">
                <span>门诊挂号撤销相关注意事项</span>
            </div>
            <div class="bottombox">
                <div style="margin-bottom: 12px" v-for="item in arrite" :key="item">
                    <div class="bottombox_text"><span>1.显示标题</span></div>
                    <div class="bottombox_text2"><span>显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容</span></div>
                </div>
            </div>
        </div>
        <div></div>
        <el-dialog title="标题" :visible.sync="sprice_show" width="660px" top="20vh !important" class="tanchaung">
            <div slot="title" class="dialog-title">
                <div style="display: flex">
                    <div>
                        <span>姓名：</span>
                        <span>{{ price_data.patient.name }}</span>
                    </div>
                    <div style="margin-left: 20px">
                        <span>号别：</span>
                        <span>{{ price_data.item_name }}</span>
                    </div>
                </div>
            </div>
            <div class="tabin">
                <el-form ref="form" :model="price_data">
                    <div style="display: flex; justify-content: space-between">
                        <el-form-item label="姓名" label-width="100px">
                            <el-input v-model="price_data.patient.name" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="项目名称" label-width="100px">
                            <el-input v-model="price_data.item_name" readonly></el-input>
                        </el-form-item>
                    </div>
                    <div style="display: flex; justify-content: space-between">
                        <el-form-item label="总金额" label-width="100px">
                            <el-input v-model="price_data.amount" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="个帐支付" label-width="100px">
                            <el-input v-model="price_data.personal_account_pay" readonly></el-input>
                        </el-form-item>
                    </div>
                    <div style="display: flex; justify-content: space-between">
                        <el-form-item label="就诊卡支付" label-width="100px">
                            <el-input v-model="price_data.hospital_account_pay" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="时间" label-width="100px">
                            <el-input v-model="price_data.created_at" readonly></el-input>
                        </el-form-item>
                    </div>
                    <div style="display: flex; justify-content: space-between">
                        <el-form-item label="结算号" label-width="100px">
                            <el-input v-model="price_data.jshid" readonly></el-input>
                        </el-form-item>
                        <!-- <el-form-item label="应收合计" label-width="100px">
                            <el-input v-model="price_data" readonly></el-input>
                        </el-form-item> -->
                    </div>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="sprice_show = false">取 消</el-button>
                <el-button type="primary" @click="sure_ghf">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="标题" :visible.sync="tui_show" width="660px" top="20vh !important" class="tanchaung">
            <div slot="title" class="dialog-title">
                <div style="display: flex">
                    <div>
                        <span>姓名：</span>
                        <span>{{ price_data.patient.name }}</span>
                    </div>
                    <div style="margin-left: 20px">
                        <span>号别：</span>
                        <span>{{ price_data.item_name }}</span>
                    </div>
                </div>
            </div>
            <div style="display: flex; justify-content: center" v-if="tuidata.success">
                <div style="line-height: 80px"><i class="el-icon-success icon"></i></div>
                <div class="succ_text"><span>退费成功</span></div>
            </div>
            <div style="display: flex; justify-content: center" v-if="!tuidata.success">
                <div style="line-height: 80px"><i class="el-icon-warning icon2"></i></div>
                <div class="succ_text"><span>当前退费存在问题</span></div>
            </div>
            <div class="tabin">
                <el-form ref="form" :model="price_data">
                    <div>
                        <el-form-item label="医保结算" label-width="100px">
                            <el-input v-model="nodata" v-if="tuidata.status.settle == null" class="no_input"> </el-input>
                            <el-input v-model="suc" readonly v-if="tuidata.status.settle != null && tuidata.status.settle.success" class="succ_input"></el-input>
                            <el-input v-model="tuidata.status.settle.msg" v-if="tuidata.status.settle != null && !tuidata.status.settle.success" readonly class="err_input"></el-input>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="共济或个账" label-width="100px">
                            <el-input v-model="nodata" v-if="tuidata.status.offsite == null" class="no_input"> </el-input>
                            <el-input v-model="suc" readonly v-if="tuidata.status.offsite != null && tuidata.status.offsite.success" class="succ_input"></el-input>
                            <el-input v-model="tuidata.status.offsite.msg" v-if="tuidata.status.offsite != null && !tuidata.status.offsite.success" readonly class="err_input"></el-input>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="东营市个账" label-width="100px">
                            <el-input v-model="nodata" v-if="tuidata.status.ewm == null" class="no_input"> </el-input>
                            <el-input v-model="suc" readonly v-if="tuidata.status.ewm != null && tuidata.status.ewm.success" class="succ_input"></el-input>
                            <el-input v-model="tuidata.status.ewm.msg" v-if="tuidata.status.ewm != null && !tuidata.status.ewm.success" readonly class="err_input"></el-input>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="分诊台通知" label-width="100px">
                            <el-input v-model="suc" readonly v-if="tuidata.status.triage != null && tuidata.status.triage.success" class="succ_input"></el-input>
                            <el-input v-model="tuidata.status.triage.msg" v-if="tuidata.status.triage != null && !tuidata.status.triage.success" readonly class="err_input"> </el-input>
                            <el-input v-model="nodata" v-if="tuidata.status.triage == null" class="no_input"> </el-input>
                        </el-form-item>
                        <!-- <el-form-item label="应收合计" label-width="100px">
                            <el-input v-model="price_data" readonly></el-input>
                        </el-form-item> -->
                    </div>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="sprice_show = false">取 消</el-button> -->
                <el-button type="primary" @click="tuitrue">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="选择卡类型" :visible.sync="uploadfeeshow">
            <img :src="logo" style="display: block; margin: -50px auto 0px" alt="logo" />
            <el-form :model="cheyibaoinfo" :inline="true" @submit.native.prevent>
                <div style="text-align: center">
                    <el-form-item label="卡类型">
                        <el-radio-group v-model="cheyibaoinfo.cardtype">
                            <el-radio label="01">电子医保凭证</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
                <div style="text-align: center"></div>
                <div style="text-align: center">
                    <el-input
                        v-if="cheyibaoinfo.cardtype == '01'"
                        v-model="adminpingzhengma"
                        type="text"
                        placeholder="请输入患者卡号"
                        @keyup.enter.native="feesure('1')"
                        ref="input1"
                        style="width: 300px"
                    ></el-input>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer"></div>
        </el-dialog>
        <!-- <Readcards :isOpenCarded="carddialogFormVisible" @getyibaoinfo="getyibaoinfo" @closeReadcard="closeReadcard" /> -->
    </div>
</template>
<script>
import Readcards from '@/components/Readcards'
import { registration_detil, registration_delete, mzcs } from '@/api/mz'
export default {
    components: {
        // Readcards,
    },
    name: 'Outpatient',
    data() {
        return {
            tui_show: false,
            form: {},
            arrite: [1, 2, 3, 4, 5, 6, 7, 8],
            sprice_show: false,
            suc: '成功',
            nodata: '无需操作',
            tuidata: {
                success: true,
                status: {
                    settle: {
                        success: true,
                        msg: '',
                    },
                    offsite: {
                        success: true,
                        msg: '',
                    },
                    ewm: {
                        success: false,
                        msg: '显示失败原因，显示失败原因',
                    },
                    triage: null,
                },
            },
            price_data: {
                patient: {
                    name: '',
                },
                status: {
                    name: '',
                },
                amount: '',
                item_name: '',
                personal_account_pay: '',
                hospital_account_pay: '',
                created_at: '',
                jshid: '',
            },
            cxjsshow: false,
            uploadfeeshow: false,
            jshid: '',
            mislist: '',
            adminpingzhengma: '',
            input: '',
            tempsrc: require('@/assets/images/暂无记录.png'),
            logo: require('@/assets/logo/CardReader.gif'),
            cheyibaoinfo: {
                sfzhm: '',
                idcard: '',
                cardtype: '01',
                cardno: '',
                channel: 'local',
            },

            carddialogFormVisible: false,

            tableData: {
                cost: [],
                costs: [],
                patient: { p_xm: '', id: '' },
            },
            typeList: [],
            orders: [],
            settlement: {},
            patientinfors: { channel: '' },
            param: {},
        }
    },
    mounted() {
        // this.socketInit()
    },
    created() {
        this.ceshi()
        this.getHisPatientInfo()
        if (!window.WebSocket) {
            alert('该版本浏览器不支持WebSocket')
        } else {
            console.log('支持websocket')
        }
    },
    methods: {
        tuitrue() {
            this.tui_show = false
            this.getHisPatientInfo()
        },
        re_tui() {
            //医保二维码退款
            if (this.price_data.is_ewm == true) {
                this.uploadfeeshow = true
            }
            //mis社保卡退款
            else if (this.price_data.is_mis == true) {
                this.socialfUNCTION()
            }
            //银行卡、微信、支付宝、现金退款
            else {
                this.sure_ghf()
            }
        },
        //退社保卡方法
        socialfUNCTION() {
            mzcs({
                jshid: this.jshid,
                patient_id: this.patientinfors.his_patient_id,
            })
                .then(response => {
                    this.$message({
                        message: '退费成功',
                        type: 'success',
                    })
                    if (this.mislist.bank_card_no != null) {
                        const _this = this
                        let x =
                            'Trans&15|00|' +
                            _this.mislist.amount +
                            '|' +
                            this.mislist.bank_card_no +
                            '|' +
                            _this.mislist.mis_rs_no +
                            '||' +
                            _this.mislist.trade_time +
                            '|{"patientInfo":{"patientId":"' +
                            _this.mislist.patient_id +
                            '","patientName":"' +
                            _this.mislist.patient_name +
                            '","cardNo":"' +
                            _this.mislist.bank_card_no +
                            '","accountType":"01","visitId":"","ywlx":"REFUND","transType":"social","cardType":"01","source":"窗口门诊撤销结算社保卡退费","operatorId":"' +
                            localStorage.getItem('userbh') +
                            '","operatorName":"' +
                            localStorage.getItem('usernames') +
                            '","orderId":"' +
                            _this.mislist.mis_no +
                            '"}}'
                        this.fullscreenLoading = true
                        setTimeout(() => {
                            this.fullscreenLoading = false
                        }, 2000)
                        var wsImpl = window.WebSocket || window.MozWebSocket
                        _this.ws = new wsImpl('ws://127.0.0.1:50000/')
                        _this.ws.onopen = function () {
                            _this.ws.send(x)
                        }
                        _this.ws.onmessage = this.setOnmessageMessage
                        _this.ws.onclose = function () {}
                    }
                    this.uploadfeeshow = false
                })
                .finally(() => {
                    this.cxjsshow = false
                    this.loadingsss = false
                    this.uploadfeeshow = false
                })
        },
        //医保卡回调方法
        setOnmessageMessage(evt) {
            const ret = JSON.parse(evt.data)
            if (ret && ret.TrandeCode == '00') {
                this.ckh = ret.TradeRef
                mis_refund({
                    mis_no: this.mislist.mis_no,
                    mis_rs_no: ret.TradeRef,
                    amount: this.mislist.amount,
                    refund_status: '1',
                })
                    .then(response => {
                        this.loadingsss = false
                        this.$message({
                            message: response.message,
                            type: 'success',
                        })
                        this.getHisPatientInfo()
                    })
                    .finally(() => {
                        this.loadingsss = false
                        this.$message({
                            message: response.message,
                            type: 'error',
                        })
                        this.getHisPatientInfo()
                    })
            } else {
                this.$message({
                    message: 'MIS退款失败',
                    type: 'error',
                })
                mis_refund({
                    mis_no: this.mislist.mis_no,
                    mis_rs_no: ret.TradeRef,
                    amount: this.mislist.amount,
                    refund_status: '0',
                })
                    .then(response => {
                        this.loadingsss = false
                    })
                    .finally(() => {
                        this.loadingsss = false
                    })
            }
        },
        Withdrawal() {
            this.sprice_show = true
        },

        sure_ghf() {
            registration_delete({
                jshid: this.jshid, //身份证号、社保卡号
            })
                .then(response => {
                    if (response.code == 200) {
                        this.tuidata = response.data
                        this.tui_show = true
                        this.$message({
                            message: '撤销成功！',
                            type: 'success',
                        })
                    }
                })
                .finally(() => {})
        },
        //查询数据
        getHisPatientInfo() {
            // this.price_data=''
            console.log(location.search.slice(1), 'kkkkkkkkkkkkkkkk')
            if (location.search.slice(1) != '') {
                if (location.search.slice(1).split('=').length == 4 || location.search.slice(1).split('=').length == 3) {
                    this.jshid = location.search.slice(1).split('&')[0]
                    this.jshid = this.jshid.split('=')[1]
                } else {
                    this.jshid = location.search.slice(1)
                }
            }
            console.log(this.jshid, '****************')
            registration_detil({
                jshid: this.jshid, //身份证号、社保卡号
            })
                .then(response => {
                    this.price_data = response.data
                })
                .finally(() => {})
        },
        ceshi() {
            this.out_patient = {}
            var urlParams = new URLSearchParams(window.location.search)
            var encodedObject = urlParams.get('a')
            var decodedObject = JSON.parse(decodeURIComponent(encodedObject))
            console.log(decodedObject, 'ppppppppppppppppppppp')
            this.out_patient = decodedObject
        },

        // 关闭设备
        closedevice() {
            this.wj.send('{ "MethodName": "CloseDevice" }')
        },
    },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.tanchaung {
    ::v-deep .el-dialog__body {
        padding: 12px !important;
        background: #f2f2f2;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
    }
}
.bottombox_text2 {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-top: 10px;
}
.bottombox_text {
    font-size: 16px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
}
.bottombox {
    background-color: white;
    padding: 10px;
    height: calc(100vh - 213px);
    overflow-y: auto;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
}
.medadmin {
    padding: 5px;
}
.tabin {
    padding: 12px;
    background: #ffffff;
    border-radius: 3px 3px 3px 3px;
    opacity: 1;
    ::v-deep.el-form-item {
        margin-bottom: 5px;
    }
}
.medbox {
    font-size: 18px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    padding: 12px;
    height: 49px;
    background: #e3f2ff;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #e0e0e0;
}

::v-deep .el-dialog__body {
    padding: 0px 20px !important;
}

.selectinput {
    ::v-deep.el-input--medium .el-input__inner {
        height: 30px;
        margin-top: 5px;
        line-height: 30px;
        width: 150px;
    }
}
.tablast {
    padding: 12px;
    height: 202px;
    background: #f2f2f2;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
}
.boxmain {
    display: flex;
    justify-content: flex-start;
}
.app-container {
    background: #f3f3f3;
}

.maxbox {
    background-color: white;
    padding: 12px;
}

.jstitle {
    display: flex;
    justify-content: space-between;
    height: 30px;
}
.jstitle ::v-deep .el-form-item {
    border: 1px #bdbdbd solid;
}
.succ_text {
    font-size: 26px;
    font-weight: bold;
    color: black;
    text-align: center;
    // margin: 29px 0px;
    margin-top: 10px;
}
.icon {
    color: #2ba471;
    font-size: 45px;
}
.icon2 {
    color: #eb5757;
    font-size: 45px;
}
.succ_input {
    ::v-deep .el-input__inner {
        color: #2ba471;
    }
}

.no_input {
    ::v-deep .el-input__inner {
        color: #adadad;
    }
}
.err_input {
    ::v-deep .el-input__inner {
        color: #eb5757;
    }
}
</style>
