<template>
  <view class="Scanning_Result">
    <view class="Scanning_top">
      <view class="title1">{{queryObj.deptName}}</view>
      <view>{{dataList.patientTotalCount}}人</view>
      <view>{{dataList.bloodTotalCount}}袋</view>
    </view>

    <view class="Scanning_cont">
      <view class="list" v-for="(v2, i2) of dataList.children" :key="i2">
        <view class="list_top">
          <text class="newicon newicon-a-ziyuan7"></text>
          <view class="title1 ellipsis">
            <text>{{v2.patientName}}</text><text>{{v2.hosNum}}</text>
          </view>
          <view>
            <text>{{v2.count}}袋</text>
          </view>
        </view>
        <view class="list_bottom_wrap" v-for="(v3, i3) of v2.children" :key="i3" @click="v3.checked = !v3.checked">
          <view class="list_bottom">
            <view class="title1 ellipsis">
              <text class="ellipsis">{{v3.bloodCode}}</text>
              <text>{{v3.volume}}{{v3.unit}}</text>
            </view>
            <view class="title2">
              <text>{{v3.count}}袋</text>
              <text class="newicon newicon-a-ziyuan3" :class="{active: v3.checked}"></text>
            </view>
          </view>

          <view class="list_detail" v-if="v3.checked">
            <view class="list_detail_item" v-for="(v4, i4) of v3.children" :key="i4">
              <view class="list_detail_item_title">
                <text>{{v4.bloodCode}}{{v4.productCode ? '+' + v4.productCode : ''}}</text>
                <text class="blue serialNumber">{{i4 + 1}}</text>
              </view>
              <view class="list_detail_item_content">
                <view>
                  <text>血型：{{v4.aboType}}</text>
                  <text class="ml16">RH(D)：{{v4.rhType}}</text>
                </view>
                <view>
                  <text>失效时间：{{v4.overDate | formatDate('yyyy-MM-dd hh:mm')}}</text>
                  <!-- <text class="zhi">至</text> -->
                  <!-- <text></text> -->
                </view>
                <view class="list_detail_item_content_status">
                  <text class="blue">{{v4.state ? v4.state.name : ''}}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="list_top">
          <view class="receiver">
            <text>交接人:{{v2.receiverDTO ? v2.receiverDTO.name : ''}}</text>
            <text>交接时间:{{v2.receiveTime | formatDate('MM-dd hh:mm')}}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="foot_btn_spe">
      <view class="btn3" @click="goBack()">返回</view>
    </view>
    <!-- 填写交接人工号弹窗 -->
    <selectAccount @click.stop.native v-if="hosModels.disjunctor" :content="hosModels.content" :disjunctor="hosModels.disjunctor" @ok="hosOk"
      @cancel="hosCancel">
    </selectAccount>
  </view>
</template>
<script>
  import {
    get,
    post,
    SM,
    webHandle
  } from "../../http/http.js";
  export default {
    data() {
      return {
        hosId: uni.getStorageSync('userData').user.currentHospital.id,
        // 填写交接人工号弹窗model
        hosModels: {
          disjunctor: false,
        },
        dataList: {},
        queryObj: {}, //路由传递过来的数据
      };
    },
    methods: {
      // 核对完成
      complete(){
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post('/simple/data/fetchDataList/taskTypeConfig', {
          idx: 0,
          sum: 1,
          taskTypeConfig: {
            "taskTypeDTO": {
                "hosId": {
                    "id": this.hosId
                },
                "ordinaryField": {
                    "key": "ordinary_field",
                    "value": "blood"
                }
            }
          },
        }).then(res => {
          uni.hideLoading();
          if(res.status == 200){
           let list = res.list || [];
           if(list.length > 0){
             let signTypeList = list[0].signTypeList || [];
             let signType = signTypeList.find( v => v.value == 6 );
             if(signType){
               this.showSelectAccount();
             }else{
               this.checkComplete();
             }
           }else{
            uni.showToast({
              icon: "none",
              title: "请配置血制品任务类型！",
            });
           }
          }else{
            uni.showToast({
              icon: "none",
              title: res.msg || "接口获取数据失败！",
            });
          }
        })
      },
      // 填写交接人工号-确认
      hosOk(data) {
        console.log(data);
        const {
          accountName,
          account,
          accountId
        } = data;
        if (!accountName && !account) {
          //没有填写交接人
          uni.showModal({
            title: "提示",
            content: "请填写交接人工号！",
            showCancel: false,
            success: function(res) {
              if (res.confirm) {
                console.log("用户点击确定");
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
          return;
        } else if ((!accountName && account) || (accountName && !account)) {
          //没有填写交接人
          uni.showModal({
            title: "提示",
            content: "请填写正确的交接人工号！",
            showCancel: false,
            success: function(res) {
              if (res.confirm) {
                console.log("用户点击确定");
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
          return;
        }
        this.hosModels.disjunctor = false;
        this.checkComplete(data);
      },
      // 填写交接人工号-取消
      hosCancel() {
        this.hosModels.disjunctor = false;
        this.flag = true;
      },
      // 填写交接人工号弹窗
      showSelectAccount() {
        this.hosModels = {
          content: "确定核对完成,请输入交接人员工号",
          disjunctor: true,
        };
      },
      checkComplete(accountObj){
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        let postData = {
          "type": "bloodTake",
          "orderId": 0,
          "orderIds": this.queryObj.orderIds || undefined,
        };
        if (accountObj) {
          postData.handoverUser = accountObj.accountId;
        }
        post('/transflow/checkComplete', postData).then(res => {
          uni.hideLoading();
          if(res.state == 200){
             uni.navigateTo({
               url: `../receiptpage/receiptpage`,
             });
          }else{
            uni.showToast({
              icon: "none",
              title: res.msg || "接口获取数据失败！",
            });
          }
        })
      },
      // 返回
      goBack() {
        uni.navigateBack();
      },
      //获取页面信息
      getInfo(){
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post('/transflow/scanInfo', {
          "code": "nb",
          "id": 0,
          "type": "bloodTake",
          "bloodReceived": true,//我的-工单-血制品-详情
          "deptOrderDetails": true,
          "orderIds": this.queryObj.orderIds,
          "deptId": this.queryObj.deptId,
        }).then(res => {
          uni.hideLoading();
          if(res.state == 200){
            let dataList = res.data.data || {};
            // 第一层
            let dataNewList = {
              bloodTotalCount: 0,
              patientTotalCount: 0,
              children: [],
            };

            for (let key2 in dataList) {
              let value2 = dataList[key2];
              console.log(value2);
              // 第三层,第四层
              let array3 = [];
              for (let key3 in value2) {
                let value3 = value2[key3];
                console.log(dataNewList);
                array3.push({
                  checked: false,
                  bloodCode: key3.split('|')[0],
                  volume: key3.split('|')[1],
                  unit: key3.split('|')[2],
                  count: value3.length,
                  children: value3,
                });
              }
              // 第二层
              dataNewList.children.push({
                patientName: key2.split('|')[0],
                hosNum: key2.split('|')[1],
                count: array3.reduce((pre, current) => pre + current.count, 0),
                receiverDTO: array3[0].children[0].receiverDTO,
                receiveTime: array3[0].children[0].receiveTime,
                children: array3,
              });
            }
            // 计算第一层血袋数量
            dataNewList.bloodTotalCount = dataNewList.children.reduce((pre, current) => pre + current.count, 0);
            // 计算第一层患者数量
            dataNewList.patientTotalCount = Object.keys(dataList).length;
            console.log(dataNewList)
            // 赋值
            this.dataList = dataNewList;
          }else{
            uni.showToast({
              icon: "none",
              title: res.msg || "接口获取数据失败！",
            });
          }
        })
      },

    },
    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" scoped>
  .Scanning_Result {
    padding: 16rpx;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f5f7fb;

    .ml16{
      margin-left: 16rpx;
    }

    .blue{
      color: #49b856!important;
    }

    .ellipsis{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .Scanning_top_top {
      .Scanning_top_icon {
        width: 140rpx;
        height: 140rpx;
        margin: 50rpx auto 40rpx;
        border-radius: 50%;

        .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_cont {
      padding-bottom: 50rpx;
      text-align: center;
      display: flex;
      flex-direction: column;

      .fz58{
        font-size: 58rpx;
      }

      .table_bodys{
        overflow-y: auto;
        flex: 1;
      }

      .table_head{
        display: flex;
        margin-top: 50rpx;
        .ml16{
          margin-left: 16rpx;
        }

        view {
          height: 110rpx;
          line-height: 1;
          flex: 1;
          font-weight: bold;
          color: #000;
          font-size: 38rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .table_body{
        background: #F3FAF7;
        border-radius: 8px;
        border: 1px solid #E9E9E9;
        display: flex;
        margin-bottom: 20rpx;
        padding: 30rpx 20rpx;
        view {
          line-height: 1;
          flex: 1;
          color: #555;
          font-size: 38rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          word-break: break-all;
        }
      }
    }


    .Scanning_top {
      margin-top: 16rpx;
      background-color: #fff;
      color: #49b856;
      font-weight: bold;
      font-size: 30rpx;
      display: flex;
      align-items: center;
      line-height: 1.1;

      view{
        padding: 16rpx 20rpx;
        flex: 1;
        &.title1{
          flex: 4;
          word-break: break-all;
        }
      }
    }

    .Scanning_cont {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow-y: auto;

      .list{
        background-color: #fff;
        margin-top: 16rpx;
        line-height: 1;
        .list_top{
          display: flex;
          font-weight: bold;
          color: #000;
          font-size: 30rpx;
          position: relative;
          padding-bottom: 16rpx;

          .newicon-a-ziyuan7{
            position: absolute;
            left: 12rpx;
            top: 14rpx;
            font-size: 32rpx;
            color: #49b856;
          }
          view{
            padding: 16rpx 20rpx 0 0;
            flex: 1;
            &.title1{
              padding: 16rpx 20rpx 0 54rpx;
              flex: 5;
              text:first-of-type{
                margin-right: 16rpx;
              }
            }
            &.receiver{
              color: #49b856;
              padding: 16rpx 20rpx 0 54rpx;
              font-size: 26rpx;
              text:first-of-type{
                margin-right: 40rpx;
              }
            }
          }
        }
        .list_bottom{
          display: flex;
          font-size: 25rpx;
          color: #767676;
          view{
            padding: 0 20rpx 16rpx 5rpx;
            flex: 1;
            &.title1{
              padding: 0 20rpx 16rpx 54rpx;
              flex: 5;
              display: flex;
            }
            &.title2{
              display: flex;
              align-items: center;
            }
            .newicon-a-ziyuan3{
              color: #cdcdcd;
              font-size: 12rpx;
              margin-left: 20rpx;
              transform: rotate(180deg);
              transition: all 0.5s;
              &.active{
                transform: rotate(0deg);
              }
            }
          }
        }

        .list_detail{
          border: 2rpx solid #C6C6C6;
          padding: 22rpx 30rpx 0;
          font-size: 26rpx;
          .list_detail_item{
            margin-bottom: 22rpx;
            padding: 10rpx 0;
            background-color: #F3FAF7;
            .list_detail_item_title{
              padding: 0 17rpx 6rpx;
              border-bottom: 2rpx solid #C3C3C3;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .serialNumber{
                font-size: 38rpx;
              }
            }
            .list_detail_item_content{
              padding: 0 17rpx;

              view{
                line-height: 35rpx;
                margin-top: 17rpx;
                &:first-of-type{
                  margin-top: 9rpx;
                }
              }

              .zhi{
                margin-left: 60rpx;
                margin-right: 60rpx;
              }

              .list_detail_item_content_status{
                display: flex;
                justify-content: flex-end;
                text{
                  font-weight: bold;
                }
              }
            }
          }
        }
      }
    }

    .foot_btn_spe {
      line-height: 64rpx;
      height: 64rpx;
      margin-bottom: 40rpx;
      text-align: center;
      display: flex;
      justify-content: space-between;

      view {
        height: 64rpx;
        flex: 1;
        margin: 0 1%;
        background-image: linear-gradient(to right, #72c172, #3bb197);
        color: #fff;
        border-radius: 8rpx;
        font-size: 26rpx;
      }
    }
  }
</style>