//子頁面1
<template>
	<div>
		<el-select  :value="defaultValue" :loading="loading" :multiple="multiple" :placeholder="placeholder"
			:allow-create="allowCreate"   :isConcatShowText="isConcatShowText" filterable remote clearable default-first-option :remote-method="remoteMethod"
			style="width: 100%;" @input="handleInput" @visible-change="visibleChange" @change="change"
			@clear="clearChange">
			<el-option v-for="(item, index) in optionsList" :key="'s' + index" :label="isConcatShowText==true?concatenatedLabel2(item):concatenatedLabel(item)"
				:value="item[valueString]">
				{{ concatenatedLabel(item) }}
			</el-option>
			<el-pagination class="select-pagination" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" :current-page.sync="localCurrentPage" :page-size="pageSize"
				:total="total" layout="prev, pager, next, total"></el-pagination>
		</el-select>
	</div>
</template>

<script>
	export default {
		name: 'CustomSelect',
		props: {
			defaultValue: {
				type: [Number, String, Array],
				default: null
			},
			loading: {
				type: Boolean,
				default: false
			},
			拼接后 被選擇后輸入框是否顯示拼接的字符串
			isConcatShowText:{
				type: Boolean,
				default: false
			},
			multiple: {
				type: Boolean,
				default: false
			},
			placeholder: {
				type: String,
				default: 'Please select'
			},
			allowCreate: {
				type: Boolean,
				default: false
			},
			remoteMethod: {
				type: Function,
				default: null
			},
			optionsList: {
				type: Array,
				default: () => []
			},
			label: {
				type: String,
				default: 'label'
			},
			labelTwo: {
				type: String,
				default: ''
			},
			labelThree: {
				type: String,
				default: ''
			},
			labelFour: {
				type: String,
				default: ''
			},
			valueString: {
				type: String,
				default: 'value'
			},
			currentPage: {
				type: Number,
				default: 1
			},
			pageSize: {
				type: Number,
				default: 10
			},
			total: {
				type: Number,
				default: 0
			},
		},
		watch: {
			// 監(jiān)聽 prop 的變化，并更新本地數據屬性
			currentPage(newValue) {
				this.localCurrentPage = newValue;
			}
		},
		data() {
			return {
				localCurrentPage: 1
			}
		},
		methods: {
			handleInput(value) {
				this.$emit('input', value);
			},
			visibleChange(visible) {
				this.$emit('visible-change', visible);
			},
			change(value) {
				this.$emit('change', value);
			},
			clearChange() {
				this.$emit('clear');
			},
			handleSizeChange(size) {
				this.$emit('size-change', size);
			},
			handleCurrentChange(page) {
				this.$emit('current-change', page);
			},
			concatenatedLabel(item) {
				return [item[this.label], item[this.labelTwo], item[this.labelThree], item[this.labelFour]].filter(Boolean)
					.join(' || ');
			},
			concatenatedLabel2(item) {
				return item[this.label]
			}
		}
	};
</script>

<style scoped>
	.select-pagination {
		margin-top: 10px;
	}
</style>

<template>
	<!-- 所有的項目 也可以單獨用這個頁面 -->
	<div>
		<!-- is-concat 是否拼接字符串 concat-symbol拼接字符  allowCreate是否允許創(chuàng)建條目 默認顯示多少條 是否多選  -->
		<projectSelect :defaultValue="selectedValue" :loading="isLoading" :multiple="isMultiple"
			:isConcatShowText="isConcatShowText" :placeholder="placeholder" :allowCreate="allowCreation"
			:remoteMethod="remoteFetch" :optionsList="options" label="projectCode" labelTwo="name" labelThree=""
			labelFour="" :valueString="valueString" :currentPage="currentPages" :pageSize="pageSize" :total="totalItems"
			@input="handleInput" @visible-change="handleVisibleChange" @change="handleChange" @clear="handleClear"
			@size-change="handleSizeChange" @current-change="handleCurrentChange" />
	</div>
</template>

<script>
	import projectSelect from './project.vue'; 
	//管理員查看往來單位
	import {
		listInfo
	} from "@/api/project/index.js"; //客戶
	export default {
		name: 'ParentComponent',
		components: {
			projectSelect
		},
		props: {
			index: {
				type: Number,
				default: 0
			},
			placeholder: {
				type: String,
				default: '請選擇'
			},
			valueString: {
				type: String,
				default: 'id'
			},
			selectedVal: {
				default: null
			}
		},
		watch: {
			selectedVal: {
				handler(val, oldVal) {
					this.selectedValue = val
				},
				immediate: true,//為要監(jiān)視的prop添加immediate屬性并設置為true，可以使得watch函數在組件創(chuàng)建時立即執(zhí)行一次
				deep: true
			}
		},
		data() {
			return {
				querySearch:null,
				isConcatShowText: true, //拼接后 被選擇后輸入框是否顯示拼接的字符串
				selectedValue: [], // 如果是多選，則為數組；否則為單個值
				isLoading: false,
				isMultiple: false, // 是否允許多選
				allowCreation: false, // 是否允許用戶創(chuàng)建新選項
				options: [], // 選項列表，應從服務器或本地獲取
				currentPages: 1, // 當前頁碼
				pageSize: 6, // 每頁顯示的數量
				totalItems: 0, // 總項目數，用于分頁
			};
		},
		mounted() {
			this.remoteFetch()
		},
		methods: {
			remoteFetch(query) {
				if(query){
					this.querySearch=query
				}
				let that = this
				// 遠程獲取數據的函數，根據 query 參數進行搜索
				this.isLoading = true;
				// 假設 fetchData 是一個從服務器獲取數據的函數
				listInfo({
					isStop:0,//0否 1是 是否停用
					search: this.querySearch,
					pageSize: that.pageSize,
					pageNum: that.currentPages
				}).then(response => {
					//每次進入后  數據都是重新填充
					if (response.rows.length < 1) {
						this.selectedValue = []; // 清空已選值
					}
					that.options = response.rows;
					that.totalItems = response.total;
					this.isLoading = false;
				});
			},
			handleInput(value) {
				// 處理輸入事件，更新 selectedValue
				this.selectedValue = value;
				this.$emit('handleInput', value);
			},
			handleVisibleChange(visible) {
				// 處理下拉菜單的可見性變化
				this.currentPages = 1;
				this.remoteFetch(); // 可能需要重新獲取當前頁的數據
			},
			handleChange(value) {
				this.querySearch=null
				// 處理選項變化事件
				this.$emit('handlePageChange', value);
			},
			handleClear() {
				this.querySearch=null
				// 處理清除事件
				this.selectedValue = []; // 清空已選值
				this.$emit('clear', this.index);
				// this.$parent.productClear(this.index)
			},
			handleSizeChange(size) {
				// 處理每頁顯示數量變化事件
				this.pageSize = size;
				this.remoteFetch(this.querySearch); // 可能需要重新獲取當前頁的數據
			},
			handleCurrentChange(page) {
				// 處理當前頁碼變化事件
				this.currentPages = page;
				this.remoteFetch(this.querySearch); // 獲取當前頁的數據
			}
		},
		// 其他邏輯和生命周期鉤子...
	};
</script>

<style scoped>
	/* 父組件的樣式 */
</style>

<el-form>
   <el-form-item label="項目" prop="projectName">
			<project-select class="width100bfb" valueString="id" :selectedVal="form.projectName"   @clear='projectClear()' @handlePageChange="projectChange($event)" placeholder="請選擇項目" />
	</el-form-item>
</el-form>

<script>
import projectSelect from '@/views/components/elSelect/projectParent'
export default {
components: {
			projectSelect
		},
methods: {
/**項目列表change*/
			projectChange(val) {
				if (val) {
				//根據自己情況去調用接口
					//getProjectInfo(val).then(res => {
					//	this.form.projectName = res.data.name
						
					//})
				}
			},
		/*清除項目**/
			projectClear() {
			//根據自己情況去設置
				//this.form.projectName = null
			},
 }
}
</script>