<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div class="app-container ">
      <div class="cell clearfix">
       药品名称:<span>{{getName(this.$route.query.drug_id)}}</span>&nbsp;
       库存: {{this.$route.query.over_plus}}
       规格:<span>{{drug.dose}}{{drug.dose_unit}}*{{drug.min_number}}{{drug.min_unit}}/{{drug.max_unit}}</span>&nbsp;
       厂家:<span>{{this.$route.query.manufacturer}}</span>&nbsp;
      </div>
      <div class="cell clearfix">
        <span>日期查询:</span>
        <el-date-picker
            size="small"
            v-model="start_time"
            prefix-icon="el-icon-date"
            :editable="false"
            style="width: 196px;"
            type="date"
            placeholder="选择日期时间"
            align="right"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="startTimeChange"
           ></el-date-picker>-
            <el-date-picker
              size="small"
              v-model="end_time"
              prefix-icon="el-icon-date"
              :editable="false"
              style="width: 196px;margin-right:10px;"
              type="date"
              placeholder="选择日期时间"
              align="right"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              @change="endTimeChange"
          ></el-date-picker>

        <span>出入库方式:</span>
        <el-select v-model="stock_type" style="width:160px;margin-right:10px;" placeholder="请选择" @change="changeDrug">
            <el-option
              v-for="(item,index) in stockType"
              :key="index"
              :label="item.name"
              :value="item.id">
            </el-option>
        </el-select>
        
        <span>
          <el-button type="primary" size="small" @click="toExprot">导出</el-button>
        </span>
        
      </div>
      
       <el-table
        :data="tableList"
        border
        style="width: 100%">
        <el-table-column prop="date" label="序号" width="180" align="center">
           <template  slot-scope="scope">
              {{scope.$index + 1}}
           </template>
        </el-table-column>
        <el-table-column prop="drug_type" label="出入库方式" width="180" align="center">
           <template slot-scope="scope">
             <span v-if="scope.row.consumable_type == 1">手动入库</span>
             <span v-if="scope.row.consumable_type == 2">手动出库</span>
             <span v-if="scope.row.consumable_type == 3">自动出库</span>
             <span v-if="scope.row.consumable_type == 4">手动退库</span>
             <span v-if="scope.row.consumable_type == 7">自动退库</span>
             <span v-if="scope.row.consumable_type == 5">报损数量</span>
             <span v-if="scope.row.consumable_type == 10">盘盈</span>
             <span v-if="scope.row.consumable_type == 11">盘亏</span>
             <span v-if="scope.row.consumable_type == 12">调拨出库</span>
             <span v-if="scope.row.consumable_type == 13">调拨入库</span>
             <span v-if="scope.row.consumable_type == 15">结算出库</span>
           </template>
        </el-table-column>
        <el-table-column prop="drug_name" label="出/入库单据编码" align="center">
           <template slot-scope="scope">
             <span v-if="scope.row.consumable_type == 1">{{scope.row.warehousing_order}}</span>
              <span v-if="scope.row.consumable_type == 2 || scope.row.consumable_type == 3 || scope.row.consumable_type == 12 || scope.row.consumable_type == 15">{{scope.row.warehouse_out_order_number}}</span>
              <span v-if="scope.row.consumable_type == 4 || scope.row.consumable_type == 7">{{scope.row.cancel_order_number}}</span>
              <span v-if="scope.row.consumable_type == 5">{{scope.row.warehouse_out_order_number}}</span>
              <span v-if="scope.row.consumable_type == 10 || scope.row.consumable_type == 11 || scope.row.consumable_type == 13">{{scope.row.warehousing_order}}</span>
           </template>
        </el-table-column>
        <el-table-column prop="drug_name" label="操作日期" align="center">
           <template slot-scope="scope">
             {{getTime(scope.row.ctime,"{y}-{h}-{d}")}}
           </template>
        </el-table-column>
        <el-table-column prop="drug_name" label="仓库名称" align="center">
           <template slot-scope="scope">
              <span>{{getHouseName(scope.row.storehouse_id)}}</span>
           </template>
        </el-table-column>
        <el-table-column prop="drug_name" label="数量&单位" align="center">
           <template slot-scope="scope">
              <span v-if="scope.row.consumable_type != 2 &&  scope.row.consumable_type != 3 && scope.row.consumable_type != 5 && scope.row.consumable_type != 7">{{scope.row.count}}{{scope.row.max_unit}}</span>
              <span v-if="(scope.row.consumable_type == 2 || scope.row.consumable_type == 3 || scope.row.consumable_type == 5 || scope.row.consumable_type == 7) && parseInt(scope.row.count/scope.row.BaseDrugLib.min_number) >0">{{parseInt(scope.row.count/scope.row.BaseDrugLib.min_number)}}{{scope.row.BaseDrugLib.max_unit}}</span>
              <span v-if="(scope.row.consumable_type == 2 || scope.row.consumable_type == 3 || scope.row.consumable_type == 5 || scope.row.consumable_type == 7) && scope.row.count%scope.row.BaseDrugLib.min_number >0">{{scope.row.count%scope.row.BaseDrugLib.min_number}}{{scope.row.BaseDrugLib.min_unit}}</span>
           </template>
        </el-table-column>

        <!-- <el-table-column prop="drug_name" label="单位" align="center">
           <template slot-scope="scope">
              {{scope.row.max_unit}}
           </template>
        </el-table-column> -->


       <!-- <el-table-column prop="drug_name" label="剩余量" align="center">
           <template slot-scope="scope">
             {{getCountList(scope.row.BaseDrugLib.min_number,scope.row.DrugWarehouseInfo,scope.row.BaseDrugLib.max_unit,scope.row.BaseDrugLib.min_unit)}}
           </template>
        </el-table-column> -->
       
        <el-table-column prop="drug_name" label="单价" align="center">
           <template slot-scope="scope">
             <span v-if="scope.row.consumable_type == 2 && scope.row.xt_drug_warehouse_out_info!=null">{{scope.row.xt_drug_warehouse_out_info.price}}</span>
             <span v-else>
              <span v-if="scope.row.price >0">{{scope.row.price}}</span>
              <span v-if="scope.row.price == 0">{{getPrice(scope.row.drug_id)}}</span>
             </span>
            
           </template>
        </el-table-column>
         <el-table-column prop="drug_name" label="有效期" align="center">
           <template slot-scope="scope">
              {{getTime(scope.row.expire_date,"{y}-{h}-{d}")}}
            
           </template>
        </el-table-column>
         <!-- <el-table-column prop="drug_name" label="剩余库存" align="center">
           <template slot-scope="scope">
             {{scope.row.over_count}}
           </template>
        </el-table-column> -->
        <el-table-column prop="drug_name" label="使用人" align="center">
           <template slot-scope="scope">
             <span > {{getPatientName(scope.row.patient_id)}}</span>
           </template>
        </el-table-column>
        <el-table-column prop="drug_name" label="剩余库存" align="center">
           <template slot-scope="scope">
             <span > {{getDrugCount(scope.row.over_count,scope.row.BaseDrugLib.max_unit,scope.row.BaseDrugLib.min_unit,scope.row.BaseDrugLib.min_number)}}</span>
           </template>
        </el-table-column>
        <!-- <el-table-column prop="drug_name" label="批号" align="center">
           <template slot-scope="scope">
             <span>{{scope.row.batch_number}}</span>
           </template>
        </el-table-column> -->
        <!-- <el-table-column prop="drug_name" label="生产商" align="center">
           <template slot-scope="scope">
             {{getManufacturer(scope.row.manufacturer)}}
           </template>
        </el-table-column> -->
       </el-table>
       
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 50, 100,500,1000]"
        :page-size="10"
        background
        align="right"
        style="margin-top:20px;"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <setting-dialog
      ref="dialog"
    ></setting-dialog>

  </div>
</template>

<script>
  import { uParseTime } from '@/utils/tools'
  import BreadCrumb from '@/xt_pages/components/bread-crumb'
  import { getDrugStockFlow,getOutDrugStockFlow,getDrugCountList,getDrugFlow } from '@/api/drug/drug_stock'
  import SettingDialog from './settingDialog/index'
  import { getDictionaryDataConfig } from "@/utils/data";
  export default {
    name: 'stockIn',
    created() {
       var nowDate = new Date();
      var nowYear = nowDate.getFullYear();
      var nowMonth = nowDate.getMonth() + 1;
      var nowDay = nowDate.getDate();
      this.end_time =
        nowYear +
        "-" +
        (nowMonth < 10 ? "0" + nowMonth : nowMonth) +
        "-" +
        (nowDay < 10 ? "0" + nowDay : nowDay);
      nowDate.setMonth(nowDate.getMonth() - 1);
      nowYear = nowDate.getFullYear();
      nowMonth = nowDate.getMonth() + 1;
      nowDay = nowDate.getDate();
      this.start_time =
        nowYear +
        "-" +
        (nowMonth < 10 ? "0" + nowMonth : nowMonth) +
        "-" +
        (nowDay < 10 ? "0" + nowDay : nowDay);
      var drugCategory = getDictionaryDataConfig('system','drug_category')
      this.drugCategory.push(...drugCategory)
      this.drugTypeList = getDictionaryDataConfig('system','drug_type') 
  
      this.getDrugFlow()
    },
    components: {
      SettingDialog,
      BreadCrumb
    },
    data() {
      return {
        crumbs: [
          { path: false, name: '库存管理' },
          { path: '/stock/drugs/stock/query', name: '药品库存查询' },
          { path:'/drugstock/in/drugstockflow',name:'库存流水'}
        ],
        keywords: '',
        total: 0,
        multipleSelection: [],
        signAndWeighBoxPatients: 'sign-and-weigh-box-patients',
        start_time: '',
        end_time: '',
        page: 1,
        limit: 10,
        goodType: [],
        goodInfo: [],
        tempArr: [],
        sameRowArr: [],
        WarehouseInfo: {
          loading: false,
          warehouseInfoDate: []
        },
        tableData:[],
        drug_category:0,
        stock_type:0,
        drugCategory:[
          {id:0,name:"全部"}
        ],
        drugTypeList:[],
        tableList:[],
        manufacturerList:[],
        list:[],
        stockType:[
          {id:0,name:"全部"},
          {id:1,name:"手动入库"},
          {id:2,name:"手动出库"},
          {id:3,name:"自动出库"},
          {id:4,name:"手动退库"},
          {id:10,name:"盘盈"},
          {id:11,name:"盘亏"},
          {id:12,name:"调拨出库"},
          {id:13,name:"调拨入库"},
          {id:15,name:"结算出库"}
        ],
        outList:[],
        countList:[],
        outCountList:[],
        autoCountList:[],
        drugOutList:[],
        total:0,
        drug:{},
        houseList:[],
        patientList:[],
      }
    },
    methods:{
       getlist(){
           var params = {
             drug_id:this.$route.query.drug_id,
             start_time:this.start_time,
             end_time:this.end_time,
             page:this.page,
             limit:this.limit,
             stock_type:this.stock_type,  
           }
         getDrugStockFlow(params).then(response=>{
           if(response.data.state == 1){
            var list = response.data.data.list
          
            for(let i=0;i<list.length;i++){
               list[i].drug_way = 4
               this.tableList.push(list[i])
            }
            console.log("tablelist323223232323wode",this.tableList)
            var total = response.data.data.total
            this.total = total
            var manufacturerList = response.data.data.manufacturerList
            this.manufacturerList = manufacturerList
            this.drug =  response.data.data.drug
            var outlist = response.data.data.outlist
            console.log("outlist",outlist)
           }
         })  
       },
       getOutList(){
          var params = {
             drug_id:this.$route.query.drug_id,
             start_time:this.start_time,
             end_time:this.end_time,
             page:this.page,
             limit:this.limit,
             stock_type:this.stock_type,  
           }
         getOutDrugStockFlow(params).then(response=>{
            if(response.data.state == 1){
               var outList = response.data.data.outList
              

              for(let i=0;i<outList.length;i++){
               
                if(outList[i].is_sys == 1){
                  outList[i].drug_way = 2
                }
                if(outList[i].is_sys == 0){
                 
                  outList[i].drug_way = 1
                }
                this.tableList.push(outList[i])
              }
              this.total = response.data.data.total
            
            }
         })
       },
       handleSizeChange(val) {
        this.limit = val
        this.getDrugFlow()
      },
      handleCurrentChange(val) {
        this.page = val
        this.getDrugFlow()
      },
        
    startTimeChange: function(val) {
      var time = this.getTimestamp(val) - this.getTimestamp(this.end_time);
      
      if (time > 0) {
        this.$message.error("开始时间不能大于结束时间");
        this.start_time = "";
      } else {
        this.getDrugFlow()
      }
    },
    endTimeChange: function(val) {
      var time = this.getTimestamp(val) - this.getTimestamp(this.start_time);
      if (time < 0) {
        this.$message.error("结束时间不能小于开始时间");
        this.end_time = "";
      } else {
        this.getDrugFlow()
      }
     },
     getManufacturer(id){
       var name = ""
       for(let i=0;i<this.manufacturerList.length;i++){
         if(id == this.manufacturerList[i].id){
            name = this.manufacturerList[i].manufacturer_name
         }
       }
       return name
     },
    getTime(val) {
      if(val < 0){
          return ""
      }
      if(val == ""){
        return ""
      }else {
        return uParseTime(val, '{y}-{m}-{d}')
      }
     },
    getDrugCountList(){
         var params = {
          keyword: this.keywords,
          start_time:this.start_time,
          end_time:this.end_time,
         }
      getDrugCountList(params).then(response=>{
          if(response.data.state == 1){
            var countlist =  response.data.data.countList
           
            this.countList = countlist
            var outcountlist = response.data.data.outCountList
         
            this.outCountList = outcountlist
            var aucountlist = response.data.data.auCountList
            
            this.autoCountList = aucountlist
             var minCount = response.data.data.minCount
           
            this.minCount = minCount
            var info = response.data.data.info
            for(let i=0;i<info.length;i++){
              if(info[i].count_unit == info[i].max_unit){
                 info[i].count = info[i].count * info[i].min_number
              }
            }
           
            this.drugOutList = info
          }
        })
      },
      getInCount(id){
        var count = ""
        for(let i=0;i<this.countList.length;i++){
           if(id == this.countList[i].drug_id){
             count = this.countList[i].count
           }
        }
        return count
      },

      getOutCount(id){
        var count = ""
        for(let i=0;i<this.outCountList.length;i++){
           if(id == this.outCountList[i].drug_id){
               count = this.outCountList[i].count
           }
        }
        return count
      },
      getAutoCount(id){
        var count= ""
        for(let i=0;i<this.autoCountList.length;i++){
          if(id == this.autoCountList[i].drug_id){
            count = this.autoCountList[i].count
          }
        }
        return count
      },
      getTimestamp(time) { // 把时间日期转成时间戳
        return (new Date(time)).getTime() / 1000
      },
      changeDrug(val){
       this.tableList = []
       this.getDrugFlow()
       
      },
      getMinCount(id){
        var count=""
        for(let i=0;i<this.minCount.length;i++){
          if(id == this.minCount[i].drug_id){
            count = this.minCount[i].count
          }
        }
        return count
      },
      getCount(drug_id,min_number,max_unit,min_unit){
        var count= 0
        var str = ""
        var min_str = ""
        for(let i=0;i<this.drugOutList.length;i++){
          if(drug_id == this.drugOutList[i].drug_id){
             count += parseInt(this.drugOutList[i].count)
          }
        }
        if(parseInt(count/min_number)!=0){
          str = parseInt(count/min_number)+ max_unit
        }
        if((count%min_number)!=0){
          min_str =  count%min_number + min_unit
        }
        return str + min_str
      },

     getCountOne(drug_id){
        var count= 0
        for(let i=0;i<this.drugOutList.length;i++){
          if(drug_id == this.drugOutList[i].drug_id){
             count += parseInt(this.drugOutList[i].count)
          }
        }
        return count
      },
     getCountTwo(drug_id,min_number,max_unit,min_unit){
       var total_count = 0
       var out_count = 0
       var count = 0
       var str = ""
       var str_min = ""
       total_count = this.getInCount(drug_id) * min_number
       out_count = this.getCountOne(drug_id)
       count = total_count-out_count
       if(parseInt(count/min_number)!=0){
         str = parseInt(count/min_number) + max_unit
       }
       if((count%min_number)!=0){
         str_min = count%min_number + min_unit
       }
       return str+str_min
     },

     getDrugFlow(){
       var params = {
          drug_id:this.$route.query.drug_id,
          start_time:this.start_time,
          end_time:this.end_time,
          page:this.page,
          limit:this.limit,
          stock_type:this.stock_type,  
        }
       getDrugFlow(params).then(response=>{
          if(response.data.state ==1){
            var list = response.data.data.list

            console.log("list2o2o33o23233o3oowo",list)
            this.tableList = list
            var total = response.data.data.total
           
            this.total =total
            this.manufacturerList = response.data.data.manufacturerList
            this.dealerList = response.data.data.dealerList
            var drug = response.data.data.drug
           
            this.drug = drug
            this.patientList = response.data.data.patientList

            this.houseList = response.data.data.houseList
          }
       })
     },
     getCountList(min_number,val,max_unit,min_unit){
        var total = 0
         var str = ""
         var str_min = ""
        for(let i=0;i<val.length;i++){
           total += (val[i].stock_max_number * min_number + val[i].stock_min_number)
        }
       if(parseInt(total/min_number)!=0){
         str = parseInt(total/min_number) + max_unit
       }
       if((total%min_number)!=0){
         str_min = total%min_number + min_unit
       }
        return str+str_min
     },
     getName(drug_id){
        var name = ""
        if(drug_id == this.drug.id){
           name = this.drug.drug_name
        }
        return name
     },
     getPrice(id){
       var min_price = 0 
       if(id == this.drug.id){
         min_price = this.drug.min_price
       }
       return min_price
     },
     getHouseName(id){
      var storehouse_name = ""
      for(let i=0;i<this.houseList.length;i++){
        if(id == this.houseList[i].id){
          storehouse_name = this.houseList[i].storehouse_name
        }
      }
      return storehouse_name
     },
     getPatientName(id){
       var name = ""
       for(let i=0;i<this.patientList.length;i++){
          if(id == this.patientList[i].id){
              name = this.patientList[i].name
          }
       }
       return name
     },
     getDrugCount(total,max_unit,min_unit,min_number){
        var max_str = "";
        var min_str = "";
        if (total < min_number) {
        min_str = total + min_unit;
      }
      if (total == 0) {
        min_str = "";
        max_str = "";
      }
      if (total >= min_number) {
        if (parseInt(total / min_number) != 0) {
          max_str = parseInt(total / min_number) + max_unit;
        }
        if (total % min_number != 0) {
          min_str = (total % min_number) + min_unit;
        }
      }
      return max_str + min_str;
     },

     toExprot(){
      import('@/vendor/Export2Excel').then(excel => { 
         
        console.log("tableList",this.tableList)

        if(this.tableList!=null && this.tableList.length>0){
          for(let i=0;i<this.tableList.length;i++){

              this.tableList[i].index = i+1
             if(this.tableList[i].consumable_type == 1){
               this.tableList[i].consumable_type_name = "手动入库"
             }
             if(this.tableList[i].consumable_type == 2){
               this.tableList[i].consumable_type_name = "手动出库"
             }
             if(this.tableList[i].consumable_type == 3){
               this.tableList[i].consumable_type_name = "自动出库"
             }
             if(this.tableList[i].consumable_type == 4){
               this.tableList[i].consumable_type_name = "手动退库"
             }
             if(this.tableList[i].consumable_type == 5){
               this.tableList[i].consumable_type_name = "报损数量"
             }
             if(this.tableList[i].consumable_type == 7){
               this.tableList[i].consumable_type_name = "自动退库"
             }
             if(this.tableList[i].consumable_type == 10){
               this.tableList[i].consumable_type_name = "盘盈"
             }
             if(this.tableList[i].consumable_type == 11){
               this.tableList[i].consumable_type_name = "盘亏"
             }
             if(this.tableList[i].consumable_type == 12){
               this.tableList[i].consumable_type_name = "调拨出库"
             }
             if(this.tableList[i].consumable_type == 13){
               this.tableList[i].consumable_type_name = "调拨入库"
             }
             if(this.tableList[i].consumable_type == 15){
               this.tableList[i].consumable_type_name = "结算出库"
             }

        
            if(this.tableList[i].consumable_type == 1){
              this.tableList[i].order_number = this.tableList[i].warehousing_order
            }
            if(this.tableList[i].consumable_type == 2){
              this.tableList[i].order_number = this.tableList[i].warehouse_out_order_number
            }
            if(this.tableList[i].consumable_type == 3){
              this.tableList[i].order_number = this.tableList[i].warehouse_out_order_number
            }
            if(this.tableList[i].consumable_type == 4 || this.tableList[i].consumable_type == 7){
              this.tableList[i].order_number = this.tableList[i].cancel_order_number
            }
            if(this.tableList[i].consumable_type == 10){
              this.tableList[i].order_number = this.tableList[i].warehouse_out_order_number
            }
            if(this.tableList[i].consumable_type == 11){
              this.tableList[i].order_number = this.tableList[i].warehouse_out_order_number
            }
            if(this.tableList[i].consumable_type == 12){
              this.tableList[i].order_number = this.tableList[i].warehouse_out_order_number
            }
            if(this.tableList[i].consumable_type == 13){
              this.tableList[i].order_number = this.tableList[i].warehousing_order
            }
            if(this.tableList[i].consumable_type == 15){
              this.tableList[i].order_number = this.tableList[i].warehouse_out_order_number
            }

            this.tableList[i].record_time = this.getTime(this.tableList[i].ctime)
          
            this.tableList[i].storehouse_name = this.getHouseName(this.tableList[i].storehouse_id)


            
            if(this.tableList[i].consumable_type!=2 && this.tableList[i].consumable_type!=3 && this.tableList[i].consumable_type!=5 &&  this.tableList[i].consumable_type != 7){
              this.tableList[i].coutn_unit = (this.tableList[i].count.toString()) +this.tableList[i].max_unit
            }
            if(this.tableList[i].consumable_type == 2 ||this.tableList[i].consumable_type == 3 || this.tableList[i].consumable_type == 5 ||  this.tableList[i].consumable_type ==7  && (parseInt(this.tableList[i].count/this.tableList[i].BaseDrugLib.min_number) >0)){
              this.tableList[i].coutn_unit = (parseInt(this.tableList[i].count/this.tableList[i].BaseDrugLib.min_number)).toString() +  this.tableList[i].BaseDrugLib.max_unit
            }
            if(this.tableList[i].consumable_type == 2 ||this.tableList[i].consumable_type == 3 || this.tableList[i].consumable_type == 5 ||  this.tableList[i].consumable_type ==7  && (this.tableList[i].count%this.tableList[i].BaseDrugLib.min_number >0)){
              this.tableList[i].coutn_unit = (parseInt(this.tableList[i].count%this.tableList[i].BaseDrugLib.min_number)).toString() +  this.tableList[i].BaseDrugLib.min_unit
            }

            if(this.tableList[i].price>0){
              this.tableList[i].total_price = this.tableList[i].price
            }
            if(this.tableList[i].price == 0){
              this.tableList[i].total_price = this.getPrice(this.tableList[i].drug_id)
            }

            this.tableList[i].expire_date_name = this.getTime(this.tableList[i].expire_date,"{y}-{h}-{d}")
            this.tableList[i].manufacturer_name = this.getManufacturer( this.tableList[i].manufacturer)
            this.tableList[i].patient_name = this.getPatientName(this.tableList[i].patient_id) 
            this.tableList[i].over_count_name = this.getDrugCount(this.tableList[i].over_count,this.tableList[i].BaseDrugLib.max_unit,this.tableList[i].BaseDrugLib.min_unit,this.tableList[i].BaseDrugLib.min_number)

          }
        }
      
       
        const multiHeader =['序号','出入库方式','出入库单据编码','操作日期','仓库名称','数量','单价','有效期','使用人','剩余库存']
      
        const filterVal = ['index', 'consumable_type_name', 'order_number', 'record_time', 'storehouse_name', 'coutn_unit', 'total_price', 'expire_date_name','patient_name','over_count_name']
        

        const data = this.formatJson(filterVal, this.tableList) 
        console.log("datawoowow",data)
         
      
         excel.export_json_to_excel({
           header: multiHeader,
           data,
           filename: '药品流水'
         })
       })
    },
    formatJson(filterVal, jsonData) {
     return jsonData.map(v => filterVal.map(j => v[j]))
    },
    }
  }
</script>

<style rel="stylesheet/css" lang="scss" scoped>
  .information {
    border: 1px #dcdfe6 solid;
    padding: 30px 20px 30px 20px;

  .border {
    border-bottom: 1px #dcdfe6 solid;
    margin: 0px 0 20px 0;
  }

  }

  .title {
    background: #409eff;
    height: 44px;
    line-height: 44px;
    padding: 0 0 0 10px;
    color: #fff;
    margin: 0 0 10px 0;
  }

  .edit_separater {
    border-top: 1px solid rgb(233, 233, 233);
    margin-top: 15px;
    margin-bottom: 15px;
  }
</style>

<style>
  .sign-and-weigh-box .sign-and-weigh-box-patients .cell {
    font-size: 12px;
  }

  .sign-and-weigh-box .sign-and-weigh-box-patients .current-row > td {
    background: #6fb5fa;
  }

  .count {
    color: #bd2c00;
  }

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #d0d3da;
  }

  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    background-color: #d0d3da;
  }
</style>
