<template>
	<view class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden">

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="getHotlineListFn">
			<view class="hotline-wrap">
				<view v-for="(item,index) in list" :key="index" class="bg-white py-[30rpx] px-[30rpx] rounded-[20rpx] m-[30rpx]">
					<view class="flex">
						<image :src="img(item.image)" class="w-[60rpx] h-[60rpx] rounded-[30rpx]" />
						<view class="leading-[60rpx] text-[30rpx] font-bold ml-[20rpx]">{{item.name}}</view>
					</view>
					<view class="text-[var(--text-color-light9)] mt-[20rpx]">
						联系人：<text>{{item.contacts}}</text>
					</view>
					<view class="flex mt-[20rpx]">
						<view class="leading-[60rpx]">
							{{item.phone}}
						</view>
						<view class="ml-auto primary-btn-bg text-[#ffffff] h-[60rpx] leading-[60rpx] rounded-[30rpx] px-[30rpx]" @click="callPhone(item.phone)">立即联系</view>
					</view>
				</view>
			</view>
			<mescroll-empty :option="{tip : '暂无数据'}" v-if="!list.length && loading"></mescroll-empty>
		</mescroll-body>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { img, redirect } from '@/utils/common';
import { getHotlineList  } from '@/addon/xypm/api/content';
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app';

const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
let list = ref<Array<Object>>([]);
let loading = ref<boolean>(false);

onLoad(() => {});

const getHotlineListFn = (mescroll) => {
	loading.value = false;
	let data: object = {
		page: mescroll.num,
		limit: mescroll.size,
	};

	getHotlineList(data).then((res) => {
		let newArr = (res.data.data as Array<Object>);
		//设置列表数据
		if (mescroll.num == 1) {
			list.value = []; //如果是第一页需手动制空列表
		}
		list.value = list.value.concat(newArr);
		mescroll.endSuccess(newArr.length);
		loading.value = true;
	}).catch(() => {
		loading.value = true;
		mescroll.endErr(); // 请求失败, 结束加载
	})
}

//拨号
const callPhone = (phoneNumber: string) =>{
	uni.makePhoneCall({
		phoneNumber: phoneNumber
	});
}

</script>
<style>
	@import '@/addon/xypm/styles/common.scss';
</style>
