<template>
	<view class="ex-page">
		<view class="main-view overscroll">
			<view class="space-view ex-info">
				<form>
					<view class="module-com input-line-wrap">
						<TuiListCell class="line-cell" :hover="false" :arrow="false">
							<view class="tui-title ">门店</view>
							{{ shopInfo.shopName }}
						</TuiListCell>
						<TuiListCell class="line-cell" :hover="false" :arrow="false">
							<view class="tui-title ">备注</view>
							<input
								v-model="remark"
								placeholder-class="phcolor"
								class="tui-input"
								placeholder="请填写"
								maxlength="50"
								type="text"
							/>
						</TuiListCell>
					</view>
				</form>
			</view>
			<view class="space-view ex-table">
				<block v-if="!$util.isEmpty(selectList)">
					<!-- <Tabel
						:dataList="selectList"
						:columns="columns"
						:parentData="{
							getSelectItemProfitPrice: getSelectItemProfitPrice
						}"
					>
						<template v-slot="{ row, column }">
							<view v-if="column.custom == 'icon'" class="list-icon">
								<image class="icon-image" :src="row.cover" alt="商品图" />
								<view class="icon-info">
									<view class="info-name">
										{{ row.itemName }}
									</view>
									<view class="info-type">
										B级
									</view>
								</view>
							</view>
							<view v-else-if="column.custom == 'stock'">
								<text v-if="row.bigNum > 0">{{ `${row.bigNum}/` }}</text>
								<text>{{ row.smallNum }}</text>
							</view>
							<view v-else-if="column.custom == 'inventory'">
								<text v-if="row.bigCount > 0">{{ `${row.bigCount}/` }}</text>
								<text>{{ row.smallCount }}</text>
							</view>

							<view v-else-if="column.custom == 'profit'">
								<text>{{ getSelectItemProfitPrice }}</text>
							</view>
						</template>
					</Tabel> -->

					<view class="table-view">
						<view
							class="table-header"
							:style="{ backgroundColor: headerBackgroundColor }"
						>
							<view
								class="table-th"
								v-for="(item, index) in columns"
								:key="index"
								:style="{
									flex: item.width ? `0 0 ${item.width}rpx` : '1',
									textAlign: item.align || 'left',
									fontSzie: `${headerFontSize}rpx`,
									margin: `0 ${gutter}rpx`
								}"
							>
								<!-- <slot :name="item.dataIndex" > -->
								{{ item.name || "" }}
								<!-- </slot> -->
							</view>
						</view>
						<view class="table-tr" v-for="(item, index) in selectList" :key="index">
							<view
								class="table-td"
								v-for="(column, columnIndex) in columns"
								:key="columnIndex"
								:style="{
									flex: column.width ? `0 0 ${column.width}rpx` : '1',
									textAlign: column.align || 'left',
									fontSzie: `${fontSize}rpx`,
									margin: `0 ${gutter}rpx`
								}"
							>
								<!-- {{ item[column.dataIndex] || "" }} -->

								<view v-if="column.custom == 'icon'" class="list-icon">
									<image class="icon-image" :src="item.cover" alt="商品图" />
									<view class="icon-info">
										<view class="info-name">
											{{ item.itemName }}
										</view>
										<view class="info-type"> {{ item.rank || "" }}级 </view>
									</view>
								</view>
								<view v-else-if="column.custom == 'stock'">
									<text >{{ `${item.bigNum}/` }}</text>
									<text>{{ item.smallNum }}</text>
								</view>
								<view v-else-if="column.custom == 'inventory'">
									<text >{{`${item.bigCount}/`}}</text>
									<text >{{ `${item.smallCount}` }}</text>
								</view>

								<view v-else-if="column.custom == 'profit'">
									<text>{{ getSelectItemProfitPrice(item) }}</text>
								</view>
								<text v-else :class="[column.color || '']">
									{{ (column.dataIndex && item[column.dataIndex]) || "" }}
								</text>
							</view>
						</view>
					</view>
				</block>
				<template v-if="selectList.length == 0">
					<view class="empty-view">
						<button class="admin-button-com blue big" @click="gotoSelectPage">
							开始盘点
						</button>
					</view>
				</template>
			</view>
		</view>
		<view class="bar-view" v-if="selectList.length>0">
			<view class="btn-view">
<!--				<button :class="['admin-button-com', 'middle', 'default']" @click="gotoSelectPage">继续盘点</button>-->
				<button :class="['admin-button-com', 'middle']" @click="gotoSelectPage">继续盘点</button>
				<button :class="['admin-button-com','middle',{ disabled: allCount == 0 }]" :disabled="allCount == 0" @click="saveToDraft">
					保存到草稿
				</button>
				<button v-if="!orderSn" :class="['admin-button-com', 'middle', { disabled: allCount == 0 }]" :disabled="allCount == 0" @click="confirmPop(1)">
					确认
				</button>
				<button v-if="orderSn" :class="['admin-button-com', 'middle', { disabled: allCount == 0 }]" :disabled="allCount == 0" @click="confirmPop(2)">
					确认
				</button>
			</view>
		</view>
	</view>
</template>
<script>
import TuiListCell from "@/components/plugin/list-cell";
import productMins from "@/mixins/product";
import { mapActions, mapGetters } from "vuex";
import {
	updateCheckOrderApi,
	updateCheckOrderToDraftApi,
	savaCheckOrderDraftApi,
	getCheckOrderDetailApi,
	checkOrderApi
} from "@/api/inventory/index";
import {currentShop} from "@/api/shop/index";
export default {
	components: { TuiListCell },
	mixins: [productMins],
	data() {
		return {
			orderSn: null,
			infoData: null,
			autoLoad: false,
			shopInfo:null,
			remark: "",
			pageType: "inventory",
			columns: [
				{
					name: "名称",
					custom: "icon"
				},
				{
					name: "库存",
					custom: "stock",
					// color: "success",
					width: 120,
					align: "center"
				},
				{
					name: "盘点数",
					custom: "inventory",
					color: "warn",
					width: 120,
					align: "center"
				},
				{
					name: "盈亏数",
					color: "success",
					custom: "profit",
					width: 120,
					align: "center",
					render: (h, { row, index }) => {
						return h("text", {}, () => {
							return this.getSelectItemProfitPrice(row);
						});
					}
				}
			]
		};
	},
	onLoad(option) {
		const { orderSn } = option;
		if (orderSn) {
			this.orderSn = orderSn;
			this.initInfo();
		}
	this.getInfo();
		if (!this.getMerchantInfo) {
			this.initMerchantInfo();
		}
	},
	computed: {
		...mapGetters(["getMerchantInfo"])
	},
	methods: {
		...mapActions(["initMerchantInfo"]),
		async initInfo() {
			try {
				const { data } = await getCheckOrderDetailApi(this.orderSn);
				this.infoData = data;
				const { remark, itemInfo } = data;
				this.remark = remark;
				this.setSelectInfoByType({
					type: this.pageType,
					info: itemInfo.map(ele => {
						return {
							...ele,
							bigNum: Number(ele.bigNumStock),
							smallNum: Number(ele.smallNumStock),
							bigCount: Number(ele.bigNum),
							smallCount: Number(ele.smallNum)
						};
					})
				});
			} catch (error) {}
		},
		gotoSelectPage() {
			uni.navigateTo({
				url: "/pagesStorehouse/inventory/select",
				success: result => {},
				fail: () => {},
				complete: () => {}
			});
		},
		getInfo(){
			return currentShop().then(res => {
				this.shopInfo = res.data
					console.log('getInfo',res)
				})
				.catch(err => {});
		},
		/**
		 * 获取当前选中商品总价
		 */
		getSelectItemProfitPrice(item) {
			let price = 0;
			const {
				bigCount,
				smallCount,
				bigNum,
				smallNum,
				bigPrice,
				smallPrice
			} = item;
			let bigNumProfitLoss = Number(bigCount) - Number(bigNum);
			let smallNumProfitLoss = Number(smallCount) - Number(smallNum);
			// let sum = Number(bigCount) * Number(bigPrice) + Number(smallCount) * Number(smallPrice);
			// price = Math.round(sum * 100) / 100;
			// let stockSum = Number(bigNum) * Number(bigPrice) + Number(smallNum) * Number(smallPrice);
			// let stockPrice = Math.round(stockSum * 100) / 100;
			let diff = `${bigNumProfitLoss.toFixed(2)}/${smallNumProfitLoss.toFixed(2)}`;
			// let diff = `${bigNumProfitLoss}/${smallNumProfitLoss}`;
			return diff;
			// return Math.round(diff * 100) / 100;
		},
		async saveToDraft() {
			try {
				let api = savaCheckOrderDraftApi;
				if (this.orderSn) {
					api = updateCheckOrderToDraftApi;
				}
				let params = {
					remark: this.remark
				};
				if (this.orderSn) {
					params.orderSn = this.orderSn;
				}
				let formatList = this.selectList.map(ele => {
					return {
						bigNum: ele.bigCount,
						smallNum: ele.smallCount,
						productId: ele.id,
						classId:ele.classId,itemId:ele.itemId
					};
				});
				params.itemInfo = JSON.stringify(formatList);
				const {
					data: { orderSn }
				} = await api(params);
				this.orderSn = orderSn;
				this.$msg("保存成功");
			} catch (error) {}
		},
		confirmPop(type) {
			let self = this;
			uni.showModal({
				title: '提示',
				content: '确认盘点?',
				success: function (res) {
					if (res.confirm) {
						self.saveCheckOrder(type);
					}
				}
			});
		},
		async saveCheckOrder(type) {
			try {
				console.log(type)
				let params = {
					remark: this.remark
				};
				if (this.orderSn) {
					params.orderSn = this.orderSn;
				}
				let formatList = this.selectList.map(ele => {
					return {
						bigNum: ele.bigCount,
						smallNum: ele.smallCount,
						productId: ele.id
					};
				});
				params.itemInfo = JSON.stringify(formatList);
				//type 1直接确定 2保存草稿后在确定
				if(type==1){
					await checkOrderApi(params)
				}else{
					await updateCheckOrderApi(params)
				}
				this.$msg("盘点成功");
				this.resetSelectInfoByType(this.pageType);
				uni.navigateBack({
					delta: 1
				});
			} catch (error) {}
		},
	}
};
</script>
<style lang="scss" scoped>
.ex-page {
	height: 100%;
	display: flex;
	flex-direction: column;
	.main-view {
		flex: 1;
		background-color: #f9fbfc;
		.space-view {
			margin-top: 15upx;
			background-color: #fff;
		}
		.ex-info {
			// padding: 0 30upx;
			.module-com {
				background-color: #fff;
				margin-bottom: 20px;

				border-radius: 10px;
				overflow: hidden;
				.member-wrap {
					.member-det {
						font-size: 24px;
						margin-left: 20px;
					}
				}
				.remark-wrap {
					align-items: flex-start;
					.remark {
						height: 240px;
					}
				}
				// .tui-placeholder,
				// .tui-input {
				// 	padding-right: 30px;
				// 	width: 100%;
				// 	text-align: right;
				// }
			}
		}
		.ex-table {
			/deep/.list-icon {
				display: flex;
				.icon-image {
					width: 80upx;
					height: 80upx;
					margin-right: 20upx;
				}
				.icon-info {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					.info-name {
						font-size: 28upx;
						font-weight: bold;
						color: #333333;
					}
					.info-type {
						font-size: 24upx;
						color: #666666;
					}
				}
			}
		}
		.empty-view {
			display: flex;
			justify-content: center;
			margin: 120upx auto;
		}
	}
	.bar-view {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0 30upx;
		width: 100%;
		height: 100upx;

		box-shadow: 0px -1px 6px 0px rgba(4, 0, 0, 0.06);

		.btn-view {
			display: flex;
			.admin-button-com {
				margin: 0 10upx;
			}
		}
	}
}
.table-view {
	.table-header {
		display: flex;
		padding: 20upx 30upx;

		box-shadow: 0px 1px 0px 0px #eeeeee;
		color: #999999;
		.table-th {
			white-space: nowrap;
		}
	}
	.table-tr {
		display: flex;
		align-items: center;
		padding: 20upx 30upx;
		border-bottom: 1px solid #eeeeee;
		color: #999999;
		.table-td {
			.warn {
				color: #ffaf1d;
			}
			.fail {
				color: #f51608;
			}
			.success {
				color: #09bb07;
			}
			.info {
				color: #333;
			}
		}
	}
}
</style>
