<template>
    <view class="client-detail">
        <view class="client-card">
            <view class="title">
                <text>广东星星新能源有限公司</text>
                <view class="icon" @click="handleEditClient">
                    <TIcon name="icon-edit" :size="20" />
                </view>
            </view>
            <view class="info">
                <text>联系人：kaeery</text>
                <text>联系电话：18138952909</text>
                <text>联系地址：广东省广州市增城区东进商城</text>
            </view>
        </view>
        <u-sticky bgColor="#fafafe">
            <u-tabs
                :list="tabList"
                v-model:current="curTab"
                :scrollable="scrollable"
                itemStyle="height:44px;flex:1;white-space:nowrap;"
                :activeStyle="{
                    color: '#0e66fb'
                }"
                @change="handleSelectTab"
            ></u-tabs>
        </u-sticky>
        <view style="flex: 1; overflow: auto">
            <ClientBaseInfo v-if="curTab === 0" />
            <ClientContactInfo v-if="curTab === 1" />
            <ClientDeviceInfo v-if="curTab === 2" />
            <ClientContractInfo v-if="curTab === 3" />
        </view>
    </view>
</template>

<script setup lang="ts">
import { useAppStore } from '@/stores/app'
import { storeToRefs } from 'pinia'
import { computed, reactive, ref } from 'vue'
import ClientBaseInfo from './components/client-base-info.vue'
import ClientContactInfo from './components/client-contact-info.vue'
import ClientDeviceInfo from './components/client-device-info.vue'
import ClientContractInfo from './components/client-contract-info.vue'
import { useClientCommon } from '@/pages/salesman/client/hooks'

const { handleEditClient } = useClientCommon()
const appStore = useAppStore()
const { sysInfo } = storeToRefs(appStore)
const scrollable = computed(() => sysInfo.value.screenWidth < 375) // 屏幕尺寸过小时，tabs需要滚动

const tabList = reactive([
    { name: '详细信息' },
    { name: '客户联系人' },
    { name: '客户设备' },
    { name: '合同记录' }
])
const curTab = ref(0)
const handleSelectTab = item => {
    const { index } = item
    curTab.value = index
}
</script>

<style lang="scss" scoped>
.client-detail {
    width: 100%;
    height: 100vh;
    background-color: $gray-1;
    @include flex-direction;
    .client-card {
        height: 300rpx;
        padding: 32rpx;
        background-color: $white-1;
        .title {
            @include flex-justify;
        }
        .icon {
            width: 60rpx;
            height: 60rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .info {
            @include flex-direction;
            gap: 20rpx;
            margin-top: 32rpx;
            font-size: 28rpx;
            color: $gray-2;
        }
    }
}
</style>
