<template>
	<view class="billing_box_bg">
		<view class="input-wrap">
			<app-search-module
				v-model="py"
				placeholder="请输入关键词，支持拼音首字母搜索"
				@search="searchFn"
			/>
		</view>

		<view class="scroll-middle_bx">
			<scroll-view
				scroll-y
				scroll-with-animation
				class="tab-view"
				:scroll-top="scrollTop"
			>
				<div
					v-for="(item, index) in filterProductInfo"
					:key="index"
					class="tab-bar-item"
					:class="[classIndex == index ? 'active' : '']"
					:data-current="index"
					@tap.stop="swichClass"
				>
					<text>{{ item.className || "" }}</text>
					<text
						class="tag"
						v-if="
							getSelectClassById(item.classId).bigCount > 0 ||
								getSelectClassById(item.classId).smallCount > 0
						"
					>
						<text
							v-if="
								getSelectClassById(item.classId).bigCount > 0 ||
									getSelectClassById(item.classId).smallCount > 0
							"
						>
							{{ `${getSelectClassById(item.classId).bigCount}` }}
						</text>
						<text v-if="getSelectClassById(item.classId).smallCount > 0">
							/
						</text>
						<text v-if="getSelectClassById(item.classId).smallCount > 0">{{
							getSelectClassById(item.classId).smallCount
						}}</text>
					</text>
				</div>
			</scroll-view>
			<scroll-view scroll-y class="right-box" :scroll-into-view="scrollClassId">
				<!--内容部分 start -->
				<block v-if="!$util.isEmpty(filterProductInfo)">
					<view
						class="item_list_bx"
						v-for="(classItem, classIndex) in filterProductInfo"
						:key="classIndex"
						:id="`class_${classItem.classId}`"
					>
						<view class="item_list_title">
							{{ classItem.className }}
						</view>
						<template v-for="(productItem, productIndex) in classItem.child">
							<CommodityPurchase
								:type="pageType"
								:key="productIndex"
								:info="productItem"
								:bigCount=" getSelectItemById(productItem.id, classItem.classId).bigCount"
								:smallCount="getSelectItemById(productItem.id, classItem.classId).smallCount"
								:itemPrice="getSelectItemById(productItem.id, classItem.classId).itemPrice"
								@customNum="customNum"
								@add="addEvent"
								@addOneEvent="addCustomNumEvent"
								@del="delAllEvent"
							></CommodityPurchase>
						</template>
					</view>
				</block>
				<block v-else>
					<app-wrapper-empty
						title="暂无数据"
						:is-empty="$util.isEmpty(filterProductInfo)"
					/>
				</block>
				<!--内容部分 end -->
			</scroll-view>
		</view>
		<!-- :maskClosable="false" -->
		<modal-module
			:show="isModel"
			@cancel="modalCancel"
			@click="affirm"
			title="花之物语 红色系"
			color="#333"
			:size="32"
			padding="30rpx 30rpx"
		>
			<template slot="customContent">
				<view class="select-view">
					<view class="select-cmd_bx">
						<view class="num_bx">
							<view class="kc">
								价格
							</view>
<!--							<input-->
<!--								:value="customData.itemPrice"-->
<!--								@change="changePriceEvent"-->
<!--								type="number"-->
<!--								placeholder="请填写采购总价"-->
<!--							/>元-->
							<allSelectInput :isActive="isAloneAllActive" :isFocus="isAloneAllFocus" :value="customData.itemPrice" :placeholder="'请填写采购总价'"
																							@deleteInputVal="deleteAloneInputVal" @initAllInput="initAloneAllInput" @moveAllInput="moveAloneAllInput">
							</allSelectInput>元
						</view>
					</view>
					<view class="select-cmd_bx">
						<view class="num_bx">
							<view class="kc">
								数量
							</view>
							<allMoreSelectInput
								:isActive="isActive" :isFocus="isFocus" :value="customData.bigCount"
								:isActiveOne="isActiveOne" :isFocusOne="isFocusOne" :valueOne="customData.smallCount"
								@deleteInputVal="deleteInputVal" @initAllInput="initAllInput" @moveAllInput="moveAllInput"
								@deleteInputValOne="deleteInputValOne" @initAllInputOne="initAllInputOne" @moveAllInputOne="moveAllInputOne">
							</allMoreSelectInput>
							<!--<input v-model="customData.bigCount" type="number" focus />扎-->
							<!--<input v-model="customData.smallCount" type="number" style="margin-left:24upx"/>支-->
						</view>
					</view>
				</view>
			</template>
		</modal-module>
		<!-- <modal-module
			:show="showSubmitModel"
			@cancel="cancelEvent"
			@click="submitEvent"
			title="有花材库存不足，确认下一步？"
			color="#333"
			:size="32"
			padding="30rpx 30rpx"
		>
		</modal-module> -->
		<FooterCart
			:price="allPrice"
			:count="allCount"
			@confirm="confirmSelectEvent"
		></FooterCart>
	</view>
</template>

<script>
import AppSearchModule from "@/components/module/app-search";
import AppTabs from "@/components/plugin/tabs";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import CommodityPurchase from "./components/CommodityPurchase";
import ModalModule from "@/components/plugin/modal";
import FooterCart from "@/components/module/app-footer-cart";
import productMins from "@/mixins/product";

import allMoreSelectInput from "@/components/module/allMoreSelectInput";
import allMoreSelectInputMins from "@/mixins/allMoreSelectInput";

import allSelectInput from "@/components/module/allSelectInput";
import allSelectInputMins from "@/mixins/allSelectInput";
export default {
	name: "purchase", // 采购
	components: {
		AppTabs,
		AppSearchModule,
		AppWrapperEmpty,
		CommodityPurchase,
		ModalModule,
		FooterCart,allMoreSelectInput,allSelectInput
	},
	mixins: [productMins,allMoreSelectInputMins,allSelectInputMins],
	data() {
		return {
			pageType: "purchase",

			isAloneAllActive: false,
			isAloneAllFocus: false,

			isModel: false,
			showSubmitModel: false,
			customData: {
				bigCount: 0,
				smallCount: 0,
				itemPrice: 0
			}
		};
	},
	onLoad() {},
	methods: {
		// 离开全选input alone
		moveAloneAllInput(e){
			this.isAloneAllActive=false;
			this.isAloneAllFocus=false;
			if(e==''){return}
			this.customData.itemPrice = e;
		},
		//input点击删除按键
		deleteAloneInputVal(){
			this.isAloneAllActive=false;
			this.customData.itemPrice = '';
		},
		//自定义数量
		customNum(info) {
			this.isModel = true;
			this.customData = info;
			this.$nextTick(()=>{
				// this.initAllInput();
				this.initAloneAllInput();
			})
		},
		modalCancel() {
			this.isModel = false;
			this.customData = {};
		}, // 取消 确认
		affirm(val) {
			// this.moveAllInput();
			// this.moveAllInputOne();
			this.isFocus = false;
			this.isFocusOne = false;
			this.$nextTick(()=>{
				if(this.customData.bigCount==0 && this.customData.smallCount==0){
					this.delAllEvent(this.customData)}

				if (val.index === 0) {
					this.modalCancel();
				} else {

					// delAllEvent
					//超过库存时 设置为库存最大值
					this.updateItemEvent(this.customData);
					this.modalCancel();
				}
			})

		},
		cancelEvent() {},
		submitEvent(val) {
			if (val.index === 0) {
				this.cancelEvent();
			} else {
				console.log(444, this.selectList);
				uni.navigateTo({
					url: "/pagesPurchase/details"
				});
				this.cancelEvent();
			}
		},
		confirmSelectEvent() {
			if (this.selectList.length > 0) {
				uni.navigateTo({
					url: "/pagesPurchase/details"
				});
				this.cancelEvent();
			}
		},
		changePriceEvent(e) {
			const {
				detail: { value }
			} = e;
			const maxPrice = Number(value);
			this.customData.itemPrice = maxPrice;

			if (maxPrice > 0) {
				const { smallPrice, ratio } = this.customData;
				const ratioNum = Number(ratio);

				const num = Math.floor(maxPrice / Number(smallPrice));

				this.customData.bigCount = Math.floor(num / ratioNum);
				this.customData.smallCount = Math.floor(num % ratioNum);
			}
		},

		searchFn() {},
		scrollTop() {}
	}
};
</script>
<style>
	.change-input{
		width: 170rpx !important;
	}
</style>
<style lang="scss" scoped>

.billing_box_bg {
	height: 100%;
	display: flex;
	flex-direction: column;
	.input-wrap {
		padding: 22px 20px 22px 30px;
	}
	.scroll-middle_bx {
		flex: 1;
		width: 100%;
		height: 100%;
		display: flex;
		overflow: hidden;
	}
	.tab-view {
		height: 100%;
		width: 170upx;
		flex-shrink: 0;
		background-color: #f0f2f6;
		.tab-bar-item {
			position: relative;
			width: 170upx;
			height: 90upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26upx;
			color: #444;
			font-weight: 400;
			.tag {
				display: flex;
				padding: 0 20px;
				align-items: center;
				position: absolute;
				right: 0;
				top: 0;
				height: 32px;
				background: #ff2842;
				border-radius: 16px;
				color: #fff;
				font-size: 20px;
			}
      &:last-child{
        margin-bottom: 110upx;
      }
		}

		.active {
			position: relative;
			color: $mainColor;
			font-size: 26px;
			background: #fff;
		}

		.active::before {
			content: "";
			position: absolute;
			border-left: 8upx solid $mainColor;
			height: 100%;
			left: 0;
		}
	}
	.right-box {
		height: 100%;
		flex: 1;
		box-sizing: border-box;
	}
	.item_list_bx {
		padding: 40px 16px;
    &:last-child{
      margin-bottom: 70upx;
    }
	}
	.item_list_title {
		margin-bottom: 20px;
		font-size: 24px;
		font-weight: 600;
		color: #666666;
	}
	.select-view {
		margin-bottom: 30upx;
	}
	.select-cmd_bx {
		margin-top: 30px;
		& .num_bx {
			display: flex;
			align-items: center;
			.kc {
				width: 80upx;
			}
			& > input {
				flex: 1;
				height: 80px;
				border: 1px solid #dddddd;
				border-radius: 4px;
				text-align: center;
				margin-right: 24px;
				font-size: 40rpx;
			}
		}
	}
}
</style>
