<template>
    <up-popup :show="show" mode="right" @close="close">
        <view class="w-680 p-rtv" style="height: 100vh">
            <z-paging ref="paging" v-model="list" bgColor="#f7f7f7" :fixed="false" @query="query" safe-area-inset-bottom>
                <template #top>
                    <up-navbar :fixed="false" border>
                        <template #left>
                            <view class="f-s-34 c-#333 f-w-500">{{ title }}</view>
                        </template>
                    </up-navbar>
                    <view class="pd3-10-24-10">
                        <ut-tabs :tabs="[{ label: '全部', value: '' }, ...pt_cus_type]" v-model="form.cusType" @change="onRefresh"></ut-tabs>
                        <view class="pd-10"></view>
                        <ut-search ref="searchRef" v-model="form.keyword" @search="onRefresh" margin="0" :border="false" placeholder="搜委托单位名称、代码" bgColor="#fff" height="86rpx" borderRadius="10rpx"></ut-search>
                    </view>
                </template>
                <template>
                    <view class="pd-24">
                        <template v-for="item in list" :key="item?.id">
                            <view @click="clickRow(item)" class="b-radius bg-#fff pd-24 p-rtv select-item mb-20" :class="{ active: item?.id === checkedId }">
                                <view class="d-flex j-sb a-c li-item-head mb-16">
                                    <view class="li-left-tag">{{ selectDictLabel(pt_cus_type, item?.cusType) }}</view>
                                    <view class="f-s-22 c-#666">{{ item?.updateTime || item?.createTime }}</view>
                                </view>
                                <view class="f-s-34 c-#333 f-w-500">{{ item?.cusName }}</view>
                                <view class="f-s-24 c-#666">{{ item?.cusCode }}</view>
                                <view class="pd-5"></view>
                                <view class="f-s-28 pd2-5-0">
                                    <span class="c-#666">联系电话：</span>
                                    <span class="c-#333 f-w-600">{{ item?.contactTel }}</span>
                                </view>
                                <image v-if="item.id === checkedId" class="w-40 h-40 checked-icon" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-lm/price/checked1.png" mode="widthFix" />
                            </view>
                        </template>
                    </view>
                </template>
                <!-- 空数据处理 -->

                <template #empty>
                    <ut-empty class="mg-at" size="28rpx" color="#999" padding="10rpx">暂无往来单位信息，点击＋号新增吧</ut-empty>
                </template>
                <template #bottom>
                    <view class="pd-24 bg-#fff d-flex">
                        <up-button @click="close" class="mr-30" color="#F2F2F2" style="color: #333">取消</up-button>
                        <up-button @click="confirmSelection" type="primary">确认选择</up-button>
                    </view>
                </template>
            </z-paging>
        </view>
    </up-popup>
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { pt_cus_type, pt_cpy_type } = toRefs<any>(proxy?.useDict('pt_cus_type', 'pt_cpy_type'));
const paging = ref();
const props = defineProps({
    params: {
        type: Object,
        default: () => ({}),
    },
    show: {
        type: Boolean,
        default: false,
    },
    title: {
        type: String,
        default: '选择往来单位',
    },
});

const form = ref({
    keyword: '',
    cusType: '',
});
const checkedId = ref(null);
const checkedInfo = ref<any>(null);
const emit = defineEmits(['update:show', 'confirm']);
const list = ref<any[]>([]);
const query = async (pageNum: number, pageSize: number) => {
    const params = {
        pageNum,
        pageSize,
        ...props.params,
        ...form.value,
    };
    const res = await useClientRequest.get<any>('/plt-api/app/customer/list', params);
    if (!res || res.code !== 200) return;
    const { rows } = res;
    paging.value?.complete(rows);
};
const confirmSelection = () => {
    if (checkedInfo.value) {
        emit('confirm', checkedInfo.value);
        close();
    } else {
        uni.showToast({
            title: '请' + props.title,
            icon: 'none',
        });
    }
};
const clickRow = (item: any) => {
    checkedId.value = item.id;
    checkedInfo.value = item;
};
const close = () => {
    emit('update:show', false);
};
const onRefresh = () => {
    paging.value?.reload();
};
</script>
<style scoped lang="scss">
.li-item-head {
    margin-left: -24rpx;
    margin-top: -24rpx;
}
.li-left-tag {
    padding: 4rpx 12rpx;
    background-color: #ebf6ee;
    color: #37a954;
    border-radius: 16rpx 0 16rpx 0;
    font-size: 20rpx;
    font-weight: 500;
}
.select-item {
    border: 1rpx solid #fff;

    &.active {
        border-color: $u-primary;
        background-color: rgba($u-primary, 0.1);
    }
    .checked-icon {
        position: absolute;
        right: 0;
        bottom: 0;
    }
}
</style>
