<template>
    <div class="app-container" v-loading="allLoading">
        <el-card class="userInfo_box">
            <div class="boxmain">
                <div class="boxmain">
                    <div class="btslist">
                        <el-button @click="cardtype('1')" style="color: #3d7ff5; width: 97px; font-size: 17px; font-weight: 600; border-radius: 8px">读卡</el-button>
                    </div>
                
                 
                </div>
               
            </div>
        </el-card>
       
    <div style='margin: 0 auto;width: 50%;
    border-radius: 50px;
   padding: 37px;
    font-size: 27px;
    border: 1px solid rgb(212, 211, 211);
    margin-top: 54px;'>
  <div><span>姓名：</span><span>{{ patientData.name }}</span></div>
  <div><span>年龄：</span><span>{{  patientData.age}}</span></div>
    <div><span>性别：</span><span>{{  patientData.sex}}</span></div>
      <div><span>人群类别：</span><span>{{  patientData.rqlb}}</span></div>
  <div><span>身份证号：</span><span>{{ patientData.id_card }}</span></div>
  <div><span>患者ID：</span><span>{{ patientData.patient_id }}</span></div>
  <div><span>电话号码：</span><span>{{  patientData.phone}}</span></div>
  <div><span>院内余额：</span><span>{{ patientData.balance }}元</span></div>
  <div><span>医保卡余额：</span><span>{{  patientData.zhye}}元</span></div>
</div>
      
  

        <!-- 读卡弹窗 -->
        <Readcards :isOpenCarded="carddialogFormVisible" @getyibaoinfo="getyibaoinfo" @closeReadcard="closeReadcard" />

    
      
    </div>
</template>
<script>
import { mzxxs, mztk, mzcs, mis_refund, refundList, selfFundedSettle } from '@/api/mz'
import { patient,hisybbalance } from '@/api/jiesuan'
import Readcards from '@/components/Readcards'
import SelectCard from '@/components/SelectCard'
export default {
    name: 'Outpatient',
    components: {
        Readcards,
        SelectCard,
    },
    data() {
        return {
            patientData: '',
            tempsrc: require('@/assets/images/暂无记录.png'),
            logo: require('@/assets/logo/CardReader.gif'),
       
            bxxxinfo: {
                zhye: '',
            },
          
            uploadfeeshow: false,
            patientInfo: {
                channel: '',
                yblx: '',
                name: '',
                patient_id: '',
                id: '',
                sign: [],
            },
       
          
            refoundStateVisible: false,
            carddialogFormVisible: false, // 读卡弹窗是否显示
         
            yibaoshowNew: false,
            allLoading: false,
            feeLoading: false,
        }
    },
    mounted() {},
    created() {
        var that = this

        if (!window.WebSocket) {
            alert('该版本浏览器不支持WebSocket')
        } else {
            console.log('支持websocket')
        }

     
    },
    methods: {
         cardtype() {
            this.carddialogFormVisible = true
             this.patientData ={}
        },
        //首次进页面第一次刷卡返回的信息
    getyibaoinfo(e, x) {

        this.carddialogFormVisible = false
          hisybbalance({
               // card_no: e.physicalCard,
                card_type:e.ksbm?'SOCIAL_CARD':e.physicalCardType,
                p_ewm:x?.value,
                p_shbzhm:e.sfzh,
                p_kh:e.kh,
                p_xm:e.xm,
                p_sbm:e.ksbm
            })
                .then(response => {
                    console.log('🚀 ~ getyibaoinfo ~ response:', response)

                    this.patientData = response.data
           
                 
                })
                .catch((e) => {
                  this.$message({
                      message: e.message,
                      type: 'error',
                  })
                })
                .finally(() => {})
        },
        getpdxx(e) {
            pdxx({
                id: e.med_id,
            })
                .then(response => {
                    this.tableData.patient.p_xm = response.data.name
                    this.tableData.patient.id = response.data.patientId
                    this.tableData.patient.idCard = response.data.idCard
                    this.patientCard = response.data
                    this.ybewmsfid = response.data.idCard
                    this.getWaiting()

                    // this.tableData = response.data
                })
                .finally(() => {})
        },
 
        //刷卡界面关闭
        closeReadcard() {
            this.carddialogFormVisible = false
        },

   
    },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.textcolorred{
    color: red;
}
.textcolorblack{
    color: black;
}
::v-deep .el-table__body-wrapper {
    height: calc(100vh - 215px);
    overflow-y: auto;
}

.abc {
    .el-form-item--mini.el-form-item {
        margin-bottom: 10px;
    }

    padding-bottom: 5px;
}

.safsac {
    .el-input__inner {
        border: 1px solid #1890ff !important;
    }
}

.asdn {
    padding: 0px 15px 15px;
    font-size: 14px;
    color: #666666;
}

.contnssddf {
    height: 500px;
    width: 96%;
    margin-left: 4%;
    background: #eef5fd;
    position: relative;

    .sds {
        display: flex;
        flex-wrap: wrap;

        .contnssddf-item {
            width: 50%;
            padding-left: 20px;
            padding-top: 12px;
            // padding:4px  16px;
            color: #999999;
            font-size: 14px;
        }
    }

    .fapiao {
        position: absolute;
        bottom: 20px;
        left: 20px;
        right: 0;
        color: #18518b;
        font-size: 14px;
    }
}

.titles {
    padding-left: 10px;
}

.titles::before {
    content: '';
    display: block;
    position: absolute;
    margin-top: 4px;
    width: 5px;
    height: 15px;
    background: #4991fd;
    border-radius: 10px;
}

.toubu {
    // height: 50px;
    padding: 10px 0;
    display: flex;
    // line-height: 50px;
    color: #666666;
    font-size: 14px;
    padding-left: 20px;

    .toubuitem {
        flex: 1;
        display: flex;
        line-height: 24px;

        // justify-content: space-between;
        .topone_right {
            width: 120px;
            padding-left: 10px;
            border-bottom: 1px solid #666666;
        }
    }

    .jian {
        flex: 0;
        text-align: right;
        padding-right: 20px;
        color: #0a2cd6;
        font-weight: 600;
        font-family: Source Han Sans CN;
        font-size: 16px;
    }
}

.content-right {
    background: white;
    // padding: 10px;
    min-height: calc(100vh - 150px);
    position: relative;

    .content-right-content {
        width: 100%;
        background: #eef5fd;
        height: 610px;

        .toubu {
            // height: 50px;
            padding: 10px 0;
            display: flex;
            // line-height: 50px;
            color: #666666;
            font-size: 14px;
            padding-left: 20px;

            .toubuitem {
                flex: 1;
                display: flex;
                line-height: 24px;

                // justify-content: space-between;
                .topone_right {
                    width: 120px;
                    padding-left: 10px;
                    border-bottom: 1px solid #666666;
                }
            }

            .jian {
                flex: 0;
                text-align: right;
                padding-right: 20px;
                color: #0a2cd6;
                font-weight: 600;
                font-family: Source Han Sans CN;
                font-size: 16px;
            }
        }

        .bidu {
            display: flex;

            div {
                font-size: 14px;
                flex: 1;
                height: 50px;
                line-height: 50px;

                padding-left: 20px;

                span {
                    font-size: 14px;
                    color: #18518b;
                }
            }
        }
    }

    .ksmzjzzzbs {
        color: #666666;
        font-size: 14px;
        padding-right: 5px;
    }

    .xinxi {
        display: flex;
        // margin: 10px 0;
    }

    .btslist {
        width: 50%;
        margin-top: 5px;

        .btns {
            float: left;
            flex: 1;
            // padding: 100px;
            width: 108px;
            height: 30px;
            background: #ffffff;
            border: 1px solid #4991fd;
            border-radius: 4px;
            color: #4991fd;
            line-height: 28px;
            font-size: 14px;
            text-align: center;
            margin: 5px 15px;
            cursor: pointer;
            // margin-right: 10px;
        }

        .btns:hover {
            background-color: #4991fd;
            color: white;
        }
    }

    .sign {
        padding: 10px 0;
    }
}

.content-left {
    background: white;
    // padding: 10px;
    min-height: calc(100vh - 150px);
    position: relative;

    .content-left-type {
        width: 480px;

        .el-radio {
            width: 120px;
            margin: 8px 0;
        }
    }

    .content-left-heji {
        position: absolute;
        // bottom: 20px;
        left: 20px;
        right: 0;
        display: flex;

        .heji {
            width: 100px;
            height: 40px;
            line-height: 38px;
            text-align: center;
            font-size: 14px;
            color: #18518b;
            background: #eef5fd;
        }

        .money {
            width: 160px;
            height: 40px;
            background: #ffffff;
            line-height: 38px;
            border: 1px solid #dddddd;
            border-radius: 2px;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #000000;
            text-align: right;
            padding-right: 10px;
        }
    }
}

.content-left-heji {
    position: absolute;
    // bottom: 20px;
    left: 20px;
    right: 0;
    display: flex;

    .heji {
        width: 100px;
        height: 40px;
        line-height: 38px;
        text-align: center;
        font-size: 14px;
        color: #18518b;
        background: #eef5fd;
    }

    .money {
        width: 160px;
        height: 40px;
        background: #ffffff;
        line-height: 38px;
        border: 1px solid #dddddd;
        border-radius: 2px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #000000;
        text-align: right;
        padding-right: 10px;
    }
}

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

.edit-person {
    .el-form-item--medium {
        ::v-deep.el-form-item__content {
            line-height: 30px;
        }

        ::v-deep.el-input--medium .el-input__inner {
            height: 20px;
            line-height: 30px;
        }
    }
}

.selectinput {
    ::v-deep.el-input--medium .el-input__inner {
        height: 30px;
        margin-top: 5px;
        line-height: 30px;
        width: 150px;
    }
}

.boxmain {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-container {
}

::v-deep .el-card__body {
    padding: 10px;
}

::v-deep .fullbox {
    background-color: #f2f8ff;
}

::v-deep.el-dialog:not(.is-fullscreen) {
    margin-top: 2vh !important;
}

::v-deep .el-divider__text {
    font-weight: 550;
    color: #1890ff;
    font-size: 18px;
    background-color: #f2f8ff;
}

::v-deep .el-divider {
    background-color: #1890ff;
}

::v-deep .el-table__empty-block {
    // background-color: #e7f1fd !important
}

::v-deep .el-empty__description {
    display: none;
}

.userInfo_box {
    width: 99%;
    margin: 0 auto;
    background: linear-gradient(180deg, #a9c2ff 0%, #ffffff 100%);
    box-shadow: 0px 3px 4.7px 0px #004aff26;
    border-radius: 4px;

    .userInfo_div {
        margin: 0 20px 0 15px;
        padding-left: 15px;
        border-left: 2px solid #f1f1f1;
        font-size: 16px;
        color: #333333;
        font-weight: 500;

        .userInfo_div_1 {
            display: flex;
            align-items: center;

            .userInfo_name {
                font-size: 18px;
                font-weight: 700;
            }

            .userInfo_sex {
                margin: 0 25px;
            }
        }

        .userInfo_div_2 {
            margin-top: 8px;
        }
    }

    .yibaoInfo_div {
        display: flex;
        flex-direction: column;

        .yibaoInfo_div_1 {
            width: max-content;
            border-radius: 3px;
            border: 1px solid #004aff;
            padding: 3px 5px;
            font-size: 12px;
            color: #004aff;
        }

        .yibaoInfo_div_2 {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-top: 8px;
        }
    }
}

.footer_div {
    width: 100%;
    height: 56px;
    background: #fff;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 40px;

    .footer_total {
        font-size: 20px;
        font-weight: 700;
    }

    .jiesuan_btn {
        width: 80px;
        height: 32px;
        margin-left: 100px;
        font-size: 14px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #004aff;
    }
}

.form_item {
    display: flex;
    margin-right: 20px;

    .label {
        width: 170px;
        color: #333333;
        text-align: center;
    }
}

.box-card {
    background: #fff;
    border-radius: 5px;

    .box_card_title {
        box-sizing: border-box;
        padding: 10px;
        font-size: 16px;
        font-weight: bold;
    }
}
</style>
