<template>
	<view class="CardSend yicode">
		<view class="cardhead flex ali-c ">
			<view class="tabitems flex1" :class="{active:tabactive==1}" @tap="taggleTab(1)" >
				<view class="titles">添加打印机</view>
			</view>
			<view class="tabitems flex1 " :class="{active:tabactive==2}" @tap="taggleTab(2)" >
				<view class="titles ">打印机列表</view>
			</view>
		</view>
		<!--添加打印机start-->
		<view class="mainboxs" v-show="tabactive==1">
			<view class="inoutlist">
				<view class="inputitem flex">
					<view class="names">填写编码</view>
					<input type="text" placeholder="打印机编码" v-model="parameter.print_SN" class="inputs" maxlength="20" >
				</view>	
				<view class="wz">请查看打印机上对应的设备编码,并正确填写(不区分大小写)</view>
			</view>
				<button class="submitbtns flexc"  @tap="addPrinter">确认添加</button>
		</view>	
		<!--添加机列表end-->
		<!--打印机列表start-->
		<view class="swiper-list" v-show="tabactive==2">
			<view class="yfcardItem flex" v-for="(item,index) in printerList" :key="index">
				<view class="box">
					<view class="uni-list-cell-db">
						<view>打印机编号</view>
						<view style="font-weight: bold;margin-top:10upx;">{{item.print_SN}}</view>
					</view>
			
					<button class="del"  @tap="delPrinter(item.print_SN)" plain="true">删除</button>
				</view>
			</view>
		</view>
		<!--打印机列表end-->
	</view>
</template>
<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import wPicker from "@/components/w-picker/w-picker.vue";//时间弹窗
	import { addPrinter, getPrinterList,closePrinter} from "@/utils/api/api.js"
	import empty from "@/components/empty/empty.vue"
	export default {
		components:{
			uniPopup,
			wPicker,
			empty,
		},
		data() {
			return {
				tabactive:1,
				print_SN:'',
				//表单提交的参数
				parameter:{
					print_SN:"",//打印机编码
				},
				//时间弹窗
				defaultVal:[],
				printerList:[],
				isallshow:false,
			};
		},
		onLoad(){
			
		},

		methods:{
			//添加打印机编码
			async addPrinter(){
				let can = this.parameter;
				let res =  await addPrinter(can);
				if(res.code==0){
					uni.showToast({
						icon:"success",
						title:res.msg
					})
					this.taggleTab(2);
					//this.$api.msg(res.msg);
				}else{
					this.$api.msg(res.msg);
				}
			},
			//获取打印机列表
			async getPrinterList(){
				uni.showLoading({title:'加载中...'});
				let res = await getPrinterList({});
				
				if(res.code==0){
					console.log(res.data.length!=0)
					if(res.data.length!=0){
						uni.hideLoading();
					}else{
						this.$api.msg("没有更多了~");
					}
					// this.printerList = [...this.printerList,...res.data];
					this.printerList = res.data;
				}
			},
			//删除打印机
			async delPrinter(print_SN){
				let can = print_SN;
				let res = await closePrinter({print_SN});
				if(res.code == 0){
					this.getPrinterList()
				}else{
					this.$api.msg(res.msg);
				}
			},
			taggleTab(inde){
				this.tabactive = inde;
			},
		
		},
		watch:{	
			tabactive(e){	
				if(e==2){
					//已发卡券
					this.page = 0;
					this.cardlist = [];
					this.isallshow = false;
					this.getPrinterList();
				}
			}
		}
	}
</script>
<style lang="scss">
	@import  "./AddPrinter.scss"
</style>
