<template>
  <view class="Scanning_Result">
    <view class="Scanning_top">
      <view class="Scanning_top_icon">{{drugsBag.batchNo}}</view>
    </view>
    <view class="Scanning_top_tips">
      <view class="info">申请：{{drugsBag.target ? drugsBag.target.dept : ''}}</view>
      <view class="info">发药：{{drugsBag.launch ? drugsBag.launch.dept : ''}}</view>
    </view>

    <view class="Scanning_cont">
      <view class="column head">
        <view class="value1">药品名称+规格<text class="red">（{{drugsList.length}}）</text></view>
        <view class="value2">数量</view>
      </view>
      <scroll-view scroll-y class="scrollContent">
        <view class="column" v-for="item in drugsList" :key="item.id">
          <view class="value1">{{item.drugsInfo}} {{item.model}}</view>
          <view class="value2">{{item.drugsNum}}</view>
        </view>
      </scroll-view>
    </view>

    <view class="foot_btn_spe">
      <view class="column">
        <view class="btn" @click="goBack()">返回</view>
      </view>
    </view>
  </view>
</template>
<script>
  import {
    get,
    post,
    SM,
    webHandle
  } from "@/http/http.js";
  export default {
    data() {
      return {
        hosId: uni.getStorageSync('userData').user.currentHospital.id,
        drugsList: [], //药品列表
        queryObj: {}, //路由传递过来的数据
        drugsBag: {}, //药包信息
        config: {}, //配置
      };
    },
    methods: {
      // 返回
      goBack(){
        uni.navigateBack()
      },
      // 根据药包id查询药品
      getDrugsByDrugsBugId(drugsBagId){
        post(`/transflow/extra`, {type: this.queryObj.drugsBagType, extraType: 'drugsInfo', drugsBagId}).then(res => {
          uni.hideLoading();
          if(res.state == 200){
            if(res.data){
              this.drugsList = res.data.drugsList || [];
              this.drugsBag = res.data.drugsBag || {};
            }
          }else{
            uni.showToast({
              icon: "none",
              title: res.msg || "接口获取数据失败！",
            });
          }
        })
      },
      //获取页面信息
      getInfo(){
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        
        if(this.queryObj.drugsBagId){
          // 根据药包id查询药品
          this.getDrugsByDrugsBugId(this.queryObj.drugsBagId);
        }else if(this.queryObj.orderId){
          // 根据工单id查询药包,此时必是一单一码，即只有一个药包码
          post(`/transflow/extra`, {type: this.queryObj.drugsBagType, extraType: 'orderInfo', orderId: +this.queryObj.orderId}).then(res => {
            if(res.state == 200){
              if(res.data){
                let drugsBagList = res.data.drugsBagList || [];
                let drugsBag = drugsBagList[0] || {};
                if(drugsBag.id){
                  this.getDrugsByDrugsBugId(drugsBag.id);
                }else{
                  uni.hideLoading();
                  uni.showToast({
                    icon: "none",
                    title: "未查询到药品!",
                  });
                }
              }else{
                uni.hideLoading();
              }
            }else{
              uni.hideLoading();
              uni.showToast({
                icon: "none",
                title: res.msg || "接口获取数据失败！",
              });
            }
          })
        }
      },
    },
    onLoad(options) {
      console.log(options, "options");
      this.queryObj = options;
      this.getInfo();
      // #ifdef APP-PLUS
      webHandle("no", "app");
      // #endif
      // #ifdef H5
      webHandle("no", "wx");
      // #endif
    },
  };
</script>
<style lang="less" scoped>
  .Scanning_Result {
    background: #FAFBFD;
    padding: 0 24rpx;
    display: flex;
    flex-direction: column;
    height: 100vh;

    .Scanning_top {
      margin: 32rpx auto;
      .Scanning_top_icon {
        font-size: 30rpx;
        font-weight: bold;
        .newicon{
          margin: 0 32rpx;
        }
      }
    }
    .Scanning_top_tips{
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      margin-bottom: 32rpx;
      gap: 64rpx;
    }

    .Scanning_cont {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      .scrollContent{
        flex: 1;
        min-height: 0;
      }
      .column{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        padding: 32rpx 24rpx;
        color: #565656;
        border-bottom: 1rpx solid #D9D9D9;
        gap: 8rpx;
        &.head{
          font-size: 30rpx;
          color: #000000;
          border: 1rpx solid #D9D9D9;
          box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0,0,0,0.16);
          background: #FBFCFE;
        }
        .value1{
          flex: 2;
          text-align: left;
          word-break: break-all;
          flex-shrink: 0;
        }
        .value2,.value3{
          flex: 1;
          text-align: center;
          word-break: break-all;
          flex-shrink: 0;
        }
      }
    }

    .foot_btn_spe {
      margin: 24rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24rpx;
      font-weight: bold;
      
      .column{
        width: 100%;
        height: 78rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24rpx;
        
        .btn {
          height: 100%;
          flex: 1;
          background: linear-gradient( 90deg, #6FC073 0%, #3DB197 100%);
          color: #fff;
          border-radius: 4rpx;
          font-size: 30rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
</style>