<template>
	<view class="ex-page">
		<view class="main-view overscroll">
			<view class="space-view ex-info">
				<view class="info-cell">
					<view class="cell-label"> 仓库</view>
					<view class="cell-value"> {{ dataInfo.shopName || "" }}</view>
				</view>

				<view class="info-cell">
					<view class="cell-label"> 制单人</view>
					<view class="cell-value"> {{ dataInfo.adminName || "" }}</view>
				</view>
				<view class="info-cell">
					<view class="cell-label"> 盘点日期</view>
					<view class="cell-value"> {{ dataInfo.updateTime || "" }}</view>
				</view>
				<view class="info-cell">
					<view class="cell-label"> 盘点状态</view>
					<view class="cell-value">
						{{ getItemStatusName(dataInfo.status) || "" }}</view
					>
				</view>
				<view class="info-cell">
					<view class="cell-label"> 备注</view>
					<view class="cell-value">
						{{ dataInfo.remark || "" }}
					</view>
				</view>
			</view>
			<view class="space-view ex-table">
				<t-table>
					<t-tr header>
						<t-th v-for="(item, index) in columns" :key="index" :align="item.align">
							{{ item.name }}
						</t-th>
					</t-tr>
					<t-tr v-for="(item, index) in dataInfo.itemInfo || []" :key="index">
						<t-td
							v-for="(column, colIndex) in columns"
							:key="colIndex"
							:align="column.align"
							:color="column.color"
						>
							<view v-if="column.custom == 'icon'" class="list-icon">
								<image class="icon-image" :src="item.itemCover" 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.bigNumStock}/` }}</text>
								<text>{{ item.smallNumStock }}</text>
							</view>
							<view v-else-if="column.custom == 'inventory'">
								<text>{{ `${item.bigNum}/` }}</text>
								<text>{{ item.smallNum }}</text>
							</view>
							<view v-else-if="column.custom == 'profit'">
								<text>{{ `${item.bigNumProfitLoss}/` }}</text>
								<text>{{ item.smallNumProfitLoss }}</text>
							</view>
							<view v-else>{{ item[column.dataIndex] || "" }}</view>
						</t-td>
					</t-tr>
				</t-table>
			</view>
		</view>
		<view class="bar-view">
			<view class="info-view">
				盈亏合计：
				<text class="price-item"> {{ sumCount }}扎 </text>
			</view>
		</view>
	</view>
</template>
<script>
import { getCheckOrderDetailApi } from "@/api/inventory/index";
import { INVENTORY_STATUS } from "@/utils/declare";

export default {
	components: {},
	data() {
		return {
			INVENTORY_STATUS,
			orderSn: null,
			dataInfo: {},
			columns: [
				{
					name: "名称",
					custom: "icon"
				},
				{
					name: "库存",
					custom: "stock",
					// color: "success",
					width: 120,
					align: "center"
				},
				{
					name: "盘点数",
					custom: "inventory",
					color: "warn",
					width: 120,
					align: "center"
				},
				{
					name: "盈亏数",
					custom: "profit",
					color: "success",
					width: 120,
					align: "center"
				}
			],
			dataList: [
				{
					count: "1",
					inventoryCount: "2",
					profitCount: "3"
				},
				{
					count: "1",
					inventoryCount: "2",
					profitCount: "3"
				},
				{
					count: "1",
					inventoryCount: "2",
					profitCount: "3"
				},
				{
					count: "1",
					inventoryCount: "2",
					profitCount: "3"
				},
				{
					count: "1",
					inventoryCount: "2",
					profitCount: "3"
				},
				{
					count: "1",
					inventoryCount: "2",
					profitCount: "3"
				}
			]
		};
	},

	onLoad(options) {
		const { orderSn } = options;
		this.orderSn = orderSn;
		this.initData();
	},
	computed: {
		sumCount() {
			let big = 0;
			let small = 0;
			if (this.dataInfo.itemInfo) {
				for (const item of this.dataInfo.itemInfo) {
					big += Number(item.bigNumProfitLoss);
					small += Number(item.smallNumProfitLoss);
				}
			}
			return `${big}/${small}`;
		}
	},
	methods: {
		async initData() {
			try {
				const { data } = await getCheckOrderDetailApi(this.orderSn);
				this.dataInfo = data;
			} catch (error) {}
		},
		getItemStatusName(status) {
			let name = "";
			switch (status) {
				case INVENTORY_STATUS.DONE:
					name = "已盘点";
					break;
				case INVENTORY_STATUS.DRAFT:
					name = "草稿";
					break;

				default:
					break;
			}
			return name;
		}
	}
};
</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: 30upx;
			.info-cell {
				display: flex;
				align-items: center;
				font-size: 28upx;
				&:not(:first-child) {
					margin-top: 20upx;
				}
				.cell-label {
					width: 110upx;
					color: #666666;
				}
				.cell-value {
					margin-left: 40upx;
					color: #333;
					&.warning {
						color: #ffaf1d;
					}
				}
			}
		}
		.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;
					}
				}
			}
		}
	}
	.bar-view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30upx;
		width: 100%;
		height: 100upx;

		box-shadow: 0px -1px 6px 0px rgba(4, 0, 0, 0.06);
		.info-view {
			font-size: 26upx;
			.price-item {
				margin: 0 10upx;
			}
			.red {
				color: #f51608;
			}
		}
		.btn-view {
			display: flex;
			.admin-button-com {
				margin: 0 10upx;
			}
		}
	}
}
</style>
