<template>
	<view class="pages">
		<uni-card title="36524快消品动产质押项目" :isFull="true" extra="点击下载Excel文件" :thumbnail="avatar"
			style="padding-top: 10px;">
			<template v-slot:title>
				<uni-section :title="logInfo.title" title-font-size="25" type="line">
					<template v-slot:decoration>
						<uni-icons type="location-filled" size="18" color="green"></uni-icons>
					</template>
					<template v-slot:right> <uni-tag :inverted="true" text="下载Excel文件" type="primary"
							@click="onClick" /> </template>
				</uni-section>
			</template>

			<view style="display: flex;flex-direction: row;">

				<view style="flex: 1;">
					<text>上报日期：</text>
					<text>{{logInfo.reportTime}}</text>
				</view>

				<view style="flex: 1;">
					<text>货值总计：</text>
					<text>{{logInfo.countAmount}}</text>
				</view>

			</view>

			<!-- <uni-list>
				<uni-list-item title="上报日期:" :rightText="logInfo.reportTime"></uni-list-item>
				<uni-list-item title="货值总计:" :right-text="logInfo.countAmount"></uni-list-item>
			</uni-list> -->

			<view v-for="(item, index) in tableData1" style="margin-top: 10px;">
				<view>
					<uni-title type="h3" :title="item.storeType" color="#444"></uni-title>
					<uni-row>
						<uni-col :span="8">
							<view class="table-header tleft"><text>仓库数量</text></view>
						</uni-col>
						<uni-col :span="8">
							<view class="table-header"><text>品种数量</text></view>
						</uni-col>
						<uni-col :span="8">
							<view class="table-header"><text>品种货值</text></view>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="8">
							<view class="table-body tleft"><text>{{item.storeNumber}}</text></view>
						</uni-col>
						<uni-col :span="8">
							<view class="table-body"><text>{{item.productCountNumber}}</text></view>
						</uni-col>
						<uni-col :span="8">
							<view class="table-body"><text>{{item.productAmount}}</text></view>
						</uni-col>
					</uni-row>

				</view>
			</view>

		</uni-card>

		<uni-collapse style="margin-top: 10px;">

			<uni-collapse-item title="仓库库存明细表" style="font-size: 18px;"  :open="true">

				<view style="display: flex;flex-direction: row;margin-left: 16px;">

					<view style="flex: 1;">
						<text>商品数量合计：</text>
						<text>{{logInfo2.countProductNumber}}</text>
					</view>

					<view style="flex: 1;">
						<text>商品货值合计：</text>
						<text>{{logInfo2.countAmount}}</text>
					</view>

				</view>
				<view class="ttbale"style="margin-top: 10px;" >
					<uni-row>
						<uni-col :span="8">
							<view class="table-header tleft"><text>序号</text></view>
						</uni-col>
						<uni-col :span="16">
							<view class="table-header"><text>仓库名称</text></view>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="8">
							<view class="table-header tleft"><text>商品数量</text></view>
						</uni-col>
						<uni-col :span="8">
							<view class="table-header"><text>商品品种数量</text></view>
						</uni-col>
						<uni-col :span="8">
							<view class="table-header"><text>货值</text></view>
						</uni-col>
					</uni-row>
				</view>

				<view v-for="(item, index) in tableData2" >

					<view class="ttbale">
						<uni-row>
							<uni-col :span="8">
								<view class="table-body tleft"><text>{{index+1}}</text></view>
							</uni-col>
							<uni-col :span="16">
								<view class="table-body"><text>{{item.storeCodeName}}</text></view>
							</uni-col>
						</uni-row>
						<uni-row>
							<uni-col :span="8">
								<view class="table-body tleft"><text>{{ item.productCountNumber}}</text></view>
							</uni-col>
							<uni-col :span="8">
								<view class="table-body"><text>{{item.typeNumber}}</text></view>
							</uni-col>
							<uni-col :span="8">
								<view class="table-body"><text>{{item.productAmount}}</text></view>
							</uni-col>
						</uni-row>
					</view>
				</view>


			</uni-collapse-item>

		</uni-collapse>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				date: "2023-06-25",
				tableData1: [],
				logInfo: {
					title: "",
					reportTime: "",
					countAmount: "",
				},
				tableData2: [],
				logInfo2: {
					countProductNumber: "",
					countAmount: "",
				},
				tableData3: [],
				logInfo3: {
					countProductNumber: "",
					countAmount: "",
				},


			}
		},
		onLoad(option) {

			// this.date = option.orderDate

			// console.log('1111', this.queryParams)
			this.getData()



		},
		methods: {
			onClick(e) {
				uni.showToast({
					title: '点击下载文件',
					duration: 2000
				});
				console.log(e)
			},
			actionsClick(text) {
				uni.showToast({
					title: text,
					icon: 'none'
				})
			},
			getData() {
				console.log('getData', this.date)
				this.$api.getReportInventoryDayGather(this.date).then((resp) => {
					console.log('1111>>>>>>', resp)
					this.fileUrl = resp.downloadUrl
					this.tableData1 = resp.list
					this.logInfo = {
						title: resp.title,
						reportTime: resp.orderDate,
						countAmount: resp.countAmount,
					}

				}).catch(e => {
					console.log('eeeee', e)
				})

				this.$api.getReportInventoryDayStore(this.date).then((resp) => {
					console.log('2222>>>>>>', resp)
					this.tableData2 = resp.list
					this.logInfo2 = {
						countProductNumber: resp.countProductNumber,
						countAmount: resp.countAmount,
					}
				}).catch(e => {
					console.log('eeeee', e)
				})

				// 	this.$api.getReportInventoryDayToStore(this.date).then((resp) => {
				// 		console.log('3333>>>>>>', resp)
				// 		this.tableData3 = resp.list
				// 		this.logInfo3 = {
				// 			countProductNumber: resp.countProductNumber,
				// 			countAmount: resp.countAmount,
				// 		}
				// 	}).catch(e => {
				// 		console.log('eeeee', e)
				// 	})
			},

		}
	}
</script>

<style lang="scss">
	.pages {}

	$uni-success: #18bc37 !default;

	.table-header {
		text-align: center;
		border: 0.5px solid #ccc;
		font-weight: bold;
		font-size: 15px;
		border-left: 0.0px;
		padding: 5px;
	}

	.table-body {
		text-align: center;
		border: 0.5px solid #ccc;
		font-size: 13px;
		padding: 5px;
		border-left: 0.0px;
		border-top: 0.0px;
	}

	.tleft {
		border-left: 0.5px solid #ccc;
	}

	.ttbale {
		margin: 0px 10px 0px 10px;
		// border-bottom: 1px solid #ccc;
	}

	.uni-wrap {
		flex-direction: column;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		flex: 1;
	}

	.mb-10 {
		margin-bottom: 10px;
	}

	.decoration {
		width: 8px;
		height: 8px;
		margin-right: 4px;
		border-radius: 50%;
		background-color: $uni-success;
	}
</style>