<template>
    <div class="main-contain">
        <div class="app-container">
         <el-container>
               <div style="width:27%">
                <el-row>
                   时间:
                    <el-date-picker
                      size="small"
                      v-model="start_time"
                      prefix-icon="el-icon-date"
                      :editable="false"
                      style="width:160px;"
                      type="date"
                      placeholder="选择日期时间"
                      align="right"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      @change="startTimeChange"
                    ></el-date-picker> 
                      <span>-</span> 
                      <el-date-picker
                        size="small"
                        v-model="end_time"
                        prefix-icon="el-icon-date"
                        :editable="false"
                        style="width:160px;"
                        type="date"
                        placeholder="选择日期时间"
                        align="right"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        @change="endTimeChange"
                    ></el-date-picker>
                </el-row>
                <el-row></el-row>
                 <el-row>
                   <el-col :span="24">
                      <el-input style="width:200px;margin-top:10px;margin-bottom:10px" placeholder="请输入患者姓名" v-model="keyword"></el-input>&nbsp;<el-button type="primary" @click="onSearch" icon="el-icon-search">搜索</el-button>
                   </el-col>
                  </el-row>

                  <el-row>
                      <el-table
                          ref="singleTable"
                          :data="patientList"
                          highlight-current-row
                           border
                          @current-change="handleCurrentChange"
                           height="440"
                           :row-style="{ color: '#303133' }"
                          :header-cell-style="{
                            backgroundColor: 'rgb(245, 247, 250)',
                            color: '#606266'
                          }"
                        >
                     <el-table-column
                       prop="date"
                       label="序号"
                      align="center"
                      >
                      <template slot-scope="scope">
                        {{scope.$index + 1}}
                      </template>
                    </el-table-column>
                     <el-table-column
                       prop="name"
                      label="姓名"
                      align="center">
                      <template slot-scope="scope">
                        {{scope.row.name}}
                      </template>
                     </el-table-column>

                     </el-table>
                  </el-row>
               </div>

                 <el-main>
                  <div class="main newMain">
                      
                        
                  <el-tabs>

                   <el-tab-pane label="患者使用列表">
                   
                     <el-table
                          :data="tableList"
                          highlight-current-row
                           border
                           height="440"
                           :row-style="{ color: '#303133' }"
                          :header-cell-style="{
                            backgroundColor: 'rgb(245, 247, 250)',
                            color: '#606266'
                          }"
                        >
                     <el-table-column
                       prop="date"
                       label="名称"
                      align="center"
                      >
                      <template slot-scope="scope">
                        {{scope.row.GoodInfo.good_name}}
                      </template>
                    </el-table-column>
                     <el-table-column
                       prop="name"
                      label="生产厂家"
                      align="center">
                      <template slot-scope="scope">
                        {{getManufacturName(scope.row.manufacturer)}}
                      </template>
                     </el-table-column>
                      <el-table-column
                       prop="name"
                      label="规格&单位"
                      align="center">
                      <template slot-scope="scope">
                        {{scope.row.GoodInfo.specification_name}}
                      </template>
                     </el-table-column>
                      <el-table-column
                       prop="name"
                      label="数量"
                      align="center">
                      <template slot-scope="scope">
                        {{scope.row.count}}
                      </template>
                     </el-table-column>

                     </el-table>
                    </el-tab-pane>
                   </el-tabs>
                </div>
             </el-main>
          </el-container>
        </el-container>
      </el-container>
      </div>
    </div>

</template>
<script>
import { getGoodPatientList,getWarehouseOutDetailByPatientId } from "@/api/drug/drug"
export default {
  data(){
    return{
      zoneList:[],
      zone_id:0,
      tableData:[],
      DeviceTypeType:[],
      device_type:"",
      forms:{},
      start_time:"",
      end_time:"",
      patientList:[],
      tableList:[],
      keyword:"",
      manufacturerList:[],
      patient_id:0,
      patient:{},
    }
  },
  methods:{
    startTimeChange(){
      this.handleCurrentChange(this.patient)
    },
    endTimeChange(){
      this.handleCurrentChange(this.patient)
    },
    getlist(){
        var params = {
          keyword:this.keyword,
        }
      getGoodPatientList(params).then(response=>{
        if(response.data.state == 1){
          var list = response.data.data.list
          this.patientList = list
          this.$refs.singleTable.setCurrentRow(this.patientList[0]);
          this.handleCurrentChange(this.patientList[0])
        }
      })
    },
   onSearch(){
     this.getlist()
   },
   handleCurrentChange(val){
       this.patient = val
       var params = {
         patient_id:val.id,
         start_time:this.start_time,
         end_time:this.end_time,
       }
     getWarehouseOutDetailByPatientId(params).then(response=>{
        if(response.data.state == 1){
          var list = response.data.data.list
          this.manufacturerList = response.data.data.manufacturerList
          this.tableList = list
        }
     })
   },
   getManufacturName(id){
     var manufacturer_name = ""
     for(let i=0;i<this.manufacturerList.length;i++){
        if(id == this.manufacturerList[i].id){
          manufacturer_name = this.manufacturerList[i].manufacturer_name
        } 
     }
     return manufacturer_name
   }
  },
  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);
     this.getlist()
  },
  
}
</script>


   
<style lang="scss" scoped>
    .zone{
      //  margin-left: 30px;
      //  text-align: left;
       width: 70px;
       display: inline-block;
       color:#606266;
    }
    .disinfect{
      position: relative;
      .newButton{
        // position: absolute;
        // right: 2%;
        // top:4px;
        // z-index: 9;
        margin-bottom: 10px;
    margin-left: 90%;
      }
    }
    .disinfectOne{
      position: relative;
      .newButtonOne{
        position: absolute;
         right: 0;
         top: -10;
         z-index: 18;
      }
    }
    .but{
      width: 200px;
      height: 50px;
      // border: solid 1px red;
      margin-left: 77%;
    }
    .clearn{
      width: 460px;
      height: 50px;
      // border:solid 1px red;
      margin-left:650px;
    }

  .zClass{
    width: 200px;
    height: 200px;
    // border:solid 1px red;
    margin-left: 450px;
    margin-top: 200px;
  }
  .warn{
    color: red;
    font-size: 14px;
    width: 100%;
    display: inline-block;
    margin-left: 96px;
  }

  .userbutton{
       margin-bottom: 10px;
    margin-left: 82%
  }

</style>
<style lang="scss">
   .a{
     margin-bottom: 10px;
      margin-top: 6px;

   }

   .b{
    .el-button{
      margin-left: 90%;
      margin-bottom: 10px;
    }
   }

   .stoppage{
     .el-form-item__label{
       width:190px;
     }
   }
   .st{
     .el-form-item__label{
       width:-10px;
     }
   }
   .main{
     position: relative;
     .newButtonOne{
       position:absolute;
       right: 0;
       z-index: 2;
     }
   }

    .elbutton{
      // border: solid 1px red;
      height: 50px;
      width: 400px;
      margin-left: 650px;
    }
  // .el-form-item__label {
  //   width: 130px;
  //   font-size: 14px;
  // }
  .el-form-item__error {
    margin-left: 130px;
  }

 .el-upload-list__item-name {
    color: #606266;
    display: block;
    margin-right: 40px;
    overflow: hidden;
    padding-left: 4px;
    text-overflow: ellipsis;
    transition: color .3s;
    white-space: nowrap;
}
.el-main{
  padding-top: 0px;
}
.newMain{
  .el-form-item__label{
    width: 104px;
  }
}
.newDisinfectOne{
  .el-input--prefix .el-input__inner{
    padding-left: 15px
  }
}
.stoppage{
  .el-form-item__label{
    width: 18%;
  }
}
.newItem{
  .el-form-item__label{
    width: 130px;
  }
}
.formItem{
  .el-form-item__label{
    width: 104px;
    line-height: 30px;
  }
}
.newname{
  .el-form-item__label{
    width: 60px;
  }
}
::-webkit-scrollbar{
  height: 20px;
}
</style>
