<template>
	<div>
		<el-dialog v-model="dialogVisible" :close-on-click-modal="false" draggable width="1200px" height="500px">
			<el-card :body-style="cardBodyStyle">
				<el-form inline :model="query">
					<el-row>
						<el-col :span="6">
							<el-form-item label="合同号" style="margin-bottom: 5px;">
								<el-input v-model="query.contrNo" placeholder="请输入"
									style="margin-right: 10px;" clearable>
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="合同名称" style="margin-bottom: 5px;">
								<el-input v-model="query.contrNm" placeholder="请输入"
									style="margin-right: 10px;" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="供应商名称" style="margin-bottom: 5px;">
								<el-input v-model="query.supplierNm" placeholder="请输入"
									style="margin-right: 10px;" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="对方合同号" style="margin-bottom: 5px;">
								<el-input v-model="query.khContrNo" placeholder="请输入"
									style="margin-right: 10px;" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-card>

			<el-card :body-style="cardBodyStyle">
				<el-button plain type="primary" @click="search">查询</el-button>
			</el-card>

			<el-card :body-style="cardBodyStyle">
				<el-table :data="tableData" border highlight-current-row>
					<el-table-column v-for="(item, index) in column" :key="index" :prop="item.prop" :label="item.label"
						:formatter="formatter" header-align="center" align="center" show-overflow-tooltip
						:width="item.width">
					</el-table-column>
					<el-table-column label="操作" header-align="center" align="center" show-overflow-tooltip width="200px"
						fixed="right">
						<template #default="scope">
							<el-button plain @click="handleSelect(scope.row)">选择</el-button>
						</template>
					</el-table-column>
				</el-table>

				<el-pagination v-model:current-page="currentPage" v-model: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>
		</el-dialog>
	</div>
</template>

<script setup>

import {
	ref,
	onMounted,
	watch,
	getCurrentInstance
} from 'vue'

const {
	proxy
} = getCurrentInstance()

import tools from '@/tools'

const cardBodyStyle = ref(tools.style.card)

const dialogVisible = ref(false)
const open = () => {
	dialogVisible.value = true
}
const close = () => {
	dialogVisible.value = false
}

const props = defineProps({
	column: { // form查询项
		type: Array,
		default: () => [
			{
				prop: 'contrNo',
				label: '合同编号',
				width: 150,
			},
			{
				prop: 'contrNm',
				label: '合同名称',
				width: 210,
			},
			{
				prop: 'supplierNm',
				label: '交易方名称',
				width: 250,
			},
			{
				prop: 'khContrNo',
				label: '对方合同编号',
				width: 150,
			},
			{
				prop: 'contrTy',
				label: '合同类型',
				width: 100,
			},
			{
				prop: 'conSts',
				label: '合同状态',
				width: 100,
			},
			{
				prop: 'totalAmt',
				label: '合同金额',
				width: 100,
			},
			{
				prop: 'qty',
				label: '重量',
				width: 100,
			},
			{
				prop: 'contrDt',
				label: '合同日期',
				width: 120,
			},
		]
	},
	url: { // form查询数据
		type: String,
		default: 'cot/Head/queryPopup'
	},
	params: {
		type: Object,
		default: () => {
		}
	},

})


const query = ref({
	contrNo: '',
	contrNm: '',
	contrTy: '',
	supplierCd: '',
	supplierNm: '',
	khContrNo: '',
	contrDt: '',
})


const emit = defineEmits(['receiveFromChild'])
const handleSelect = (row) => {

	emit('receiveFromChild', row)
	close()
}
const currentPage = ref(1)
const pageSize = ref(10)
const pageSizes = ref([10, 20, 30, 40])
const tableData = ref([])
const totalRows = ref()
const initTableData = () => {
	tableData.value = []
	query.value.contrTy = props.params.contrTy
	query.value.supplierCd = props.params.supplierCd

	var url = props.url
	var param = {
		page: currentPage.value,
		rows: pageSize.value,
		params: JSON.stringify(query.value)
	}

	proxy.$axios.get(url, param).then(response => {
		if (response.data.code == '0') {
			tableData.value = response.data.data.records
			totalRows.value = response.data.data.total
		} else {
			ElMessage.error('操作失败！' + response.data.msg)
		}
	})
}

const search = () => {
	initTableData()
}
const handleSizeChange = (val) => {
	pageSize.value = val
	initTableData()
}
const handleCurrentChange = (val) => {
	currentPage.value = val
	initTableData()
}
const formatter = (row, column, cellValue, index) => {
	if (!cellValue || cellValue == null || cellValue == '') {
		return cellValue
	}
	switch (column.property) {
		case 'contrTy':
			cellValue = dicList.value.CONTRACT_TYPE.find(item => item.dicCode == cellValue)?.dicName
			break
		case 'conSts':
			cellValue = dicList.value && Array.isArray(dicList.value.contrSts)
				? dicList.value.contrSts.find(item => item.dicCode == cellValue)?.dicName
				: undefined
			break
	}
	return cellValue

}

const dicList = ref([])
//获取字典集合
const getDicList = () => {
	tools.dic.getDicList(['CONTRACT_TYPE', 'contrSts']).then((response => {
		dicList.value = response.data.data
	}))
}
onMounted(() => {
	getDicList()
	initTableData()
})
watch(dialogVisible, (newValue, oldValue) => {
	if (newValue) {
		initTableData()
	} else {

	}
})
defineExpose({
	open,
	close
})
</script>

<style></style>
