<template>
    <div class="all">
        <el-form ref="form" :model="form" label-width="80px" :inline="true">
            <div class="search">
                <div class="search_left">
                    <div class="search_left_1">

                        <el-form-item label="社保局">
                            <el-select v-model="searchData.sbj" placeholder="请选择社保局" @change="selectsbj">
                                <el-option label="东营市" value="dy"></el-option>
                                <el-option label="油田" value="oil"></el-option>
                                <el-option label="工伤" value="gs"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="类别">
                            <el-select v-model="searchData.ypbz" placeholder="请选择类别" @change="selectlb">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="药品" value="one"></el-option>
                                <el-option label="诊疗项目" value="zero"></el-option>
                                <el-option label="一次性材料" value="two"></el-option>
                            </el-select>
                        </el-form-item>



                        <el-form-item label="项目状态">
                            <el-select v-model="searchData.flag" placeholder="请选择状态" @change="selectflag">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="未匹配" value="0"></el-option>
                                <el-option label="待上传" value="1"></el-option>
                                <el-option label="已上传" value="2"></el-option>
                                <el-option label="需重传" value="4"></el-option>
                                <el-option label="已废弃" value="5"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="search_left_1">
                        <el-form-item label="医院编码">
                            <el-input v-model="searchData.yyxmbm"></el-input>
                        </el-form-item>

                        <el-form-item label="项目名称">
                            <el-input v-model="searchData.ylxmmc"></el-input>
                        </el-form-item>
                        <el-button type="primary" @click="searchsome">查找</el-button>
                    </div>
                </div>
                <div class="search_middle">
                    <div class="search_middle_1 search_middle_1_top">
<!--                        <el-button type="primary" @click="downloadhis">增量下载HIS目录</el-button>-->
                        <!--<el-button type="primary" @click="downloadhis">自动匹配上传下载</el-button>-->
                        <el-button type="primary" @click="gostep">自动匹配上传下载</el-button>
                        <el-button @click="batchupload">手动匹配上传</el-button>
                        <!-- <el-button @click="syscompare">系统对照</el-button> -->
                       <!--<el-button type="primary" @click="downloaddw">手动更新核心目录</el-button>-->
                        <el-button type="primary" @click="gocenter">手动更新核心目录</el-button>
<!--                        <el-button type="primary" @click="uploadtohis">增量上传HIS目录</el-button>-->
                    </div>
                </div>
            </div>
        </el-form>
        <el-card shadow="never" style="min-height: calc(100vh - 35vh)">
            <el-tabs v-model="current_tab" @tab-click="handleClick">
                <el-tab-pane label="医院端目录" name="one" v-if="userbh!='105056'">
                    <el-table
                        v-loading="loading"
                        ref="multipleTable"
                        class="eltable"
                        :data="list"
                        style="width: 100%"
                        :header-cell-style="{ background: '#EEF5FD', color: '#18518B' }"
                        element-loading-text="拼命加载中"
                        :row-key="getRowKeys"
                        @selection-change="handleSelectionChange"
                    >
                        <!-- <el-table-column align="center" property="name1" label="序号"></el-table-column> -->
                        <!-- <el-table-column align="center" property="name2" label="选择">
                            <el-checkbox></el-checkbox>
                        </el-table-column> -->
                        <el-table-column type="selection" :reserve-selection="true" :selectable="ifselect()" width="50"></el-table-column>
                        <el-table-column align="center" property="yyxmbm" label="项目编码" ></el-table-column>
                        <el-table-column align="left" property="yyxmmc" label="项目名称" ></el-table-column>
                        <el-table-column align="left" property="scqy" label="生产厂家" ></el-table-column>
                        <el-table-column align="center" property="zxgg" label="最小规格"></el-table-column>
                        <el-table-column align="center" property="dj" label="单价"></el-table-column>
                        <el-table-column label="医疗项目编码" align="center" prop="matNumber" >
                            <template slot-scope="scope" >
                                <span v-if="searchData.sbj=='dy'">
                                    <span :id="scope.row.id" >{{ scope.row.gbxmbm }}</span>
                                    <span v-if="scope.row.status==0">
                                        <el-button size="mini" @click="search(scope.$index,scope.row)" >&nbsp;手动对照</el-button>
                                     </span>
                                     <span v-else-if="scope.row.status!=5">
                                         <el-button size="mini" @click="search(scope.$index,scope.row)" >&nbsp;<i class="el-icon-edit"></i></el-button>
                                      </span>
                                </span>
                                <span v-else-if="searchData.sbj=='oil'">
                                    <span :id="scope.row.id">{{ scope.row.gbxmbm_oil }} </span>
                                    <span v-if="scope.row.status_oil==0">
                                        <el-button size="mini" @click="search(scope.$index,scope.row)" >&nbsp;手动对照</el-button>
                                     </span>
                                     <span v-else-if="scope.row.status_oil!=5">
                                         <el-button size="mini" @click="search(scope.$index,scope.row)">&nbsp;<i class="el-icon-edit"></i></el-button>
                                      </span>
                                </span>
                                <span v-else>
                                    <span :id="scope.row.id">{{ scope.row.gbxmbm_gs }} </span>
                                    <span v-if="scope.row.status_gs==0">
                                        <el-button size="mini" @click="search(scope.$index,scope.row)" >&nbsp;手动对照</el-button>
                                     </span>
                                     <span v-else-if="scope.row.status_gs!=5">
                                         <el-button size="mini" @click="search(scope.$index,scope.row)">&nbsp;<i class="el-icon-edit"></i></el-button>
                                      </span>
                                </span>

                            </template>
                        </el-table-column>
                        <el-table-column align="center"  label="状态">
                            <template slot-scope="scope" >
                                <span v-if="searchData.sbj=='dy'">
                                    <span v-if="scope.row.status_text.value=='已上传'">
                                        <span style="color:green;font-weight: bold;">{{ scope.row.status_text.value }}</span>
                                    </span>
                                    <span v-else-if="scope.row.status_text.value=='已废弃'">
                                        <span style="color:gray;font-weight: bold;">{{ scope.row.status_text.value }}</span>
                                    </span>
                                    <span v-else>
                                        <span style="color:red;font-weight: bold;">{{ scope.row.status_text.value }}</span>
                                    </span>
                                </span>
                                <span v-else-if="searchData.sbj=='oil'">
                                    <span v-if="scope.row.status_oil_text.value=='已上传'">
                                        <span style="color:green;font-weight: bold;">{{ scope.row.status_oil_text.value }}</span>
                                    </span>
                                    <span v-else-if="scope.row.status_oil_text.value=='已废弃'">
                                        <span style="color:gray;font-weight: bold;">{{ scope.row.status_oil_text.value }}</span>
                                    </span>
                                    <span v-else>
                                        <span style="color:red;font-weight: bold;">{{ scope.row.status_oil_text.value }}</span>
                                    </span>
                                </span>
                                <span v-else>
                                    <span v-if="scope.row.status_gs_text.value=='已上传'">
                                        <span style="color:green;font-weight: bold;">{{ scope.row.status_gs_text.value }}</span>
                                    </span>
                                    <span v-else-if="scope.row.status_gs_text.value=='已废弃'">
                                        <span style="color:gray;font-weight: bold;">{{ scope.row.status_gs_text.value }}</span>
                                    </span>
                                    <span v-else>
                                        <span style="color:red;font-weight: bold;">{{ scope.row.status_gs_text.value }}</span>
                                    </span>
                                </span>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column align="center" property="ckj" label="价格"></el-table-column> -->
                        <el-table-column align="center" property="ypbz.value" label="品类" ></el-table-column>

                        <el-table-column prop="operate" label="操作" align="center" >
                            <template slot-scope="scope" >

                               <el-button @click="upload(scope.row)" type="text" size="mini"
                                          style="color:rgb(238, 80, 80);font-weight: bold;"
                                          v-if="searchData.sbj=='dy' && ( scope.row.status_text.name== 'WAITING_UPLOAD' || scope.row.status_text.name== 'PASSERR') ">上传</el-button>
                                <el-button @click="upload(scope.row)" type="text" size="mini"
                                       style="color:rgb(238, 80, 80);font-weight: bold;"
                                       v-else-if="searchData.sbj=='oil' && ( scope.row.status_oil_text.name== 'WAITING_UPLOAD' || scope.row.status_oil_text.name== 'PASSERR') ">上传</el-button>
                                <el-button @click="upload(scope.row)" type="text" size="mini"
                                           style="color:rgb(238, 80, 80);font-weight: bold;"
                                           v-else-if="searchData.sbj=='gs' && ( scope.row.status_gs_text.name== 'WAITING_UPLOAD' || scope.row.status_gs_text.name== 'PASSERR') ">上传</el-button>
                            </template>
                        </el-table-column>

                    </el-table>
                    <pagination v-show="total > 0" :total="total" :page.sync="pageInfo.page" :limit.sync="pageInfo.limit" @pagination="getList()" />
                </el-tab-pane>
                <el-tab-pane label="医保端目录" name="two">
                    <el-table v-loading="loading" ref="multipleTable2" class="eltable" :data="list" style="width: 100%" :header-cell-style="{ background: '#EEF5FD', color: '#18518B' }"
                        element-loading-text="拼命加载中" :row-key="getRowKeys"  row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<!--                     <el-table-column align="center" property="id" label="序号"></el-table-column>-->
                        <el-table-column align="left" property="ylxmbm" label="医疗项目编码" ></el-table-column>
                        <el-table-column align="center" property="gbxmbm" label="国标项目编码" ></el-table-column>
                        <el-table-column align="left" property="ylxmbzmc" label="医疗项目名称" ></el-table-column>
                        <el-table-column align="left" property="scqy" label="生产厂家"></el-table-column>
                        <el-table-column align="center" property="bzgg" label="规格"></el-table-column>
                        <!-- <el-table-column align="center" property="bzsl" label="包装数量"></el-table-column> -->
                        <!-- <el-table-column align="center" property="name9" label="包装单位"></el-table-column> -->
                        <el-table-column align="center" property="ckj" label="价格"></el-table-column>
                        <el-table-column align="center" property="ypbz" label="品类">
                            <template slot-scope="scope">
                                <span  v-if="scope.row.ypbz=='0'">诊疗</span>
                                <span  v-else-if="scope.row.ypbz=='1'">药品</span>
                                <span  v-else-if="scope.row.ypbz=='2'">一次性材料</span>
                                <span  v-else>{{scope.row.ypbz}}</span>
                            </template>
                        </el-table-column>

                    </el-table>
                    <pagination v-show="total > 0" :total="total" :page.sync="pageInfo.page" :limit.sync="pageInfo.limit" @pagination="getList()" />
                </el-tab-pane>
                <el-tab-pane label="医保目录(HIS使用)" name="three">
                     <el-table v-loading="loading" ref="multipleTable2" class="eltable" :data="list" style="width: 100%" :header-cell-style="{ background: '#EEF5FD', color: '#18518B' }"
                        element-loading-text="拼命加载中" :row-key="getRowKeys" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<!--                     <el-table-column align="center" property="id" label="序号"></el-table-column>-->
                        <el-table-column align="left" property="ylxmbm" label="医疗项目编码"></el-table-column>
                        <el-table-column align="left" property="ylxmmc" label="医疗项目名称" ></el-table-column>
                        <el-table-column align="left" property="zfbl" label="自付比例"></el-table-column>
                        <el-table-column align="center" property="gbxmbm" label="国标项目编码" ></el-table-column>
                        <el-table-column align="center" property="dw" label="单位"></el-table-column>
                        <el-table-column align="center" property="bzgg" label="包装单位"></el-table-column>
                        <el-table-column align="center" property="scqy" label="生产企业"></el-table-column>
                         <el-table-column align="center" property="ypbz" label="品类">
                             <template slot-scope="scope">
                                 <span  v-if="scope.row.ypbz=='0'">诊疗</span>
                                 <span  v-else-if="scope.row.ypbz=='1'">药品</span>
                                 <span  v-else-if="scope.row.ypbz=='2'">一次性材料</span>
                                 <span  v-else>{{scope.row.ypbz}}</span>
                             </template>
                         </el-table-column>
                    </el-table>
                    <pagination v-show="total > 0" :total="total" :page.sync="pageInfo.page" :limit.sync="pageInfo.limit" @pagination="getList()" />
                </el-tab-pane>
            </el-tabs>
        </el-card>


        <Balanceprocessing v-if="visible" :visible.sync="visible" :sbj ="searchData.sbj" :current_id="current_id" :name="current_name" :bmid="current_bm"  @xmbm='updatexmbm' />
    </div>
</template>

<script>
import Balanceprocessing from "@/components/Balanceprocessing"
import { getDictionaryByType,upload,hxlist,hospitallist,downloadhis,downloaddw,uploadtohis,syscompare,step} from '@/api/drug'
let that
export default {
    name: 'Compare',
    components:{Balanceprocessing},
    data() {
        return {
            project_id:'',
            current_tab:'one',
            total: 0,
            pageInfo: {
                page: 1,
                limit: 10,
                sort: undefined,
                order: undefined,
            },
            loading: false,
            form: {
                id: '',
                yyxmbm: '',
                yyxmmc: '',
                scqy: '',
                bzgg: '',
                bzsl: '',
                xzbz: '',
            },
            searchData: {
                order: 'one',
                sbj:'',    //社保局
                ypbz:'', // 药品标志
                flag:'',  //上传标志
                yyxmbm:'',
                ylxmmc:''
            },
            stepname:'downhis',
            stepcenter:'downlocal',
            list: [],
            visible:false,
            current_name:'',      //药品名称
            current_bm:'',   //医疗项目编码
            current_id:'',   //当前id
            ypbz:'', // 药品标志

            multipleSelection:[],
            userbh:'',

        }
    },

    created() {
        that = this

        this.userbh = localStorage.getItem('userbh')

        if(this.userbh=='105056'){
            this.current_tab = 'two'
        }
        //this.getList()
    },
    methods: {
        searchsome(){
            that.getList()
        },

        //设置某些状态不可选，未是信啊
        ifselect(row, index) {
            // console.log(row)
              // if (row.status != 1) {
              //   return true;
              // } else {
              //   return false;
              // }
         },


        //下载his项目目录，包括药品、一次性材料、诊疗
        downloadhis(){
            that.loading = true
            downloadhis().then(response => {
                if(response.status=='success'){
                    this.$message({
                          message: '成功',
                          type: 'success'
                     });
                }else{
                    this.$message.error('下载失败');
                }
                    //alert('上传成功')
            }).finally(() => {
                if(that.current_tab=='one'){
                    that.getList()
                    that.loading = false
                }

             })

        },
        gocenter(){
            that.loading = true
            const params  = {
                stepname:this.stepcenter
            }
            downloaddw(params).then(response => {
                if(response.status=='success' && response.data=='204'){
                    if(this.stepcenter=='downlocal'){
                        this.$message({
                            message: '1、下载东营中心目录完毕，准备下载油田中心目录',
                            type: 'success'
                        });
                        this.stepcenter='downoil'
                    }else if(this.stepcenter=='downoil'){
                        this.$message({
                            message: '2、下载油田中心目录完毕，准备下载工伤中心目录',
                            type: 'success'
                        });
                        this.stepcenter='downgs'
                    }

                    this.gocenter()


                }else if(response.status=='success'){
                    this.$message({
                        message: '3、下载工伤中心目录完毕，结束执行',
                        type: 'success'
                    });
                    this.stepcenter='downlocal'
                    that.loading = false
                    that.getList()
                }else{
                    this.stepcenter='downlocal'
                    that.loading = false
                    this.$message.error('执行失败');
                }
            }).finally(() => {
            })
        },

        //整套步骤
        gostep(){
            that.loading = true
            const params  = {
                stepname:this.stepname
            }
            step(params).then(response => {
                if(response.status=='success' && response.data=='204'){
                    if(this.stepname=='downhis'){
                        this.$message({
                            message: '1、下载医院目录完毕，准备对照东营目录',
                            type: 'success'
                        });
                        this.stepname='comparezero'
                    }else if(this.stepname=='comparezero'){
                        this.$message({
                            message: '2、对照东营目录完毕，准备对照油田目录',
                            type: 'success'
                        });
                        this.stepname='compareone'
                    }else if(this.stepname=='compareone'){
                        this.$message({
                            message: '3、对照油田目录完毕，准备对照工伤目录',
                            type: 'success'
                        });
                        this.stepname='comparetwo'
                    }else if(this.stepname=='comparetwo'){
                        this.$message({
                            message: '4、对照工伤目录完毕，准备上传东营目录',
                            type: 'success'
                        });
                        this.stepname='uploaddwzero'
                    }else if(this.stepname=='uploaddwzero'){
                        this.$message({
                            message: '5、上传东营目录完毕，准备上传油田目录',
                            type: 'success'
                        });
                        this.stepname='uploaddwone'
                    }else if(this.stepname=='uploaddwone'){
                        this.$message({
                            message: '6、上传油田目录完毕，准备上传工伤目录',
                            type: 'success'
                        });
                        this.stepname='uploaddwtwo'
                    }else if(this.stepname=='uploaddwtwo'){
                        this.$message({
                            message: '7、上传工伤目录完毕，准备下载东营对照目录',
                            type: 'success'
                        });
                        this.stepname='downdwzero'
                    }else if(this.stepname=='downdwzero'){
                        this.$message({
                            message: '8、下载东营对照目录完毕，准备下载油田对照目录',
                            type: 'success'
                        });
                        this.stepname='downdwone'
                    }else if(this.stepname=='downdwone'){
                        this.$message({
                            message: '9、下载东营油田目录完毕，准备下载工伤对照目录',
                            type: 'success'
                        });
                        this.stepname='downdwtwo'
                    }else if(this.stepname=='downdwtwo'){
                        this.$message({
                            message: '10、下载工伤油田目录完毕，准备推送HIS目录',
                            type: 'success'
                        });
                        this.stepname='uptohis'
                    }

                    this.gostep()


                }else if(response.status=='success'){
                    this.$message({
                        message: '11、推送HIS目录完毕，结束执行',
                        type: 'success'
                    });
                    this.stepname='downhis'
                    that.loading = false
                    that.getList()
                }else{
                    this.stepname='downhis'
                    that.loading = false
                    this.$message.error('执行失败');
                }
                //alert('上传成功')
            }).finally(() => {

            })


        },
        //系统对照
        syscompare(){
            that.loading = true
            syscompare().then(response => {
                if(response.status=='success'){
                    this.$message({
                          message: '成功',
                          type: 'success'
                     });
                }else{
                    this.$message.error('对照失败');
                }
                    //alert('上传成功')
            }).finally(() => {
                if(that.current_tab=='one'){
                    that.getList()
                    that.loading = false
                }

             })

        },

        //增量下载对照完的目录
        downloaddw(){
            that.loading = true
            downloaddw().then(response => {
                if(response.status=='success'){
                    this.$message({
                          message: '成功',
                          type: 'success'
                     });
                }else{
                    this.$message.error('下载地纬目录失败');
                }
                    //alert('上传成功')
            }).finally(() => {
                if(that.current_tab=='one'){
                    that.getList()
                    that.loading = false
                }

             })

        },
        //增量下载对照完的目录
        uploadtohis(){
            that.loading = true
            uploadtohis().then(response => {
                if(response.status=='success'){
                    this.$message({
                          message: '成功',
                          type: 'success'
                     });
                }else{
                    this.$message.error('上传HIS目录成功');
                }
                    //alert('上传成功')
            }).finally(() => {
                if(that.current_tab=='one'){
                    that.getList()
                    that.loading = false
                }
             })

        },
        //批量上传
        batchupload(){

            if(this.multipleSelection.length==0){
                this.$message({
                  showClose: true,
                  message: '请先选择需要上传的项目编码！',
                  type: 'warning'
                });
                return
            }

            for(const key in this.multipleSelection){
                this.upload(this.multipleSelection[key]);
            }
            this.multipleSelection=[]
            this.$refs.multipleTable.clearSelection();
        },
        //批量选择
        handleSelectionChange(val){
            this.multipleSelection = val;
        },


        //选择类别
        selectlb(val){
            //

            if(this.searchData.sbj==''){
                this.$message({
                    showClose: true,
                    message: '请先选择社保局，再选择本项内容！',
                    type: 'warning'
                });
                this.searchData.ypbz = ''
                return
            }
            this.$nextTick(function(){
                this.$refs.multipleTable.clearSelection();
            })

            this.searchData.ypbz = val
            this.getList()
        },
        //选择社保局
        selectsbj(val){
            //
            this.$nextTick(function(){
                this.$refs.multipleTable.clearSelection();
            })

            this.searchData.sbj = val
            this.getList()
        },
        //选择项目状态
        selectflag(val){
            //

            //如果不选择社保局，会提示
            if(this.searchData.sbj==''){
                this.$message({
                    showClose: true,
                    message: '请先选择社保局，再选择本项内容！',
                    type: 'warning'
                });
                this.searchData.flag=''
                return
            }
            this.$nextTick(function(){
                this.$refs.multipleTable.clearSelection();
            })

            this.searchData.flag = val
            this.getList()
        },
        //更新前端数据
        updatexmbm(e){
            //document.getElementById(this.project_id).innerHTML=e
            this.visible=false
            for (const item of this.list) {
				if(item.id==this.project_id){
                    if(this.searchData.sbj=='dy'){
                        item.gbxmbm=e
                        item.status=1
                        item.status_text.value= '待上传'
                    }else{
                        item.gbxmbm_oil=e
                        item.status_oil=1
                        item.status_oil_text.value= '待上传'
                    }

				}
			}
            this.getList()
        },
        //上传对照到地委
        upload(row){
            const params  = {
                sbj:this.searchData.sbj,
                project_id:row.id
            }
            upload(params).then(response => {

                if(response.status=='success'){
                    this.$message({
                          message: '成功',
                          type: 'success'
                     });
                }else{
                    this.$message.error('上传失败');
                }

                    //alert('上传成功')

            }).finally(() => {
                    that.getList()
                    that.loading = false
             })


        },
        //开始对照（任何一种状态都能对照了）
        search(index,row){

            //东营对照完的不再对照了
            if(this.searchData.sbj=='dy' && row.status==5){
                return;
            }

            if(this.searchData.sbj=='oil' && row.status_oil==5){
                return;
            }


            if(this.searchData.sbj=='gs' && row.status_gs==5){
                return;
            }


            if(row.yyxmmc==null){
                row.yyxmmc = ''
            }

            if(row.scqy==null){
                row.scqy = ''
            }

            this.project_id=row.id
            this.current_name =row.yyxmmc
            this.current_bm =row.yyxmbm
            this.current_id =row.id
            this.visible = true
        },

        getList() {
            if(this.searchData.sbj==''){
                return
             }

            this.loading = true
            const qyparams = {
                ...this.pageInfo,
                ...this.searchData,
            }


            if(this.current_tab=='one'){
                getDictionaryByType(qyparams)
                .then(response => {
                    this.list = response.data
                   // th.list = []
                    this.total = response.meta.total
                })
                .finally(() => {
                    this.loading = false
                })
            }else if(this.current_tab=='two'){

                hxlist(qyparams)
                    .then(response => {
                        this.list = response.data
                       // th.list = []
                        this.total = response.meta.total
                    })
                    .finally(() => {
                        this.loading = false
                    })


            }else{
                hospitallist(qyparams)
                    .then(response => {
                        this.list = response.data
                       // th.list = []
                        this.total = response.meta.total
                    })
                    .finally(() => {
                        this.loading = false
                    })

            }


        },
        onSubmit() {
            console.log('submit!')
        },

        handleClick(tab, event) {
            this.getList()
        },
        getRowKeys(row) {
            return row.id
        },
    },
}
</script>

<style lang="scss" scoped>


.eltable {
    ::v-deep .el-input__inner {
        height: 20px;
    }
    ::v-deep .el-table-column--selection {
        .cell {
            padding: 0 14px;
        }
    }
}

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

.el-form-item {
    margin-bottom: 8px;
}
.all {
    font-size: 14px;
    font-family: SourceHanSansCN-Regular;
    color: #666666;
}

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

.top {
    display: flex;
    justify-content: flex-start;
    padding-left: 20px;
}

.buttons {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    padding: 10px 10px;
    margin: 0 5px;
    position: relative;
}

.boderright:after {
    position: absolute;
    top: 45%;
    transform: translateY(-40%);
    right: 0;
    content: '';
    width: 1px;
    height: 48px;
    background-color: black;
}

.rightlast {
    margin-left: 30px;
}

.search {
    background-color: #e3eefb;
    display: flex;
    justify-content: flex-start;
    padding-left: 20px;
    padding-top: 20px;
}

.search_left {
    display: flex;
    flex-direction: column;
}

.font-normal {
    padding-left: 10px;
}

.search_middle {
    display: flex;
    flex-direction: column;
}
.search_middle .el-button{
    margin-bottom:10px;

}
.search_middle{
    ::v-deep button {
        font-weight: normal;
        margin-right:10px;
        margin-left:0px;
    }

}


.search_middle_1_top {
    margin-bottom: 8px;
}

.search_middle .el-checkbox {
    margin-top: 8px;
}

.search_right {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.el-input {
    width: 200px;
}

.el-select {
    width: 200px;
}

.search_right .el-button {
    margin-bottom: 8px;
    width: 160px;
}
.pagination-container {
    margin-bottom: 25px;
}
::v-deep .el-table__body-wrapper{
    height: calc(100vh - 337px);
    overflow: auto;
}
</style>
