<template>
    <div class="all">
        <el-form ref="form" :model="form" :inline="true" v-loading="hallloading">
            <el-row v-loading="loading">
                <el-col :span="20" class="left">
                    <div class="main">
                        <div class="title">住院医保登记</div>
                        <div class="top">
                            <div class="topone">
                                <div>身份证号：</div>
                                <div class="topone_right">{{ form.p_grbh }}</div>
                            </div>
                            <div class="topone">
                                <div>住院流水号：</div>
                                <div class="topone_right_1">{{ idcard }}</div>
                            </div>
                        </div>
                        <div class="center">
                            <div class="tou">
                                <div>患者信息</div>
                                <div class="touinside"></div>
                            </div>
                            <div class="centerone">
                                <el-form-item label="姓名" class="w200">
                                    <el-input v-model="form.p_xm" readonly></el-input>
                                </el-form-item>

                                <el-form-item label="性别" class="w200" style="width: 200px">
                                    <el-select v-model="form.p_xb" placeholder="请选择" disabled>
                                        <el-option label="男" value="1"></el-option>
                                        <el-option label="女" value="2"></el-option>
                                        <el-option label="未知" value="9"></el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="险种" class="w200">
                                    <el-select v-model="form.p_xzbz" placeholder="请选择">
                                        <el-option label="普通医疗" value="C"></el-option>
                                        <el-option label="生育" value="E"></el-option>
                                        <el-option label="工伤" value="D"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="外地就医类别" class="w200">
                                    <el-select v-model="form.p_jylb" placeholder="请选择" disabled>
                                        <el-option label="本地定点就医" value="01"></el-option>
                                        <el-option label="异地安置" value="11"></el-option>
                                        <el-option label="转外治疗" value="10"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div class="tou_other">
                                <div>医保信息</div>
                                <div class="touinside"></div>
                            </div>
                            <div class="centerone">
                                <el-form-item label="参保机构名称" class="w200">
                                    <el-input v-model="form.p_cbjgmc" readonly></el-input>
                                </el-form-item>
                                <el-form-item label="参保地市编号" class="w200">
                                    <el-input v-model="form.p_cbdsbh" readonly></el-input>
                                </el-form-item>
                                <el-form-item label="社会保障号码" class="w200">
                                    <el-input v-model="yibaodata.grbh" readonly></el-input>
                                </el-form-item>

                                <el-form-item label="人群类别" class="w200">
                                    <el-select v-model="yibaodata.rqlb" placeholder="请选择" disabled>
                                        <el-option label="职工" value="A"></el-option>
                                        <el-option label="居民" value="B"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div class="centerone">
                                <el-form-item label="医疗统筹类别" class="w200" style="width: 200px">
                                    <el-select v-model="form.p_yltclb" placeholder="请选择" disabled>
                                        <el-option label="住院" value="1"></el-option>
                                        <el-option label="急诊转住院" value="3"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="住院类型" class="w200" style="width: 200px">
                                    <el-select v-model="form.hisp_zylx" placeholder="请选择" disabled>
                                        <el-option label="普通住院" value="1"></el-option>
                                        <!-- <el-option label="家床" value="2"></el-option> -->
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="医保类型" class="w200">
                                    <el-select v-model="form.channel" placeholder="请选择" disabled>
                                        <el-option label="本地" value="local"></el-option>
                                        <el-option label="油田" value="oil"></el-option>
                                        <el-option label="异地" value="offsite"></el-option>
                                        <el-option label="跨省异地" value="longdistance"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="就医医院编码" class="w200">
                                    <el-input v-model="form.p_jyyybm" readonly></el-input>
                                </el-form-item>
                            </div>
                            <div class="centerone">
                                <el-form-item label="患者类型" class="w200">
                                    <el-input v-model="form.his_patient_type.name" readonly></el-input>
                                </el-form-item>
                                <el-form-item label="医保住院方式" class="w200 color_red">
                                    <el-select v-model="form.p_zyfs" placeholder="请选择" filterable>
                                        <el-option :value="item.code" :label="item.value_name" v-for="item in zhuyuanlist" :key="item.code" id="doc"> </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="医疗住院方式" class="w200 color_red">
                                    <el-select v-model="form.p_ylzyfs" placeholder="请选择" filterable remote>
                                        <el-option :value="item.code" :label="item.value_name" v-for="item in ylzhuyuanlist" :key="item.code" id="doc"> </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="跨省住院类型" class="w200 color_red">
                                    <el-select v-model="form.p_zylx" placeholder="请选择">
                                        <el-option label="普通住院" value="1"></el-option>
                                        <el-option label="急诊或抢救住院" value="2"></el-option>
                                        <el-option label="转院住院" value="3"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div class="center1"></div>
                            <div class="center1">
                                <el-form-item class="w100" style="margin-right: 30px">
                                    <el-checkbox v-model="form.p_wsbz">跨省外伤标志</el-checkbox>
                                </el-form-item>
                                <el-form-item class="w100" style="margin-right: 30px">
                                    <el-checkbox v-model="form.p_sjdsfbz" >跨省涉及第三方标志</el-checkbox>
                                </el-form-item>
                                <el-checkbox v-model="form.blood_status" style="line-height: 25px; margin-right: 40px;color: red;" >用血报销权益</el-checkbox>

                                <el-form-item label="是否退休" class="w200 " style="display: block">
                                    <el-select v-model="form.is_retired" placeholder="请选择" filterable>
                                        <el-option label="未知" value="UNKNOWN"></el-option>
                                        <el-option label="退休" value="NOT_RETIRE"></el-option>
                                        <el-option label="未退休" value="RETIRED"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div class="centerone_left">
                                <el-form-item label="生育预产期(省)" style="margin-right: 163px" class="w200 color_red" v-if="form.p_xzbz == 'E'">
                                    <el-date-picker v-model="form.p_ycq" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
                                </el-form-item>
                                <el-form-item label="怀孕时间(省)" style="margin-right: 163px" class="w200 color_red" v-if="form.p_xzbz == 'E'">
                                    <el-date-picker v-model="form.p_hysj" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
                                </el-form-item>
                                <el-form-item label="怀孕胎次(省)" class="w200 color_red" v-if="form.p_xzbz == 'E'">
                                    <el-input v-model="form.p_sytc"></el-input>
                                </el-form-item>
                            </div>

                            <div class="tou">
                                <div>科室信息</div>
                                <div class="touinside"></div>
                            </div>
                            <div class="centerone">
                                <el-form-item label="住院时间" class="w200">
                                    <el-date-picker v-model="form.p_zyrq" type="datetime" placeholder="选择日期时间" readonly> </el-date-picker>
                                </el-form-item>
                                <el-form-item label="科室编码" class="w200">
                                    <el-input v-model="form.p_ksbm" readonly></el-input>
                                </el-form-item>
                                <el-form-item label="门诊科室" class="w200">
                                    <el-input v-model="form.p_mzks" readonly></el-input>
                                </el-form-item>
                                <el-form-item label="床位" class="w200">
                                    <el-input v-model="form.p_cw" readonly></el-input>
                                </el-form-item>
                            </div>
                            <div class="centerone">
                                <el-form-item label="确诊医生" class="w200" style="width: 200px">
                                    <el-select
                                        v-model="form.p_qzysxm"
                                        placeholder="请选择"
                                        filterable
                                        remote
                                        reserve-keyword
                                        disabled
                                        :remote-method="doctorfun"
                                        :loading="loading"
                                        @change="doctChange"
                                    >
                                        <el-option :value="item.xm" v-for="item in doclist" :key="item.ysbm" id="doc">{{ item.xm }}</el-option>
                                    </el-select>
                                    <!-- <el-input v-model="form.p_qzysxm" readonly></el-input> -->
                                    <!-- <span>医生编码：{{ form.p_qzys }}</span> -->
                                </el-form-item>
                                <el-form-item label="医生编码" class="w200" style="margin-left: 10px">
                                    <el-input v-model="form.p_qzys" readonly></el-input>
                                </el-form-item>
                                <el-form-item label="疾病名称" class="w200" style="margin-left: 10px">
                                    <el-select
                                        v-model="form.p_jbmc"
                                        placeholder="请选择"
                                        filterable
                                        remote
                                        reserve-keyword
                                        :disabled="dengji != 'UNREGISTERED'"
                                        :remote-method="diseasefun"
                                        :loading="loading"
                                        @change="selectChange"
                                    >
                                        <el-option :value="item.jbmc" v-for="item in decise" :key="item.jbbm" id="doc">{{ item.jbmc }}</el-option>
                                    </el-select>
                                    <!-- <el-input v-model="form.p_jbmc" readonly></el-input> -->
                                    <!-- <span>疾病编码：{{ form.p_jbbm }}</span> -->
                                </el-form-item>
                                <el-form-item label="疾病编码" class="w200" style="margin-left: 10px">
                                    <el-input v-model="form.p_jbbm" readonly></el-input>
                                </el-form-item>
                            </div>
                        </div>
                        <div class="bottom">
                            <el-row class="centerthree">
                                <el-col :span="2">
                                    <div class="grid-content bg-purple font_red">医保审核</div>
                                </el-col>
                                <el-col :span="19">
                                    <div class="grid-content bg-purple-light font_green">{{ form.dw ? form.dw.dw_bz : '' }}</div>
                                </el-col>
                                <el-col :span="3" class="rightthree">
                                    <div class="grid-content bg-purple-light">
                                        <div>
                                            <span class="font_red">医保审核状态：</span><span class="font_green">{{ form.dw ? form.dw.dw_qrbz_name : '' }}</span>
                                        </div>
                                        <div>
                                            <span class="font_red">医保流水：</span><span class="font_green">{{ form.dw ? form.dw.dw_zylsh : '' }}</span>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
                <el-col :span="3" class="right">
                    <div class="buttons">
                        <el-button
                            size="medium"
                            type="primary"
                            style="margin-left: 20px; margin-top: 10px"
                            @click="birth()"
                            v-if="form.p_xzbz == 'E' && (dengji == 'REGISTERED' || dengji == 'REGISTERED_HIS_SYNC')"
                            >生育审核查询</el-button
                        >
                    </div>
                    <div class="right_down">
                        <div class="buttons">
                            <el-button calss="mi-width" type="success" @click="resave()" :disabled="dengji != 'UNREGISTERED' && form.his_patient_type.value != 'ZF'">重新获取HIS信息</el-button>
                            <el-button class="button_green mi-width" @click="selectcard()" style="margin-left: 10px; margin-top: 10px; margin-bottom: 30px" v-if="form.his_patient_type.value != 'ZF'"
                                >医保信息查询</el-button
                            >
                            <!-- <el-button calss="mi-width" type="primary" @click="gosave()" v-if="dengji == 'UNREGISTERED'">保存</el-button> -->
                            <!-- <el-button size="medium" style="width: 140px" @click="save()"
                                    v-if="dengji != 'REGISTERED_HIS_SYNC' && dengji != 'YB_DISCHARGED' && form.his_patient_type.value == 'ZF'">自费登记</el-button> -->
                            <el-button size="medium" style="width: 140px" @click="save()" v-if="dengji == 'UNREGISTERED' && form.his_patient_type.value != 'ZF'">医保登记</el-button>
                            <el-button size="medium" @click="deletesave()" v-if="dengji == 'REGISTERED_HIS_SYNC' && form.his_patient_type.value != 'ZF'">撤销医保登记</el-button>
                            <el-button size="medium" @click="save()" v-if="dengji == 'REGISTERED'">同步医保登记到His</el-button>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-form>

        <SelectCard v-if="dialogFormVisible" :visible.sync="dialogFormVisible" :flag="flag" @getyibaoinfo="getyibaoinfo" :xzbz="form.p_xzbz" :patientcard="form" />
    </div>
</template>

<script>
import { getHisPatientInfo, disease, doctorlist, savepatien, savedengji, deletedengji, approval } from '@/api/patient'
import { query_dict } from '@/api/jiesuan'

import SelectCard from '@/components/SelectCardDJ'
export default {
    components: {
        SelectCard,
    },

    data() {
        const defaultForm = {
            is_retired: 'UNKNOWN',
            blood_status: '',
            p_grbh: '',
            his_patient_id: '',
            p_xm: '',
            p_xb: '',
            p_xzbz: '',
            p_jylb: '',
            p_yltclb: '',
            hisp_zylx: '',
            channel: '',
            p_jyyybm: '',
            his_patient_type: {
                name: '',
                value: '',
            },
            p_zyfs: '',
            p_ylzyfs: '',
            p_wsbz: '',
            p_sjdsfbz: '',
            p_zylx: '',
            p_ycq: '',
            p_hysj: '',
            p_sytc: '',
            p_zyrq: '',
            p_ksbm: '',
            p_mzks: '',
            p_cw: '',
            p_qzysxm: '',
            p_qzys: '',
            p_jbmc: '',
            p_jbbm: '',
            dw_bz: '',
            dw_qrbz: '',
            dw_zylsh: '',
        }
        return {
            hallloading: false,
            loading: false,
            xzbz: '',
            idcard: '',
            flag: 'one',
            dialogFormVisible: false,
            form: {
                ...defaultForm,
            },
            yibaodata: {},
            result: {},
            dengji: '', //#医保未登记 UNREGISTERED 0; 医保已登记-His未同步 REGISTERED 1;医保已登记-His已同步 REGISTERED_HIS_SYNC 2;
            // HIS已出院 HIS_DISCHARGED 3;医保已出院 YB_DISCHARGED 4;
            dengjiText: '', //登记按钮文字
            decise: [],
            doclist: [],
            zhuyuanlist: [],
            ylzhuyuanlist: [],
        }
    },
    created() {
        this.getHisPatientInfo()
    },
    methods: {
        birth() {
            approval({
                inpatient_no: this.idcard,
            })
                .then(response => {
                    this.birthdata = response.data
                    this.$alert(
                        '<p>确认标志：' +
                            response.data.qrbz +
                            '</p><p>住院流水号：' +
                            response.data.zylsh +
                            '</p><p>调用结果说明：' +
                            response.data.resulttext +
                            '</p><p>入院诊断：' +
                            response.data.ryzd +
                            '</p>',
                        '生育查询',
                        {
                            dangerouslyUseHTMLString: true,
                        },
                    )
                })
                .finally(() => {
                    this.loading = false
                })
        },
        resave() {
            if (this.dengji != 'UNREGISTERED') {
                this.$alert('该患者是已登记状态，是否继续重新获取', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.getHisPatientInfo('1')
                    },
                })
            } else {
                this.getHisPatientInfo('1')
            }
        },
        selectChange(event) {
            let choosenItem = this.decise.filter(item => item.jbmc === event)[0]
            this.form.p_jbbm = choosenItem.jbbm
        },
        doctChange(event) {
            let choosenItem = this.doclist.filter(item => item.xm === event)[0]
            this.form.p_qzys = choosenItem.ysbm
        },
        selectcard() {
            this.dialogFormVisible = true
        },
        getyibaoinfo(item) {
            this.yibaodata = item
        },
        //查询数据
        getHisPatientInfo(e) {
            this.loading = true
            if (location.search.slice(1) != '') {
                if (location.search.slice(1).split('=').length == 4 || location.search.slice(1).split('=').length == 3) {
                    this.idcard = location.search.slice(1).split('&')[0]
                    this.idcard = this.idcard.split('=')[1]
                } else {
                    this.idcard = location.search.slice(1)
                }
            }
            getHisPatientInfo({
                force: e,
                blh: this.idcard,
                p_xzbz: this.form.p_xzbz,
            })
                .then(response => {
                    this.loading = false
                    this.dengji = response.data.status.value
                    this.form = response.data
                    this.form.hisp_zylx = '1'
                    // this.xzbz = response.data.p_xzbz
                    // this.doctorfun()
                    this.zyfsfun()
                    this.lyzyfsfun()
                    // if(this.form.p_xzbz == 'E' && (this.dengji == 'REGISTERED' || this.dengji == 'REGISTERED_HIS_SYNC')){
                    //     this.birth()
                    // }
                })
                .catch(() => {})
                .finally(() => {
                    this.loading = false
                })
        },
        lyzyfsfun() {
            query_dict({
                type: 'YLZYFS',
            })
                .then(response => {
                    this.ylzhuyuanlist = response.data
                })
                .finally(() => {})
        },
        zyfsfun() {
            query_dict({
                type: 'ZYFS',
            })
                .then(response => {
                    this.zhuyuanlist = response.data
                })
                .finally(() => {})
        },
        doctorfun(query) {
            if (query !== '') {
                this.loading = true
                setTimeout(() => {
                    this.loading = false
                    doctorlist({
                        keyword: query,
                        is_oil: this.form.channel == 'oil' ? '1' : '0',
                    })
                        .then(response => {
                            this.doclist = response.data
                        })
                        .finally(() => {})
                }, 200)
            } else {
                this.doclist = []
            }
        },
        diseasefun(query) {
            if (query !== '') {
                this.loading = true
                setTimeout(() => {
                    this.loading = false
                    disease({
                        keyword: query,
                        is_oil: this.form.channel == 'oil' ? '1' : '0',
                    })
                        .then(response => {
                            this.decise = response.data
                        })
                        .finally(() => {})
                }, 200)
            } else {
                this.decise = []
            }
        },
        //删除
        deletesave() {
            this.hallloading = true
            let params = {
                his_inpatient_no: this.idcard,
            }
            deletedengji(
                params, //身份证号、社保卡号
            )
                .then(response => {
                    this.$message({
                        message: '撤销成功',
                        type: 'success',
                    })
                    this.hallloading = false
                    this.getHisPatientInfo()
                })
                .finally(() => {
                    this.hallloading = false
                })
        },
        gosave() {
            let params = {
                cache_uuid: this.yibaodata.cache_uuid,
                id: this.form.id,
                p_zyfs: this.form.p_zyfs,
                p_ylzyfs: this.form.p_ylzyfs,
                p_wsbz: this.form.p_wsbz,
                p_sjdsfbz: this.form.p_sjdsfbz,
                p_zylx: this.form.p_zylx,
                p_ycq: this.form.p_ycq,
                p_hysj: this.form.p_hysj,
                p_sytc: this.form.p_sytc,
                p_jbbm: this.form.p_jbbm,
                p_jbmc: this.form.p_jbmc,
            }
            this.loading = true
            savepatien(
                params, //身份证号、社保卡号
            )
                .then(response => {})
                .finally(() => {
                    this.loading = false
                })
        },
        // 保存患者信息
        save() {
            if (this.form.p_xzbz == 'E') {
                if (this.form.p_ycq == '' || this.form.p_hysj == '' || this.form.p_sytc <= 0 || this.form.p_sytc == '') {
                    this.$message({
                        message: '请输入预产期、怀孕时间、胎次等信息',
                        type: 'error',
                    })
                    return false
                }
            }
            this.hallloading = true
            if (this.yibaodata.cache_uuid == undefined) {
                this.$message({
                    message: '请先医保信息查询后登记',
                    type: 'error',
                })
                this.hallloading = false
                return false
            }
            ;(this.form.cache_uuid = this.yibaodata.cache_uuid),
                savedengji(
                    this.form, //身份证号、社保卡号
                )
                    .then(response => {
                        this.loading = false
                        this.$message({
                            message: '信息已登记',
                            type: 'success',
                        })
                        this.hallloading = false
                        // this.dengji == '1'
                        this.getHisPatientInfo()
                    })
                    .finally(() => {
                        this.hallloading = false
                        this.loading = false
                    })
        },
    },
}
</script>
<style lang="scss" scoped>
.all {
    font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    color: #666666;
    background-color: #fff;
    min-width: 1300px;
}

.button_green {
    color: #4991fd;
    border-color: #4991fd;
}

.button_red {
    color: #f04a4a;
    border-color: #f04a4a;
}

.font_green {
    color: #4991fd;
}

.font_red {
    color: #f04a4a;
}

.color_green {
    ::v-deep .el-form-item__label {
        color: #4991fd;
    }
}

.color_red {
    ::v-deep .el-form-item__label {
        color: #f04a4a;
    }
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.left {
    padding: 0 60px;
    background-color: #eef5fd;
    min-width: 1000px;
    min-height: 680px;

    .el-form-item {
        margin-right: 0;
    }

    ::v-deep .el-input__inner {
        height: 28px;
    }

    ::v-deep label {
        font-weight: normal;
    }

    ::v-deep .el-form-item {
        margin-bottom: 2px;
        display: inline-grid;
        text-align: left;
        justify-content: center;
        justify-items: start;
    }

    ::v-deep .el-form-item__label {
        line-height: 24px;
    }

    ::v-deep .el-form-item__content {
        line-height: 24px;
    }

    ::v-deep .el-input__icon {
        line-height: 24px;
    }

    .lets1 {
        letter-spacing: 14px;
    }

    .lets2 {
        letter-spacing: 3px;
    }

    .w58 {
        .el-input {
            width: 58px;
        }
    }

    .w64 {
        .el-input {
            width: 64px;
        }
    }

    .w90 {
        .el-input {
            width: 90px;
        }
    }

    .w200 {
        .el-input {
            width: 200px;
        }
    }
    .w100 {
        .el-input {
            width: 100px;
        }
    }

    .w120 {
        .el-input {
            width: 120px;
        }
    }

    .w140 {
        .el-input {
            width: 140px;
        }
    }

    .w150 {
        .el-input {
            width: 150px;
        }
    }

    .w158 {
        .el-input {
            width: 158px;
        }
    }

    .w160 {
        .el-input {
            width: 160px;
        }
    }

    .w176 {
        .el-input {
            width: 176px;
        }
    }

    .w288 {
        .el-input {
            width: 288px;
        }
    }

    .w304 {
        .el-input {
            width: 304px;
        }
    }

    .w314 {
        .el-input {
            width: 314px;
        }
    }

    .w321 {
        .el-input {
            width: 321px;
        }
    }

    .w400 {
        .el-input {
            width: 400px;
        }
    }

    .w772 {
        .el-input {
            width: 700px;
        }
    }

    .ws100 {
        .el-select {
            width: 100px;
        }
    }

    .ws120 {
        .el-select {
            width: 120px;
        }
    }

    .ws140 {
        .el-select {
            width: 140px;
        }
    }

    .ws160 {
        .el-select {
            width: 160px;
        }
    }

    .ws715 {
        padding-left: 10px;

        .el-select {
            width: 715px;
        }
    }

    .l24 {
        line-height: 24px;
    }

    .l36 {
        line-height: 36px;
    }

    .main {
        width: 100%;

        .title {
            text-align: center;
            font-size: 24px;
            letter-spacing: 12px;
            padding: 19px 0 10px 0;
            color: #000;
        }

        .top {
            display: flex;
            justify-content: space-between;
            border-bottom: 2px solid #000;
            padding: 0 3px 4px 3px;
            margin-bottom: 5px;

            .topone {
                display: flex;
                justify-content: space-between;
                line-height: 24px;

                .topone_right {
                    width: 140px;
                    padding-left: 10px;
                    border-bottom: 1px solid #666666;
                }

                .topone_right_1 {
                    width: 100px;
                    padding-left: 10px;
                    border-bottom: 1px solid #666666;
                }
            }
        }

        .center {
            border-bottom: 2px solid #000;
            padding-bottom: 10px;
            margin-bottom: 10px;

            .centerone {
                display: flex;
                justify-content: space-between;
                margin-top: 10px;
            }
            .center1 {
                display: flex;

                margin-top: 10px;
            }

            .centerones {
                display: flex;
                // justify-content: space-between;
            }

            .centerone_left {
                display: flex;
                justify-content: flex-start;
            }

            .centertwo {
                display: flex;
                justify-content: flex-start;
            }

            .centerfive {
                display: flex;
                justify-content: flex-end;
            }

            .tou {
                display: flex;
                justify-items: center;
                line-height: 20px;
                position: relative;
                margin-top: 10px;
                color: #4991fd;

                .touinside {
                    height: 1px;
                    border-top: 1px solid #bedcff;
                    position: absolute;
                    top: 45%;
                    width: 90%;
                    left: 80px;
                }
            }

            .tou_other {
                display: flex;
                justify-items: center;
                line-height: 20px;
                position: relative;
                margin-top: 15px;
                color: #f04a4a;

                .touinside {
                    height: 1px;
                    border-top: 1px solid #f04a4a;
                    position: absolute;
                    top: 45%;
                    width: 90%;
                    left: 80px;
                }
            }
        }

        .bottom {
            .centerthree {
                display: flex;
                justify-content: space-between;

                .rightthree {
                    position: relative;
                    margin-left: 10px;
                }
            }
        }
    }
}

.right {
    height: 700px;
    position: relative;

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

        .el-button {
            width: 140px;
            margin-bottom: 10px;
        }
    }

    .right_down {
        padding-left: 10px;
        position: absolute;
        bottom: 220px;
        left: 0;

        .min-width {
            width: 50px;
        }

        .el-button {
            margin-left: 10px;
        }

        .el-button + .el-button {
            margin-top: 5px;
        }
    }
}
</style>
