<template>
    <u-popup :show="modelValue" mode="bottom" @close="close" :closeable="true">
        <view class="client-list-popup">
            <view class="title">选择客户</view>
            <view class="list">
                <view
                    class="client-card"
                    v-for="item in clientList"
                    :key="item.id"
                    :item="item"
                    @click="handleRadioChange(item.id)"
                >
                    <view class="left">
                        <view class="name">{{ item.clientName }}</view>
                        <view class="info">
                            <text>负责人：{{ item.director || '--' }}</text>
                            <text>联系电话：{{ item.phone || '--' }}</text>
                        </view>
                    </view>
                    <view class="right">
                        <u-radio-group :modelValue="radioValue">
                            <u-radio
                                size="24"
                                label=""
                                :name="item.id"
                                @change="handleRadioChange"
                            ></u-radio>
                        </u-radio-group>
                    </view>
                </view>
            </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, watch } from 'vue'
import { apiClientList } from '@/api/client'

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

const clientList = ref<ClientItem[]>([])
const close = () => {
    emit('update:modelValue', false)
}
const radioValue = ref()

const handleRadioChange = (name: number) => {
    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
}

const getList = async () => {
    const { lists } = await apiClientList()
    clientList.value = lists
}

watch(
    () => props.modelValue,
    val => {
        val && getList()
    }
)
</script>

<style lang="scss" scoped>
.client-list-popup {
    @include flex-direction;
    max-height: 1000rpx;
    .title {
        @include flex-center;
        padding: 24rpx 0;
        font-weight: 500;
    }
    .list {
        @include flex-direction;
        gap: 20rpx;
        flex: 1;
        overflow-y: auto;
        padding: 20rpx 24rpx;
        background-color: $gray-1;
    }
    .client-card {
        @include flex-center(space-between);
        padding: 32rpx 24rpx;
        padding-top: 20rpx;
        background-color: $white-1;
        border-radius: 12rpx;
        .left {
            .name {
                font-weight: 700;
            }
            .info {
                @include flex-direction;
                gap: 20rpx;
                margin-top: 28rpx;
                font-size: 28rpx;
                color: $gray-2;
            }
        }
    }
    .btns {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20rpx;
        padding: 0 32rpx;
    }
}
</style>
