<template>
    <up-button v-if="!modelValue" type="primary" @click="selectContactUnitShow = true" plain>
        <image class="w-36 h-36 mr-10" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/common/select_push_icon.png" mode="widthFix" />
        <span>{{ placeholder }}</span>
    </up-button>
    <view v-else class="bg-#FBFDFB card-info-block pd-24 p-rtv mt-16">
        <view>
            <view class="f-s-34 c-#333 f-w-500">{{ info?.cusName }}</view>
            <view class="f-s-24 c-#666">{{ info?.cusCode }}</view>
        </view>
        <view
            class="close-icon pd-16"
            @click="emit('update:modelValue', '');emit('update:info', null)"
        >
            <up-icon color="#F81242" name="close" size="32rpx"></up-icon>
        </view>
    </view>
    <SelectContactUnit v-if="selectContactUnitShow" :title="title" v-model:show="selectContactUnitShow" :params="params" @confirm="confirmSelection"></SelectContactUnit>
</template>
<script setup lang="ts">
import SelectContactUnit from '../select-contact-unit/select-contact-unit.vue';

const props = defineProps({
    modelValue: {
        type: String,
        default: () => '',
    },
    title: {
        type: String,
        default: '选择往来单位',
    },
    placeholder: {
        type: String,
        default: '请选择往来单位信息',
    },
    info: {
        type: Object,
        default: () => ({}),
    },
    params: {
        type: Object,
        default: () => ({}),
    },
});
const selectContactUnitShow = ref(false);

const emit = defineEmits(['update:modelValue', 'update:info', 'change']);
const confirmSelection = (info: any) => {
    emit('update:modelValue', info.id);
    emit('update:info', info);
    emit('change', info);
};
</script>
<style scoped lang="scss">
.close-icon {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
}
.card-info-block {
    border: 1rpx solid #afddbb;
    border-radius: 10rpx;
}
</style>
