<template>
	<view class="app-container">
		<up-navbar placeholder :leftIconSize="0" bgColor="transparent" />
		<view class="car_list">
			<view class="title">车辆管理</view>
			<carCard v-for="carItem in carList" :key="carItem.id" :tipContent="carItem.status" :carInfo="carItem">
				<template #header>
					<navTop :carNum="carItem.licensePlateNumber" />
				</template>
				<template #center>
					<centerLine :leftContent="carItem.frameNumber" fontColor="#999" :rightContent="carItem.engineNumber"></centerLine>
				</template>
				<template #footer>
					<view style="color: #3680FE;font-size: 24rpx;" @click="lookCarInfo(carItem.id)">查看详情</view>
				</template>
			</carCard>
			<view class="addBtn" @click="addCarInfo">登记车辆保险信息</view>
		</view>
		
		<!-- 背景 -->
		<view class="bg_bx">
			<image class="bgImg" src="@/static/commonImage/bg_bx_1.jpg" mode="widthFix"></image>
		</view>
		
		<up-popup :show="userStore.isShowAdver" mode="center" :safeAreaInsetBottom="false" round="20" @close="userStore.isShowAdver = false">
			<view class="notice">
				<view class="notice_title">{{ advertisingTitle }}</view>
				<view class="notice_content">
					<up-parse :content="advertisingContent"></up-parse>
				</view>
				<view class="btn" @click="confirm">确认</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'
import { getUserCarInfo, getAdverList } from '@/api/user.js'
import { queryMyList } from '@/api/work.js'
import carCard from '@/components/carCard.vue';
import centerLine from '@/components/centerLine.vue';
import navTop from '@/components/navTop.vue';
import useUserStore from '@/store/modules/user';
const carList = ref([])
const advertisingTitle = ref('')
const advertisingContent = ref('')
const myTotal = ref('0')
const userStore = useUserStore()
const queryParams = reactive({
	pageNum: 1,
	pageSize: 20
})
const getMyList = async () => {
	const { data } = await getUserCarInfo(queryParams)
	carList.value = data.records
	const { data: peopleList } = await queryMyList({
		pageNum: 1,
		pageSize: 20,
		type: 1
	})
	const { data: buinessList } = await queryMyList(queryParams)
	myTotal.value = (peopleList.total + buinessList.total).toString()
}
const addCarInfo = () => {
	uni.navigateTo({
		url: '/pages/carDetail/carDetail' 
	})
}
const lookCarInfo = (id) => {
	uni.navigateTo({
		url: `/pages/carDetail/carDetail?carInfoId=${id}`
	})
}
const confirm = () => {
	userStore.isShowAdver = false
}
// 获取广告列表
const getNoticeDetail = async () => {
	const { rows } = await getAdverList(queryParams)
	advertisingContent.value = rows[0].noticeContent
	advertisingTitle.value = rows[0].noticeTitle
	userStore.isShowAdver = true
}
getNoticeDetail()
// 用户下拉刷新
onPullDownRefresh(async () => {
	carList.value = []
	//调用获取数据方法
	 await getMyList()
	 uni.stopPullDownRefresh()
})
onShow(async () => {
	await getMyList()
	if(myTotal.value !== '0') {
		uni.setTabBarBadge({
		  index: 1,
		  text: myTotal.value
		})
	}else {
		uni.removeTabBarBadge({
			index: 1
		})
	}
})
</script>

<style lang="scss" scoped>
.app-container{
	width: 100%;
	min-height: 100vh;
	padding: 0 30rpx 30rpx;
	background: url('http://bxhd.crgx.net/profile/avatar/2024/09/25/bg-index_20240925113012A004.png') no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
	background-attachment: fixed;
	.car_list{
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		z-index: 10;
		.title{
			font-size: 32rpx;
			line-height: 42rpx;
			color: #fff;
		}
		.addBtn{
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			color: #3d3d3d;
			font-weight: 500;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06);
			border-radius: 20rpx;
		}
	}
}
.notice{
	position: relative;
	width: 690rpx;
	height: 600rpx;
	background: #FFFFFF;
	padding: 40rpx 30rpx 0;
	border-radius: 20rpx;
	overflow: hidden;
	.notice_title{
		text-align: center;
		font-size: 36rpx;
		line-height: 48rpx;
		color: #3D3D3D;
		margin-bottom: 40rpx;
	}
	.notice_content{
		font-size: 28rpx;
		line-height: 38rpx;
		height: 375rpx;
		color: #999;
		overflow-y: scroll;
		image{
			width: 100%;
		}
	}
	.btn{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		line-height: 100rpx;
		text-align: center;
		height: 100rpx;
		color: #3680FE;
		font-size: 28rpx;
		background-color: #fff;
		border-top: 2rpx solid #eee;
	}
}

.bg_bx{
	position: fixed;
	bottom: 100rpx;
	left: 50%;
	transform: translateX(-50%);
	.bgImg{
		width: 400rpx;
	}
}
</style>