<!--
 * @Author: micky
 * @Date: 2024-08-27 15:13:44
 * @LastEditors: micky
 * @LastEditTime: 2024-08-27 17:42:30
 * @FilePath: \chargingpile-uniapp\src\bundle\pages\repair\client-popup.vue
-->
<template>
    <u-popup :show="modelValue" mode="bottom" @close="close" :closeable="true">
        <view class="client-list-popup">
            <view class="title">{{ title }}</view>
            <view class="list" v-if="currentStep == 1">
                <view class="client-card" v-for="item in clientList" :key="item.id" :item="item">
                    <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 label="" :name="item.id" @change="handleRadioChange"></u-radio>
                        </u-radio-group>
                    </view>
                </view>
            </view>
            <view class="list" v-else>
                <view
                    class="client-card"
                    v-for="item in selectedClient.clientContactsList"
                    :key="item.id"
                    :item="item"
                >
                    <view class="left">
                        <text>{{ item.name }}</text>
                        <text class="ml-3">{{ item.phone }}</text>
                    </view>
                    <view class="right">
                        <u-radio-group :modelValue="radioValue">
                            <u-radio
                                label=""
                                :name="item.id"
                                @change="handleSelectContact"
                            ></u-radio>
                        </u-radio-group>
                    </view>
                </view>
            </view>
            <view class="btns">
                <template v-if="currentStep == 1">
                    <TFooterBtn
                        text="重置"
                        :padding="0"
                        plain
                        :disabled="!radioValue"
                        @handle-btn-click="handleReset"
                    />
                    <TFooterBtn
                        text="选择联系人"
                        :padding="0"
                        :disabled="!radioValue"
                        @handle-btn-click="handleNext"
                    />
                </template>
                <template v-else>
                    <TFooterBtn text="返回" :padding="0" plain @handle-btn-click="handleBack" />
                    <TFooterBtn
                        text="确定"
                        :padding="0"
                        :disabled="!contactValue"
                        @handle-btn-click="handleBtnClick"
                    />
                </template>
            </view>
        </view>
    </u-popup>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { apiClientList } from '@/api/client'

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['update:modelValue', 'handleSelectedValue'])
const currentStep = ref(1)
const radioValue = ref()
const contactValue = ref()
const selectedClient = ref<any>({})
const selectedContact = ref({})
const title = computed(() => {
    return currentStep.value == 1 ? '选择客户' : '选择联系人'
})
const clientList = ref<ClientItem[]>([])
const close = () => {
    emit('update:modelValue', false)
}

const handleBack = () => {
    currentStep.value = 1
}
const handleNext = () => {
    currentStep.value = 2
}
// 选择客户
const handleRadioChange = (name: string) => {
    radioValue.value = name
    selectedClient.value = clientList.value.find((item: ClientItem) => item.id == name)
    console.log('selectedClient.value', selectedClient.value)
}
// 选择联系人
const handleSelectContact = (name: string) => {
    contactValue.value = name
    selectedContact.value = selectedClient.value.clientContactsList.find(
        (item: ClientContactItem) => item.id == name
    )
}
const handleBtnClick = () => {
    close()
    const obj = {
        clientName: selectedClient.value.clientName,
        clientId: selectedClient.value.id,
        contactName: selectedContact.value.name,
        contactPhone: selectedContact.value.phone
    }
    emit('handleSelectedValue', obj)
}
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;
        height: 120rpx;
        font-weight: 500;
    }
    .list {
        @include flex-direction;
        gap: 20rpx;
        flex: 1;
        overflow-y: auto;
        padding: 20rpx 24rpx;
        background-color: $gray-1;
        min-height: 300px;
    }
    .client-card {
        @include flex-center(space-between);
        padding: 32rpx 24rpx;
        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>
