<template>
    <u-popup :show="modelValue" mode="bottom" @close="close" :closeable="true">
        <view class="client-list-popup">
            <view class="title">选择客户</view>
            <view class="list">
                <ClientCard v-for="item in clientList" :key="item.id" :item="item">
                    <u-radio-group :modelValue="radioValue">
                        <u-radio label="" :name="item.id" @change="handleRadioChange"></u-radio>
                    </u-radio-group>
                </ClientCard>
            </view>
            <view class="btns">
                <TFooterBtn
                    text="重置"
                    :padding="0"
                    plain
                    :disabled="!radioValue"
                    @handle-btn-click="handleReset"
                />
                <TFooterBtn
                    text="确定"
                    :padding="0"
                    :disabled="!radioValue"
                    @handle-btn-click="handleBtnClick"
                />
            </view>
        </view>
    </u-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ClientCard from './client-card.vue'

defineProps({
    modelValue: {
        type: Boolean,
        default: false
    }
})
const emit = defineEmits(['update:modelValue', 'handleSelectedValue'])

const clientList = ref([
    { id: 1, name: '广东星星新能源有限公司' },
    { id: 2, name: '合创云（广州）科技有限公司' },
    { id: 3, name: '广东星星新能源有限公司' },
    { id: 4, name: '广东星星新能源有限公司' }
])
const close = () => {
    emit('update:modelValue', false)
}
const radioValue = ref()

const handleRadioChange = (name: boolean) => {
    radioValue.value = name
}
const handleBtnClick = () => {
    close()
    const selectedClient = clientList.value.find(item => item.id === radioValue.value)
    if (selectedClient) {
        emit('handleSelectedValue', selectedClient)
    }
}
const handleReset = () => {
    radioValue.value = undefined
}
</script>

<style lang="scss" scoped>
.client-list-popup {
    @include flex-direction;
    max-height: 1000rpx;
    .title {
        @include flex-center;
        height: 120rpx;
        font-weight: 500;
    }
    .list {
        @include flex-direction;
        gap: 20rpx;
        flex: 1;
        overflow-y: auto;
        padding: 20rpx 24rpx;
        background-color: $gray-1;
    }
    .btns {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20rpx;
        padding: 0 32rpx;
    }
}
</style>
