<template>
	<el-container>
		<el-header>
			<div class="left-panel"></div>
			<div class="right-panel">
				<el-select v-model="query.warehouse" placeholder="仓库" clearable style="width: 150px; margin-right: 10px;" @change="handleQuery">
					<el-option v-for="w in warehouseOptions" :key="w.id" :label="w.name" :value="w.id"></el-option>
				</el-select>
				<el-select v-model="query.entry_type" placeholder="入库类型" clearable style="width: 150px; margin-right: 10px;" @change="handleQuery">
					<el-option label="原材料正常入库" value="raw_normal"></el-option>
					<el-option label="原材料暂估入库" value="raw_estimated"></el-option>
					<el-option label="产品入库" value="product"></el-option>
					<el-option label="其他" value="other"></el-option>
				</el-select>
				<el-select v-model="query.status" placeholder="物料状态" clearable style="width: 120px; margin-right: 10px;" @change="handleQuery">
					<el-option label="闲置" value="idle"></el-option>
					<el-option label="领用中" value="in_requisition"></el-option>
					<el-option label="已领用" value="requisitioned"></el-option>
				</el-select>
				<el-select v-model="query.invoice_received" placeholder="账单状态" clearable style="width: 120px; margin-right: 10px;" @change="handleQuery">
					<el-option label="已收到" :value="true"></el-option>
					<el-option label="未收到" :value="false"></el-option>
				</el-select>
				<el-date-picker
					v-model="dateRange"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					value-format="YYYY-MM-DD"
					style="width: 260px; margin-right: 10px;"
					@change="handleDateChange"
				></el-date-picker>
				<el-input v-model="query.search" placeholder="名称/规格/供应商/单号" clearable style="width: 220px;" @keyup.enter="handleQuery"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable
				ref="table"
				:apiObj="$API.mpr.warehouseStock.list"
				row-key="id"
				stripe
				:query="query"
			>
				<el-table-column type="index" width="50" />
				<el-table-column label="仓库" prop="warehouse_name" width="120" show-overflow-tooltip></el-table-column>
				<el-table-column label="入库单号" prop="entry_number" width="200" show-overflow-tooltip></el-table-column>
				<el-table-column label="入库日期" prop="entry_date" width="110" sortable show-overflow-tooltip></el-table-column>
				<el-table-column label="入库类型" prop="entry_type_display" width="140" show-overflow-tooltip></el-table-column>
				<el-table-column label="入库方式" prop="entry_method_display" width="100" show-overflow-tooltip></el-table-column>
				<el-table-column label="名称" prop="name" min-width="120" show-overflow-tooltip></el-table-column>
				<el-table-column label="规格" prop="spec" width="120" show-overflow-tooltip></el-table-column>
				<el-table-column label="单位" prop="unit" width="70" show-overflow-tooltip></el-table-column>
				<el-table-column label="数量" prop="quantity" width="100" sortable show-overflow-tooltip></el-table-column>
				<el-table-column label="单价" prop="unit_price" width="100" show-overflow-tooltip></el-table-column>
				<el-table-column label="金额" prop="amount" width="110" sortable show-overflow-tooltip>
					<template #default="scope">
						<span style="font-weight: bold;">{{ scope.row.amount }}</span>
					</template>
				</el-table-column>
				<el-table-column label="状态" width="100" align="center">
					<template #default="scope">
						<el-tag v-if="Number(scope.row.quantity) <= 0" type="info" size="small">已领完</el-tag>
						<el-tag v-else-if="scope.row.status === 'idle'" type="success" size="small">闲置</el-tag>
						<el-tag v-else-if="scope.row.status === 'in_requisition'" type="warning" size="small">领用中</el-tag>
						<el-tag v-else-if="scope.row.status === 'requisitioned'" type="danger" size="small">已领用</el-tag>
						<el-tag v-else type="info" size="small">{{ scope.row.status_display }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="供应商" prop="supplier_name" width="140" show-overflow-tooltip></el-table-column>
				<el-table-column label="账单" width="90" align="center">
					<template #default="scope">
						<el-tag :type="scope.row.invoice_received ? 'success' : 'danger'" size="small">
							{{ scope.row.invoice_received ? '已收到' : '未收到' }}
						</el-tag>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import API from '@/api'

const table = ref(null)
const query = ref({})
const dateRange = ref(null)
const warehouseOptions = ref([])

onMounted(async () => {
	let res = await API.inm.warehouse.list.req({ page: 0 })
	warehouseOptions.value = res
})

const handleQuery = () => {
	table.value.refresh()
}

const handleDateChange = (val) => {
	if (val) {
		query.value.entry_date_after = val[0]
		query.value.entry_date_before = val[1]
	} else {
		delete query.value.entry_date_after
		delete query.value.entry_date_before
	}
	handleQuery()
}
</script>
