<template>
  <view class="Scanning_Result">
    <view class="Scanning_top">
      <view class="Scanning_top_icon">
        <view class="text1"> 领取交接 </view>
      </view>
      <view class="Scanning_top_text">
        <strong class="red">{{dept && dept.dept}}</strong>领取，以下为前<strong class="red">{{differenceInDays}}</strong>天内<strong class="red">{{batchNum}}</strong>批次的被服
      </view>
    </view>

    <view class="Scanning_cont">
      <view class="Scanning_cont_head">
        <view class="Scanning_cont_head_item" :class="{active: parentIndex == i}" v-for="(item, i) in dataList" :key="item.id" @click="parentIndex = i">
          {{item.name}}
        </view>
      </view>

      <view class="Scanning_cont_list">
        <view class="Scanning_cont_list_item Scanning_cont_list_head">
          <view class="name">
            被服类型
          </view>
          <view class="value">
            <view>
              回收数量
            </view>
          </view>
          <view class="value">
            <view>
              送回数量
            </view>
          </view>
        </view>
        <scroll-view scroll-y="true" class="Scanning_cont_list_scroll" v-if="dataList[parentIndex]">
          <view class="Scanning_cont_list_item" @click="clickRow(item)" v-for="(item, j) in dataList[parentIndex].children" :key="item.id" :class="{red: item.clothesWashingDTO.exception == 1}">
            <view class="name">
              {{item.name}}
            </view>
            <view class="value">
              <view>
                {{item.clothesWashingDTO ? item.clothesWashingDTO.recyclingNum : ''}}
              </view>
            </view>
            <view class="value">
              <view>
                {{item.clothesWashingDTO ? item.clothesWashingDTO.sendBackNum : ''}}
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <view class="foot_btn">
      <view class="btn" @click="onClick()" v-if="dataList.length"> 确定 </view>
      <view class="btn" @click="goBack()"> 取消 </view>
    </view>
    <!-- 弹窗 -->
    <showModel :title="models1.title" :icon="models1.icon" :disjunctor="models1.disjunctor" :content="models1.content"
      @ok="ok1" @cancel="cancel1" :operate="models1.operate"></showModel>
  </view>
</template>
<script>
  import {
    get,
    post,
    SM,
    webHandle
  } from "../../../http/http.js";
  import dayjs from 'dayjs';
  export default {
    data() {
      return {
        batchIds: '',
        startTime: '',
        endTime: '',
        differenceInDays: '',
        batchNum: '',
        SMFlag: true,
        hosId: uni.getStorageSync('userData').user.currentHospital.id,
        queryObj: {}, //路由传递过来的数据
        dataList: [],
        parentIndex: 0,
        // 弹窗model
        models1: {
          disjunctor: false,
        },
        dept: null,
        handover: null,
      };
    },
    methods: {
      clickRow(data){
        uni.navigateTo({
          url: `../quiltWashingException/quiltWashingException?clothesTypeId=${data.id}&clothesTypeName=${data.name}&batchId=${data.clothesWashingDTO.batchId}&relatedDept=${data.clothesWashingDTO.relatedDept}`,
        });
      },
      //确定
      ok1() {
        this.models1.disjunctor = false;
        // let bussList = this.dataList.map(v => v.children).flat().map(v => v.clothesWashingDTO).map(v => ({...v, exception: 0}));
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post("/transflow/checkComplete", {
          type: 'clothingSend',
          receiveAndHandover: true,
          deptId: this.dept ? this.dept.id : undefined,
          handoverId: this.handover ? this.handover.id : undefined,
          hosId: this.hosId,
          orderId: 0,
          // bussList,
          index: this.dataList[0].children[0].clothesWashingDTO.index,
          batchIds: this.batchIds,
        }).then((res) => {
          uni.hideLoading();
          if (res.data && res.data.state == 200) {
            uni.showModal({
              title: "提示",
              content: "操作成功",
              showCancel: false,
              success: (result) => {
                if (result.confirm) {
                  console.log("用户点击确定");
                  uni.navigateTo({
                    url: `../../receiptpage/receiptpage`,
                  });
                }
              },
            });
          }else{
            uni.showToast({
              icon: "none",
              title: res.data ? res.data.msg : "接口获取数据失败！",
            });
          }
        });
      },
      //取消
      cancel1() {
        this.models1.disjunctor = false;
      },
      // 被服送回弹窗
      showModel1() {
        let bussList = this.dataList.map(v => v.children).flat();
        let num = bussList.reduce((prev, current) => prev + current.clothesWashingDTO.sendBackNum, 0);
        let content = `您确认与<strong class="red">${this.handover ? this.handover.name : ''}</strong>交接，<strong class="red">${dayjs(this.startTime).format('YYYY年MM月DD日')}</strong>至<strong class="red">${dayjs(this.endTime,).format('YYYY年MM月DD日')}</strong>范围内<strong class="red">${this.batchNum}</strong>批次<strong class="red">${num}</strong>件被服？`;
        this.models1 = {
          disjunctor: true,
          title: "提示",
          content,
          icon: "warn",
          operate: {
            ok: "确定",
            cancel: "取消",
          },
        };
      },
      goBack(){
        uni.navigateBack();
      },
      onClick(){
        this.showModel1();
      },
      getInfo(){
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post("/transflow/extra", {
          type: 'clothingSend',
          receiveAndHandover: true ,
          code: this.queryObj.quiltCode
        }).then((result) => {
          uni.hideLoading();
          if (result.data && result.data.state == 200) {
            this.dept = result.data.dept;
            this.batchNum = result.data.batchNum;
            this.startTime = result.data.startTime;
            this.endTime = result.data.endTime;
            this.batchIds = result.data.batchIds;
            this.differenceInDays = dayjs(result.data.endTime).diff(result.data.startTime, 'day');
            this.handover = result.data.handover;
            let dataList = result.data.treeList || [];
            dataList.forEach(v => {
              v.children = v.children.sort((a, b) => b.clothesWashingDTO.exception - a.clothesWashingDTO.exception)
            })
            console.log(dataList);
            this.dataList = dataList.slice(0, 3);
          } else {
            uni.showToast({
              icon: "none",
              title: result.data ? result.data.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 {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #fafbfd;
    .Scanning_top {
      flex-shrink: 0;
      .Scanning_top_icon {
        padding-top: 26rpx;
        display: flex;
        justify-content: center;
        align-items: center;

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

        .text1 {
          font-size: 40rpx;
          font-weight: bold;
        }
      }
      .Scanning_top_text{
        text-align: center;
        font-size: 30rpx;
        font-weight: bold;
        padding: 8rpx 0 23rpx 0;
      }
    }

    .Scanning_cont {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      width: 710rpx;
      margin: 0 20rpx;
      background-color: #fff;

      .Scanning_cont_head{
        flex-shrink: 0;
        height: 78rpx;
        display: flex;
        border: 1rpx solid #EEEEEE;
        .Scanning_cont_head_item{
          flex: 1;
          font-size: 32rpx;
          font-weight: bold;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          &.active{
            color: #49B856;
            &::before{
              content: '';
              width: 70rpx;
              height: 10rpx;
              background-color: #49B856;
              position: absolute;
              left: 50%;
              bottom: 0;
              transform: translateX(-50%);
              border-radius: 6rpx;
            }
          }
          &::after{
            content: '';
            width: 2rpx;
            height: 44rpx;
            background-color: #D1D1D1;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
          }
          &:last-of-type::after{
            opacity: 0;
          }
        }
      }

      .Scanning_cont_list{
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        .Scanning_cont_list_scroll{
          flex: 1;
          min-height: 0;
        }
        .Scanning_cont_list_item{
          height: 70rpx;
          display: flex;
          align-items: center;
          font-size: 28rpx;
          border: 1rpx solid #272727;
          border-top: none;
          &.Scanning_cont_list_head{
            font-weight: bold;
            font-size: 28rpx;
            border-top: 1rpx solid #272727;
            flex-shrink: 0;
          }
          .name,
          .value{
            padding: 0 40rpx;
            flex: 1;
            display: flex;
            align-items: center;
            height: 100%;
            border-right: 1rpx solid #272727;
          }
          .value {
            flex: 1;
            view{
              width: 4em;
              text-align: center;
            }
          }
        }
      }
    }

    .foot_btn {
      margin: 57rpx 30rpx 0;
      flex-shrink: 0;
      line-height: 88rpx;
      display: flex;
      justify-content: center;

      .btn {
        height: 88rpx;
        flex: 1;
        margin-right: 1%;
        background-image: linear-gradient(to right, #72c172, #3bb197);
        color: #fff;
        border-radius: 8rpx;
        font-size: 34rpx;
        font-weight: bold;
        text-align: center;
        &:last-of-type{
          margin-right: 0;
        }
      }
    }
  }
</style>