<template>
    <div class="app-container" v-loading="allLoading">
        <el-card class="userInfo_box">
            <div class="boxmain">
                <div class="btslist" v-if="!cardNoShow">
                    <el-button @click="cardtype('1')" style="color: #3d7ff5; width: 80px; font-size: 17px; font-weight: 600; border-radius: 8px">读卡</el-button>
                </div>
                <div class="userInfo_div" v-if="patientData.name">
                    <div class="userInfo_div_1">
                        <div class="userInfo_name">{{ patientData.name || '' }}</div>
                        <div class="userInfo_sex">{{ patientData.sex ? patientData.sex.name : '' }}</div>
                        <div class="userInfo_age">{{ patientData.age }}岁</div>
                        <div class="yibaoInfo_div">
                            <div class="yibaoInfo_div_1">{{ patientData.type ? patientData.type.name : '' }}</div>
                        </div>
                        <div class="yibaoInfo_div_2">就诊卡：{{ patientData.patient_id }}</div>
                        <div class="yibaoInfo_div_2">身份证号：{{ patientData.id_card }}</div>
                    
                       
                    </div>
                </div>
            </div>
        </el-card>
        <div>
      
                <div class="box_card_title"> <div class="box-border"></div>结算处理</div>
                <el-table
                    ref="multipleTable"
                    @selection-change="handleSelectionChange"
                    :data="refundList"
                    tooltip-effect="dark"
                    style="width: 100%; height: calc(100vh - 490px)"
                    :header-cell-style="{ background: '#E7EEFF', color: '#333333' }"
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                >
                    <template slot="empty">
                        <el-empty :image="tempsrc" :image-size="200" description="暂无数据"></el-empty>
                    </template>
                    <el-table-column type="selection" width="55" multiple></el-table-column>
                    <el-table-column prop="operatorName" label="收费人"> </el-table-column>
                    <el-table-column prop="rcptNo" label="收据号码" > </el-table-column>
                    <el-table-column prop="visitDate" label="收费日期" > </el-table-column>
                    <el-table-column prop="totalCosts" align="center" label="总金额" ></el-table-column>
                    <el-table-column prop="settleTypeName" align="center" label="结算类型"></el-table-column>
                    <!-- <el-table-column prop="" align="center" label="电子发票" width="110"> </el-table-column>
                    <el-table-column prop="" align="center" label="冲红票" width="110"> </el-table-column> -->
                </el-table>
        </div>
        <div style="display: flex; justify-content: space-around; margin-top: 10px">
            <div class="box-card">
                <div class="box_card_title"> <div class="box-border"></div>结算处理</div>
                <el-table
                    ref="multipleTable"
                    @selection-change="handleSelectionChange"
                    :data="refundList"
                    tooltip-effect="dark"
                    style="width: 100%; height: calc(100vh - 490px)"
                    :header-cell-style="{ background: '#E7EEFF', color: '#333333' }"
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                >
                    <template slot="empty">
                        <el-empty :image="tempsrc" :image-size="200" description="暂无数据"></el-empty>
                    </template>
                    <el-table-column type="selection" width="55" multiple></el-table-column>
                    <el-table-column prop="operatorName" label="收费人"> </el-table-column>
                    <el-table-column prop="rcptNo" label="收据号码" > </el-table-column>
                    <el-table-column prop="visitDate" label="收费日期" > </el-table-column>
                    <el-table-column prop="totalCosts" align="center" label="总金额" ></el-table-column>
                    <el-table-column prop="settleTypeName" align="center" label="结算类型"></el-table-column>
                    <!-- <el-table-column prop="" align="center" label="电子发票" width="110"> </el-table-column>
                    <el-table-column prop="" align="center" label="冲红票" width="110"> </el-table-column> -->
                </el-table>
            </div>
            <div class="box-card">
                <div class="box_card_title"><div class="box-border"></div>费用明细</div>
                <el-table :data="costlist" tooltip-effect="dark" style="width: 100%; height: calc(100vh - 480px)" v-loading="loading2" element-loading-text="拼命加载中">
                    <template slot="empty">
                        <el-empty :image="tempsrc" :image-size="200" description="暂无数据"></el-empty>
                    </template>
                    <el-table-column prop="itemName" label="项目名称" width="300"> </el-table-column>
                    <el-table-column prop="itemSpec" align="center" label="规格" width="100"> </el-table-column>
                    <el-table-column prop="amount" align="center" label="数量" width="100"> </el-table-column>
                    <el-table-column prop="itemPrice" align="center" label="单价" width="100"> </el-table-column>
                    <el-table-column prop="itemPrice" align="center" label="金额" width="100"> </el-table-column>
                    <el-table-column prop="itemClass" align="center" label="分类"> </el-table-column>
                    <el-table-column prop="performedByDeptName" align="center" label="执行科室" width="100"> </el-table-column>
                    <el-table-column prop="orderedByDoctorName" align="center" label="开单医生" width="100"> </el-table-column>
                    <el-table-column prop="performedByDeptName" align="center" label="开单科室" width="100"> </el-table-column>
                    <el-table-column  align="center" label="状态" width="100"> 
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.cflag == '1'" type="success">已审核</el-tag>
                            <el-tag v-else type="danger">未审核</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="transFlag" align="center" label="发药状态" width="150"> 
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.drugSendFlag == null" type="info">非药品</el-tag>
                            <el-tag v-if="scope.row.drugSendFlag == '0'" type="success">未发药</el-tag>
                            <el-tag v-if="scope.row.drugSendFlag == '1'" type="warning">已发药</el-tag>
                            <el-tag v-if="scope.row.drugSendFlag == '2'" type="danger">已退药</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <!-- <div class="footer_div" style="display: flex; margin-top: 15px">
            <div class="footer_total">
                <span>合计：</span>
                <span>￥{{ total }}</span>
            </div>
            <el-button class="jiesuan_btn" type="primary" @click="jiesuan" style="margin-left: 100px; width: 80px; z-index: 99">撤销结算</el-button>
        </div> -->
        <el-dialog title="选择卡类型" :visible.sync="uploadfeeshow" v-loading="feeLoading">
            <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" />

        <!-- 退费后状态弹窗 -->
        <el-dialog title="退款状态" :visible.sync="refoundStateVisible" width="40%">
            <el-form ref="form" :model="form">
                <el-form-item label="医保退款状态" label-width="210px">
                    <!-- <el-input v-model="blod_data.settle" readonly></el-input> -->
                    <span readonly :class="[blod_data.settle == null || blod_data.settle.success ? 'textcolorblack' : 'textcolorred']">{{ blod_data.settle.msg }}</span>
                </el-form-item>
                <el-form-item label="医保电子凭证个账退款状态" label-width="210px">
                    <!-- <el-input v-model="blod_data.ewm" readonly></el-input> -->
                    <span readonly :class="[blod_data.ewm == null || blod_data.ewm.success ? 'textcolorblack' : 'textcolorred']">{{ blod_data.ewm.msg }}</span>
                </el-form-item>
                <el-form-item label="异地个账或者家庭共济退款状态" label-width="210px">
                    <!-- <el-input v-model="blod_data.offsite" readonly></el-input> -->
                    <span readonly :class="[blod_data.offsite == null || blod_data.offsite.success ? 'textcolorblack' : 'textcolorred']">{{ blod_data.offsite.msg }}</span>
                </el-form-item>
                <el-form-item label="HIS结算退款状态：" label-width="210px">
                    <span readonly :class="[blod_data.notify == null || blod_data.notify.success ? 'textcolorblack' : 'textcolorred']">{{ blod_data.notify.msg }}</span>
                </el-form-item>
                <el-form-item label="MIS结算退款状态：" label-width="210px">
                    <span readonly :class="[blod_data.mis == null || blod_data.mis.success ? 'textcolorblack' : 'textcolorred']">{{ blod_data.mis.msg }}</span>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="refoundStateVisible = false">取 消</el-button>
                <el-button type="primary" @click="refoundStateVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 医保退费读卡弹窗 -->
        <SelectCard :visible="yibaoshowNew"></SelectCard>
    </div>
</template>
<script>
import { mzxxs, mztk, mzcs, mis_refund, refundList, selfFundedSettle } from '@/api/mzSFC'
import { patient } from '@/api/jiesuanSFC'
import Readcards from '@/components/ReadcardsSFC'
import SelectCard from '@/components/SelectCardSFC'
export default {
    name: 'Outpatient',
    components: {
        Readcards,
        SelectCard,
    },
    data() {
        return {
            patientData: '',
            jshid: '',
            cxjsshow: false,
            loadingsss: false,
            mislist: '',
            yibaopz: '',
            jiuzhencard: '',
            adminpingzhengma: '',
            fullscreenLoading: false,
            jiezhi: 'A',
            pingzhengma: '',
            jeizhishow: false,
            input: '',
            tylist: [],
            his_patient: [],
            costlist: [],
            loadingapplyList: false,
            cost_id: [],
            tempsrc: require('@/assets/images/暂无记录.png'),
            logo: require('@/assets/logo/CardReader.gif'),
            loading: false,
            loading2: false,
            yibaoinfo: {
                sfzhm: '',
                idcard: '',
                cardtype: '02',
                cardno: '',
                channel: 'local',
            },
            cheyibaoinfo: {
                sfzhm: '',
                idcard: '',
                cardtype: '01',
                cardno: '',
                channel: 'local',
            },
            bxxxinfo: {
                zhye: '',
            },
            form: {
                zhye: '',
                brxm: '',
                brxb: '',
                ynzhye: '',
                ybzhye: '',
                gjzhye: '',
                jezj: '',
                ydgzzf: '',
                ybfdje: '',
                brfdje: '',
                gzzf: '',
                ynzhzf: '',
                xjzf: '',
            },
            uploadfeeshow: false,
            patientInfo: {
                channel: '',
                yblx: '',
                name: '',
                patient_id: '',
                id: '',
                sign: [],
            },
            total: '0.00',
            tableData2: [],
            tableData: {
                cost: [],
                costs: [],
                patient: { p_xm: '', id: '' },
            },
            activeName: 'first',
            type: '1',
            typeList: [],
            orders: [],
            settlement: {},
            patientinfors: { channel: '' },
            param: {},
            refoundStateVisible: false,
            blod_data: {
                data: null,
                notify: { msg: '' },
                offsite: { msg: '' },
                ewm: { msg: '' },
                settle: { msg: '' },
                mis: { msg: '' },
            },
            carddialogFormVisible: false, // 读卡弹窗是否显示
            only_qq: 0,
            card_typeinfor: '',
            refundList: [], // 退款列表
            selectOneIdCopy: '',
            yibaoshowNew: false,
            selectRows: [],
            allLoading: false,
            feeLoading: false,
        }
    },
    mounted() {},
    created() {
        // if(this.$route.query?.jobNumber){
        //     localStorage.setItem('jobNumber',this.$route.query.jobNumber)
        // }
        var that = this

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

        // setTimeout(function () {
        //     that.changeType()
        // }, 1000)
    },
    methods: {
        cardtype() {
            this.carddialogFormVisible = true
        },
        // 切换卡类型
        // changeType() {
        //     if (this.cheyibaoinfo.cardtype == '01') {
        //         this.$nextTick(() => {
        //             this.$refs.input1.focus()
        //         })
        //     }
        // },
        //查询数据
        getHisPatientInfo() {
            this.tableData.costs = []
            // 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)
            //     }
            // }
            mztk({
                jshid: this.jshid, //身份证号、社保卡号
            })
                .then(response => {
                    // this.costlist = response.data.costs
                    this.settlement = response.data.settlement
                    this.mislist = response.data
                    this.patientinfors = response.data.patient
                    this.tableData.costs.push(response.data)
                    this.tableData.patient.p_xm = response.data.patient.p_xm
                    this.tableData.patient.id = response.data.patient.his_patient_id
                })
                .finally(() => {})
        },
        //医保二维码刷卡方法
        feesure(e) {
            this.feeLoading = true
            this.moneyFUNCTION('1')
        },
        //医保二维码判断方法
        ybewm() {
            //医保二维码刷码：东营市本地+二维码支付+个人账户支付大于零
            if (this.settlement.channel == 'local' && this.settlement.grzhzf * 1 > 0.0 && this.settlement.sfrzfs == 'YBEWM') {
                return true
            }
        },
        //退mis社保卡判断方法
        socialMIS() {
            //mis退款东营市本地+社保卡支付+个人账户支付大于零
            if (this.settlement.channel == 'local' && this.settlement.grzhzf * 1 > 0.0 && this.settlement.sfrzfs == 'SOCIAL_CARD') {
                return true
            }
        },
        //退银行卡，微信，支付宝
        moneyFUNCTION(e) {
            let x = {
                jshid: this.jshid,
                channel: '3',
            }
            if (e) {
                // x.ewm = this.cheyibaoinfo.cardtype
                x.ewm = this.adminpingzhengma
            }
            mzcs(x)
                .then(res => {
                    if (res.data.success) {
                        this.$message({
                            message: '退费成功',
                            type: 'success',
                        })
                    }
                    this.blod_data = {
                        data: res.data,
                        // settle: res.data.status.settle ? res.data.status.settle.msg :  {msg:'等待上一步操作或已撤销',success:true},
                        // ewm: res.data.status.ewm ? res.data.status.ewm.msg :  {msg:'等待上一步操作或已撤销',success:true},
                        // offsite: res.data.status.offsite ? res.data.status.offsite.msg :  {msg:'等待上一步操作或已撤销',success:true},
                        // notify: res.data.status.notify ? res.data.status.notify.msg :  {msg:'等待上一步操作或已撤销',success:true},
                        // mis: res.data.status.mis ? res.data.status.mis.msg : {msg:'等待上一步操作或已撤销',success:true},
                        settle: res.data.status.settle ? { msg: res.data.status.settle.msg, success: false } : { msg: '等待上一步操作或已撤销', success: true },
                        ewm: res.data.status.ewm ? { msg: res.data.status.ewm.msg, success: false } : { msg: '等待上一步操作或已撤销', success: true },
                        offsite: res.data.status.offsite ? { msg: res.data.status.offsite.msg, success: false } : { msg: '等待上一步操作或已撤销', success: true },
                        notify: res.data.status.notify ? { msg: res.data.status.notify.msg, success: false } : { msg: '等待上一步操作或已撤销', success: true },
                        mis: res.data.status.mis ? { msg: res.data.status.mis.msg, success: false } : { msg: '等待上一步操作或已撤销', success: true },
                    }
                    this.refoundStateVisible = true
                    this.uploadfeeshow = false
                    this.getRefundList(this.patientData)
                })
                .finally(() => {
                    this.allLoading = false
                    this.feeLoading = false
                })
        },
        //退社保卡方法
        socialfUNCTION() {
            mzcs({
                channel: '3',
                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
                })
        },
        // 自费退费
        refoundZF() {
            selfFundedSettle({
                channel: '3',
                patient_id: this.patientData.patient_id,
                refundAmount: this.selectRows.totalCosts,
                RcptNo: this.selectRows.rcptNo,
            })
                .then(res => {
                    this.$message({
                        message: '退费成功',
                        type: 'success',
                    })
                    this.blod_data = {
                        settle: res.data.status.settle ? { msg: res.data.status.settle.msg, success: false } : { msg: '等待上一步操作或已撤销', success: true },
                        ewm: res.data.status.ewm ? { msg: res.data.status.ewm.msg, success: false } : { msg: '等待上一步操作或已撤销', success: true },
                        offsite: res.data.status.offsite ? { msg: res.data.status.offsite.msg, success: false } : { msg: '等待上一步操作或已撤销', success: true },
                        notify: res.data.status.notify ? { msg: res.data.status.notify.msg, success: false } : { msg: '等待上一步操作或已撤销', success: true },
                        mis: res.data.status.mis ? { msg: res.data.status.mis.msg, success: false } : { msg: '等待上一步操作或已撤销', success: true },
                    }
                    this.uploadfeeshow = false
                    this.refoundStateVisible = true
                    this.getRefundList(this.patientData)
                })
                .finally(() => {
                    this.allLoading = false
                })
        },
        //撤销结算按钮操作
        jiesuan() {
            this.cxjsshow = true
            // //医保二维码退款
            // if (this.ybewm()) {
            //     this.uploadfeeshow = true
            // }
            // //mis社保卡退款
            // else if (this.socialMIS()) {
            //     this.socialfUNCTION()
            // }
            // //银行卡、微信、支付宝、现金退款
            // else {
            this.$confirm('确定要退款么?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    this.allLoading = true
                    if (this.jshid) {
                        if (this.mislist.need_ewm) {
                            this.uploadfeeshow = true
                            this.allLoading = false
                            return false
                        }
                        // 走医保
                        this.moneyFUNCTION()
                    } else {
                        // 走自费
                        this.refoundZF()
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })
            // }
        },
        //医保卡回调方法
        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
                    })
            }
        },
        // 左侧表格选择方法
        handleSelectionChange(rows) {
            this.only_qq = 0
            if (rows.length == 0) {
                return
            }
            if (rows.length == 1) {
                this.jshid = rows[0].isInsure
                this.selectOneIdCopy = rows[0].rcptNo
                this.costlist = rows[0].settleItems
                this.selectRows = rows[0]

                if (this.jshid) {
                    this.getHisPatientInfo()
                }
                return
            }
            if (rows.length > 1) {
                rows.forEach(item => {
                    if (item.rcptNo != this.selectOneIdCopy) {
                        this.$refs.multipleTable.toggleRowSelection(item, false)
                    }
                })
            }
        },
        //首次进页面第一次刷卡返回的信息
        getyibaoinfo(e, x) {
            this.only_qq = 0
            //第一次读二维码不需要from_web
            this.carddialogFormVisible = false
            patient({
                card_no: e.physicalCard,
                card_type: e.physicalCardType,
            })
                .then(response => {
                    this.patientData = response.data
                    this.loading = true
                    this.getRefundList(this.patientData)
                })
                .catch(() => {
                    this.$message({
                        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(() => {})
        },
        //调取待结算清单
        getWaiting(e) {
            var that = this
            var obj = {
                patient_id: this.cardNo,
                // zfbl: 'auto',
                // rqlb: this.patientCard.rqlb,
                // channel: this.patientCard.channel,
            }
            // if (e) {
            //     obj.refresh = '1'
            // }
            pdxq(obj)
                .then(response => {
                    this.tableData.cost = response.data
                    this.tableDataList = response.data
                    this.tylist = response.data
                    this.tiles(this.tylist)
                    this.setPersonType() //结算类型赋默认值
                })
                .finally(() => {})
        },
        // 结算类型赋默认值
        setPersonType(e) {
            this.personTypeArr.forEach(element => {
                if (element.value == e) {
                    this.personType = e
                }
            })
        },
        //刷卡界面关闭
        closeReadcard() {
            this.carddialogFormVisible = false
        },

        // 获取退款列表（左侧列表）
        getRefundList(e) {
            this.loading = true
            this.costlist = []
            refundList({ patient_id: e.patient_id })
                .then(res => {
                    this.refundList = res.data
                })
                .catch(err => {})
                .finally(() => {
                    this.loading = false
                })
        },
    },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.textcolorred {
    color: red;
}
.textcolorblack {
    color: black;
}
::v-deep .el-table__body-wrapper {
    height: calc(100vh - 520px);
    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 {
        display: flex;
        align-items: center;
       

        .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;
        }
    }
}
.box-border{
    margin-top: 3px;
    margin-right: 10px;
    width: 5px;
    height: 16px;
    background-color: #1890ff;
    border-radius: 5px;
}
.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;
}

.app-container {
}

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

::v-deep .fullbox {
    background-color: #f2f8ff;
}
::v-deep .el-button--medium {
    padding: 5px 10px;
}
::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: #7977ff;
    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;
            color: white;
            .userInfo_name {
                font-size: 18px;
                font-weight: 700;
                color: white;
            }

            .userInfo_sex {
                margin: 0 25px;
                color: white;
            }
        }

        .userInfo_div_2 {
            margin-left: 20px;
        }
    }

    .yibaoInfo_div {
        display: flex;
        flex-direction: column;
        background-color: white;
        margin: 0 10px;
        .yibaoInfo_div_1 {
            width: max-content;
            border-radius: 3px;
            border: 1px solid #004aff;
            padding: 3px 5px;
            font-size: 12px;
            color: #004aff;
        }

       
    }
    .yibaoInfo_div_2 {
            margin-right: 20px;
            font-size: 16px;
            font-weight: 500;
            color: white;

        }
}

.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;
    width: 49%;
    .box_card_title {
       
        display: flex;
        box-sizing: border-box;
        padding: 5px;
        font-size: 16px;
        font-weight: bold;
    }
}
::v-deep .el-table--medium th,
.el-table--medium td {
    padding: 4px 0px;
    height: 30px;
}
</style>
