<template>
    <el-input class="mosty-select" v-model="inputName" readonly clearable>
        <template #append>
            <el-button title="请先选择" class='cursor' :disabled="props.disabled"
                @click="xgfClick">选择</el-button></template>
    </el-input>
    <!-- 相关方 -->
    <MOSTY.xgfandzzjgry id="xgfandzzjgry" v-model="isShowXgf" :Single="props.isSingle" :data="xgfData"
        :stlyrylx="props.stlyrylx" :relatedid="props.relatedid" :xgflx="props.xgflx" @choosedUsers="xgfManChange" />
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { ref, defineProps, defineEmits, onMounted, watch, defineExpose,computed } from 'vue'
const props = defineProps({
    dataList: {
        type: Array,
        default: () => ([])
    },
    disabled: {
        type: Boolean,
        default: false
    },
    relatedid: {
        type: String,
        default: ''
    },
    /** 是否单选 默认多选 */
    isSingle: {
        type: Boolean,
        default: false
    },
    ids: {
        type: String,
        default: ''
    },
    cName: {
        type: String,
        default: ''
    },
	stlyrylx: {
		type: String,
		default: '01'
	},
	xgflx: {
		type: String,
		default: '09,10,15'
	}
})
const emit = defineEmits(['change', 'update:ids', 'update:cName', 'clear'])

const isShowXgf = ref(false)
const xgfMan = ref('')
const xgfRyId = ref('')
const inputName = ref('')
const xgfManChange = (val) => {
    val = Array.isArray(val) ? val : []
    const ids = val.map(item => item.id).join(',')
    const cName = val.map(item => item.userName).join(',')
    
    emit('update:ids', ids)
    emit('update:cName', cName)
    emit('change', val)
}

const xgfClick = () => {
    isShowXgf.value = true
}
const clear = () => {
    xgfMan.value = ''
    xgfRyId.value = ''
}
// 数组回显
const xgfData = computed(() => {
    if (!props.ids || !props.ids.length) return []
    if (typeof props.ids === 'string') return props.ids.split(',')
    return []
})
// input回显
watch(() => props.cName, (val) => {
    
    inputName.value = val
}, { immediate: true })
onMounted(() => {
	console.log('2332===',props.xgflx);
});
defineExpose({
    clear
});
</script>

<style scoped lang="scss">
.mosty-select {
    width: 337px;
}
::v-deep .el-form {
	margin-top: 0;
	margin-bottom: 10px;
}
// ::v-deep #xgfandzzjgry .el-button + .el-button{
// 	margin-left: 10px;
// }
</style>
<style >
	#xgfandzzjgry .mosty-from-wrap .el-form-item__content > .el-button + .el-button{
	margin-left: 10px;
}
	#xgfandzzjgry .dialog-footer > .el-button + .el-button{
	margin-left: 10px;
}
</style>