<template>
    <view class="client-card" @click="handleDetail">
        <view class="company">广东星星新能源有限公司</view>
        <view class="extract-info">
            <text>联系人：kaeery</text>
            <text>联系电话：18138952909</text>
            <text>联系地址：广东省广州市增城区东进商城</text>
            <text>创建时间：2024-07-27 11:15:00</text>
        </view>
        <view class="btns">
            <view v-for="btn in btnList" :key="btn.key" @click.stop="btn.event">
                <TIcon :name="btn.icon" />
                <text>{{ btn.text }}</text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { PropType, shallowRef } from 'vue'
import { IClient } from '../interface'
import { useClientCommon } from '../hooks'

defineProps({
    item: {
        type: Object as PropType<IClient>,
        default: () => ({})
    }
})
const handleDetail = () => {
    uni.navigateTo({
        url: '/bundle/pages/salesman/client-detail/index'
    })
}
const {
    handleNavigator,
    handleMobile,
    handleAddClientContact,
    handleAddClientDevice,
    handleEditClient
} = useClientCommon()

const handleRemoveClient = () => {
    uni.showModal({
        title: '',
        content: '确认移除该客户吗？',
        success: res => {
            if (res.confirm) {
                console.log('confirm')
            }
        }
    })
}

const moreBtnList = shallowRef({
    0: handleEditClient,
    1: handleAddClientContact,
    2: handleAddClientDevice,
    3: handleRemoveClient
})
const handleMore = () => {
    uni.showActionSheet({
        itemList: ['修改客户信息', '添加客户联系人', '添加客户设备', '移除客户'],
        success: res => {
            moreBtnList.value[res.tapIndex]()
        }
    })
}
const btnList = shallowRef([
    { key: 'navigator', text: '导航去', icon: 'icon-navigator', event: handleNavigator },
    { key: 'mobile', text: '打电话', icon: 'icon-mobile', event: handleMobile },
    { key: 'more', text: '更多', icon: 'icon-more', event: handleMore }
])
</script>

<style lang="scss" scoped>
.client-card {
    padding: 24rpx 20rpx 0;
    background-color: $white-1;
    border-radius: 12rpx;
    .extract-info {
        @include flex-direction;
        gap: 16rpx;
        margin: 20rpx 0;
        color: $gray-2;
        font-size: 28rpx;
    }
    .btns {
        @include flex-align;
        height: 81rpx;
        > view {
            flex: 1;
            @include flex-center;
            gap: 8rpx;
            border-right: 1px solid $gray-3;
            &:last-child {
                border-right: none;
            }
        }
    }
}
</style>
