<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"> {{ outData.shopName || "" }}</view>
				</view>
				<view class="info-cell">
					<view class="cell-label"> 日期</view>
					<view class="cell-value"> {{ outData.updateTime || "" }}</view>
				</view>
				<view class="info-cell">
					<view class="cell-label"> 制单人</view>
					<view class="cell-value"> {{ outData.adminName || "" }}</view>
				</view>
				<view class="info-cell">
					<view class="cell-label"> 状态</view>
					<view
						:class="[
							'cell-value',
							{ warning: outData.status == OUT_STATUS.CONFIRM },
							{ success: outData.status == OUT_STATUS.DONE }
						]"
					>
						{{ getItemStatusName(outData.status) || "" }}</view
					>
				</view>
				<view class="info-cell">
					<view class="cell-label"> 备注</view>
					<view class="cell-value">
						{{ outData.remark || "" }}
					</view>
				</view>
			</view>
			<view class="space-view ex-table">
				<block v-if="!$util.isEmpty(outData.itemInfo)">
					<t-table :headerBackgroundColor="'#F0F2F6'">
						<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 outData.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 == 'put'">
									<text > {{ item.bigNum }}/ </text>
									<text>
										{{ item.smallNum }}
									</text>
								</view>
								<view v-else>
									{{ item[column.dataIndex] || "" }}
								</view>
							</t-td>
						</t-tr>
					</t-table>
				</block>
				<block v-else>
					<AppWrapperEmpty
						title="暂无数据"
						:is-empty="$util.isEmpty(outData.itemInfo)"
					/>
				</block>
			</view>
		</view>
		<view class="bar-view">
			<view class="info-view"> 出库数量：{{ sumCount }} </view>
			<view class="btn-view" v-if="outData.status">
				<button
					v-if="outData.status != OUT_STATUS.CANCEL"
					class="admin-button-com middle"
					@click="cancelEvent"
				>
					取消
				</button>
				<button
					v-if="outData.status == OUT_STATUS.CONFIRM"
					class="admin-button-com middle"
					@click="confirmEventPop"
				>
					确认
				</button>
			</view>
		</view>
    <kd-entrance></kd-entrance>
	</view>
</template>
<script>
import { OUT_STATUS } from "@/utils/declare";
import {
	getStockOutDetailApi,
	confirmStockOutOrderApi,
	cancelStockOutOrderApi
} from "@/api/storehouse/stock";
import AppWrapperEmpty from "@/components/app-wrapper-empty";

export default {
	components: { AppWrapperEmpty },
	data() {
		return {
			OUT_STATUS,
			orderSn: "",
			outData: {},
			columns: [
				{
					name: "花材名称",
					custom: "icon"
				},
				{
					name: "库存",
					custom: "stock",
					// color: "success",
					width: 120,
					align: "center"
				},
				{
					name: "出库数量",
					custom: "put",
					// color: "warn",
					width: 120,
					align: "center"
				}
			]
		};
	},
	onLoad(options) {
		const { orderSn } = options;
		if (orderSn) {
			this.orderSn = orderSn;
			this.initData();
		}
	},
	computed: {
		sumCount() {
			let big = 0;
			let small = 0;
			if (this.outData.itemInfo) {
				for (const item of this.outData.itemInfo) {
					big += item.bigNum;
					small += item.smallNum;
				}
			}
			return `${big}/${small}`;
		}
	},
	methods: {
		async initData() {
			try {
				const { data } = await getStockOutDetailApi(this.orderSn);
				this.outData = data;
			} catch (error) {}
		},
		getItemStatusName(status) {
			let name = "";
			switch (status) {
				case OUT_STATUS.CONFIRM:
					name = "待出库";
					break;
				case OUT_STATUS.DONE:
					name = "已出库";
					break;

				default:
					break;
			}
			return name;
		},
		async cancelEvent() {
			try {
				await cancelStockOutOrderApi(this.orderSn);
				await this.initData();
				wx.showToast({
					title: "取消成功"
				});
			} catch (error) {}
		},
		confirmEventPop(){
			let self = this;
			uni.showModal({
				title: '提示',
				content: '确定出库?',
				success: function (res) {
					if (res.confirm) {
						self.confirmEvent();
					}
				}
			});
		},
		async confirmEvent() {
			try {
				await confirmStockOutOrderApi(this.orderSn);
				await this.initData();
				wx.showToast({
					title: "成功出库"
				});
			} 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: 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;
					}
					&.success {
						color: #27c325;
					}
				}
			}
		}
		.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;
		}
		.btn-view {
			display: flex;
			.admin-button-com {
				margin: 0 10upx;
			}
		}
	}
}
</style>
