<template>
	<div>
		<el-dialog title="记录" :close-on-click-modal="false" draggable width="1300px" height="500px" @close="close"
			append-to-body v-model="visible">
			<el-tabs v-model="activeNameTop" type="border-card" @tab-click="tabHandleClickTop">
				<el-tab-pane label="入库记录" name="wareHouse">
					<div style="height: calc(100% - 80px);">
						<el-form :inline="true" class="query-form" ref="searchForm" :model="searchForm"
							@keyup.enter.native="list()" @submit.native.prevent>
							<el-form-item label="入库编号" prop="wareHouseNumber">
								<el-input v-model="searchForm.wareHouseNumber" placeholder="请输入入库编号"
									clearable></el-input>
							</el-form-item>
							<el-form-item label="入库时间" prop="wareHouseDates">
								<el-date-picker placement="bottom-start" format="YYYY-MM-DD HH:mm:ss"
									value-format="YYYY-MM-DD HH:mm:ss" v-model="searchForm.wareHouseDates"
									type="datetimerange" range-separator="至" start-placeholder="开始日期"
									end-placeholder="结束日期">
								</el-date-picker>
							</el-form-item>

							<el-form-item>
								<el-button type="primary" @click="list()" icon="el-icon-search">查询</el-button>
								<el-button @click="resetSearch()" icon="el-icon-refresh-right">重置</el-button>
							</el-form-item>
						</el-form>
						<vxe-table border="inner" auto-resize resizable height="400px" :loading="loading"
							ref="projectTable" show-header-overflow show-overflow highlight-hover-row :menu-config="{}"
							:print-config="{}" :sort-config="{ remote: true }" :data="dataList"
							:row-config="{ isCurrent: true }" :radio-config="{ trigger: 'row' }">
							<vxe-column min-width="160" align="center" title="入库编号"
								field="wareHouseNumber"></vxe-column>
							<vxe-column min-width="160" align="center" title="入库名称" field="wareHouseName">
								<template #default="scope">
									<el-link type="primary" :underline="false" v-if="hasPermission('psi:list')"
										@click="view(scope.row.wareHouseId)">
										{{ scope.row.wareHouseName }}
									</el-link>
									<span v-else>{{ scope.row.wareHouseName }}</span>
								</template>
							</vxe-column>
							<vxe-column min-width="160" align="center" title="入库数量" field="tradeNumber"></vxe-column>
							<vxe-column min-width="160" align="center" title="当前库存"
								field="currentInventory"></vxe-column>
							<vxe-column min-width="160" align="center" title="生产日期" field="produceDate"></vxe-column>
							<vxe-column min-width="160" align="center" title="保质期" field="shelfLife">
								<template #default="scope">
									<span v-if="scope.row.shelfLife && scope.row.shelfLifeUnit">
										{{ scope.row.shelfLife }} {{ scope.row.shelfLifeUnit }}
									</span>
								</template>
							</vxe-column>
							<vxe-column min-width="160" align="center" title="到期时间" field="expireDate">
								<template #default="scope">
									<span
										v-if="scope.row.produceDate && scope.row.shelfLife && scope.row.shelfLifeUnit">
										{{
											calculateExpireDate(
												scope.row.produceDate,
												scope.row.shelfLife,
												scope.row.shelfLifeUnit
											)
										}}
									</span>
								</template>
							</vxe-column>
							<vxe-column min-width="160" align="center" title="经办人"
								field="wareHouseHandledBy"></vxe-column>
							<vxe-column min-width="160" align="center" title="经办人部门"
								field="wareHouseHandledByOff"></vxe-column>
							<vxe-column min-width="160" align="center" title="入库时间" field="wareHouseDate"></vxe-column>
						</vxe-table>
						<vxe-pager background :current-page="tablePage.currentPage" :page-size="tablePage.pageSize"
							:total="tablePage.total"
							:page-sizes="[10, 20, 100, 1000, { label: '全量数据', value: 1000000 }]"
							:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
							@page-change="currentChangeHandle">
						</vxe-pager>
					</div>
				</el-tab-pane>
				<el-tab-pane label="领用记录" name="collect">
					<div style="height: calc(100% - 80px);">
						<el-form :inline="true" class="query-form" ref="searchForm2" :model="searchForm2"
							@keyup.enter.native="list2()" @submit.native.prevent>
							<el-form-item label="领用编号" prop="collectNo">
								<el-input v-model="searchForm2.collectNo" placeholder="请输入领用编号" clearable></el-input>
							</el-form-item>
							<el-form-item label="领用时间" prop="collectDates">
								<el-date-picker placement="bottom-start" format="YYYY-MM-DD HH:mm:ss"
									value-format="YYYY-MM-DD HH:mm:ss" v-model="searchForm2.collectDates"
									type="datetimerange" range-separator="至" start-placeholder="开始日期"
									end-placeholder="结束日期">
								</el-date-picker>
							</el-form-item>

							<el-form-item>
								<el-button type="primary" @click="list2()" icon="el-icon-search">查询</el-button>
								<el-button @click="resetSearch2()" icon="el-icon-refresh-right">重置</el-button>
							</el-form-item>
						</el-form>
						<vxe-table border="inner" auto-resize resizable height="400px" :loading="loading"
							ref="projectTable" show-header-overflow show-overflow highlight-hover-row :menu-config="{}"
							:print-config="{}" :sort-config="{ remote: true }" :data="collectList"
							:row-config="{ isCurrent: true }" :radio-config="{ trigger: 'row' }">
							<vxe-column min-width="160" align="center" title="领用编号" field="collectNo"></vxe-column>
							<vxe-column min-width="160" align="center" title="领用物品名称" field="goodsName">
								<template #default="scope">
									<el-link type="primary" :underline="false" v-if="hasPermission('psi:list')"
										@click="view2(scope.row.collectId)">
										{{ scope.row.goodsName }}
									</el-link>
									<span v-else>{{ scope.row.goodsName }}</span>
								</template>
							</vxe-column>
							<vxe-column min-width="160" align="center" title="领用数量" field="collectNumber">
								<template #default="scope">
									<span v-if="scope.row.notSurplusStock && scope.row.spec">
										{{ scope.row.notSurplusStock / scope.row.spec }}
									</span>
									<span v-else>--</span>
								</template>
							</vxe-column>
							<vxe-column min-width="160" align="center" title="当前库存"
								field="currentInventory"></vxe-column>
							<vxe-column min-width="160" align="center" title="经办人" field="collectHandleBy"></vxe-column>
							<vxe-column min-width="160" align="center" title="经办人部门"
								field="collectHandleByOff"></vxe-column>
							<vxe-column min-width="160" align="center" title="领用时间" field="collectDate"></vxe-column>
						</vxe-table>
						<vxe-pager background :current-page="tablePage2.currentPage" :page-size="tablePage2.pageSize"
							:total="tablePage2.total"
							:page-sizes="[10, 20, 100, 1000, { label: '全量数据', value: 1000000 }]"
							:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
							@page-change="currentChangeHandle2">
						</vxe-pager>
					</div>
				</el-tab-pane>
				<el-tab-pane label="报损记录" name="loss">
					<div style="height: calc(100% - 80px);">
						<el-form :inline="true" class="query-form" ref="searchForm3" :model="searchForm3"
							@keyup.enter.native="list3()" @submit.native.prevent>
							<el-form-item label="报损编号" prop="lossNo">
								<el-input v-model="searchForm3.lossNo" placeholder="请输入报损编号" clearable></el-input>
							</el-form-item>
							<el-form-item label="报损时间" prop="lossDates">
								<el-date-picker placement="bottom-start" format="YYYY-MM-DD HH:mm:ss"
									value-format="YYYY-MM-DD HH:mm:ss" v-model="searchForm3.lossDates"
									type="datetimerange" range-separator="至" start-placeholder="开始日期"
									end-placeholder="结束日期">
								</el-date-picker>
							</el-form-item>

							<el-form-item>
								<el-button type="primary" @click="list3()" icon="el-icon-search">查询</el-button>
								<el-button @click="resetSearch3()" icon="el-icon-refresh-right">重置</el-button>
							</el-form-item>
						</el-form>
						<vxe-table border="inner" auto-resize resizable height="400px" :loading="loading"
							ref="projectTable" show-header-overflow show-overflow highlight-hover-row :menu-config="{}"
							:print-config="{}" :sort-config="{ remote: true }" :data="lossList"
							:row-config="{ isCurrent: true }" :radio-config="{ trigger: 'row' }">
							<vxe-column min-width="160" align="center" title="报损编号" field="lossNo"></vxe-column>
							<vxe-column min-width="160" align="center" title="报损物品名称" field="goodsName">
								<template #default="scope">
									<el-link type="primary" :underline="false" v-if="hasPermission('psi:loss:list')"
										@click="view3(scope.row.id)">
										{{ scope.row.goodsName }}
									</el-link>
									<span v-else>{{ scope.row.goodsName }}</span>
								</template>
							</vxe-column>
							<vxe-column min-width="160" align="center" title="报损数量" field="lossNumber"></vxe-column>
							<vxe-column min-width="160" align="center" title="经办人" field="handledByName"></vxe-column>
							<vxe-column min-width="160" align="center" title="经办人部门"
								field="handledByOfficeName"></vxe-column>
							<vxe-column min-width="160" align="center" title="报损时间" field="createTime"></vxe-column>
						</vxe-table>
						<vxe-pager background :current-page="tablePage3.currentPage" :page-size="tablePage3.pageSize"
							:total="tablePage3.total"
							:page-sizes="[10, 20, 100, 1000, { label: '全量数据', value: 1000000 }]"
							:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
							@page-change="currentChangeHandle3">
						</vxe-pager>
					</div>
				</el-tab-pane>
			</el-tabs>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="close()" icon="el-icon-circle-close">关闭</el-button>
				</span>
			</template>
		</el-dialog>
		<WareHouseAddForm ref="wareHouseAddForm"></WareHouseAddForm>
		<UpdateCollectInfoForm ref="updateCollectInfoForm"></UpdateCollectInfoForm>
		<UpdateLossInfoForm ref="updateLossInfoForm"></UpdateLossInfoForm>
	</div>
</template>

<script>
import WareHouseAddForm from '../wareHouse/WareHouseAddForm'
import WareHouseService from '@/api/psi/WareHouseService'
import LossService from '@/api/psi/LossService'
import UpdateCollectInfoForm from '../collect/UpdateCollectInfoForm'
import UpdateLossInfoForm from '../loss/UpdateLossInfoForm'

export default {
	data() {
		return {
			title: '',
			method: '',
			visible: false,
			loading: false,
			tablePage: {
				total: 0,
				currentPage: 1,
				pageSize: 10,
				orders: []
			},
			tablePage2: {
				total: 0,
				currentPage: 1,
				pageSize: 10,
				orders: []
			},
			tablePage3: {
				total: 0,
				currentPage: 1,
				pageSize: 10,
				orders: []
			},
			tableKey: '',
			dataList: [],
			collectList: [],
			lossList: [],
			searchForm: {
				tradeName: '',
				wareHouseNumber: '',
				wareHouseDates: []
			},
			searchForm2: {
				tradeName: '',
				collectNo: '',
				collectDates: []
			},
			searchForm3: {
				goodsName: '',
				lossNo: '',
				lossDates: []
			},
			activeNameTop: 'wareHouse',
			tradeName: '',
			detailId: ''
		}
	},
	wareHouseService: null,
	lossService: null,
	created() {
		this.wareHouseService = new WareHouseService()
		this.lossService = new LossService()
	},
	components: {
		WareHouseAddForm,
		UpdateCollectInfoForm,
		UpdateLossInfoForm
	},
	methods: {
		view(id) {
			this.$refs.wareHouseAddForm.init('view', id)
		},
		view2(id) {
			this.$refs.updateCollectInfoForm.init('view', id)
		},
		view3(id) {
			this.$refs.updateLossInfoForm.init('view', id)
		},
		init(wareHouseType, tradeName, detailId) {
			this.activeNameTop = 'wareHouse'
			this.visible = true
			this.wareHouseType = wareHouseType
			this.tradeName = tradeName
			this.searchForm.wareHouseType = wareHouseType
			this.searchForm.tradeName = tradeName
			this.searchForm2.tradeName = tradeName
			this.searchForm3.goodsName = tradeName
			if (this.commonJS.isNotEmpty(detailId)) {
				this.detailId = detailId
			} else {
				this.detailId = ''
			}
			this.list()
			this.list2()
			this.list3()
		},
		list() {
			this.loading = true
			this.wareHouseService.wareHouseHistoryList({
				current: this.tablePage.currentPage,
				size: this.tablePage.pageSize,
				detailId: this.detailId,
				...this.searchForm
			}).then((data) => {
				this.dataList = data.records
				this.tablePage.total = data.total
				this.tableKey = Math.random()
			}).finally(() => {
				this.loading = false
			})
		},
		list2() {
			this.loading = true
			this.wareHouseService.collectHistoryList({
				current: this.tablePage2.currentPage,
				size: this.tablePage2.pageSize,
				...this.searchForm2
			}).then((data) => {
				this.collectList = data.records
				this.tablePage2.total = data.total
				this.tableKey = Math.random()
			}).finally(() => {
				this.loading = false
			})
		},
		list3() {
			this.loading = true
			this.lossService.getLossByTradeName({
				current: this.tablePage3.currentPage,
				size: this.tablePage3.pageSize,
				...this.searchForm3
			}).then((data) => {
				this.lossList = data.records
				this.tablePage3.total = data.total
				this.tableKey = Math.random()
			}).finally(() => {
				this.loading = false
			})
		},
		currentChangeHandle({ currentPage, pageSize }) {
			this.tablePage.currentPage = currentPage
			this.tablePage.pageSize = pageSize
			this.list()
		},
		currentChangeHandle2({ currentPage, pageSize }) {
			this.tablePage2.currentPage = currentPage
			this.tablePage2.pageSize = pageSize
			this.list2()
		},
		currentChangeHandle3({ currentPage, pageSize }) {
			this.tablePage3.currentPage = currentPage
			this.tablePage3.pageSize = pageSize
			this.list3()
		},
		resetSearch() {
			this.$refs.searchForm.resetFields()
			this.tablePage.currentPage = 1
			this.searchForm.tradeName = this.tradeName
			this.list()
		},
		resetSearch2() {
			this.$refs.searchForm2.resetFields()
			this.tablePage2.currentPage = 1
			this.searchForm2.tradeName = this.tradeName
			this.list2()
		},
		resetSearch3() {
			this.$refs.searchForm3.resetFields()
			this.tablePage3.currentPage = 1
			this.searchForm3.goodsName = this.tradeName
			this.list3()
		},
		close() {
			this.visible = false
			this.tradeName = ''
			this.safeResetForm('searchForm')
			this.safeResetForm('searchForm2')
			this.safeResetForm('searchForm3')
		},
		safeResetForm(refName) {
			if (this.$refs[refName]) {
				this.$refs[refName].resetFields()
			}
		},
		tabHandleClickTop() {
		},
		calculateExpireDate(produceDate, shelfLife, shelfLifeUnit) {
			if (!produceDate || !shelfLife || !shelfLifeUnit) {
				return ''
			}
			const produce = new Date(produceDate)
			let expire = new Date(produce)
			if (shelfLifeUnit === '年') {
				expire.setFullYear(expire.getFullYear() + parseInt(shelfLife))
			} else if (shelfLifeUnit === '月') {
				expire.setMonth(expire.getMonth() + parseInt(shelfLife))
			} else if (shelfLifeUnit === '天') {
				expire.setDate(expire.getDate() + parseInt(shelfLife))
			}
			return expire.toISOString().split('T')[0]
		}
	}
}
</script>

<style scoped>
/deep/ .el-dialog__body {
	padding-top: 0px;
	padding-bottom: 15px;
}
</style>
