<template>
    <div class="app-container" v-loading="loading">
        <el-card class="box-card" style="margin-bottom: 20px">
            <div class="clearfix">
                <el-form ref="form" :model="form" label-width="100px" :inline="true" style="margin-bottom: 10px">
                    <div class="search">
                        <div class="search_left" style="display: flex">
                            <el-button round @click="selectcard()" style="height: 36px; background-color: white; color: #1775fc; font-weight: 600; font-size: 17px; margin-top: 8px"
                                >读卡确认</el-button
                            >
                            <div class="search_left_1">
                                <el-form-item label="住院流水号">
                                    <el-input v-model="searchData.yyxmbm"></el-input>
                                </el-form-item>

                                <el-button @click="searchsome" style="background-color: white; color: #5298fd">查找</el-button>
                            </div>
                        </div>
                    </div>
                </el-form>
                <el-row style="margin-left: 20px; margin-bottom: 10px">
                    <el-col :span="2">
                        <div>姓名：{{ illInfo.name }}</div>
                    </el-col>
                    <el-col :span="4">
                        <div>身份证号：{{ illInfo.grbh }}</div>
                    </el-col>
                    <el-col :span="4">
                        <div>住院流水号：{{ illInfo.his_inpatient_no }}</div>
                    </el-col>
                    <el-col :span="3">
                        <div>患者类型：{{ illInfo.channel ? illInfo.channel.name : '' }}</div>
                    </el-col>
                    <el-col :span="5">
                        <div>预交金加缴退金额：{{ illInfo.amount.balance }}</div>
                    </el-col>
                    <el-col :span="5">
                        <div>住院预交金：{{ illInfo.amount.in_prepay }}</div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <el-card class="box-card" style="padding-bottom: 20px">
            <div>
                <el-form :model="printform" :inline="true">
                    <div>
                        <el-table
                            v-loading="loading"
                            class="eltable"
                            :data="list"
                            border
                            style="width: 100%"
                            :header-cell-style="{ background: '#f2f8ff', color: 'black' }"
                            element-loading-text="拼命加载中"
                            ref="singleTable"
                            highlight-current-row
                        >
                            <el-table-column align="center" label="住院号">
                                <template slot-scope="scope">
                                    <div>{{ scope.row.his_inpatient_no }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="name" label="姓名"></el-table-column>
                            <el-table-column align="center" label="支付渠道">
                                <template slot-scope="scope">
                                    <div>{{ scope.row.source.name }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="amount" label="金额"></el-table-column>
                            <el-table-column align="center" prop="created_at" label="日期"></el-table-column>
                            <el-table-column align="center" prop="job_number" label="操作员"></el-table-column>
                            <el-table-column align="center" prop="type" label="缴退">
                                <!-- type 1缴费 -->
                                <template slot-scope="scope">
                                    <div>
                                        <!-- scope.row scope.row.type == 1 这笔为充值 -->
                                        <el-button type="primary" v-if="scope.row.typein == 'in'" @click="refundFun(scope.row)">退 款</el-button>
                                        <el-button type="primary" v-else @click="pay(scope.row)">缴 费</el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>

                        <pagination v-show="total > 0" :total="total" :page.sync="pageInfo.page" :limit.sync="pageInfo.limit" @pagination="getList()" />
                        <!-- </el-radio-group> -->
                    </div>
                </el-form>
                <div class="bottom_box">
                    <div><span> 缴退款时，选中一行操作一行，不会全部退款，特别注意，银联卡退款只可操作一次。</span></div>
                    <el-button type="primary" @click="deletepos()">撤销出院</el-button>
                </div>
            </div>
        </el-card>

        <SelectCardRead v-if="dialogFormVisible" :visible.sync="dialogFormVisible" :flag="flag" @getyibaoinfo="getyibaoinfo" :xzbz="xzbz" :patientcard="patientform" />
        <!-- 缴费 -->
        <el-dialog title="" :visible.sync="payShow" class="pay-dia">
            <el-form :model="feelist" :inline="true" @submit.native.prevent>
                <el-row>
                    <el-col :span="12" class="left">
                        <el-form-item label="缴款方式">
                            <el-select v-model="feelist.channel" placeholder="请选择" style="width: 160px">
                                <el-option label="微信" value="1"></el-option>
                                <el-option label="支付宝" value="2"></el-option>
                                <el-option label="银行卡" value="3"></el-option>
                                <el-option label="现金" value="4"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12" class="left">
                        <el-form-item label="">
                            <el-input v-model="feelist.qr" type="text" placeholder="" ref="cardInput" style="width: 100%" @blur="handleSetFocus()" @keyup.enter.native="surePay()"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="payShow = false">取 消</el-button>
                <el-button type="primary" @click="surePay">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="退款" :visible.sync="sprice_show" width="660px" top="20vh !important" :before-close="handleClose" class="tanchaung">
            <div class="tabin">
                <el-form ref="form" :model="form">
                    <div style="display: flex; justify-content: space-between">
                        <el-form-item label="退款金额" label-width="100px" style="line-height: 50px">
                            <el-input v-model="tuidata.amount"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="tuisure">确认</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { rechargeList, freemoney, zy_mis, refund, get_serial_number, deletefee, recharge_refund, zyByInpatientNo } from '@/api/jiesuan'

import SelectCardRead from '@/components/SelectCardRead'

export default {
    name: 'Outpatient',
    components: {
        SelectCardRead,
    },
    data() {
        return {
            bank_record_id: '',
            resorderID: '',
            tuidata: {
                amount: '0',
            },
            sprice_show: false,
            searchData: {
                order: 'one',
                sbj: '', //社保局
                ypbz: '', // 药品标志
                flag: '', //上传标志
                yyxmbm: '',
                ylxmmc: '',
            },
            logo: require('@/assets/logo/CardReader.gif'),
            loading: false,
            printform: {
                channel: '',
            },
            list: [],
            uploadfeeshow: false,
            dialogFormVisible: false,
            flag: 'two',
            xzbz: '',
            patientform: {
                p_xm: '',
                his_patient_no: '',
                his_patient_type: {
                    value: '',
                },
                p_zyrq: '',
            },
            illInfo: {
                amount: 0,
                in_prepay: 0,
            }, //患者信息
            payShow: false, //缴费蒙层
            feelist: {
                channel: '',
                qr: '', //扫码后值
            },
            loading2: false,
            radio: '', //
            currentRow: {}, //当前点击行
            total: 0,
            pageInfo: {
                page: 1,
                limit: 10,
            },
            form: {
                xjje: 0,
                ylje: 0,
                zfje: 0,
            },
            banlist: {},
        }
    },
    mounted() {},
    created() {
        // this.getPatientInfo()
        if (!window.WebSocket) {
            alert('该版本浏览器不支持WebSocket')
        } else {
            console.log('支持websocket')
        }
    },
    methods: {
        async searchsome() {
            await zyByInpatientNo({
                inpatient_no: this.searchData.yyxmbm, //
            })
                .then(response => {
                    this.illInfo = response.data
                    this.getList()
                })
                .finally(() => {})
        },
        refund() {
            recharge_refund({
                his_inpatient_no: this.illInfo.his_inpatient_no,
                limit: '999',
            })
                .then(response => {
                    let indexlist = response.data
                    let listindex = []
                    indexlist.forEach(element => {
                        element.his_inpatient_no = this.illInfo.his_inpatient_no
                        element.name = this.illInfo.name
                        element.grbh = this.illInfo.grbh
                        element.source = {}
                        element.source.name = '社保卡'
                        element.typein = 'in'
                    })
                    indexlist.forEach(element => {
                        if (element.type.value == 'RECHARGE') {
                            listindex.push(element)
                        }
                    })
                    this.list = this.list.concat(listindex)
                })
                .finally(res => {})
        },
        deletepos() {
            this.loading = true
            deletefee({
                his_inpatient_no: this.illInfo.his_inpatient_no,
                destroy_cost: '0',
            })
                .then(response => {
                    this.loading = false
                    this.$message({
                        message: '成功撤销出院！',
                        type: 'success',
                    })
                })
                .catch(e => {
                    this.loading = false
                })
                .finally(res => {
                    // this.$message({
                    //     message: res.data.message,
                    //     type: 'success',
                    // })
                })
        },
        // 当不关闭刷卡弹窗的时候需要对input框失去焦点的时候继续聚焦
        handleSetFocus() {
            this.$nextTick(() => {
                this.$refs.cardInput.focus()
            })
        },
        // 读卡
        selectcard() {
            this.dialogFormVisible = true
        },
        getyibaoinfo(e) {
            this.dialogFormVisible = false
            this.illInfo = e
            this.getList()
            // this.refund()
        },
        //bank退款
        tuibank(e) {
            this.bank_record_id = '',
            this.banlist = e
            const _this = this
            let t = {
                jshid: this.illInfo.jshid,
                his_in_prepay: 0,
                payment_type: this.banlist.source.value,
                old_amount: this.banlist.amount,
                refund_amount: this.tuidata.amount,
                his_inpatient_no: this.illInfo.his_inpatient_no,
                patient_name: this.tuidata.name,
                non_preliminary: false,
                out_charge_no: this.banlist.serial_number,
            }
            console.log(t, e, '9999999')
            //预退款
            // await
            refund(t).then(response => {
                this.bank_record_id = response.data.bank_record_id
                // this.tuikuanloading = false
                if (response.data.status == true) {
                    let x =
                        'Trans&15|00|' +
                        +e.amount +
                        '|' +
                        e.bank_data.bankCardNo +
                        '|' +
                        e.bank_data.referNo +
                        '||' +
                        e.bank_data.tradeTime +
                        '|{"patientInfo":{"patientId":"' +
                        e.his_inpatient_no +
                        '","patientName":"' +
                        e.name +
                        '","cardNo":"' +
                        e.grbh +
                        '","accountType":"02","visitId":"","ywlx":"REFUND","transType":"bank","cardType":"01","source":"撤销出院银行卡退款","operatorId":"' +
                        e.job_number +
                        '","operatorName":"' +
                        localStorage.getItem('userbh') +
                        '","orderId":"' +
                        e.serial_number +
                        '"}}'
                    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.reimResult
                    _this.ws.onclose = function () {}
                } else {
                    this.$notify({
                        title: '提示',
                        message: response.data.message,
                        duration: 0,
                    })
                    this.tuikuanloading = false
                }
            })
            this.uploadfeeshow = false
        },
        //医保卡退款
        tuiybbank(e) {
            this.banlist = e
            const _this = this
            zy_mis({
                his_inpatient_no: this.illInfo.his_inpatient_no,
                amount: e.amount,
                mis_data: {
                    bankCardNo: e.bank_data.bankCardNo,
                    bankTradeNo: e.bank_data.bankTradeNo,
                    referNo: e.bank_data.referNo,
                },
                type: 'PRE_REFUND',
            }).then(response => {
                //获取流水号
                get_serial_number({

                    type: 'MIS',
                })
                    .then(response => {
                        let x =
                            'Trans&15|00|' +
                            +e.amount +
                            '|' +
                            e.bank_data.bankCardNo +
                            '|' +
                            e.bank_data.referNo +
                            '||' +
                            e.bank_data.tradeTime +
                            '|{"patientInfo":{"patientId":"' +
                            e.his_inpatient_no +
                            '","patientName":"' +
                            e.name +
                            '","cardNo":"' +
                            e.grbh +
                            '","accountType":"02","visitId":"","ywlx":"REFUND","transType":"social","cardType":"01","source":"撤销出院银行卡退款","operatorId":"' +
                            e.job_number +
                            '","operatorName":"' +
                            localStorage.getItem('userbh') +
                            '","orderId":"' +
                            response.data.value +
                            '"}}'
                        this.resorderID = response.data.value
                        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.YBreimResult
                        _this.ws.onclose = function () {}
                        this.uploadfeeshow = false
                    })
                    .finally(() => {
                        this.uploadfeeshow = false
                    })
            })
        },
        tuisure() {
            this.sprice_show = false
            this.loading = true
            this.list = []
            console.log(this.tuidata.type.value, this.tuidata, this.tuidata.type.value == 'RECHARGE')
            if (this.tuidata.type.value == 'RECHARGE') {
                this.tuiybbank(this.tuidata)
            } else if (this.tuidata.source.value == 'BANK' || this.tuidata.source.value == 'MIS_BANK') {
                this.tuibank(this.tuidata)
            } else {
                const qyparams = {
                    payment_type: this.tuidata.source.value,
                    old_amount: this.tuidata.amount,
                    refund_amount: this.tuidata.amount,
                    his_inpatient_no: this.illInfo.his_inpatient_no,
                    out_charge_no: this.tuidata.serial_number,
                    jshid: this.illInfo.jshid,
                    patient_name: this.tuidata.name,
                    // in_prepay: row.,
                }
                // return false
                refund(qyparams)
                    .then(response => {
                        this.getList()
                    })
                    .finally(() => {
                        this.loading = false
                    })
            }
        },
        //退款
        refundFun(row) {
            this.tuidata = row
            this.sprice_show = true
            // this.$confirm('确定要为此条记录退款吗', {
            //     confirmButtonText: '确定',
            //     cancelButtonText: '取消',
            //     type: 'warning',
            // })
            //     .then(() => {
            //         this.loading = true
            //         this.list = []
            //         console.log(row.type.value, row, row.type.value == 'RECHARGE')
            //         if (row.type.value == 'RECHARGE') {
            //             this.tuiybbank(row)
            //         } else if (row.source.value == 'BANK' || row.source.value == 'MIS_BANK') {
            //             this.tuibank(row)
            //         } else {
            //             const qyparams = {
            //                 payment_type: row.source.value,
            //                 old_amount: row.amount,
            //                 refund_amount: row.amount,
            //                 his_inpatient_no: that.illInfo.his_inpatient_no,
            //                 out_charge_no: row.serial_number,
            //                 jshid: this.illInfo.jshid,
            //                 patient_name: row.name,
            //                 // in_prepay: row.,
            //             }
            //             // return false
            //             refund(qyparams)
            //                 .then(response => {
            //                     this.getList()
            //                 })
            //                 .finally(() => {
            //                     this.loading = false
            //                 })
            //         }
            //     })
            //     .catch(() => {})
        },
        //缴费
        pay(row) {
            this.payShow = true
            this.currentRow = row
        },
        //付款
        surePay() {
            var that = this
            if (!that.feelist.channel) {
                that.$message('请选择缴款方式')
                return false
            }
            if (that.feelist.channel == 3) {
                //银行卡
                that.get_serial_number()
                return false
            }
            that.payShow = false
            this.loading = true
            this.list = []
            const qyparams = {
                payment_type: that.feelist.channel == '1' ? 'WX_BAR' : that.feelist.channel == '2' ? 'ALI_BAR' : that.feelist.channel == '1' ? 'CASH' : '',
                amount: this.currentRow.amount,
                auth_code: this.feelist.qr,
                his_patient_id: this.illInfo.his_patient_id, //'0000000039'
                patient_type: 'zy',
                his_inpatient_no: this.currentRow.his_inpatient_no,
            }
            freemoney(qyparams)
                .then(response => {
                    this.$message({
                        message: response.message,
                        type: 'success',
                    })
                    this.getList()
                })
                .finally(() => {
                    this.loading = false
                })
        },
        //列表
        getList() {
            this.loading = true
            this.list = []
            const qyparams = {
                his_inpatient_no: this.illInfo.his_inpatient_no,
                ...this.pageInfo,
            }
            rechargeList(qyparams)
                .then(response => {
                    this.loading = false
                    this.list = response.data
                    this.list.forEach(element => {
                        element.his_inpatient_no = this.illInfo.his_inpatient_no
                        element.name = this.illInfo.name
                        element.grbh = this.illInfo.grbh
                        element.typein = element.type
                    })
                    this.$forceUpdate()
                })
                .finally(() => {
                    this.loading = false
                    this.refund()
                })
        },
        //mis交易
        get_serial_number(e) {
            get_serial_number({
                type: 'MIS',
            })
                .then(response => {
                    const _this = this
                    this.mistype = e
                    var input = this.form.zfje
                    let x =
                        'Trans&00|00|' +
                        +input +
                        '|||||{"patientInfo":{"patientId":"' +
                        this.illInfo.his_inpatient_no +
                        '","patientName":"' +
                        this.illInfo.p_xm +
                        '","cardNo":"' +
                        this.illInfo.p_grbh +
                        '","accountType":"02","visitId":"","ywlx":"SUCCESS","transType":"bank","cardType":"01","source":"撤销出院银行卡充值","operatorId":"' +
                        localStorage.getItem('usernames') +
                        '","operatorName":"' +
                        localStorage.getItem('userbh') +
                        '","orderId":"' +
                        response.data.value +
                        '"}}'
                    this.resorderID = response.data.value
                    var wsImpl = window.WebSocket || window.MozWebSocket
                    _this.ws = new wsImpl('ws://127.0.0.1:50000/')
                    _this.ws.onopen = function () {
                        _this.wx.send(x)
                    }
                    _this.ws.onmessage = this.setOnmessageMessage

                    _this.ws.onclose = function () {}
                })
                .finally(() => {
                    this.uploadfeeshow = false
                })
        },
        setOnmessageMessage(evt) {
            const ret = JSON.parse(evt.data)
            if (ret && ret.TrandeCode == '00') {
                this.misdata = ret
                freemoney({
                    payment_type: 'MIS_BANK',
                    amount: this.currentRow.zfje,
                    auth_code: 'null',
                    his_patient_id: this.illInfo.his_patient_id,
                    patient_type: 'zy',
                    mis_no: this.resorderID,
                    mis_rs_no: ret.TradeRef,
                    his_inpatient_no: this.illInfo.his_inpatient_no,
                }).then(response => {
                    this.$message({
                        message: response.message,
                        type: 'success',
                    })
                    this.getList()
                    this.uploadfeeshow = false
                })

            } else {
                this.$message.error('银行卡失败！')
            }
            this.fullscreenLoading = false
        },

        // 医保退款结果
        YBreimResult(evt) {
            const ret = JSON.parse(evt.data)
            if (ret && ret.TrandeCode == '00') {
                zy_mis({
                    his_inpatient_no: this.illInfo.his_inpatient_no,
                    amount: ret.Amount,
                    mis_data: {
                        bankCardNo: ret.BankNo,
                        bankTradeNo: ret.TraceNo,
                        referNo: ret.TradeRef,
                        order_no: this.resorderID,
                    },
                    type: 'REFUND',
                })
                    .then(response => {})
                    .finally(() => {
                        this.$message({
                            message: ret.TrandeMsg,
                            type: 'success',
                        })
                    })
            } else {
                this.$message({
                    message: ret.TrandeMsg,
                    type: 'error',
                })
            }
            this.getList()
        },
        //退款结果
        async reimResult(evt) {
            const ret = JSON.parse(evt.data)
            if (ret && ret.TrandeCode == '00') {
                this.$message({
                    message: ret.TrandeMsg,
                    type: 'success',
                })
                await refund({
                    jshid: this.illInfo.jshid,
                    his_in_prepay: 0,
                    payment_type: this.banlist.source.value,
                    old_amount: this.banlist.amount,
                    refund_amount: this.tuidata.amount,
                    his_inpatient_no: this.illInfo.his_inpatient_no,
                    out_charge_no: ret.TraceNo,
                    bk_card_no: this.banlist.bank_data.bankCardNo,
                    patient_name: this.illInfo.name,
                    mis_rs_no: e.TradeRef,
                    mis_flow_no: this.banlist.serial_number,
                    non_preliminary: true,
                    bank_record_id: this.bank_record_id,
                    // jshid: this.illInfo.jshid,
                    // his_in_prepay: this.banlist.amount,
                    // payment_type: this.banlist.source.value,
                    // old_amount: this.banlist.amount,
                    // refund_amount: this.banlist.amount,
                    // his_inpatient_no: this.patientform.his_inpatient_no,
                    // out_charge_no: ret.TraceNo,
                    // bk_card_no: this.banlist.bank_data.bankCardNo,
                    // patient_name: this.illInfo.name,
                    // mis_rs_no: e.TradeRef,
                    // mis_flow_no: this.banlist.serial_number,
                })
                    .then(response => {
                        if (response.data.status == true) {
                            this.$message({
                                message: response.message,
                                type: 'success',
                            })
                        } else {
                            this.$notify({
                                title: '提示',
                                message: response.data.message,
                                duration: 0,
                            })
                        }
                    })
                    .finally(() => {})
            } else {
                this.$message({
                    message: ret.TrandeMsg,
                    type: 'error',
                })
            }
            this.getList()
        },
    },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.search {
    padding: 0px 10px;
    background-color: #5197fd;
    line-height: 50px;
    height: 52px;
}
::v-deep .el-form-item__content {
    line-height: 52px !important;
}
.abc {
    .el-form-item--mini.el-form-item {
        margin-bottom: 10px;
    }
}

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

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

.contnssddf {
    height: 510px;
    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;
}

.content-right {
    background: white;
    padding: 20px;
    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: 40%;
        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: 20px;
    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;
        }
    }
}

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

::v-deep.no-label .el-radio__label {
    display: none !important;
}
::v-deep .el-form-item__label {
    color: white !important;
}
::v-deep .el-card__body {
    padding: 0px !important;
}
.bottom_box {
    font-weight: 700;
    font-size: 18px;
    margin-top: 10px;
    color: red;
    margin-left: 20px;
    display: flex;
    justify-content: space-between;
    padding: 0px 20px;
}
.tanchaung {
    ::v-deep.el-dialog__title {
        font-size: 16px;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
    }
    ::v-deep.el-dialog__body {
        background: #f2f2f2;
        padding: 12px;
    }
}
.tabin {
    padding: 12px;
    background: #ffffff;
    border-radius: 3px 3px 3px 3px;
    opacity: 1;

    ::v-deep.el-form-item {
        margin-bottom: 5px;
    }
    ::v-deep.el-form-item__content {
        line-height: 40px !important;
    }
    ::v-deep.el-form-item__label {
        background-color: #f2f2f2;
        text-align: center;
        color: #333333 !important;
    }
}
</style>
