<template>
  <view style="background: #fff; min-height: calc(100vh - 44px)">
    <view class="scroll">
      <view>
        <uni-card v-for="(v, key) in listData" :key="key" padding="0">
          <view class="content-item-wrap">
            <view class="item-title">{{$t('序号')}}:{{key+1}}</view>
            <view class="item-header" >
              <view class="item">
                {{$t('总箱数')}}：{{v.cartonsNum}}
              </view>
              <view class="item">
                {{$t('包装类型')}}：
                <dict-tag :type="DICT_TYPE.WAREHOUSING_SPECIFICATION_TYPE" :value="v.specificationType"></dict-tag>
              </view>
              <view class="item">
                {{$t('规格')}}：{{v.boxGauge}}
              </view>
              <view class="item">
                {{$t('总重量')}}：{{v.weight}}kg
              </view>
              <view class="item">
                {{$t('快递单号')}}：{{v.expressNo}}
              </view>
              <view class="item">
                <text class="link" @click="showPictures(v.pictureUrls)">{{$t('查看入仓影像')}}</text>
              </view>
            </view>
            <view class="item-content" v-for="(vo, voIndex) in v.orderWarehouseInCommonAttrVOList">
              <view>
                <view>{{$t('品名')}}{{voIndex+1}}: {{ $l(vo, 'prodName')}}</view>
                <view class="check-wrap">
                  <uni-data-checkbox v-model="vo.checkboxValue" multiple :localdata="[{ value: voIndex}]"></uni-data-checkbox>
                </view>
              </view>
              <view>
                <view>{{$t('品牌')}}: {{ $l(vo, 'brandName')}}</view>
                <view>{{$t('材质')}}: {{ $l(vo, 'materialLabel')}}</view>
              </view>
              <view>
                <view>{{$t('特性')}}: {{ $l(vo, 'prodAttrNames')}}</view>
                <view>
                  {{$t('用途')}}:
                  {{ $l(vo, 'usageNames')}}
                </view>
              </view>
              <view>
                <view>{{$t('数量')}}: {{ vo.quantityAll }}</view>
              </view>
            </view>
          </view>
        </uni-card>
      </view>
      <view class="footer flex items-center justify-center">
        <view class="all flex items-center justify-center">
          <checkbox-group @change="handleCheckAll">
            <label>
              <checkbox value="cb" style="transform:scale(0.7)" />全选
            </label>
          </checkbox-group>
        </view>
        <view class="confirm flex items-center justify-center" @click="confirm">
          {{$t('确定')}}
        </view>
      </view>
      <view style="height: 100rpx"></view>
    </view>
  </view>
</template>

<script>
import { getOrderItemCommonAttr } from "@/pages/stocking/api";

export default {
  data() {
    return {
      orderId: '',
      selectItemList: [],
      listData: [],
    };
  },
  onLoad(options){
    this.orderId = options.orderId
    this.warehouseInId = options.warehouseInId || 0
    this.loadData()

    // 上一个页面打开弹层的时候会给body加上overflow:hidden，导致这个页面无法滑动，所以这里需要手动去掉
    // #ifdef H5
    document.querySelector("body").style.overflow = "visible"
    // #endif
  },
  methods: {
    loadData(){
      getOrderItemCommonAttr(this.orderId, this.warehouseInId || 0).then(data =>{
        this.listData = data?.map(item => {
          item.orderWarehouseInCommonAttrVOList.forEach(vo => {
            vo.checkboxValue = []
          })
          return item
        })
        if(!this.listData?.length){
          return uni.showModal({
            content: this.$t("暂无可选择的商品"),
            success(){
              uni.navigateBack()
            }
          })
        }
      })
    },
    confirm(){
      if(!uni.addProductFromOrder){
        return uni.showToast({
          title: '来源不对',
          icon: 'none'
        })
      }
      // 品名+品牌＋材质＋商品特性＋用途一致的会合并，数量累加
      let arr = []
      this.listData.forEach(warehouseIn => {
        warehouseIn.orderWarehouseInCommonAttrVOList?.forEach(item => {
          if(!item.checkboxValue?.length){
            return
          }
          let index = arr.findIndex(i => {
            return i.prodId == item.prodId && i.brand == item.brand && i.material == item.material && i.prodAttrIds == item.prodAttrIds && i.usageIds == item.usageIds
          })
          if (index == -1) {
            arr.push({
              ...item,
              expressNo: warehouseIn.expressNo,
              pictureUrls: warehouseIn.pictureUrls,
            })
          } else {
            arr[index].quantityAll += item.quantityAll
          }
        })
        // TODO 要把商品的入仓影响，快递单号合并到主商品中

      })
      arr.forEach(item => {
        uni.addProductFromOrder(item)
      })
      uni.navigateBack()
    },
    showPictures(urls){
      if(!urls?.length){
        return uni.showModal({
          content: this.$t("暂无影像")
        })
      }
      uni.MEDIA_LIST = urls
      uni.navigateTo({
        url: '../utils/media'
      })
    },
    handleCheckAll(e){
      const checked = !!e.detail.value?.length
      this.listData.forEach(warehouseIn => {
        warehouseIn.orderWarehouseInCommonAttrVOList?.forEach((item, index) => {
          item.checkboxValue = checked ? [index] : []
        })
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.footer{
  position: fixed;
  left: 0;
  bottom:0;
  width: 100%;
  height: 100rpx;
  background: #2f4dae;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  .items-center{
    align-items: center;
  }
  .all{
    width: 100px;
    background: #6784e5;
    height: 100%;
  }
  .confirm{
    flex: 1;
    height: 100%;
  }
}
.search-header{
  ::v-deep .uni-easyinput__content {
    border-radius: 20px;
    padding-right: 10px;
    background: rgba($color: #fff, $alpha: 0.5) !important;
    border: none;
    // opacity: 0.5;
  }
  ::v-deep .uni-input-placeholder {
    padding-left: 8px;
    color: #b2c9f3;
  }
  ::v-deep .uni-input-input {
    padding-left: 8px;
  }
  .filter{
    .label{
      color: #ffffff;
    }
    ::v-deep .uni-select__input-text{
      color: #ffffff;
    }
  }
  .flex-1{
    flex: 1;
    &:not(:first-child){
      margin-left: 10px;
    }
  }
}
.scroll {
  margin-top: -8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 8px;
  background: #fff;
  .list-header {
    display: flex;
    .title {
      margin-left: 10upx;
      background-color: #007aff;
      color: #fff;
      font-size: 26upx;
      padding: 10upx 16upx;
      border-radius: 12upx;
    }
    .checkbox-wrap {
      margin-left: auto;
      display: flex;
      align-items: center;
      > text {
        margin-right: 8px;
      }
      ::v-deep .checklist-box {
        margin: 0;
      }
    }
  }
  ::v-deep .uni-card {
    margin: 12px 0 0 !important;
    padding: 0 !important;
  }
  .content-item-wrap {
    .item-title{
      background: rgb(47, 77, 174);
      padding:0 20rpx;
      color: #ffffff;
      opacity: .8;
      width: 100%;
      /*border-radius: 20rpx 20rpx 0 0;*/
    }
    .item-header {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      border-bottom: 2px solid #aba7a7;
      padding-bottom: 10px;
      font-size: 14px;
      padding: 10px;
      background: #f5f5f5;
      ::v-deep .uni-data-checklist {
        margin-left: auto !important;
        flex: none;
        .checklist-box {
          margin: 0;
        }
      }
      image{
        width:20px;
        height:20px;
        margin-right: 8px;
      }
      .item{
        width: 50%;
        .link{
          color: #436cd7;
        }
      }
    }
    .item-content {
      padding: 10px;
      border-bottom: 2px dashed #a6a5a5;
      &:last-child{
        border-bottom: 0;
      }
      > view {
        display: flex;
        padding: 4px 0;
        > view {
          flex: 1;
          word-break: break-all;
        }
      }
      .check-wrap{
        display: flex;
        justify-content: flex-end;
        width: 50px;
        flex: none;
        ::v-deep .checkbox__inner{
          border: 2px solid #1cbbb4;
        }
      }
    }
  }
}
</style>
