<template>
	<lay-container fluid="true" style="padding:10px;">
		<lay-row space="10">
			<lay-col span="24">
				<lay-card>
					<lay-form :model="searchObj" class="search-box">
						<lay-row class="search-items">
							<lay-form-item label="物料号" prop="FCode">
								<lay-input v-model="searchObj.FCode"></lay-input>
							</lay-form-item>
							<lay-form-item label="试验号" prop="FTestCode">
								<lay-input v-model="searchObj.FTestCode"></lay-input>
							</lay-form-item>
							<lay-form-item label="物料描述" prop="FName">
								<lay-input v-model="searchObj.FName"></lay-input>
							</lay-form-item>
						</lay-row>
						<lay-form-item class="search-btn">
							<lay-button size="sm" type="primary" @click="_clickSearch">搜索</lay-button>
							<lay-button size="sm" @click="_clickReset">重置</lay-button>
						</lay-form-item>
					</lay-form>
					<lay-table :columns="dataColumn" id="id" :dataSource="dataList"
						:page="dataList.length>0?pageInfo:null" @change="changePage">
						<template v-slot:operator="{ data }">
							<lay-button v-if="dataInfoObj.FName==data.FName" size="xs" type="danger"
								@click="_choseData(data)">已选</lay-button>
							<lay-button v-else size="xs" type="normal" @click="_choseData(data)">选择</lay-button>
						</template>
					</lay-table>
				</lay-card>
			</lay-col>
		</lay-row>
	</lay-container>
</template>
<script>
	import {
		ref,
		watch
	} from "vue";
	import {
		getPageList
	} from "/src/api/api/common";
	import '@layui/layui-vue/es/checkbox/index.css';
	import '@layui/layui-vue/es/radio/index.css';

	export default {
		setup() {
			let dataColumn = [{
					title: "物料号",
					key: "FCode",
					align: 'center'
				},
				{
					title: "试验号",
					key: "FTestCode",
					align: 'center'
				},
				{
					title: "物料描述",
					key: "FName",
					align: 'center'
				},
				{
					title: "操作",
					key: "operator",
					width: "100px",
					customSlot: 'operator',
					align: 'center'
				}
			];
			const pageInfo = ref({
				total: 0,
				limit: 10,
				current: 1
			});
			const dataList = ref([]);
			const searchObj = ref({});
			const postData = ref({});
			const objInfoObj = ref({});

			return {
				dataColumn,
				dataList,
				pageInfo,
				searchObj,
				postData,
				objInfoObj,
			};
		},
		props: {
			dataInfoObj: {
				type: Object,
				default: () => {},
			}
		},
		mounted() {
			this._getPageList(true);
		},
		methods: {
			changePage(obj) {
				this.pageInfo.current = obj.current;
				this._getPageList();
			},
			//分页列表
			async _getPageList(isFirst, showOk) {
				this.pageInfo.total = 0;
				if (isFirst) {
					this.pageInfo.current = 1;
					this.pageInfo.total = 0;
				}
				this.postData.FPageIndex = this.pageInfo.current;
				this.postData.FPageSize = this.pageInfo.limit;
				this.postData.FType = 40;
				let result = await getPageList(this.postData, "Material");
				result.Data.List = result.Data.List || [];
				this.pageInfo.total = result.Data.Total || 0;
				this.dataList = result.Data.List;
			},
			//日期处理
			dateFormat(dataStr) {
				return dataStr.replace('T', ' ').split('.')[0];
			},
			_choseData(data) {
				let $this = this;
				layer.confirm("您确定要选择此子项吗？", {
					title: "提示",
					btn: [{
							text: '确定',
							callback: function(id) {
								layer.close(id);
								$this.$emit('selectClick', data)
							}
						},
						{
							text: '取消',
							callback: function(id) {
								layer.close(id);
							}
						}
					]
				});
			},
			//检索-检索
			_clickSearch() {
				this.postData = {};
				for (let key in this.searchObj) {
					let val = this.searchObj[key];
					if (val != null && val !== "") this.postData[key] = val;
				}
				this._getPageList(true);
			},
			//检索-重置
			_clickReset() {
				this.searchObj = {};
				this._clickSearch();
			}
		}
	}
</script>
