<template>
	<el-select class="mosty-select" v-model="data.xgfmc" @change="changexgf" clearable>
		<el-option v-for="item in xgflist" :key="item.id" :label="item.label" :value="item.value" />
	</el-select>
</template>

<script setup>
import { ref, defineProps, defineEmits, onMounted, watch } from 'vue'
import { getApi } from "@/api/tobAcco_api.js";
import { getItem } from "@/utils/storage";
import emitter from "@/utils/eventBus.js";

const props = defineProps({
	modelValue: {
		type: String,
		default: ''
	},
	id: {
		type: String,
		default: ''
	}
})
const emit = defineEmits(['change', 'update:modelValue', 'update:id'])

const xgflist = ref([])
const data = ref({
	xgfmc: ''
})
const changexgf = (val) => {
  const curr = xgflist.value.find(item => item.value === val) || {}
	emit('update:modelValue', curr.label)
	emit('update:id', curr.value)
	emit('change', curr)
  emitter.emit('update:id', curr.value)
}
watch(() => props.modelValue, (val) => {
	data.value.xgfmc = val ? val : undefined
}, { immediate: true })
onMounted(() => {
	getxgflist()
})
//获取相关方
function getxgflist() {
	let orgid = getItem("deptId").ssdwid
	getApi({ orgid }, '/mosty-jcgl/relatedpartyinfo/getListByOrg').then(res => {
		if (res && Array.isArray(res)) {
			xgflist.value = res.map(item => {
				return { label: item.relatedname, value: item.id }
			});
		}
	})
}
</script>

<style scoped lang="scss">
.mosty-select {
	width: 337px;
}
</style>
