<template>
    <div>
        <uni-swipe-action ref="swiper_action">
            <uni-swipe-action-item :right-options="options" v-for="item in customerList" :key="item.id"
                @click="handlerRemoveCustomer(item)" class="swipe-action-item" :threshold="5">
                <uni-card :title="item.name" :extra="item.created_at" margin="5px" padding="0px"
                    @click="redirectCustomerDetailPage(item)">
                    <!-- <uni-group> -->
                    <view class=" card-actions">
                        <text class="subtitle font-size-base">所在地区：<text class="paragraph font-size-sm">{{
                                item.region_name }}</text></text>
                        <text class="subtitle font-size-base">所属行业：<text class="paragraph font-size-sm">{{
                                item.industry_name }}</text></text>
                    </view>
                    <view class="font-size-sm card-actions ">
                        <text class="subtitle font-size-base">客户级别：<text class="paragraph font-size-sm">{{
                                item.level_name }}</text></text>
                    </view>
                    <!-- </uni-group> -->
                    <view slot="actions" class="card-actions border-top">
                        <text class="subtitle font-size-base">联系人：<text class="paragraph font-size-sm">{{ item.link_man
                                || '暂无' }}</text></text>
                        <text class="subtitle font-size-base">联系电话：<text class="paragraph font-size-sm">{{
                                item.link_phone || '暂无' }}</text></text>
                    </view>
                </uni-card>
            </uni-swipe-action-item>
        </uni-swipe-action>
    </div>
</template>


<script lang="ts">
export default {
    options: {
        styleIsolation: 'apply-shared', //解除样式隔离
    }

}
</script>
<script setup lang="ts">
import { removeCustomer } from '@/api/biz/customer';
import { useEmitt } from '@/logics/mitt/useEmitt';
import { Customer } from '@/types/customer';
const swiper_action = ref()
const options = [
    {
        text: '删除',
        style: {
            backgroundColor: '#dd524d',
            margin: "5px 0"
        }
    }
]
defineProps({
    customerList: {
        type: Array as PropType<Customer[]>,
        required: true
    }
})

const { emitter } = useEmitt()

const handlerRemoveCustomer = async (item: Customer) => {
    uni.showModal({
        title: '警告',
        content: `是否删除客户：${item.name}`,
        success: async (res: { confirm: boolean }) => {
            const { confirm } = res;
            if (confirm) {
                await removeCustomer(item.id)
                // props.customerList = p
                emitter.emit('remove_customer', item.id)
                // return uni.navigateBack()
            }
        }
    })
    swiper_action.value?.closeAll()
}
// 跳转客户详情
const redirectCustomerDetailPage = async (item: Customer) => {
    uni.navigateTo({ url: `/pages/profile/customer/detail?id=${item.id}` })
} 
</script>
<style scoped lang="scss">
:deep(.uni-swipe_button-group) {
    top: 5px;
    bottom: 5px;
}

.uni-mt-5 {
    margin-top: 5px;
}

.border-top {
    border-top: 1px #eee solid;
}

.card-actions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    // align-items: center;
    height: 25px;
    line-height: 25px;
    font-size: $uni-font-size-sm;
    padding: 5px 10px;

}

.font-size-sm {
    font-size: $uni-font-size-sm;
}

.font-size-base {
    font-size: 26rpx;
}

.paragraph {
    /* color: $uni-color-paragraph;*/
    color: #b2a9a6;
    font-weight:600;
}

.subtitle {
   /* color: $uni-color-subtitle*/
   color: #b2a9a6;
}
</style>