<template>
    <view class="client-base-info">
        <view class="form">
            <TCard>
                <u-cell-group :border="false">
                    <u-cell
                        v-for="(item, index) in baseInfoList"
                        :key="index"
                        :title="item.title"
                        :value="item.value"
                        :border="false"
                    ></u-cell>
                </u-cell-group>
            </TCard>
            <TCard>
                <u-cell-group :border="false">
                    <u-cell
                        v-for="(item, index) in addressInfoList"
                        :key="index"
                        :title="item.title"
                        :value="item.value"
                        :border="false"
                    ></u-cell>
                </u-cell-group>
            </TCard>
            <TCard>
                <u-cell-group :border="false">
                    <u-cell title="备注" :border="false" titleStyle="color:#303133;">
                        <template #label>
                            <view class="remark">备注信息</view>
                        </template>
                    </u-cell>
                </u-cell-group>
            </TCard>
        </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 { shallowRef } from 'vue'
import { useClientCommon } from '@/pages/salesman/client/hooks'

const baseInfoList = shallowRef([
    { title: '客户编号', value: '202408111001' },
    { title: '客户名称', value: '广东星星新能源有限公司' },
    { title: '联系人', value: 'kaeery' },
    { title: '性别', value: '女' },
    { title: '联系电话', value: '18138952909' }
])
const addressInfoList = shallowRef([
    { title: '所属区域', value: '广东省广州市增城区' },
    { title: '详细地址', value: '东进商城' }
])
const { handleNavigator, handleMobile } = useClientCommon()

const btnList = shallowRef([
    { key: 'navigator', text: '导航去', icon: 'icon-navigator', event: handleNavigator },
    { key: 'mobile', text: '打电话', icon: 'icon-mobile', event: handleMobile }
])
</script>

<style lang="scss" scoped>
.client-base-info {
    @include flex-direction;
    height: 100%;

    .form {
        flex: 1;
        overflow-y: scroll;
        @include flex-direction;
        gap: 20rpx;
        .remark {
            margin-top: 12rpx;
            font-size: 28rpx;
            color: $gray-4;
        }
    }

    .btns {
        @include flex-align;
        height: 120rpx;
        margin-top: 32rpx;
        border-top: 1px solid $gray-3;
        background-color: $white-1;
        > view {
            flex: 1;
            @include flex-center;
            height: 80rpx;
            gap: 8rpx;
        }
    }
}
</style>
