<template>
	<uv-navbar leftIcon="" :safeAreaInsetTop="true" :fixed="false" bgColor="#09b4f1">
	<!-- 	<view class="slot-wrap "> -->
		<template v-slot:center>
				<uv-search placeholder="请输入搜索客户名称" v-model="keyword" bgColor="#ffffff" :showAction="false" :customStyle="customStyle" @focus="onSearch"></uv-search>
		</template>

	<!-- 	</view> -->
     </uv-navbar>

	<view class="container">
		<!-- 浮动顶部导航 -->

		<view class="top" style="background-color: #09b4f1;">
			<view class="statusBar" :is-back="false" style="height: 30rpx;" ></view>
		</view>
		<!-- 待办 -->
		<view class="notice">
			<uv-grid :col="4" :border="false">
				<uv-grid-item v-for="(item,index) in toolIcons" :key="index" @click="gopage(item.url)">
					<uv-icon :name="item.icon" :size="30"></uv-icon>
					<text class="p-1 font-size-sm">{{item.name}}</text>
				</uv-grid-item>
			</uv-grid>
		</view>
		<!-- 工具项 -->
		<view class="region mt-3">
			<view class="title flex">
				<text>常用功能</text>
			</view>
			<uv-grid :col="4" :border="false" @click="onGrid" >
				<uv-grid-item v-for="(item, index) in toolIcons2" :key="index" :customStyle="customStyle2" @click="item.name == '客户' ? gopage2(item.url) : gopage(item.url)">
					<uv-icon  :name="item.icon" :size="30" ></uv-icon>
					<text class="p-1 font-size-sm">{{ item.name }}</text>
				</uv-grid-item>
			</uv-grid>
		</view>
		
		<view class="region mt-3" style="margin-top: 20rpx;">
			<view class="title flex">
				<text>数据简报</text>
			</view>
			<uv-grid :col="3" :border="false" @click="onGrid" >
				<uv-grid-item v-for="(item, index) in toolIcons3" :key="index" :customStyle="customStyle2">
					<text class="p-1 font-size-sm">{{ item.name }}</text>
					<text class="p-1 font-size-sm">{{ item.count }}</text>
				</uv-grid-item>
			</uv-grid>
		</view>


	
	</view>
</template>

<script setup>
import {ref,computed} from 'vue'
import { onLoad,onShow} from '@dcloudio/uni-app'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import {
  indexCount
} from '@/api/index'
const main = useMainStore()
const statusBarHeight = ref(0)
statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
const customStyle = computed(() =>{
	return {
		  paddingLeft:'20rpx',
		  paddingRight:'180rpx'
		}
})
const customStyle2 = computed(() =>{
	return {
		  paddingBottom:'40rpx',
		 // paddingRight:'180rpx'
		}
})
const toolIcons = ref([
		{
			name: '公海客户',
			icon: '/static/images/index002.png',
			url: '/pages/components/pages/customer/open',
		},
		{
			name: '线索',
			icon: '/static/images/index003.png',
			url: '/pages/components/pages/clues/index',
		},
		{
			name: '跟进记录',
			icon: '/static/images/index004.png',
			url: '/pages/components/pages/record/index',
		},
		{
			name: '合同',
			icon: '/static/images/index006.png',
			url: '/pages/components/pages/contract/index',
		}
])

const toolIcons2 = ref([
		{
			name: '客户',
			icon: '/static/images/1.png',
			url: '/pages/customer/index',
		},
		{
			name: '商机',
			icon: '/static/images/2.png',
			url: '/pages/components/pages/business/index',
		},
		{
			name: '线索池',
			icon: '/static/images/3.png',
			url: '/pages/components/pages/clues/open',
		},
		{
			name: '联系人',
			icon: '/static/images/4.png',
			url: '/pages/components/pages/contacts/index',
		},
		{
			name: '回款',
			icon: '/static/images/5.png',
			url: '/pages/components/pages/receivables/index',
		},
		{
			name: '查重',
			icon: '/static/images/6.png',
			url: '/pages/components/pages/customer/repeat',
		},
		{
			name: '发票',
			icon: '/static/images/7.png',
			url: '/pages/components/pages/invoice/index',
		},
		{
			name: '产品',
			icon: '/static/images/8.png',
			url: '/pages/components/pages/product/index',
		},
])

const countData = ref({})

const toolIcons3 = ref([
		{
			name: '新增商机',
			count: 0,
		},
		{
			name: '新增线索',
			count: 0,
		},
		{
			name: '新增客户',
			count: 0,
		},
		{
			name: '新增跟进',
			count: 0,
		},
		{
			name: '新增合同',
			count: 0,
		},
		{
			name: '合同金额',
			count: 0,
		},
		{
			name: '回款金额',
			count: 0,
		},
		{
			name: '新增联系人',
			count: 0,
		},
		{
			name: '客户成交量',
			count: 0,
		},
		{
			name: '客户未成交量',
			count: 0,
		},
		{
			name: '商机成交量',
			count: 0,
		},
		{
			name: '商机未成交量',
			count: 0,
		}
])



onShow(()=>{
	getData()
})

const getData = async() => {
	let data = await indexCount()
	let brieCount= data.brieCountVO
	toolIcons3.value[0].count = brieCount.count01
	toolIcons3.value[1].count = brieCount.count02
	toolIcons3.value[2].count = brieCount.count03
	toolIcons3.value[3].count = brieCount.count04
	toolIcons3.value[4].count = brieCount.count05
	toolIcons3.value[5].count = brieCount.count06
	toolIcons3.value[6].count = brieCount.count07
	toolIcons3.value[7].count = brieCount.count08
	toolIcons3.value[8].count = brieCount.count09
	toolIcons3.value[9].count = brieCount.count10
	toolIcons3.value[10].count = brieCount.count11
	toolIcons3.value[11].count = brieCount.count12
	main.SET_INDEX_COUNT(data)
	let count = data.contractCheckCount + data.invoiceCheckCount + data.receivablesCheckCount + data.followBusinessCount + data.followCluesCount + data.followCustomerCount
	//let str = count > 0 ? count + '' : ''
	if(count > 0){
		uni.setTabBarBadge({
		  index: 2,
		  text: count + ''
		})
	}
	
	
}

	
const onSearch = () => {
	gopage2('/pages/customer/index')
}

const gopage = (url) => {
	uni.navigateTo({
		url
	})
}

const gopage2 = (url) =>{
	uni.switchTab({
		url
	}) 

}



</script>

<style lang="scss" scoped>
.container {
	background-color: #F7F7F7 !important;
	padding-bottom: 50px;
	min-height: 100vh;
}
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
.top {
	height: 110rpx;
	/* #ifdef H5 */
	height: 360rpx;
	/* #endif */
	color: #fff;
	// background-image: linear-gradient(#FF7E69, #FE644A);
}

.share {
	border: 1px solid #fff;
	border-radius: 5px;
	padding: 15rpx 30rpx;
}
.notice {
	margin: -56px 8px 10px 8px;
	left: 0;
	right: 0;
	background-color: #fff;
	border-radius: 10px;
	padding: 15px 0px;
	.title {
		padding: 20rpx;
		font-size: 30rpx;
		font-weight: 500;
		justify-content: space-between;
	}
}
.region {
	background-color: #fff;
	border-radius: 12px;
	margin: 0 10px;
	padding: 8px 5px;
	.title {
		padding: 28rpx 20rpx;
		font-size: 30rpx;
		font-weight: 500;
		justify-content: space-between;
	}
	.plus {
		background-color: #FFF0ED;
    border-radius: 10rpx;
    padding: 15rpx;
	}
	.nape {
		width: 48%;
		border-radius: 8px;
		background-color: #FBFBFB;
		padding: 30rpx 20rpx 30rpx 35rpx;
		margin-bottom: 15rpx; 
		&:nth-child(2n+1){
			margin-right: 4%;
		}
	}
}
.item-padding {
	padding: 45rpx 0;
}
.gray {
	color: #BFBFBF;
}
.slot-wrap {
	display: flex;
	align-items: center;
	padding: 0 30rpx;
}
.statusBar {
	position: relative;
}
.arrow-icon {
	position: absolute;
	bottom: 16px;
	left: 10px;
}
// /deep/ .u-avatar {
// 	display: block !important;
// }
// 图表样式
/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
.charts-box{
	.charts {
		width: 100%;
		height:300px;
	}
	.introduce {
		justify-content: space-between;
		padding: 45rpx 12px;
		.text {
			font-size: 30rpx;
			font-weight: 500;
		}
		.screen {
			font-size: 30rpx;
			font-weight: 500;
			background-color: #fff;
			padding: 10rpx 32rpx;
    	border-radius: 60rpx;
		}
	}
	.target {
		margin-top: -60rpx;
		justify-content: space-around;
		.text {
			background-color: #D7D7D7;
			font-size: 25rpx; 
			padding: 10rpx 20rpx;
    	border-radius: 20rpx;
		}
	}
}
// /deep/.left-icon .u-size-mini {
// 	display: block;
// }
// /deep/ .u-model__footer__button {
// 	height: auto !important;
// 	line-height: inherit !important;
// }
// /deep/ .u-border-top:after {
//     border-top-width: 0;
// }
.privacy_block {
	padding: 15px 20px;
	font-size: 14px;
  line-height: 24px;
  text-align: justify;
}
.disagree-btn {
	border-radius: 100px;
  color: #323233;
  background-color: #fff;
  padding: 0 12px;
  font-size: 14px;
  height: 40px;
  width: 100%;
	border: none;
}

.agree-btn {
  border-radius: 100px;
  color: white;
  background-color: #F15A24;
  border-color: #F15A24 !important;
  border-width: 1px !important;
  border-style: solid !important;
  padding: 0 12px;
  font-size: 14px;
  height: 40px;
  width: 100%;
}
.disagree-btn::after, .agree-btn::after {
  border: none;
}
.modal_btn {
	padding: 0 30px 15px;
}
</style>