<template>
	<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-form-item label="物料名称" style="margin-bottom: 5px;">
					<el-input v-model="query.itemNm" style="width: 200px; margin-right: 10px;" placeholder="请输入"
						clearable></el-input>
				</el-form-item>
			</el-form>
		</el-card>

		<el-card :body-style="cardBodyStyle">
			<el-button type="primary" plain @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"-->
				<!--                         header-align="center" align="center" show-overflow-tooltip>-->
				<!--        </el-table-column>-->
				<el-table-column v-if="true" prop="itemCd" label="物料编码" width="150" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="itemNm" label="物料名称" width="150" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="status" label="生效状态" width="150" header-align="center" align="center"
					show-overflow-tooltip>
					<template #default="scope">
						<Selector :value="scope.row.status" :optionList="dictList.START_STATUS">
						</Selector>
					</template>
				</el-table-column>
				<el-table-column v-if="true" prop="purchaseFlag" label="可采购" width="150" header-align="center"
					align="center" show-overflow-tooltip>
					<template #default="scope">
						<Selector :value="scope.row.purchaseFlag" :optionList="dictList.PURCHASE_FLAG">
						</Selector>
					</template>
				</el-table-column>
				<el-table-column v-if="true" prop="salesFlag" label="可销售" width="150" header-align="center"
					align="center" show-overflow-tooltip>
					<template #default="scope">
						<Selector :value="scope.row.salesFlag" :optionList="dictList.SALES_FLAG">
						</Selector>
					</template>
				</el-table-column>
				<el-table-column v-if="true" prop="unit" label="计量单位" header-align="center" align="center"
					show-overflow-tooltip>
					<template #default="scope">
						<Selector :value="scope.row.unit" :optionList="dictList.MEASURING_UNIT">
						</Selector>
					</template>
				</el-table-column>
				<el-table-column label="操作" header-align="center" align="center" show-overflow-tooltip width="200px">
					<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>

</template>

<script setup>

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

const {
	proxy
} = getCurrentInstance()

import tools from '@/tools'
import SelectorComponent from "@/views/sal/components/Selector_component.vue";
import Selector from "@/views/sal/components/Selector_text.vue";

const cardBodyStyle = ref(tools.style.card)

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

const props = defineProps({
	column: { // form查询项
		type: Array,
		default: () => [
			{
				prop: 'itemCd',
				label: '物料编码',
			},
			{
				prop: 'itemNm',
				label: '物料名称',
			},
			{
				prop: 'status',
				label: '生效状态',
			},
			{
				prop: 'purchaseFlagStr',
				label: '可采购',
			},
			{
				prop: 'salesFlagStr',
				label: '可销售',
			},
			{
				prop: 'unit',
				label: '计量单位',
			},
		]
	},
	// tableData: { // form查询数据
	//   type: Array,
	//   default: () => []
	// },
	url: { // form查询数据
		type: String,
		default: 'bas/Item/query'
	},
	itemNm: { // form查询数据
		type: String,
		default: ''
	},
	salesFlag: {
		type: String,
		default: ''
	},
	purchaseFlag: {
		type: String,
		default: ''
	}
})
const query = ref({
	itemCd: '',
	itemNm: props.item,
})


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

	emit('receiveFromChild', row)
	close()
}
const purchaseFlagDict = (val) => {
	query.value.status = val
}


const currentPage = ref(1)
const pageSize = ref(10)
const pageSizes = ref([10, 20, 30, 40])
const tableData = ref([])
const totalRows = ref()
const initTableData = () => {
	var url = props.url
	var param = {
		page: currentPage.value,
		rows: pageSize.value,
		itemCd: '',
		status: '0',
		itemNm: query.value.itemNm,
		salesFlag: props.salesFlag,
		purchaseFlag: props.purchaseFlag
	}

	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 handleSizeChange = (val) => {
	pageSize.value = val
	initTableData()
}
const handleCurrentChange = (val) => {
	currentPage.value = val
	initTableData()
}
const search = () => {
	initTableData()
}

const dictList = ref({})

const dictData = () => {
	var url = 'framework/Common/querySelectorList'
	var param = {
		type: JSON.stringify(['START_STATUS', 'PURCHASE_FLAG', 'SALES_FLAG', 'MEASURING_UNIT'])
	}
	proxy.$axios.get(url, param).then(response => {
		if (response.data.code == '0') {
			dictList.value = response.data.data

		} else {
			ElMessage.error('操作失败！' + response.data.msg)
		}
	})
}


onMounted(() => {
	dictData()
})
watch(dialogVisible, (newValue, oldValue) => {
	if (newValue) {
		initTableData()
	} else {

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

<style></style>
