<template>
  <view >
	  <tn-nav-bar fixed>产品入库汇总报表</tn-nav-bar>
	  <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		  <view style="position: relative">
			  <view class="tn-border-solid">
				<view class="tn-flex tn-flex-col-bottom tn-margin">
					  <view class="tn-flex-3 align-content-item  tn-text-center ">
						  <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
							<view class="content__title">产品二维码：</view>
							<view class="content__data tn-flex-1">
							  <tn-input v-model="qrCode" type="text" placeholder="请扫描产品二维码" border :height="60" >
							  </tn-input>
							</view>
						  </view>
					  </view>
					  <view class="tn-flex-1 align-content-item  tn-text-right">
						  <tn-button backgroundColor="#01BEFF"  fontColor="tn-color-white" icon="tn-icon-scan"  @click="openScan">
							  <span class="tn-icon-scan tn-margin-right-xs"></span>扫码
						  </tn-button>
					  </view>
				</view>
						
				<view class="tn-flex tn-flex-col-bottom tn-margin">
					  <view class="tn-flex-3 align-content-item  tn-text-center ">
						  <view class="content tn-flex tn-flex-direction-row tn-flex-col-center ">
							<view class="content__title">入库时间：</view>
							<view class="content__data tn-flex-1">
							  <tn-input v-model="time" type="text" :disabled="true" placeholder="请选择入库时间"  :height="60" border @click="openCalendar"></tn-input>
							</view>
						  </view>
					  </view>
					  <view class="tn-flex-1 align-content-item  tn-text-right">
						  <tn-button :plain="true"  backgroundColor="#dcdfe6" @click="initList()">
							   <span class="tn-icon-search tn-margin-right-xs"></span>查询
						   </tn-button>
					  </view>
				</view>
			  </view>
			  <view class=" tn-flex tn-bg-gray--light">
				  <view class="tn-flex-1 tn-text-center tn-shadow tn-margin-sm tn-bg-white tn-padding tn-radius">
					  <tn-count-to :startVal="0" :endVal="count"></tn-count-to> 
					  <view>
						  当日入库数
					  </view>
					  
				  </view>
				  <view class="tn-flex-1 tn-text-center tn-shadow tn-margin-sm tn-bg-white tn-padding tn-radius">
					  
					  <tn-count-to :startVal="0" :endVal="countAll"></tn-count-to> 
					  <view>
						  累计入库数
					  </view>
				  </view>
			  </view>
		  </view>
		  <view>
			  <template v-for="(item,index) in list">
				  <view @click="toDetalis(item.id)">
				  <tn-list-cell>
					<view class="list-icon-text">
					  <view class="list__left">
						<view class="list__left__text tn-color-gray--dark">二维码编号</view>
					  </view>
					  <view class="list__right">{{item.qrCode}}</view>
					</view>
					<view class="list-icon-text">
					  <view class="list__left">
						<view class="list__left__text tn-color-gray--dark">水冷</view>
					  </view>
					  <view class="list__right">{{item.waterCooling}}</view>
					</view>
					<view class="list-icon-text">
					  <view class="list__left">
						<view class="list__left__text tn-color-gray--dark">气密</view>
					  </view>
					  <view class="list__right">{{item.airtight}}</view>
					</view>
					<view class="list-icon-text">
					  <view class="list__left">
						<view class="list__left__text tn-color-gray--dark">冷板二维码</view>
					  </view>
					  <view class="list__right">{{item.coldQrCode}}</view>
					</view>
				  </tn-list-cell>
				  </view>
			  </template>
				<tn-load-more class="tn-margin" status="nomore" v-if="total>0 && total<=list.length"></tn-load-more>
			  
		  </view>
		  <view v-if="total==0" class="tn-padding tn-bg-white tn-border-solid-top">
		  			  <tn-empty  icon="../../../static/image/cart.jpg" text="暂无数据" :imgWidth="200" :imgHeight="200" class="tn-margin-top-xl "></tn-empty>
		  </view>
	  </view>
	  
    <tn-calendar
      v-if="showCalendar"
      v-model="showCalendar"
      mode="date"
	  :dateValue="time"
      :showLunar="false"
      :changeYear="false"
      @change="onChangeCalendar"
    ></tn-calendar>
  </view>
</template>

<script setup>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  export default {
    data(){
      return {
			showCalendar: false,
			time:this.api.formatTime('', 'YMD'),
			qrCode:'',
			list:[],
			current:1,
			size:10,
			total:-1,
			countAll:0,
			count:0,
      }
    },
	onLoad(options){
		this.initList();
	},
	onReachBottom() { //监听上拉触底事件
		if(this.total<= this.list.length){
			return
		}
		this.getList();
	},
	onPullDownRefresh() {//下拉刷新
		this.initList();
	},
	onShow(){
	},
    methods: {
		initList(){
			this.current = 1;
			this.list = [];
			this.getList();
		},
		getList(){
			this.countProduct(); 
			let that = this,
			url = "wx/product/api/list",
			params = {
				current:that.current,
				size:that.size,
				scanDate:this.time,
				status:3,
			}
			if(this.qrCode){
				params.qrCode = this.qrCode;
			}
			that.api.request(url, params,"get").then((res) => {
				console.log(res)
				let list=res.records;
				for(var i = 0; i < list.length; i++){
					that.list.push(list[i]);
				}
				if(list.length>0){
					that.current=that.current+1;
				}
				that.total = res.total
				uni.stopPullDownRefresh();
			}).catch((res) => {
				uni.stopPullDownRefresh();
			})
		},
		countProduct(){
			let that = this,
			url = "wx/product/api/countProduct",
			params = {
				scanDate:this.time,
				status:3,
			}
			if(this.qrCode){
				params.qrCode = this.qrCode;
			}
			that.api.request(url, params,"get").then((res) => {
				console.log(res)
				that.countAll = res.countAll;
				that.count = res.count;
			}).catch((res) => {
			})
		},
		openScan(){
			// 允许从相机和相册扫码
			let that = this;
			uni.scanCode({
				success: function (res) {
					that.qrCode = res.result
					that.initList();
				}
			});
		},
		toDetalis(id){
			uni.navigateTo({
				url:"/pages/product/details?id="+id
			})
		},
		openCalendar() {
		  this.showCalendar = true
		},
		onChangeCalendar(event){
			this.time = event.date
			this.initList();
		},
    }
  }
</script>

<style lang="scss" scoped>
	
	.list-icon-text, .list-image-text {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	}
	
	.list {
	  &__left {
	    display: flex;
	    align-items: center;
	    justify-content: flex-start;
		min-width: 140rpx;
	    
	    &__icon, &__image {
	      margin-right: 18rpx;
	    }
	  }
	  
	  &__right {
	    display: flex;
	    align-items: center;
	    justify-content: flex-end;
		flex-wrap: wrap;
		word-break: break-all;
	  }
	}
	
</style>