<template>
	<view style="background: #fff; min-height: calc(100vh - 44px)">
		<!-- <view class="cu-bar bg-white search">
			<view class="search-form round">
				<input type="text" ref="scanInput" placeholder="请扫描订单号" confirm-type="search" :value="keyword" @confirm="search" />
				<text class="cuIcon-scan" style="font-size: 21px;" @click="scanCode"></text>
			</view>
		</view> -->

    <view class="search-header">
      <!-- <uni-search-bar class="uni-mt-10" @confirm="search" placeholder="请输入订单号" radius="100" v-model="keyword" cancelButton="none" clearButton="none" ></uni-search-bar> -->
      <scanlistener
	  v-if="showScanlistener"
	  suffixIcon="scan"
	  v-model="keyword"
	  :placeholder="$t('请扫描订单号')"
	  @iconClick="scanCode"
	  @confirm="searchOrder"
	  @submit="keyword=$event;searchOrder()"
	  ></scanlistener>
      <!-- <text class="cuIcon-scan" style="font-size: 21px;" @click="scanCode"></text> -->
    </view>
    <view class="scroll">
      <view class="list-row list-header">
        <view class="">{{$t('订单号')}}</view>
        <view class="">{{$t('唛头')}}</view>
        <view class="">{{$t('目的地')}}</view>
        <view class="">{{$t('运输方式')}}</view>
        <view class="">{{$t('到达')}}/{{$t('总数')}}</view>
      </view>
      <view>
        <view v-for="(v, key) in listData" :class="{'list-row': true, 'row-bg' : key % 2 === 0}" :key="key" @tap="toDetail(v)">
          <view class="">
            {{ v.orderNo }}
						<view class="red-badge-wrap" v-if="!!v.advanceType">
							<template v-for="(item, i) in specialRendering(v.advanceType)">
								<text class="red-badge">({{item.symbol}})</text>
							</template>
						</view>
          </view>
          <view class="">{{ v.marks }}<br>{{ v.salesmanName ? '(' + v.salesmanName + ')' : '' }}</view>
          <view class="">{{ v.objectiveName }}</view>
          <view class=""><dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="v.transportId" /></view>
          <view class="">
            <text>{{ v.sumNum }}</text>
            /
            <text>{{ v.totalNum }}</text>
          </view>
        </view>
          <uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
      </view>
    </view>

		<view class="cu-modal" :class="modalShow ? 'show' : ''" style="z-index: 900;">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
				    <view class="content">{{$t('操作')}}</view>
				    <view class="action" @click="modalShow = !modalShow">
				        <text class="cuIcon-close text-blue"></text>
				    </view>
				</view>
				<view class="flex">
					<view class="flex-sub padding-sm">
						<button class="cu-btn block bg-blue" @tap="toInfoDetail">{{$t('修改入仓信息')}}</button>
					</view>
					<view class="flex-sub padding-sm">
						<button class="cu-btn block bg-blue" @tap="toLocation">{{$t('修改储位')}}</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import { uniLoadMore, uniSearchBar, uniIcons } from '@dcloudio/uni-ui';
	// import {
	// 	getWarehousingOrder
	// } from '../../api/api.js';
	import util from '../../util/util.js';
  import { getWarehouseWaitInList } from './api'

	export default {
		name: 'warehouseing-list',
		components: {
			// uniLoadMore,
      // uniSearchBar,
      // uniIcons
		},
		data() {
			return {
				listData: [],
				page: 1,
				keyword: '',
				// oldKeyword: '',
				status: 'more',
				contentText: {
					contentdown: this.$t('上拉加载更多'),
					contentrefresh: this.$t('加载中'),
					contentnomore: this.$t('没有更多')
				},
				returnLoadId: null,
				// 7(垫)，8(木)，9(纸)
				advanceTypeList:[
					{id:7,value:this.$t('垫')},
					{id:8,value:this.$t('木')},
					{id:9,value:this.$t('纸')},
				],
				modalShow:!1,
				modalId:'',
				modalData:{},
				onHideFlag:false,
				title: this.$t('新商品入仓操作'),
			};
		},
		methods: {
			scanCode() {
				uni.scanCode({
					success: (res) => {
						this.keyword = res.result
						this.searchOrder()
					}
				})
			},
			onSubmit(e){
				console.log('onSubmit', e)
				this.keyword = e
				this.searchOrder()
			},
			searchOrder() {
				this.page = 1
				setTimeout(() => {
					this.getData(this.keyword)
				}, 100)
			},
			getData(orderNo) {
				let that = this
				const params = {
					page: this.page,
					rows: 20,
					orderNo: orderNo,
				}
				getWarehouseWaitInList(params).then(res => {
				const data = res.list
					if (that.page == 1) this.listData = [];

					if (data.length > 0) {
            // for (let k in data) {
						// 	//2.订单列表：只显示未入仓订单，已入仓订单（到达=总数）不显示但可以搜索到追加
						// 	// if (data[k].warehouseNum == data[k].goodsNum && this.keyword == '') {
						// 	// 	data.splice(k, 1);
						// 	// }
						// 	// 待办订单
						// 	if(data[k] && !!data[k].advanceType){
						// 		data[k].advance_type_arr = data[k].advanceType.split(',')||[];
						// 	}else if(data[k]){
						// 		data[k].advance_type_arr = [];
						// 	}
						// }
						that.listData = that.listData.concat(data);
						that.status = 'more';
					}
          if (res.total === that.listData.length) that.status = 'noMore';
					uni.stopPullDownRefresh();
				});
			},
			toDetail(data) {
        if (data.status == 5 || data.status == 9) {
           uni.showModal({
            title: '',
            content: this.$t('操作'),
            cancelText: this.$t('修改入仓信息'),
            confirmText: this.$t('修改储位'),
            cancelColor: '#007aff',
            confirmColor: '#007aff',
            success: (res) => {
              if (res.cancel) {
                uni.navigateTo({
                  url: './warehousing?orderId=' + data.orderId
                });
              } else if (res.confirm) {
                uni.navigateTo({
                  url: './warehousing-confirm?orderId=' + data.orderId
                });
              }
            }
          });
          return
        }
				this.modalId = data.id;
				this.modalData = data;
        this.toInfoDetail();
			},
			// 修改入仓信息
			toInfoDetail(){
				let id = this.modalId;
				this.modalShow = !1;
				let url = './detail?orderId=' + this.modalData.orderId;
				uni.navigateTo({
					url: url
				});
			},
			// 修改储位
			toLocation(){
				let id = this.modalId;
				let _arry = [
					'locationId='+this.modalData.location_id,
					'wareId='+this.modalData.ware_id,
					'areaId='+this.modalData.area_id,
				];
				let url = './location?id=' + id+'&'+(_arry.join('&'));
				uni.navigateTo({
					url: url
				});
				this.modalShow = !1;
			},
      specialRendering(val){
        if(val !== undefined){
          let i = val.split(',')
          return this.getDictDatas(this.DICT_TYPE.ORDER_SPECIAL_NEEDS).filter(e => {
            return i.indexOf(e.value) > -1
          }).map(item => {
            // 打字开头的用最后一个字，否则取第一个字
            item.symbol = item.label[0] === '打' ? item.label[item.label.length-1]: item.label[0]
            return item
          })
        }
      },
		},
		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('待入仓列表')
			})
			this.getData(this.keyword);
		},
		onShow(){
			if(this.onHideFlag){
				this.page = 1;
				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;
    .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-wrap{
    //   position: absolute;
    //   right: -34upx;
    //   top: -26upx;
    // }
    .red-badge{
      display: inline-block;
      // background-color: #dd514c;
      color: #d9001c;
      // font-size: 24upx;
      // width: 30upx;
      // height: 30upx;
      // line-height: 30upx;
      // vertical-align: middle;
      // border-radius: 30upx;
      // margin-left: 2upx;
      /* transform: scale(0.9); */
    }
  }
</style>
