<template>
	<view style="background: #fff; min-height: calc(100vh - 44px)">
		<view class="search-header">
		  <scanlistener
		  v-if="showScanlistener"
		  suffixIcon="scan"
		  v-model="keyword"
		  :placeholder="$t('请扫描合包箱号、标签')"
		  @iconClick="scanCode"
		  @confirm="searchOrder"
		  @submit="keyword=$event;searchOrder()"
		  ></scanlistener>
		</view>
		<view class="scroll">
		  <view class="packNo" v-if="pkgNum">
			  <text>{{$t('合包箱号')}}:{{pkgNum}}</text>
		  </view>
		  <view class="list-row list-header">
			<view class="">{{$t('订单号')}}</view>
			<view class="">{{$t('唛头')}}</view>
			<view class="">{{$t('目的地')}}</view>
			<view class="">{{$t('运输方式')}}</view>
		  </view>
		  <view>
			<view v-for="(v, key) in listData" :class="{'list-row': true, 'row-bg' : key % 2 === 0}" :key="key" @tap="showOrderDetail(true, v.orderId)">
			  <view class="">
				{{ v.orderNo }}
				<view class="red-badge-wrap" v-if="!!v.packageType">
					<template v-for="(item, i) in specialRendering(v.packageType)">
						<text class="red-badge">({{item.label[0]}})</text>
					</template>
				</view>
			  </view>
			  <view class="">{{ v.marks }}</view>
			  <view class="">{{ v.destinationName }}</view>
			  <view class="">{{v.transType}}</view>
			</view>
			  <uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
		  </view>
		</view>
		  <!-- 订单详情弹窗 -->
			<OrderDetailModal :orderDetailModal="orderDetailModal" :orderDetail="orderDetail" @close="showOrderDetail"></OrderDetailModal>
		  <!-- <view class="cu-modal" :class="orderDetailModal ? 'show' : ''" style="z-index: 900;">
			<view class="cu-dialog">
			  <view class="cu-bar bg-white justify-end bottom-line">
				<view class="content title-bolder">{{$t('订单详情')}}</view>
			  </view>
			  <scroll-view scroll-y="true" style="height: 300px;">
				<view class="cu-form-group margin-top">
				  <view class="title">{{$t('订单号')}}</view>
				  <view class="content">
					{{ orderDetail.orderNo }}
					<view style="color:blue;fontWeight:bold;">
					  {{ orderDetail.isExternalWarehouse === 1 ? ('('+$t('外部仓')+')') : ''}}
					</view>
					<view style="color:sandybrown;fontWeight:bold;">
					  {{ orderDetail.adjustToDestWarehouseId > 0 ? ('('+$t('调仓')+')') : ''}}
					</view>
				  </view>
				</view>
				<view class="cu-form-group">
				  <view class="title">{{$t('唛头')}}</view>
				  <view class="content">{{ orderDetail.marks }}</view>
				</view>
				<view class="cu-form-group">
				  <view class="title">{{$t('报关方式')}}</view>
				  <view class="content"><dict-tag :type="DICT_TYPE.ECW_CUSTOMS_TYPE" :value="orderDetail.customsType" /></view>
				</view>
				<view class="cu-form-group">
				  <view class="title">{{$t('入仓时间')}}</view>
				  <view class="content">{{ orderDetail.rucangTime | formatDate }}</view>
				</view>
		  
				<view>
				  <view class="item-content" v-for="(v, goodsKey) in orderDetail.orderItemVOList" :key="'goods-' + goodsKey">
					<view>
					  <view>{{$t('品名')}}：{{ $lang.locale==='zh-Hans'?v.prodTitleZh:v.prodTitleEn }}</view>
					  <view>{{$t('备案')}}：
						<template v-if="v.brandName">{{v.brandName}}</template>
						<dict-tag v-else :type="DICT_TYPE.ECW_IS_BRAND" :value="v.feeType" />
					  </view>
					</view>
					<view>
					  <view>{{$t('箱数')}}：{{ v.warehouseInInfoVO && v.warehouseInInfoVO.cartonsNum }}</view>
					  <view>{{$t('体积')}}：{{ v.warehouseInInfoVO && v.warehouseInInfoVO.volume | toFixed }} CBM</view>
					</view>
					<view>
					  <view>{{$t('重量')}}：{{ v.warehouseInInfoVO && v.warehouseInInfoVO.weight | toFixed }} kg</view>
					  <view>
						{{$t('储位')}}：
						<template v-if="v.warehouseInInfoVO && v.warehouseInInfoVO.orderLocationMergeVOSet">
							{{v.warehouseInInfoVO.orderLocationMergeVOSet.map(location => `${location.areaName}${location.locationName || ''}`).join(',')}}
						</template>
		  
					</view>
					</view>
				  </view>
				</view>
			  </scroll-view>
		  
			  <view class="cu-bar bg-white justify-end top-line">
				<view class="action"><button class="cu-btn bg-grey" @tap="showOrderDetail(false)">{{$t('取消')}}</button></view>
			  </view>
			</view>
		  </view> -->
	</view>
</template>

<script>
	import { getWarehouseWaitInList,listByOrderId,getOrderDetailAdmin } from './api'
	import mixins from "../../mixins/mixin.js";
	import OrderDetailModal from "@/components/order-detail-modal/index.vue"

	export default {
		mixins: [mixins],
		components: { OrderDetailModal },
		data() {
			return {
				listData: [],
				page: 1,
				keyword: '',
				status: 'noMore',
				contentText: {
					contentdown: this.$t('上拉加载更多'),
					contentrefresh: this.$t('加载中'),
					contentnomore: this.$t('没有更多')
				},
				onHideFlag:false,
				orderDetailModal: false,
				pkgNum:'',
				orderDetail:{} //订单详情
			};
		},
		methods: {
			scanCode() {
				uni.scanCode({
					success: (res) => {
						this.keyword = res.result
						this.searchOrder()
					}
				})
			},
			searchOrder() {
				this.page = 1
				setTimeout(() => {
					this.getData(this.keyword)
				}, 100)
			},
			getData(pkgNum) {
				this.listData = [];
				let that = this
				const params = {
					// page: this.page,
					// rows: 20,
					pkgNum: pkgNum,
				}
				that.pkgNum = pkgNum
				getWarehouseWaitInList(params).then(res => {
					that.listData = res
					// if (that.page == 1) 

					// if (data.length > 0) {
					// 	that.listData = that.listData.concat(data);
					// 	that.status = 'more';
					// }
					// if (res.total === that.listData.length) that.status = 'noMore';
					// 		uni.stopPullDownRefresh();
				});
			},
			/* 显示订单详情 */
			showOrderDetail(show, id) {
			  this.orderDetailModal = show;
			  if (show) {
			    this.getOrderDetail(id);
			  }
			},
			/* 读取订单详情 */
			getOrderDetail(id) {
			  return new Promise((resolve, reject) => {
			    getOrderDetailAdmin(id).then((data) => {
			      //订单信息
			      this.orderDetail = data;
			      listByOrderId({ orderId: id }).then((data) => {
			        let positionNos = data.map((item) => {
			          return `${item.warehouseName ?? ""}${item.areaName ?? ""}${
			            item.locationName ?? ""
			          }`;
			        });
			        this.$set(this.orderDetail, "positionNo", positionNos.join(","));
			      });
			    });
			  });
			},
			specialRendering(val){
				if(val !== undefined){
				    let i = val.split(',')
					let special = this.getDictDatas(this.DICT_TYPE.ORDER_SPECIAL_NEEDS).filter(e => {
						return i.indexOf(e.value) > -1
				    })
				  return special
				}
			},
		},
		onPullDownRefresh() {
			this.searchOrder()
		},
		onReachBottom() {
			if (this.status == 'more') {
				this.status = 'loading';
				this.page++;
				this.getData();
			}
		},
		onLoad: function(option) {
			// if ("orderNo" in option) {
			// 	this.keyword = option.orderNo;
			// }
			uni.setNavigationBarTitle({
				title:this.$t('合包查询')
			})
			if(this.keyword){
				this.getData(this.keyword);
			}
			
		},
		onShow(){
			if(this.onHideFlag){
				this.page = 1;
				if(this.keyword){
					this.getData(this.keyword);
				}
			}
		},
		onHide(){
			this.onHideFlag = true;
		},
		/*onBackPress(options) {
			uni.reLaunch({
				url: '../index/index'
			});
			return true;
		}*/
	};
</script>

<style lang="scss" scoped>
  .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;
    }
  }
  .scroll {
    margin-top: -8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 8px;
    background: #fff;
	.packNo{
		font-size: 18px;
		color: #333;
		font-weight: 600;
		margin: 8px 0;
	}
    .list-row {
      display: flex;
      align-items: center;
      // line-height: 24px;
      padding: 8px 0;
      view {
        flex: 1;
        text-align: center;
      }
    }
    .list-header {
      font-weight: bold;
    }
    .row-bg {
      background: #ebebed;
    }
    .red-badge{
      display: inline-block;
      color: #d9001c;
    }
  }
  .cu-dialog {
    background-color: #fff;
  
    .content {
      &.title-bolder {
        color: #333333;
        font-weight: bolder;
      }
    }
  
    .item-content {
      text-align: left;
      padding: 10px 20px 0px 20px;
  
      > view {
        display: flex;
        padding: 4px 0;
  
        > view {
          flex: 1;
          word-break: break-all;
        }
      }
    }
  }
  .search-form.round {
    ::v-deep .uni-easyinput__content {
      border-radius: 20px;
      /* padding-right: 10px; */
      background: rgba($color: #fff, $alpha: 0.5) !important;
      border: none;
    }
  }
  .scroll-view{
    height: calc(100vh - 44px - 75px);
  }
</style>
