<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-button type="primary" @click="handleSearch">查询</el-button>
			<el-button type="success" @click="handleDownload">下载模板</el-button>
			<el-button type="warning" @click="handleImport">导入</el-button>
			<el-button type="info" @click="handleExport">导出</el-button>
			<el-button type="danger" @click="handleRemoveAll">清空测试数据</el-button>
		</el-card>
		<el-card :body-style="cardBodyStyle">
			<el-table :data="tableData" border highlight-current-row>
				<el-table-column prop="compCd" label="公司代码" width="240" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="ordNo" label="订单号" width="180" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="ordLn" label="订单行号" width="240" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="itemCd" label="物料编码" width="240" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="itemNm" label="物料名称" width="240" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="stlGrd" label="钢种" width="120" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="specType" label="规格型号" width="240" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="quantity" label="数量" width="120" header-align="center" align="right"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="unit" label="计量单位" width="240" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="price" label="单价" width="120" header-align="center" align="right"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="amount" label="金额" width="120" header-align="center" align="right"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="taxAmount" label="税额" width="120" header-align="center" align="right"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="totalAmount" label="价税合计" width="240" header-align="center" align="right"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="delvDt" label="交货日期" width="240" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
			</el-table>
		</el-card>
		<el-card :body-style="cardBodyStyle">
			<el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" :total="totalRows"
				background="background" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
				@current-change="handleCurrentChange">
			</el-pagination>
		</el-card>
		
		
		<ImportExcel ref="ImportExcelRef" :url="importUrl" :formData="formData" @importSuccess="importSuccess">
		</ImportExcel>

	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance
	} from 'vue'



	const {
		proxy
	} = getCurrentInstance()

	import tools from '@/tools'
	const cardBodyStyle = ref(tools.style.card)
	const inputStyle = ref(tools.style.input)

	onMounted(() => {
		// handleSearch()
	})



	/**
	 *   查询
	 */




	const tableData = ref([])
	const handleSearch = () => {
		currentPage.value = 1
		getTableData()
	}

	const getTableData = () => {
		var url = 'exp/Imexport/query'
		var param = {
			page: currentPage.value,
			rows: pageSize.value,
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				// console.log(typeof response.data.data )
				// console.log(  response.data.data )
				tableData.value = response.data.data.records
				totalRows.value = response.data.data.total
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	}
	/**
	 *   查询
	 */

	/**
	 * 分页
	 */
	const currentPage = ref(1)
	const totalRows = ref(0)
	const pageSizes = ref([5, 10, 20, 30, 40])
	const pageSize = ref(5)
	const handleSizeChange = (val) => {
		pageSize.value = val
		getTableData()
	}
	const handleCurrentChange = (val) => {
		currentPage.value = val
		getTableData()
	}
	/**
	 * 分页
	 */



	const handleRemoveAll = () => {

		ElMessageBox.confirm('此操作将删除该数据, 是否继续?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {
			var url = 'exp/Imexport/removeAll'
			var param = {}
			proxy.$axios.post(url, param).then(response => {
				if (response.data.code == '0') {
					ElMessage({
						type: 'success',
						message: '操作成功!',
					});
					handleSearch()
				} else {
					ElMessage({
						type: 'error',
						message: '操作失败!' + response.data.msg
					});
				}
			})
		}).catch(() => {
			ElMessage({
				type: 'info',
				message: '已取消删除'
			})
		})
	}


	const handleDownload = (row) => {
		location.href = import.meta.env.VITE_BASE_API +
			'/framework/Common/downloadFileFtpByName?fId=TEMPLATES&fileName=' + '采购订单导入模板.xlsx'
	}



	import ImportExcel from '@/components/ImportExcel.vue'
	const ImportExcelRef = ref(null)

	const importUrl = ref('exp/Imexport/importExcel')
	const formData = ref({
		fId: '123'
	})

	const handleImport = () => {
		ImportExcelRef.value.open()
	}
	const importSuccess = () => {
		handleSearch()
	}




	const handleExport = () => {
		var params = {
			name: '测试',
			age: 12
		}
		location.href = import.meta.env.VITE_BASE_API +
			'/exp/Imexport/exportExcel?params=' + encodeURIComponent(JSON.stringify(params))
	}
</script>

<style>
</style>