<template>
	<!-- <div style="padding: 10px;background-color:#F2F3F5"> -->
	<div style="background-color:#F2F3F5">
		<div class="history">
			<div style="background-color:#Fff;padding:20px 20px 0 20px">

				<!-- 顶部搜索 -->
				<div class="toolbar">
					<el-form ref="formInline" :inline="true" :model="formInline">
						<el-form-item label="日期">
							<el-date-picker v-model="formInline.dates" type="daterange" style="width:220px"
								range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
								value-format="yyyy-MM-dd" />
						</el-form-item>

						<el-form-item label-width="0">
							<el-button @click="search" style="background-color: #3F9B6A;color: #fff;">查询</el-button>
							<el-button @click="clear" class="buttonHover"
								style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<!-- 表格 -->
			<div class="content_table" style="padding: 15px 0px 10px 0px;background-color:#F2F3F5">
				<div style="background-color: #fff;padding: 10px;margin-bottom: 20px;">
					<div class="table">
						<el-table :data="tableData"
							:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
							<el-table-column prop="id" label="序号" min-width="50">
								<template slot-scope="scope">
									{{scope.$index+1}}
								</template>
							</el-table-column>
							<el-table-column label="商品图片" prop="productImage" min-width="100">
								<template slot-scope="scope">
									<img :src="$baseURL+scope.row.productImage" style="height: 80px;width:80px;" />
								</template>

							</el-table-column>
							<el-table-column prop="productName" label="商品名称" min-width="120" show-overflow-tooltip>

							</el-table-column>
							<!-- <el-table-column label="货号/属性" prop="specification" min-width="80" show-overflow-tooltip>
								<template slot-scope="scope">
									<div v-for="item in scope.row.specification">{{item.skuName}}：{{item.skuValue}}
									</div>
								</template>
							</el-table-column> -->

							<el-table-column prop="orderNo" label="订单号" min-width="120" show-overflow-tooltip>
								<template slot-scope="scope">
									<div>{{scope.row.orderNo!=''?scope.row.orderNo:'N/A'}}</div>
								</template>
							</el-table-column>
							<el-table-column label="库存" min-width="80" >
								<template slot-scope="scope">
									<div>数量:{{scope.row.inventory.variationNum}}</div>
									<div>剩余:{{scope.row.inventory.nowNum}}</div>
								</template>
							</el-table-column>
							<el-table-column prop="inventoryType" label="库存类型" min-width="80" >
								<template slot-scope="scope">
									商品库存
								</template>
									</el-table-column>
								<el-table-column prop="operateType" label="操作类型" min-width="80" >
									<template slot-scope="scope">
										{{scope.row.operateType==1?'增加商品':scope.row.operateType==2?'购买商品':scope.row.operateType==3?'退货':scope.row.operateType==4?'订单取消':''}}
									</template>
								</el-table-column>
								<el-table-column prop="operatingInformation" label="操作信息" min-width="120" >
									<template slot-scope="scope">
									<div>{{scope.row.operatingInformation.createUser}}</div>
									<div>{{scope.row.operatingInformation.createTime}}</div>
									</template>
								</el-table-column>
						</el-table>
					</div>
					<!-- 分页 -->
					<div class="fenye">
						<div style="line-height:200%">共{{total}}条</div>
						<el-pagination class="pagination" :hide-on-single-page="flag" background
							:current-page="formInline.pageNumber+1" layout="prev, pager,next" :total="total "
							@current-change="handleCurrentChange" />
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		productInventory,
	} from '@/api/psRanking'
	export default {
		data() {
			return {
				total: 0,
				pageSize: 10,
				currentPage: 1,

				formInline: {
					pageNumber: 0,
					pageSize: 10,
					productName: "",
					operateType: [1, 3, 4],
					startTime: "",
					endTime: ""
				},
				tableData: [],
				flag: false,
			}
		},
		mounted() {
			this.getAll()
		},
		methods: {
			async getAll() {
				const Orderlist = await productInventory(this.formInline)
				this.tableData = Orderlist.data.content
				this.total = Orderlist.data.totalElements

			},
			async search() {
				this.formInline.pageNumber = 0
				if (this.formInline.dates.length != 0) {
					this.formInline.startTime = this.formInline.dates[0]+' 00:00:00'
					this.formInline.endTime = this.formInline.dates[1]+' 23:59:59'
				}
				const Orderlist = await productInventory(this.formInline)
				this.tableData = Orderlist.data.content
				this.total = Orderlist.data.totalElements
			},
			clear() {
				this.formInline = {
					pageNumber: 0,
					pageSize: 10,
					productName: "",
					operateType: [1, 3, 4],
					startTime: "",
					endTime: ""
				}
				this.getAll()
			},
			handleCurrentChange(val) {
				this.formInline.pageNumber = val - 1
				this.getAll()
			},
			handleSizeChange(val) {
				this.formInline.pageSize = val
			},
		},
	}
</script>

<style lang='scss' scoped>
	.history {
		padding: 0px;
		padding-left: 10px;
		min-height: calc(100vh - 50px - 20px);
	}

	::v-deep .el-form-item__label {
		font-weight: normal;
		font-size: 14px;

	}

	::v-deep .btn .el-button:focus,
	.el-button:hover {
		border: 1px solid #3F9B6A;
	}

	::v-deep .el-button {
		border: 1px solid #3F9B6A;
	}

	::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #3F9B6A;
	}
</style>
<style scoped>
	.history /deep/ .el-table .cell.el-tooltip img {
		max-height: 100px;
	}

	.fenye {
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		position: relative;
	}

	.pagination {
		text-align: right;
		line-height: 20px;
	}

	.toolbar {
		.el-form-item {
			margin-bottom: 0px;
		}
	}
</style>
<style>
	.el-tooltip__popper {
		max-width: 50%;
	}
</style>