<template>
	<div class="page-container column-container">
		<!-- 搜索区 -->
		<el-form class="list-search-container" :model="queryParams" ref="queryRef" :inline="true">
			<el-form-item label="单据号：" prop="formCode">
				<el-input
					v-model="queryParams.formCode"
					placeholder="请输入单据号"
					style="width: 144px"
					clearable
					@keyup.enter="handleQuery"
				/>
			</el-form-item>
			<el-form-item label="表单日期：" prop="formDate">
				<el-date-picker
					v-model="queryParams.formDate"
					type="date"
					style="width: 144px"
					clearable
					value-format="YYYY-MM-DD"
					placeholder="请选择表单日期"
				>
				</el-date-picker>
			</el-form-item>
			<el-form-item label="送货方式：" prop="deliveryMethod">
				<el-select v-model="queryParams.deliveryMethod" style="width: 144px" clearable placeholder="请选择">
					<el-option v-for="dict in delivery_method" :key="dict.value" :label="dict.label" :value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="带箱方式：" prop="packagingMethod">
				<el-select v-model="queryParams.packagingMethod" style="width: 144px" clearable placeholder="请选择">
					<el-option v-for="dict in packaging_method" :key="dict.value" :label="dict.label" :value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
				<el-button icon="Refresh" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<!-- 渲染数据区 -->
		<div class="el-table-container">
			<div class="el-table-inner-container">
				<el-table v-loading="loading" :data="orderList" size="small" border height="100%">
					<el-table-column type="selection" width="48" align="center" />
					<el-table-column label="外协单号" align="center" prop="formCode" width="120" />
					<el-table-column label="外协日期" align="center" prop="formDate" width="120">
						<template #default="scope">
							{{ parseTime(scope.row.formDate, '{y}-{m}-{d}') }}
						</template>
					</el-table-column>
					<el-table-column label="结算方式" align="center" prop="settlementType" width="120">
						<template #default="scope">
							<dict-tag :options="settlement_type" :value="scope.row.settlementType" />
						</template>
					</el-table-column>
					<el-table-column label="送货方式" align="center" prop="deliveryMethod" width="120">
						<template #default="scope">
							<dict-tag :options="delivery_method" :value="scope.row.deliveryMethod" />
						</template>
					</el-table-column>
					<el-table-column label="带箱方式" align="center" prop="packagingMethod" width="120">
						<template #default="scope">
							<dict-tag :options="packaging_method" :value="scope.row.packagingMethod" />
						</template>
					</el-table-column>
					<el-table-column label="备注" align="center" prop="remark" />
					<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="144">
						<template #default="scope">
							<el-button link type="warning" icon="View" @click="handleShowFormDialog(scope.row)"> 查看 </el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>

		<!-- 分页 -->
		<pagination
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>

		<!-- 表单 -->
		<order-form
			ref="orderRef"
			:delivery-method="delivery_method"
			:settlement-type="settlement_type"
			:packaging-method="packaging_method"
		/>
	</div>
</template>

<script setup name="Order">
import { listOrder } from '@/api/business/outsourcedOrder'
const { proxy } = getCurrentInstance()
/** 字典数组区 */
const { delivery_method } = proxy.useDict('delivery_method')
const { settlement_type } = proxy.useDict('settlement_type')
const { packaging_method } = proxy.useDict('packaging_method')

const orderList = ref([])
const loading = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
/** 查询对象 */
const queryParams = ref({
	pageNum: 1,
	pageSize: 10,
	formCode: null,
	formDate: null,
	productDescription: null,
	deliveryMethod: null,
	packagingMethod: null
})

/***********************  方法区  ****************************/

/** 查询外协单主
带箱方式，是整单的。如果换新箱子，明细中，都需要更换箱子列表 */
function getList() {
	loading.value = true
	listOrder(queryParams.value).then((response) => {
		orderList.value = response.rows
		total.value = response.total
		loading.value = false
	})
}

/** 搜索按钮操作 */
function handleQuery() {
	queryParams.value.pageNum = 1
	getList()
}

/** 重置按钮操作 */
function resetQuery() {
	proxy.resetForm('queryRef')
	handleQuery()
}

/** 修改按钮操作 */
function handleShowFormDialog(row) {
	proxy.$refs.orderRef.open(row.id)
}

/** 导出按钮操作 */
function handleExport() {
	proxy.download(
		'business/order/export',
		{
			...queryParams.value
		},
		`order_${new Date().getTime()}.xlsx`
	)
}

getList()
</script>
