<template>
  <view class="page">
	  <tn-nav-bar fixed>返工返修</tn-nav-bar>
	  <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
        <tn-tabs :list="fixedList" :current="type" :isScroll="false" backgroundColor="#FFFFFF"  @change="tabChange"></tn-tabs>
		
		<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" @confirm="initList()" >
					  </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>
		  <view v-for="(item,index) in list" class="tn-margin">
			  <view class="tn-border-solid-bottom tn-bg-white tn-padding-bottom tn-padding-top" @click="toDetail(item.id)">
				  {{item.productName}}({{item.qrCode}})
			  </view>
		  </view>
			<tn-load-more class="tn-margin" status="nomore" v-if="total>0 && total<=list.length"></tn-load-more>
		  <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-fab
	  v-if="permission==1 || permission==2"
	  left = 'auto'
	  right = 40
	  bottom = 400
      icon="add"
	  :showMask="false"
      @open="add"
      @close="add"
    >
    </tn-fab>
  </view>
</template>

<script setup>
  export default {
    data(){
      return {
		permission: this.api.getUserPermission(),
        fixedList: [
          {name: '待维修'},
          {name: '已维修'},
          {name: '维修完成'},
          {name: '作废'},
        ],
		qrCode:'',
		type:0,
		list:[],
		current:1,
		size:20,
		total:-1,
      }
    },
	onLoad(options){
		this.initList();
	},
	onReachBottom() { //监听上拉触底事件
		if(this.total<= this.list.length){
			return
		}
		this.getList();
	},
	onPullDownRefresh() {//下拉刷新
		this.initList();
	},
	onShow(){
	},
    methods: {
      // tab选项卡切换
      tabChange(index) {
        this.type = index
		this.initList();
      },
	  
	  	openScan(){
	  		// 允许从相机和相册扫码
	  		let that = this;
	  		uni.scanCode({
	  			success: function (res) {
	  				that.qrCode = res.result
	  				that.initList()
	  			}
	  		});
	  	},
		initList(){
			this.current = 1;
			this.list = [];
			this.getList();
		},
		getList(){
			let that = this,
			url = "wx/productRework/api/list",
			params = {
				current:that.current,
				size:that.size,
				type: this.type==3?-1:this.type+1,
			}
			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();
			})
		},
	  add(){
		  uni.navigateTo({
		  	url:"/pages/product/rework-pecord/add"
		  })
	  },
	  toDetail(id){
		  uni.navigateTo({
			url:"/pages/product/rework-pecord/detail?id="+id
		  })
	  }
    }
  }
</script>

<style lang="scss" scoped>
	.page{
		min-height: 100vh;
	}
</style>