<template>
    <AppLayout :title="title" :show-bg-image="false" @onScrollBottom="getDataList('add')">
        <template #headerleft>
            <view class="btnback">
                <image src="@/static/icon/back.png" @click="navBack"></image>
            </view>
        </template>
        <template #headContent>
            <view class="collection-search">
                <view class="search-content">
                    <view class="header-input button-click">
                        <uni-icons class="iconsearch" color="#6A6A6A" type="search" size="22"></uni-icons>
                        <input
                            class="input"
                            @confirm="searchCollection"
                            placeholder="输入企业名称"
                            placeholder-class="inputplace"
                        />
                    </view>
                </view>
            </view>
        </template>
        <view class="main-list">
            <renderCompanys
                v-if="pageState.list.length"
                :list="pageState.list"
                :longitude="longitudeVal"
                :latitude="latitudeVal"
            ></renderCompanys>
            <empty v-else pdTop="200"></empty>
        </view>
    </AppLayout>
</template>

<script setup>
import { inject, ref, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
const { $api, navTo, navBack } = inject('globalFunction');
import useLocationStore from '@/stores/useLocationStore';
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
// state
const title = ref('事业单位');
const cardInfo = ref({});
const pageState = reactive({
    page: 0,
    list: [],
    total: 0,
    maxPage: 1,
    pageSize: 10,
    search: {},
});

onLoad(() => {
    const options = uni.getStorageSync('jinxuan');
    if (options) {
        cardInfo.value = options;
        title.value = options.name;
    } else {
        $api.msg('请传入精选企业参数');
    }
    getDataList('refresh');
});

// search
function searchCollection(e) {
    const value = e.detail.value;
    pageState.search.companyName = value;
    getDataList('refresh');
}

// list
function getDataList(type = 'add') {
    if (type === 'refresh') {
        pageState.page = 1;
        pageState.maxPage = 1;
    }
    if (type === 'add' && pageState.page < pageState.maxPage) {
        pageState.page += 1;
    }
    let params = {
        current: pageState.page,
        pageSize: pageState.pageSize,
        cardId: cardInfo.value.companyCardId,
        ...pageState.search,
    };
    $api.createRequest('/app/company/label', params).then((resData) => {
        const { rows, total } = resData;
        if (type === 'add') {
            const str = pageState.pageSize * (pageState.page - 1);
            const end = pageState.list.length;
            const reslist = rows;
            pageState.list.splice(str, end, ...reslist);
        } else {
            pageState.list = rows;
        }
        pageState.total = resData.total;
        pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
    });
}
</script>

<style lang="stylus" scoped>
.btnback{
    width: 64rpx;
    height: 64rpx;
}
.btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 52rpx;
    height: 52rpx;
}
image {
    height: 100%;
    width: 100%;
}
.collection-search{
    padding: 10rpx 20rpx;
    .search-content{
        position: relative
        display: flex
        align-items: center
        padding: 14rpx 0
        .header-input{
            padding: 0
            width: calc(100%);
            position: relative
            .iconsearch{
                position: absolute
                left: 30rpx;
                top: 50%
                transform: translate(0, -50%)
            }
            .input{
                padding: 0 30rpx 0 80rpx
                height: 80rpx;
                background: #FFFFFF;
                border-radius: 75rpx 75rpx 75rpx 75rpx;
                border: 2rpx solid #ECECEC
                font-size: 28rpx;
            }
            .inputplace{
                font-weight: 400;
                font-size: 28rpx;
                color: #B5B5B5;
            }
        }
    }
}
.main-list{
    background-color: #F4F4F4;
    padding: 1rpx 28rpx 28rpx 28rpx
}
</style>
