<template>
	<!-- 水印 -->
	<view v-if="$isVip()">
		<watermark dark="light" source="uni_alipay_other_call" />
		<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_other_call')">
			<image src='/static/lottie/watermark.gif' mode="widthFix" style="width:94px;height:74px;" ></image>
		</liu-drag-button>
	</view>
	<view class="container">
		<!-- 自定义头部导航栏 -->
		<ZdyNavbar tipLayerText="新增记录" :isTipLayer="true" :type="data.type" :scrollTop="data.scrollTop" @click="open" />
		<ZdyHeader :type="data.type" />
		<callList :type="data.type" ref="callLogList"></callList>
		<tabbar :type="data.type" />
		<image v-if="data.type != 'ios'" :src="`/static/image/call/${data.type}BtnImg.png`" mode="" class="btnImg"
			:class="['btnImg_' + data.type]" :style="{'margin-bottom':$store.state.safeBottomAz+'px'}"></image>
	</view>
</template>

<script setup>
import ZdyNavbar from "@/components/call-log/nav-bar/nav-bar.vue"
import ZdyHeader from "@/components/call-log/header/header.vue"
import callList from "@/components/call-log/list/list.vue"
import tabbar from "@/components/call-log/tabbar/tabbar.vue"
import { util } from "@/utils/common.js"

import { ref, reactive, watch, nextTick, getCurrentInstance } from "vue";
import { onLoad, onShow, onReady, onPageScroll, onReachBottom } from "@dcloudio/uni-app";
const { appContext, proxy } = getCurrentInstance();
const data = reactive({
	type: 'vivo',
	scrollTop: 0
})
let callLogList = ref();
onLoad((option) => {
	data.type = option.type
})
onReady(() => {

})
onShow(() => {
	// #ifdef APP-PLUS&&!APP-HARMONY
	try {
		if (plus.os.name === 'Android') {
			let colorTabbar = "#FAFAFA"
			if (data.type == 'xiaomi' || data.type == 'oppo') {
				colorTabbar = "#FFFFFF"
			}
			console.log(colorTabbar);
			util.setAndroidSystemBarColor(colorTabbar)
			setTimeout(() => {
				plus.navigator.setStatusBarStyle("dark");
			}, 500)
		}

	} catch (error) {
		console.log("修改导航条颜色失败", error);
	}
	// #endif
})
onPageScroll((e) => {
	// console.log(e)
	data.scrollTop = e.scrollTop

})
onReachBottom(() => {

})
function open() {
	// console.log(callLogList.value)
	callLogList.value.openAddModal()
}
</script>

<style lang="scss">
page {
	background-color: #fff;
}

.btnImg {
	position: fixed;

}

.btnImg_vivo {
	width: 80px;
	height: 96px;
	left: 40px;
	bottom: 130px;
}

.btnImg_huawei {
	width: 54px;
	height: 54px;
	left: calc(50% - 27px);
	bottom: 65px;
}

.btnImg_oppo {
	width: 58px;
	height: 58px;
	right: 20px;
	bottom: 100px;
}

.btnImg_xiaomi {
	width: 55px;
	height: 55px;
	right: 34px;
	bottom: 100px;
}
</style>