<template>
	<view class="page1">
		<!-- <view class="title-box">
			<uni-search-bar class="uni-mt-10" radius="5" placeholder="请输入商品名称" cancelButton="none" @confirm="search" />
		</view> -->
		<view class="content-box" :style="{height:height - 120 + 'rpx'}" v-if="purchase != ''">
			<view class="content-right">
				<view class="right-box" v-for="(item,index) in goodsList" :key="index">
					<view class="box-left">
						<img class="img-radius" :src="item.productPicture" alt="" v-if="item.productPicture">
						<view class="noPic" v-else>暂无图片</view>	
					</view>
					<view class="box-right">
						<view class="box-right-name">{{item.productName== null?'':item.productName}}</view>
						<view class="box-right-num">{{item.productSn}}</view>
						<view class="box-right-price" v-if="shopId != '1960543009070256129'">
							<view class="price-box">
								<text>{{item.wholesalePrice == null ?'暂无':item.wholesalePrice}}</text>
								<text>批发价</text>
							</view>
							<view class="price-box">
								<text>{{item.lsprice || item.price}}</text>
								<text>零售价</text>
							</view>
						</view>
						<view class="box-right-price" v-else>
							<view class="price-box">
								<text>{{item.wholesalePrice == null ?'暂无':item.wholesalePrice}}</text>
								<text>直播价</text>
							</view>
							<view class="price-box">
								<text>{{item.lsprice || item.price}}</text>
								<text>日常价</text>
							</view>
						</view>
					</view>
					<checkbox-group @tap="goInvPrint(item)">
						<label>
							<checkbox :checked="item.checked" class="checkbox" />
						</label>
					</checkbox-group>
				</view>
			</view>
		</view>
		<view class="content-box" :style="{height:height - 120 + 'rpx'}" v-else>
			<view class="content-left">
				<view class="left-box" v-for="(item, index) in indexList" :key="index"
					:class="item.parentId ? 'left-box-hover':''" @tap="clickLeftBtn(index)">
					<text style="width: 100%;height: 90rpx;line-height: 90rpx;display: inline-block;overflow: hidden;"
						:class="item.parentId ? 'red' :''">{{item.categoryName}}</text>
				</view>
			</view>
			<view class="content-right">
				<view class="right-box" v-for="(item,index) in goodsList" :key="index" v-if="item.delFlag">
					<view class="box-left">
						<img class="img-radius" :src="item.productPicture" alt="" v-if="item.productPicture">
						<view class="noPic" v-else>暂无图片</view>	
					</view>
					<view class="box-right">
						<view class="box-right-name">{{item.productName==null?'':item.productName}}</view>
						<view class="box-right-num">{{item.productSn}}</view>
						<view class="box-right-price" v-if="item.wholesalePrice !='' && shopId != '1960543009070256129'">
							<view class="price-box">
								<text>{{item.wholesalePrice}}</text>
								<text>批发价</text>
							</view>
							<view class="price-box">
								<text>{{item.price}}</text>
								<text>零售价</text>
							</view>
						</view>
						<view class="box-right-price" v-if="item.wholesalePrice !='' && shopId == '1960543009070256129'">
							<view class="price-box">
								<text>{{item.wholesalePrice}}</text>
								<text>直播价</text>
							</view>
							<view class="price-box">
								<text>{{item.price}}</text>
								<text>日常价</text>
							</view>
						</view>
					</view>
					<checkbox-group @tap="checkboxChange(item)">
						<label>
							<checkbox :checked="item.checked" class="checkbox" />
						</label>
					</checkbox-group>
				</view>
			</view>
		</view>
		<view class="bottom-box">
			<view class="bottom-right">
				<button class="bottom-btn" @tap="clickPrint">批量打印</button>
			</view>
		</view>
		<!-- 弹出输入框 -->
		<uni-popup ref="payDialog" background-color="#fff">
			<view class="popup-pay-content">
				<uni-forms-item label="打印方式" name="type" labelWidth="170rpx">
					<uni-data-select style="width: 100%" v-model="printingMethod" :localdata="typeList"></uni-data-select>
				</uni-forms-item>
				<view class="popup-pay-title">
					<text>已选商品</text> 
				</view>
				<view v-for="(item,index) in carList" :key="index">
					<view class="box-right">
						<text class="box-right-name" style="font-size: 24rpx;">{{item.productName==null?'':item.productName}}</text>
						<text class="box-right-num">（{{item.productSn}})</text>
					</view>
				</view>
				<view class="popup-pay-title" style="margin-top: 50rpx;">
					<text>请选择需要打印的字段</text>
				</view>
				<view v-if="shopId != '1960543009070256129'">
					<view class="content-fur">
						<view class="content-low" v-for="(item1,index1) in list" :key="index1"
							@tap.stop="addMultipleType(item1)" :class="item1.checked?'checked':''">{{item1.type}}
						</view>
					</view>
					<view v-if="list[0].checked && purchase != ''" style="display: flex;height: 80rpx;width: 100%;line-height: 80rpx;margin-top: 20rpx;">
						<text style="display:inline-block;width:100rpx;font-size:22rpx;">
							供应商：
						</text>
						<input v-model="purchase.supplierName" @change="changeText" :disabled="closetanPopup" type="text" placeholder="请输入供应商名称" style="display: flex;height: 80rpx;width: 300rpx;line-height: 80rpx;padding-left: 20rpx;border: 1px solid #eee;">
					</view>
				</view>
				<view v-else>
					<view class="content-fur">
						<view class="content-low" v-for="(item1,index1) in list1" :key="index1"
							@tap.stop="addMultipleType(item1)" :class="item1.checked?'checked':''">{{item1.type}}
						</view>
					</view>
					<view v-if="list1[0].checked && purchase != ''" style="display: flex;height: 80rpx;width: 100%;line-height: 80rpx;margin-top: 20rpx;">
						<text style="display:inline-block;width:100rpx;font-size:22rpx;">
							供应商：
						</text>
						<input v-model="purchase.supplierName" @change="changeText" :disabled="closetanPopup" type="text" placeholder="请输入供应商名称" style="display: flex;height: 80rpx;width: 300rpx;line-height: 80rpx;padding-left: 20rpx;border: 1px solid #eee;">
					</view>
				</view>
				<view class="popup-pay-container" >
					<kk-printer ref="kkprinter" :bufferData="bufferData" @goPrint="goPrint" :defaultText="'确认打印'"></kk-printer>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import util from '@/components/kk-printer/utils/util.js';
	import * as blesdk from '@/components/kk-printer/utils/bluetoolth.js';
	import kkPrinter from '@/components/kk-printer/index.vue';
	import base from '@/utils/ossUploadFile/base64.js';
	export default {
		data() {
			return {
				indexList: [],
				pageNum: 1, //分页的页码
				shopList: [],
				goodsList: [],
				categoryId: '', //分类id
				searchName: '', //搜索框输入值
				id: '',
				carList: [],
				type: '',
				bufferData:[],
				typeList: [{
						value: '0',
						text: "打印长票"
					},
					{
						value: '1',
						text: "打印短票"
					},
				],
				printingMethod:"0",
				checkPayData:'',
				data:{},
				height:0,
				list:[{
					type:'供应商',
					checked:false,
				},{
					type:'货号',
					checked:false,
				},{
					type:'零售价',
					checked:false,
				},{
					type:'批发价',
					checked:false,
				}],
				list1:[{
					type:'供应商',
					checked:false,
				},{
					type:'货号',
					checked:false,
				},{
					type:'日常价',
					checked:false,
				},{
					type:'直播价',
					checked:false,
				}],
				multipleList:[],
				purchase:'',
				shopId:''
			}
		},
		components: {
			kkPrinter
		},
		onHide(){
			setTimeout(res=>{
				uni.closeBLEConnection({
				  deviceId:uni.getStorageSync('deviceId'),
				  success(res) {
				  },fail(err){
				  }
				})
			},5000)
			
		},
		onLoad(options) {
			wx.openBluetoothAdapter({mode: 'central'})
			this.height = wx.getSystemInfoSync().windowHeight
			this.shopId = uni.getStorageSync('shopId')
			if (options.khid != undefined) {
				uni.redirectTo({
					url: "/package1/index/downStearmList?khid=" + options.khid
				})
			}else{
				if(options.purchase){
					this.purchase = JSON.parse(options.purchase)
					this.goodsList = JSON.parse(options.purchaseDetails)
				}else{
					this.type = uni.getStorageSync('type')
					this.getGategoryList()
				}
			}
		},
		methods: {
			//初始化获取分类列表
			getGategoryList() {
				this.shopList = []
				this.indexList = []
				this.goodsList = []
				this.tui.request("/app/productCategory/list", "get", {}, false, true).then((res) => {
					if (res.code == 200) {
						this.indexList = res.result;
						for (var i = 0; i < this.indexList.length; i++) {
							if (i == 0) {
								this.indexList[i].parentId = true
							} else {
								this.indexList[i].parentId = false
							}
							let data = {
								categoryId: this.indexList[i].id
							}
							this.shopList.push(data)
							this.categoryId = this.indexList[i].id
							this.getShareList(this.indexList[i].id)
							
						}
					} else {
						this.tui.toast(res.message)
					}
				}).catch((res) => {})
			},
			//点击分类获取商品列表
			getShareList(id) {
				this.tui.request("/app/product/getShareList", "POST", {
					categoryId: id,
					searchStr: this.searchName,
					pageNum: this.pageNum,
					pageSize: '100'
				}, false, false).then((res) => {
					if (res.code == 200) {
						for (var i = 0; i < this.shopList.length; i++) {
							if(res.result.records != []){
								if(this.shopList[i].categoryId == res.result.records[0].categoryId){
									this.shopList[i] = res.result.records
								}
							}else{
								this.shopList[i] = []
							}
							
						}
						this.goodsList = this.shopList[0]
					} else {
						this.tui.toast(res.message)
					}
				}).catch((res) => {})
			},
			//顶部搜索框
			search(res) {
				this.searchName = res.value
				this.getGategoryList()
			},
			//未入库遮罩
			clickMask() {
				uni.showToast({
					title: '请将商品上架或入库后再操作！',
					icon: 'none'
				})
			},
			//点击左侧菜单切换
			clickLeftBtn(index) {
				for (var i = 0; i < this.indexList.length; i++) {
					if (i == index) {
						this.indexList[i].parentId = true
					} else {
						this.indexList[i].parentId = false
					}
				}
				this.categoryId = this.shopList[index].id
				this.goodsList = this.shopList[index]
			},
			goInvPrint(item){
				item.checked = !item.checked
				if(this.carList == ''){
					this.carList.push(item)
				}else{
					for(let i=0;i<this.carList.length;i++){
						if(this.carList[i].productName == item.productName){
							this.carList.splice(i, 1)
							return;
						}else{
							if(i+1 == this.carList.length){
								this.carList.push(item)
								return;
							}
							
						}
					}
				}
				
			},
			//选中商品
			checkboxChange(item) {
				item.checked = !item.checked
				if(this.carList == ''){
					this.carList.push(item)
				}else{
					for(let i=0;i<this.carList.length;i++){
						if(this.carList[i].id == item.id){
							this.carList.splice(i, 1)
							return;
						}else{
							if(i+1 == this.carList.length){
								this.carList.push(item)
								return;
							}
							
						}
					}
				}
				
			},
			//点击批量打印按钮
			clickPrint() {
				this.$refs.payDialog.open('center')
			},
			checkPay(type){
				this.data.priceType = type
				this.tui.request("/app/productShare/save", "POST", this.data, false, true).then((res) => {
					if (res.code == 200) {
						this.khid = res.result.id
						
					} else {
						this.tui.toast(res.message)
					}
				}).catch((res) => {})
				this.checkPayData = type
				this.$refs.payDialog.close()
				this.$refs.share.open()
			},
			//选择多个规格保存
			addMultipleType(item1){
				
				item1.checked = !item1.checked
				if(this.multipleList == ''){
					this.multipleList.push(item1.type)
				}else{
					for(var i=0;i<this.multipleList.length;i++){
						if(this.multipleList[i] == item1.type){ //相同							
								this.multipleList.splice(i,1)
								return;
						}else{ //不同
							if(i+1 == this.multipleList.length){
								this.multipleList.push(item1.type)
								return;
							}
						}
					}
				}
				
				
			},
			//点击打印按钮
			goPrint(){
				uni.setStorageSync('small',true)
				let that = this;
				for(var i=0;i<that.carList.length;i++){
					let item = that.carList[i]
					that.yNum = 10
					if(this.printingMethod == "0"){ //长票打印
						
						//宽5.1 高4.1
						let strCmd = blesdk.CreatCPCLPage(320, 480, 1, 0);
						if(this.multipleList.indexOf('供应商') != -1){
							strCmd += blesdk.addCPCLSETMAG(2, 2)
							strCmd += blesdk.addCPCLLocation(2);
							strCmd += blesdk.addCPCLSETBOLD('400');
							strCmd += blesdk.addCPCLText('0', that.yNum += 10, '24', '0', 0, this.purchase !=''?this.purchase.supplierName:item.supplierName)
						}
						strCmd += blesdk.addCPCLSETMAG(1, 1)
						strCmd += blesdk.addCPCLLocation(0);
						strCmd += blesdk.addCPCLSETBOLD('0');
						strCmd += blesdk.addCPCLText('20', that.yNum += 70, '24', '0', 0, '品名: '+(item.productName==null?'':item.productName))
						if(this.multipleList.indexOf('货号') != -1){
							strCmd += blesdk.addCPCLText('20', that.yNum += 50, '24', '0', 0, '货号: '+item.productSn)
						}
						
						if(this.multipleList.indexOf('批发价') != -1){
							strCmd += blesdk.addCPCLText('20', that.yNum += 50, '24', '0', 0, '批发价: '+item.wholesalePrice)
						}
						if(this.multipleList.indexOf('直播价') != -1){
							strCmd += blesdk.addCPCLText('20', that.yNum += 50, '24', '0', 0, '直播价: '+item.wholesalePrice)
						}
						if(this.multipleList.indexOf('零售价') != -1){
							
							strCmd += blesdk.addCPCLText('20', that.yNum += 50, '24', '0', 0, '零售价: '+(item.lsprice || item.price))
						}
						if(this.multipleList.indexOf('日常价') != -1){
							
							strCmd += blesdk.addCPCLText('20', that.yNum += 50, '24', '0', 0, '日常价: '+(item.lsprice || item.price))
						}
						strCmd += blesdk.addCPCLLocation(2);
						strCmd += blesdk.addCPCLQRCode(0, that.yNum += 70, 'H', '1', 4, [this.purchase!=''?base.encode(item.productId):base.encode(item.id),base.encode(this.shopId)]) //二维码
						strCmd += blesdk.addCPCLLocation(0); //对齐指令 0-左对齐 1-右对齐 2-居中
						strCmd += blesdk.addCPCLPrint();
						this.bufferData.push(strCmd);
					}else{
						//宽5.1 高4.1
						let strCmd = blesdk.CreatCPCLPage(410, 320, 1, 0);
						if(this.multipleList.indexOf('供应商') != -1){
							strCmd += blesdk.addCPCLSETMAG(2, 2)
							strCmd += blesdk.addCPCLLocation(2);
							strCmd += blesdk.addCPCLSETBOLD('400');
							strCmd += blesdk.addCPCLText('0', that.yNum += 10, '24', '0', 0, this.purchase !=''?this.purchase.supplierName:item.supplierName)
						}
						strCmd += blesdk.addCPCLSETMAG(1, 1)
						strCmd += blesdk.addCPCLLocation(0);
						strCmd += blesdk.addCPCLSETBOLD('0');
						strCmd += blesdk.addCPCLText('30', that.yNum += 60, '24', '0', 0, '商品名:'+(item.productName==null?'':item.productName))
						strCmd += blesdk.addCPCLSETMAG(2, 2)
						if(this.multipleList.indexOf('货号') != -1){
							strCmd += blesdk.addCPCLText('30', that.yNum += 40, '24', '0', 0, '货号:'+item.productSn)
						}
						strCmd += blesdk.addCPCLSETMAG(1, 1)
						if(this.multipleList.indexOf('批发价') != -1){
							
							strCmd += blesdk.addCPCLText('30', that.yNum += 50, '24', '0', 0, '批发价:'+item.wholesalePrice)
						}
						if(this.multipleList.indexOf('直播价') != -1){
							
							strCmd += blesdk.addCPCLText('30', that.yNum += 50, '24', '0', 0, '直播价:'+item.wholesalePrice)
						}
						if(this.multipleList.indexOf('零售价') != -1){
							
							strCmd += blesdk.addCPCLText('30', that.yNum += 50, '24', '0', 0, '零售价:'+(item.lsprice || item.price))
						}
						if(this.multipleList.indexOf('日常价') != -1){
							
							strCmd += blesdk.addCPCLText('30', that.yNum += 50, '24', '0', 0, '日常价:'+(item.lsprice || item.price))
						}
						strCmd += blesdk.addCPCLQRCode(240, 160, 'H', '1', 4, [this.purchase!=''?base.encode(item.productId):base.encode(item.id),base.encode(uni.getStorageSync('shopId').substring('10','12'))]) //二维码
						strCmd += blesdk.addCPCLLocation(0); //对齐指令 0-左对齐 1-右对齐 2-居中
						strCmd += blesdk.addCPCLPrint();
						this.bufferData.push(strCmd);
					}
					
				}
				that.$nextTick(()=>{
					that.$refs.payDialog.close();
					that.bufferData = []
					uni.navigateBack({
						delta: 1
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		font-size: 24rpx;
	}

	.page1 {
		display: flex;
		flex-direction: column;
		height: 92%;
		font-size: 28rpx;
	}

	.uni-tab__dot {
		padding: 0 8rpx;
		line-height: 30rpx;
		color: #ffffff;
		text-align: center;
		font-size: 24rpx;
		background-color: #ff0000;
		border-radius: 30rpx;
	}

	.uni-tab__text {
		font-size: 24rpx;
		color: #646566;
	}

	.title-box {
		background: #fff;
		position: fixed;
		z-index: 99;
		width: 100%;
		top: 0;
	}

	.bottom-box {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		background: #fff;
		z-index: 98;
	}

	.bottom-left {
		width: 15%;
		position: relative;
	}

	.bottom-right {
		width: 100%;
		display: flex;

		.bottom-btn {
			margin: 0 auto;
			padding: 0;
			width: 90%;
			line-height: 80rpx;
			height: 80rpx;
			text-align: center;
			margin-top: 10rpx;
			color: #fff;
			font-size: 28rpx;
			background: linear-gradient(90deg, #60F3FF, #088FEB);
			border-radius: 5px;
		}
	}

	.bottom-left-box {
		display: flex;
		flex-direction: column;
		text-align: center;
	}

	.content-box {
		background: #fff;
		flex: 1;
		display: flex;
		overflow: scroll;
	}

	.content-left {
		width: 170rpx;
		background: #eee;
		height: 100%;
		overflow: scroll;
	}

	.left-box {
		width: 100%;
		height: 90rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 90rpx;
		border-bottom: 1px solid #fff;
	}

	.left-box-hover {
		width: 100%;
		height: 90rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 90rpx;
		border-bottom: 1px solid #fff;
		background-color: #fff;
	}

	.red {
		border-right: 3px solid red;
	}

	.content-right {
		flex: 1;
		overflow-y: scroll;
	}

	.right-box {
		width: 100%;
		height: 190rpx;
		display: flex;
		border-bottom: 1px solid #eee;
		position: relative;
	}

	.box-left {
		width: 130rpx;
		height: 131rpx;
		background-size: 100%;
		margin: 25rpx 30rpx 35rpx 10rpx;
		border-radius: 20rpx;
	}

	.box-left img {
		width: 100%;
		height: 100%;

	}

	.box-right {
		margin-top: 17rpx;
	}

	.box-right-name {
		font-size: 30rpx;
		font-weight: bold;
	}

	.box-right-num {
		padding: 5rpx 0;
		color: #777;
	}

	.box-right-price {
		display: flex;
		font-size: 25rpx;
	}

	.checkbox {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 20rpx;
		right: 30rpx;
	}

	.price-box {
		display: flex;
		flex-direction: column;
		margin-right: 20rpx;
	}

	.price-box text:first-child {
		color: #ffa200
	}

	.uni-tab__cart-button-right,
	.uni-tab__cart-sub-right {
		display: none;
		flex: none;
	}

	.popup-content {
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		height: 1200rpx;
		background-color: #fff;
		margin-bottom: 30rpx;
		overflow: scroll;
	}

	.popup-title-right-box {
		height: 50rpx;
		line-height: 50rpx;
	}

	.popup-title-right {
		width: 400rpx;
		margin-left: 30rpx;
	}

	.popup-title-left {
		width: 150rpx;
		height: 150rpx;
	}

	.popup-title-left image {
		width: 150rpx;
		height: 150rpx;

	}

	.popup-title {
		display: flex;
		height: 180rpx;
		border-bottom: 1px solid #eee;
		margin-top: 20rpx;
	}

	.popup-bottom {
		width: 95%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 2.5%;
		display: flex;
		z-index: 99;
		background: #fff;
	}

	.popup-bottom-left {
		width: 50%;
		line-height: 80rpx;
	}

	.popup-bottom-right {
		width: 50%;
		line-height: 100rpx;

		.bottom-btn {
			width: 70%;
			line-height: 70rpx;
			height: 70rpx;
			text-align: center;
			/* margin-top: 10rpx; */
			color: #fff;
			font-size: 28rpx;
			margin: 0 auto;
			background: linear-gradient(90deg, #60F3FF, #088FEB);
			border-radius: 70rpx;
		}
	}

	.shop-mask {
		width: 100%;
		height: 190rpx;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.1);
		z-index: 99;
	}
	.popup-pay-content {
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		width: 500rpx;
		height: auto;
		max-height: 1000rpx;
		overflow: scroll;
		background-color: #fff;
	}
	.popup-pay-title {
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		position: relative;
		border-bottom: 1px solid #eee;
		padding-bottom: 20rpx;
	}
	.popup-pay-container {
		margin-top: 20rpx;
		height: 100rpx;
		border-radius: 10px;
		background: #088FEB;
		line-height: 100rpx;
		text-align: center;
		border-bottom: 1px solid #eee;
		border-top: 1px solid #eee;
		color: #fff;
	}
	.noPic{
		border-radius: 10px;
		width: 150rpx;
		height: 150rpx;
		text-align: center;
		line-height: 140rpx;
		color: #777;
		background: #eee;
	}
	.checked{
		background: #60F3FF;
		color: #fff !important;
	}
	.content-fur {
		padding-bottom: 25rpx;
	}
	
	.content-low {
		width: auto;
		border: 1px solid #eee;
		display: inline-block;
		min-width: 90rpx;
		padding: 5rpx;
		font-size: 35rpx;
		text-align: center;
		color: #777;
		margin: 20rpx 0 0 20rpx;
	}
</style>