<template>
	<view class="page1">
		<view class="top" ref="top">
			<view @tap="backPage" style="width: 80rpx;height: 80rpx;margin: 98rpx 0 0 30rpx;">
				<uni-icons type="left" color="#fff" size="27"></uni-icons>
			</view>
			<view class="top1">
				<view class="hello-box">
					<view class="hello-left">
						<text
							style="font-size: 40rpx;font-weight: 800;line-height: 56rpx;color: rgba(86, 132, 255, 1);">Hi</text>
					</view>
					<view class="hello-name">
						你好，{{shopName}}
					</view>
					<view class="hello-right"></view>

				</view>
				<view class="hello-text">
					欢迎使用快衣店AI助手~
				</view>
				<view class="ai-bot"></view>
			</view>
		</view>
		<view class="banner">
			<view class="banner-left" @tap="goAiPicture('pai')">
				<view class="bottom-box">
					<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/da77271d34b14b13827543389948802d.jpg"
						alt="" style="width: 100%;height: 100%;">
				</view>
				<view class="banner-text">
					<view style='font-weight: 800;'>AI图片识别</view>
					<view style='font-size:22rpx;'>识别图片进行入库</view>
				</view>
			</view>
			<view class="banner-right" @tap='goAiPicture'>
				
				<view class="bottom-box">
					<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/27e2655fe19f454d93970f968d91fbef.png"
						alt="" style="width: 100%;height: 100%;animation: none;">
				</view>
				<view class="banner-text">
					<view style='font-weight: 800;'>AI语音识别</view>
					<view style='font-size:22rpx;'>语音录入进行开单</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view style="height: 80rpx;line-height: 80rpx;font-size: 32rpx;font-weight: bold;padding-left: 30rpx;position: relative;">
				入库列表
				<!-- <view @tap="goAiPicture" style="position: absolute;top: 0;right: 20rpx;">
					<uni-icons type="plusempty" size="26"></uni-icons>
				</view> -->
			</view>
			<view class="content-list" v-for="(item,index) in aiList" :key="index">
				<view class="image-box">
					<view class="image">AI</view>
				</view>
				<view class="content-text">
					<view class="text" style="font-weight: bold;font-size: 32rpx;color: #000;margin-top:36rpx;">
						{{item.createTime}}
					</view>
					<view class="text">总数：{{item.count}} (成功:{{item.ocrCount}})</view>
				</view>
				<view class="content-btn">
					<text class="blink" v-if="item.inStorageStatus==2">识别中...</text>
					<text style="position: absolute;top: 40rpx;right: 20rpx;" v-if="item.inStorageStatus == 3 || (item.inStorageStatus == 4 && item.ocrCount > 0)">识别完成</text>
					<text style="position: absolute;top: 40rpx;right: 20rpx;" v-if="item.ocrCount == 0 && item.inStorageStatus == 4">识别失败</text>
					<view class="btn" v-if="item.inStorageStatus != 2 && item.ocrCount > 0" @tap="montageData(item.id)">去入库</view>
					<view @tap="delItem(item.id)" class="btn" style="background:linear-gradient(90deg, #FF9797, #FFC1E0);position: absolute;bottom: 20rpx;" :style="{right:item.ocrCount == 0 && item.inStorageStatus == 4?'20rpx':'160rpx'}">
						删除
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				aiList:[],
				carList1:[],
				purchaseDetails:[],
				shopName:'',
				status: 'loadmore',
				pageNum:1,
				pages:1,
				categoryList:{}
			}
		},
		onPullDownRefresh(){
			this.pageNum = 1
			this.aiList = []
			this.getList()
		},
		onReachBottom() {
			if (this.pageNum >= this.pages) return;
			this.status = 'loading';
			this.pageNum ++;
			this.getList();
		},
		onShow() {
			this.pageNum = 1
			this.aiList = []
			this.carList1 = []
			this.getList()
			this.getDefaultCategory()
		},
		onLoad() {
			this.shopName = uni.getStorageSync('shopName')
		},
		methods: {
			getList(){
				this.tui.request("/app/purchase/getPurchaseList", "POST", {
					pageNum: this.pageNum,
					pageSize: 10,
					isAiList: 1,
					fromWhere:0
				}, false, false).then((res) => {
					this.status = 'nomore';
					if (this.pages == 1) {
						this.aiList = res.result.records
					} else {
						this.aiList = [...this.aiList, ...res.result.records]
					}
					this.pages = res.result.pages
				}).catch((res) => {}) 
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 500);
			},
			backPage(){
				uni.navigateBack({
					delta: 1
				})
			},
			sliceMsg(val) {
				var name = ''
				if (typeof(val) == 'string') {
					let newObj = JSON.parse(val)
					for (let as in newObj) {
						name += newObj[as] + '/'
					}
				}
				return name;
			},
			//店铺默认分类
			getDefaultCategory(){
				this.tui.request("/app/productCategory/getDefaultCategory", "POST", {}, false, true).then((res) => {
					if (res.code == 200) {
						this.categoryList = res.result
					} else {
						this.tui.toast(res.message)
					}
				}).catch((res) => {})
			},
			async montageData(id){
				await this.tui.request("/app/purchase/getPurchaseAllDataOfAi?id=" + id, "POST", {}, false, false)
				.then((res) => {
					this.purchaseDetails = res.result.purchaseDetails
					uni.setStorageSync('AiInventoryId', res.result.purchase.id)
					for(let i=0;i<this.purchaseDetails.length;i++){
						let data = {
							id: this.purchaseDetails[i].id,
							price: this.purchaseDetails[i].price,
							productCount: 0,
							categoryId:this.purchaseDetails[i].categoryId || this.categoryList.categoryId,
							categoryName:this.purchaseDetails[i].categoryName || this.categoryList.categoryName,
							wholesalePrice: this.purchaseDetails[i].wholesalePrice,
							purchasePrice:this.purchaseDetails[i].purchasePrice,
							isNew: this.purchaseDetails[i].productId==null?true:false,
							productId:this.purchaseDetails[i].productId,
							productName: this.purchaseDetails[i].productName,
							productSn: this.purchaseDetails[i].productSn,
							productPicture: this.purchaseDetails[i].productPicture,
							supplierName: this.purchaseDetails[i].supplierName,
							saleDetailQueryDTO: []
						}
						for(let m=0;m<this.purchaseDetails[i].stockLogList1.length;m++){
							let list = {
								attributeList: this.getAttribute(this.purchaseDetails[i].stockLogList1[m].attributeList),
								productCount:this.purchaseDetails[i].stockLogList1[m].productCount || this.purchaseDetails[i].stockLogList1[m].productCounts,
								productNum:'',
								name: this.sliceMsg(this.getAttribute(this.purchaseDetails[i].stockLogList1[m].attributeList)),
								price: this.purchaseDetails[i].stockLogList1[m].purchasePrice
							}
							data.productCount += this.purchaseDetails[i].stockLogList1[m].productCount 
							data.saleDetailQueryDTO.push(list)
						}
						this.carList1.push(data)
						
					}
				}).catch((res) => {})
				
				await setTimeout(res => {
					this.goInventory()
				}, 300)
				
			},
			getAttribute(str){
				str = str.replace(/"色"(?![^{]*": *"色")/g, '"均色"');
				str = str.replace(/"码"(?![^{]*": *"码")/g, '"均码"');
				return str
			},
			goInventory(){
				uni.setStorageSync('carList1', JSON.stringify(this.carList1))
				uni.navigateTo({
					url: '/package1/AI/voiceInventory'
				})
			},
			goAiPicture(type){
				if(type == 'pai'){
					uni.navigateTo({
						url: '/package1/AI/AIPicture'
					})
				}else{
					uni.removeStorageSync('AiInventoryId')
					if(uni.getStorageSync('shopId') == '1960543009070256129'){
						uni.navigateTo({
							url: '/package3/index/voiceInventory1'
						})
					}else{
						uni.navigateTo({
							url: '/package1/AI/voiceInventory'
						})
					}
				}
				
			},
			//删除单条入库单
			delItem(id){
				let that = this;
				uni.showModal({
					title: "提示",
					content: "确定要删除此条AI识别记录吗？",
					success: function(res2) {
						if (res2.confirm) {
							that.tui.request("/app/purchase/delById", "POST", {
								id:id
							}, false, true).then((res) => {
								if(res.code == 500 && res.message == '删除成功！'){
									that.pageNum = 1
									that.aiList = []
									that.getList()
									setTimeout(res => {
										that.tui.toast("删除成功")
									}, 500)
								}else{
									that.tui.toast(res.message)
								}
							}).catch((res) => {
								that.tui.toast(res.message)
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page,
	.page1 {
		background: #FAF7F7;
		font-size: 28rpx;
	}

	.top {
		width: 780rpx;
		height: 390rpx;
		opacity: 1;
		background: linear-gradient(90deg, #6484fa 0%, #66e8ff 100%);
		overflow: hidden;
	}

	.top1 {
		width: 780rpx;
		height: 390rpx;
		opacity: 1;
		background: linear-gradient(360deg, #FAF7F7 0%, rgba(255, 255, 255, 0) 100%);
	}

	.ai-bot {
		position: absolute;
		top: 200rpx;
		right: 40rpx;
		width: 90rpx;
		height: 110rpx;
		background-size: 100% !important;
		background: url(https://jewel-shop.oss-cn-beijing.aliyuncs.com/66dc640d9e8f4749a234d9ef2af1b257.png) no-repeat;
	}

	.hello-box {
		position: absolute;
		left: 42rpx;
		top: 205rpx;
		width: 220rpx;
		height: 56rpx;

		.hello-left {
			width: 102rpx;
			height: 56rpx;
			opacity: 1;
			background: #fff;
			border-radius: 3px;
			text-align: center;
			transform: skewX(8deg);
		}

		.hello-right {
			position: absolute;
			left: 5px;
			bottom: 0rpx;
			width: 220rpx;
			height: 2px;
			opacity: 1;
			background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
		}

		.hello-name {
			position: absolute;
			left: 118rpx;
			top: 0;
			width: 400rpx;
			height: 55rpx;
			font-size: 32rpx;
			line-height: 55rpx;
			color: white;
			overflow: hidden;
		}
	}

	.hello-text {
		position: absolute;
		top: 275rpx;
		left: 50rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.content-list {
		width: 95%;
		height: 170rpx;
		background: #fff;
		border-radius: 10px;
		margin: 0 auto 20rpx;
		overflow: hidden;
		display: block;
	}

	.image-box {
		width: 120rpx;
		height: 170rpx;
		display: block;
		overflow: hidden;
		float: left;
	}

	.image {
		width: 100rpx;
		height: 100rpx;
		margin: 35rpx 0 0 20rpx;
		font-size: 36rpx;
		background: #8470FF;
		border-radius: 50%;
		text-align: center;
		line-height: 100rpx;
		color: #fff;
	}

	.content-text {
		width: 400rpx;
		height: 200rpx;
		float: left;
		line-height: 50rpx;
		padding-left: 30rpx;
	}

	.text {
		color: #747474;
		font-size: 28rpx;
	}

	.content-btn {
		position: relative;
		width: 190rpx;
		height: 170rpx;
		float: left;
	}

	.btn {
		position: absolute;
		width: 120rpx;
		height: 60rpx;
		background: linear-gradient(90deg, #6691fb 0%, #6ad3fe 100%);
		color: #fff;
		border-radius: 6px;
		text-align: center;
		line-height: 60rpx;
		bottom: 20rpx;
		right: 20rpx;
	}
	.btn1 {
		position: absolute;
		width: 250rpx;
		height: 50rpx;
		background: linear-gradient(90deg, #6691fb 0%, #6ad3fe 100%);
		color: #fff;
		border-radius: 6px;
		text-align: center;
		line-height: 60rpx;
		bottom: 20rpx;
		right: 20rpx;
	}

	@keyframes blinking {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.blink {
		position: absolute;
		top: 40rpx;
		right: 20rpx;
		animation: blinking 1s infinite;
	}

	.bottom {
		position: fixed;
		bottom: 100rpx;
		right: 50rpx;
		background: linear-gradient(90deg, #6691fb 0%, #6ad3fe 100%);
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.btn-x {
		width: 2px;
		height: 40rpx;
		background: #fff;
		border-radius: 2rpx;
		position: absolute;
		top: 40rpx;
		left: 59rpx;
	}

	.btn-y {
		width: 40rpx;
		height: 2px;
		background: #fff;
		border-radius: 2rpx;
		position: absolute;
		top: 59rpx;
		left: 40rpx;
	}
	.bottom-box {
		background: rgba(255, 255, 255, 0.3);
		width: 100rpx;
		height: 100rpx;
		border-radius: 10px;
		margin: 25rpx;
		position: relative;
		font-size: 60rpx;
		color: #fff;
		font-weight: 800;
		text-align: center;
		line-height: 100rpx;
		background: #fff;
		overflow: hidden;
		float: left;
	
		img {
			width: 100%;
			height: 100%;
			border-radius: 10px;
			/* background: #fff; */
			// margin-top: -16rpx;
			animation: jump 1.5s infinite;
		}
	
		@keyframes jump {
			0% {
				margin-top: 0;
			}
	
			50% {
				margin-top: -15rpx;
			}
	
			100% {
				margin-top: 0;
			}
		}
	}
	.banner {
		height: 150rpx;
		display: flex;
		margin-top: 20rpx;
	}
	
	.banner-left,
	.banner-right {
		width: 49%;
		margin-left: 1%;
		margin-right: 2%;
		background: linear-gradient(126.07deg, rgba(100, 132, 250, 1) 0%, rgba(102, 232, 255, 1) 100%);
		border-radius: 10px;
	}
	
	.banner-text {
		margin-top: 20rpx;
		line-height: 60rpx;
		font-size: 36rpx;
		color: #fff;
	}
</style>