<template>
  <view class="Scanning_Result">
    <view class="Scanning_top">
      <view class="Scanning_top_icon">
        <text class="cubeic-ok icon_transport transport-duigou"></text>
      </view>
      <view class="Scanning_top_text">
        <view class="text1"> 签到成功 </view>
      </view>
    </view>

    <view class="Scanning_cont">
      <view>您已到达{{queryObj.deptName}}，您需要交接血制品数量为{{receiveNum}}</view>
      <view v-for="(item, key, index) in bloods" :key="index">
        {{key}}：<text class="link" @click="goToList(item)">{{item.length}}</text>
      </view>
    </view>

    <view class="foot_btn_spe">
      <view class="btn1" @click="Scanning_again()"> 继续扫描 </view>
      <view class="btn3" @click="hand_again()">手动录入</view>
    </view>

    <!-- 手动查询弹窗 -->
    <handViewBlood v-if="speModels.disjunctor" :title="speModels.title" :disjunctor="speModels.disjunctor"
      @ok="speOk" @cancel="speCancel">
    </handViewBlood>
  </view>
</template>
<script>
  import {
    get,
    post,
    SM,
    webHandle
  } from "../../http/http.js";
  export default {
    data() {
      return {
        receiveNum: 0,
        order: {},
        bloods: [],
        // 手动查询弹窗model
        speModels: {
          disjunctor: false,
        },
        SMFlag: true,
        queryObj: {}, //路由传递过来的数据
      };
    },
    methods: {
      // 提取的方法
      input_common(ress1, type){
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post("/transflow/scanBind", {type: 'blood',orderId: this.queryObj.orderId, code: ress1}).then((ress) => {
          uni.hideLoading();
          if (ress.state == 200 && ress.data.state != 400) {
            //扫描标本后会自动调用摄像头，继续扫描，直到status不是200
            setTimeout(()=>{
              if (type === 'scan') {
                this.Scanning_again();
              }
            },500)
            //todo
            uni.redirectTo({
              url: `../scanning_blood_process/scanning_blood_process?orderId=${this.queryObj.orderId}&bloodDTO=${encodeURIComponent(JSON.stringify(ress.data.dto))}&scanCount=${ress.data.scanCount}&status=200&scanOrHand=${type}`,
            });
            
          }else if (ress.state == 200 && ress.data.state == 400 && ress.data.orderState != 5) {
            uni.redirectTo({
              url: `../scanning_blood_process/scanning_blood_process?orderId=${this.queryObj.orderId}&bloodDTO=${encodeURIComponent(JSON.stringify(ress.data.data))}&status=400&scanOrHand=${type}&qrcode=${ress1}`,
            });
          } else {
            uni.redirectTo({
              url: `../scanning_blood_process/scanning_blood_process?orderId=${this.queryObj.orderId}&status=500&scanOrHand=${type}&qrcode=${ress1}`,
            });
          }
        });
      },
      // 跳转血制品列表
      goToList(bloods){
        uni.navigateTo({
          url: `../blood_list/blood_list?bloods=${encodeURIComponent(JSON.stringify(bloods))}`,
        });
      },
      //获取页面信息
      getInfo(){
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post('/transflow/checkData', {
          "type": "blood",
          "orderId": this.queryObj.orderId
        }).then(res => {
          uni.hideLoading();
          if(res.state == 200){
            console.log(res);
            res.data.all = res.data.all || [];
            res.data.dto = res.data.dto || {};
            this.order = res.data.dto;
            const bloods = {};
            res.data.all.forEach(v => {
              if(bloods[v.type.name]){
                bloods[v.type.name].push(v);
              }else{
                bloods[v.type.name] = [v];
              }
            })
            this.bloods = bloods;
            this.receiveNum = res.data.all.length;
          }else{
            uni.showToast({
              icon: "none",
              title: "请求失败！",
            });
          }
        })
      },
      // 手动查询-确认
      speOk(data) {
        console.log(data);
        if (!data.id) {
          //没有查询到
          uni.showModal({
            title: '提示',
            content: "没有查询到血袋！",
            showCancel: false,
            success: function(res) {
              if (res.confirm) {
                console.log('用户点击确定');
              } else if (res.cancel) {
                console.log('用户点击取消');
              }
            }
          });
          return;
        }
        this.speModels.disjunctor = false;
        this.hand_scanning_common(data.bloodCode, 'hand');
      },
      // 手动查询-取消
      speCancel() {
        this.speModels.disjunctor = false;
      },
      // 手动查询弹窗
      showHandViewSpecimen() {
        this.speModels = {
          title: '填写血袋号',
          disjunctor: true,
        }
      },
      // 手动录入
      hand_again() {
        this.showHandViewSpecimen();
      },
      // 手动输入和扫码公共方法
      hand_scanning_common(ress1, type) {
        // ----------------
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        //检验二维码的有效性
        post("/dept/scanning", {
          content: ress1,
        }).then((result) => {
          this.SMFlag = true;
          if (result.state == 200 || result.state == 201) {
            let codes = result.code;
            if (codes) {
              // 判断是否有多个血袋号 start
              post("/transflow/scanCheckList", {
                type: 'blood',
                code: codes,
              }).then((res) => {
                if (res.state == 200) {
                  res.data = res.data || [];
                  if(res.data.length > 1){
                    uni.navigateTo({
                      url: `/pages/bloodSelect/bloodSelect?qrcode=${codes}&navigateTo=scanning_blood_process&orderId=${this.queryObj.orderId}&scanOrHand=${type}`,
                    });
                  }else{
                    // 继续扫描
                    this.input_common(ress1, type);
                  }
                } else {
                  uni.hideLoading();
                  uni.showToast({
                    icon: "none",
                    title: "请求失败！",
                  });
                }
              });
              // 判断是否有多个血袋号 end
              
            } else {
              uni.hideLoading();
            }
          } else {
            uni.hideLoading();
            uni.showToast({
              icon: "none",
              title: "请求失败！",
            });
          }
        });
        // ------------------------------
      },
      // 继续扫描
      Scanning_again() {
        if (!this.SMFlag) {
          return;
        }
        this.SMFlag = false;
        SM().then((ress1) => {
          this.hand_scanning_common(ress1, 'scan');
        }).catch(err => {
          this.SMFlag = true;
        });
      },
    },
    onShow() {
      this.SMFlag = true;
    },
    onLoad(options) {
      console.log(options, "result");
      this.queryObj = options;
      this.getInfo();
      // #ifdef APP-PLUS
      webHandle("no", "app");
      // #endif
      // #ifdef H5
      webHandle("no", "wx");
      // #endif
    },
  };
</script>
<style lang="less">
  .Scanning_Result {
    padding: 0 20rpx;

    .Scanning_top {
      .Scanning_top_icon {
        width: 140rpx;
        height: 140rpx;
        margin: 0 auto;
        border-radius: 50%;
        line-height: 140rpx;
        
        .speNum{
          text-align: center;
          font-size: 140rpx;
        }

        .cubeic-ok {
          font-size: 140rpx;
          color: #35b34a;
        }

        .cubeic-close {
          font-size: 140rpx;
          color: #ff3b53;
        }
      }

      .Scanning_top_text {
        .text1 {
          font-size: 48rpx;
          text-align: center;
        }

        .success_tips {
          color: red;
          font-size: 30rpx;
        }
      }
    }

    .Scanning_cont {
      font-size: 32rpx;
      text-align: center;
      .link{
        text-decoration: underline;
      }

      view {
        margin-bottom: 16rpx;
      }

      .Scanning_cont_center {
        text-align: center;
      }

      .text {
        margin-top: 24rpx;
        color: #35b34a;
      }

      .text1 {
        margin-top: 24rpx;
        color: #ff3b53;
      }
    }

    .foot_btn {
      line-height: 88rpx;
      height: 100rpx;
      margin-top: 40rpx;
      display: flex;
      justify-content: center;

      .btn1,
      .btn2,
      .btn3 {
        height: 88rpx;
        flex: 1;
        margin: 0 1%;
        background-image: linear-gradient(to right, #72c172, #3bb197);
        color: #fff;
        border-radius: 8rpx;
        font-size: 32rpx;
        margin-top: 16rpx;
        text-align: center;
      }
    }
    .foot_btn_spe {
      line-height: 88rpx;
      height: 100rpx;
      margin-top: 40rpx;
      text-align: center;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    
      &::after {
        content: '';
        flex: 1;
      }
    
      view {
        height: 88rpx;
        width: 48%;
        margin: 0 1%;
        background-image: linear-gradient(to right, #72c172, #3bb197);
        color: #fff;
        border-radius: 8rpx;
        font-size: 32rpx;
        margin-top: 16rpx;
      }
    }
  }
</style>