<template>
	<view class="page flex-col">
		<view class="section_1 flex-col">
			<view class="section_3 flex-col">
				<view class="w700 flex-row align-center justify-between padding-left padding-right radius"
					style="margin:20rpx auto 0;height: 180rpx;background-image: linear-gradient(-81deg,rgba(255, 255, 255, 1) 0,rgba(255, 255, 255, 1) 0,rgba(225, 235, 255, 1) 100%,rgba(225, 235, 255, 1) 100%);"
					@click="this.$tab.navigateTo('/subNoticePages/list/list?noticeType=1')">
					<u--image :src="imagesUrl+'notice.png'" width="127rpx" height="123rpx"></u--image>
					<view class="margin-top" style="width: 480rpx;">
						<u-notice-bar :text="notice" direction="column" speed="250" color="#000" bgColor="none"
							icon="false" fontSize="32rpx" :customStyle="{}"></u-notice-bar>
						<text class="text-lg text-bold">{{notice.noticeTitle}}</text>
					</view>
				</view>
				<view class="group_3 flex-col" @click="getdetlis()">
					<u--image :src="imagesUrl+'guide.png'" width="730rpx" height="207rpx" @click="click"></u--image>
				</view>
				<view class="group_5 flex justify-between flex-wrap">
					<view style="margin-left: 22rpx;" @click="this.$tab.navigateTo('/subCarPages/buy/buy')">
						<u--image :src="imagesUrl+'buy.png'" width="325rpx" height="170rpx"></u--image>
					</view>
					<view style="float: right;" @click="this.$tab.navigateTo('/subCarPages/sell/sell')">
						<u--image :src="imagesUrl+'sell.png'" width="325rpx" height="170rpx"></u--image>
					</view>
					<view style="margin-left: 22rpx;" @click="this.$tab.navigateTo('/subCarPages/userPost/userPost')">
						<u--image :src="imagesUrl+'car1.png'" width="325rpx" height="170rpx"></u--image>
					</view>
					<view style="float: right;"
						@click="this.$tab.navigateTo('/subInspectionPages/details/details?id=888')">
						<u--image :src="imagesUrl+'guohu.png'" width="325rpx" height="170rpx"></u--image>
					</view>
				</view>
			</view>
			<view class="section_4 flex-col">
				<view class=" w700 flex-row justify-between align-end" style="margin: 0 auto;height: 70rpx;">
					<view class="box_2 flex-row align-end justify-between">
						<image class="image_8" :src="imagesUrl+'reg.png'" v-show="tab1Show" />
						<text class="tab_text" v-show="tab2Show" @click="changeTab(2)">注册经销商</text>
						<image class="image_9" :src="imagesUrl+'user_post.png'" v-show="tab2Show" />
						<text class="tab_text" v-show="tab1Show" @click="changeTab(1)">会员发布</text>
					</view>
					<view class="margin-left" @click="this.$tab.navigateTo('/subCarPages/buyList/buyList')">
						<text>二手车求购信息</text>
					</view>

				</view>
				<view class="box_3 flex-col" :style="{marginLeft:tab1Show ? '35rpx' :'200rpx' }"></view>
				<view class="box_4 flex-row">
					<u-search placeholder="品牌/车系/型号" v-model="keyword" :clearabled="true" @search="filterList"
						@clear="filterList" :show-action="false"></u-search>
				</view>

				<view class="box_5 flex-row justify-between">
					<view class="image-text_4 flex-col">
						<view class="flex-row justify-between" @click="showPriceDownList">
							<text class="text-group_4">排序</text>
							<image class="thumbnail_3" :src="imagesUrl+'downarr.png'" />
						</view>
						<view class="downList flex-row  flex-wrap" v-show="priceDownListShow">
							<view class="btn" :style="{ 'background': orderBy == 'priceAsc' ? '#feebb2' :''}"
								@click="orderBySelect('priceAsc')">
								<text>价格最低</text>
							</view>
							<view class="btn" :style="{ 'background': orderBy == 'priceDesc' ? '#feebb2' :''}"
								@click="orderBySelect('priceDesc')">
								<text>价格最高</text>
							</view>
							<view class="btn" :style="{ 'background': orderBy == 'kilometersAsc' ? '#feebb2' :''}"
								@click="orderBySelect('kilometersAsc')">
								<text>里程最少</text>
							</view>
							<view class="btn" :style="{ 'background': orderBy == 'kilometersDesc' ? '#feebb2' :''}"
								@click="orderBySelect('kilometersDesc')">
								<text>里程最多</text>
							</view>
							<view class="btn" :style="{ 'background': orderBy == 'carRecordDateDesc' ? '#feebb2' :''}"
								@click="orderBySelect('carRecordDateDesc')">
								<text>车龄最短</text>
							</view>
							<view class="btn" :style="{ 'background': orderBy == 'carRecordDateAsc' ? '#feebb2' :''}"
								@click="orderBySelect('carRecordDateAsc')">
								<text>车龄最长</text>
							</view>
							<view class="btn" style="align-self: flex-end;" @click="orderBySelect('')">
								<text>重置排序</text>
							</view>
						</view>
					</view>

					<view class="image-text_7 flex-col">
						<view class="flex-row justify-between" @click="showSelectDownList">
							<image class="label_2" :src="imagesUrl+'select.png'" />
							<text class="text-group_7">筛选</text>
						</view>

						<view v-show="selectDownListShow" class="flex-col "
							style="position:relative;top:20rpx; height: auto; left:-650rpx; width: 750rpx; padding: 10rpx; background-color: #fff; z-index: 9999; border-radius: 5rpx; text-align: left;">
							<view style="padding: 20rpx 0;">
								<view style="margin: 20rpx;">
									<text class="text-bold">价格区间</text>
								</view>
								<view style="margin: 20rpx;">
									<u-radio-group class="flex-row justify-between" style="width: 750rpx;"
										@change="setPriceRangeParams" placement="row">
										<u-radio size="30rpx" labelSize="30rpx" v-for="(item, index) in priceRange"
											shape="square" :key="index" :label="item.name" :name="item.value"
											:customStyle="{marginRight: '35rpx'}">
										</u-radio>
									</u-radio-group>
								</view>
							</view>
							<u-line></u-line>
							<view style="padding: 20rpx 0;">
								<view style="margin: 20rpx;">
									<text class="text-bold">公里数区间</text>
								</view>
								<view style="margin: 20rpx;">
									<u-radio-group class="flex-row justify-between" style="width: 750rpx;"
										@change="setKilometersParams" placement="row">
										<u-radio :labelDisabled="true" size="30rpx" labelSize="30rpx"
											v-for="(item, index) in kilometersRange" shape="square" :key="index"
											:label="item.name" :name="item.value" :customStyle="{marginRight: '35rpx'}">
										</u-radio>
									</u-radio-group>
								</view>
							</view>
							<u-line></u-line>
							<view style="padding: 20rpx 0;">
								<view style="margin: 20rpx; " class="flex-row justify-between">
									<u-button :plain="true" shape="circle" text="重置"
										@click="resetFilterList"></u-button>
									<u-button type="primary" shape="circle" text="确定" color="#ff5500"
										@click="filterList()"></u-button>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="carList" style="min-height: 250rpx;">
					<view class="w700" style="margin: 0 auto;">
						<u-loading-icon size="80" :show="loadingShow"></u-loading-icon>
					</view>

					<view class="goods" v-for="item,index in carList" :key="index" @click="goCarInfo(item.carId)">
						<u--image class="goodImg" radius="10rpx" width="330rpx" height="180rpx" :showLoading="true"
							:src=" baseUrl + firstSubstring(item.carPics)"></u--image>
						<view class="hot">
							<u--image :src=" imagesUrl + 'hot.png'" width="53rpx" height="30rpx"></u--image>
						</view>
						<view class="carTitle u-line-2">
							<text>
								{{ item.carBrand + item.carModel }}
							</text>
						</view>
						<view class="carAge">
							<text>
								{{ getDurationFromDate(item.carRecordDate) }}
							</text>
						</view>
						<view class="flex-row justify-between align-center">
							<view class="text-wrapper_4" v-if="item.carPrice == '面议'">
								<text class="text_10">价格面议</text>
							</view>
							<view v-else>
								<text class="text_11">{{ formatAmountToWan(item.carPrice) }}</text>
								<text class="text_12">万</text>
							</view>

							<view>
								<text class="text_11">{{ item.carKilometers }}</text>
								<text class="text_12">Km</text>
							</view>
						</view>
					</view>
				</view>
				<!-- <u-loadmore :status="status" /> -->
				<view class="jsx">
					<view class="xian"></view>
					<view class="dian">·</view>
					<view class="xian"></view>
				</view>
				<view class="q-box" @click="gettel()">
					<view class="baizi">{{rtel}}</view>
					<image :src="imagesUrl + 'carTel.png'" mode=""></image>
				</view>
				<view class="box_28 flex-row justify-between">
					<text class="text_70">免责声明</text>
					<image class="image_27" :src="imagesUrl+'mian.png'" />
				</view>
				<text class="paragraph_12">
					本平台仅提供交易信息，不对车辆进行任何评估或检测。请自行对车辆进行判断。
				</text>

			</view>
		</view>
		<!-- <view class="bai-yuan">
					<view style="width: 100%; text-align: center; line-height: 36px;">
						<uni-icons type="phone-filled" size="34" color="#4282D8"></uni-icons>
					</view>
			</view> -->
	</view>
</template>
<script>
	import Decimal from "decimal.js"; // 具体文件中引入

	export default {
		data() {
			return {
				imagesUrl: getApp().globalData.config.imagesUrl,
				baseUrl: getApp().globalData.config.baseUrl,
				notice: null,
				constants: {},
				status: 'loadmore',
				keyword: '',
				carType: '',
				indexList: [],
				priceRange: [{
						name: '5万以下',
						value: [0, 50000]
					},
					{
						name: '5-10万',
						value: [50001, 100000]
					},
					{
						name: '10-15万',
						value: [100001, 150000]
					}, {
						name: '15万以上',
						value: [150001, 9999999]
					}
				],
				priceRangeParams: [],
				kilometersRange: [{
						name: '3万以下',
						value: [0, 30000]
					},
					{
						name: '3-5万',
						value: [30001, 50000]
					},
					{
						name: '5-10万',
						value: [50001, 100000]
					}, {
						name: '10万以上',
						value: [100001, 9999999]
					}
				],
				kilometersParams: [],
				tab1Show: true,
				tab2Show: false,
				tab3Show: false,
				priceDownListShow: false,
				selectDownListShow: false,
				carList: [],
				orderBy: '',
				loadingShow: true,
				isLoadMore: false, //是否加载中
				params: {
					pageSize: 10,
					pageNum: 1,
				},
				rtel: '18715738821',
			};
		},

		onLoad() {
			this.getNotice();
			this.getCarList()
			this.getConfig()
		},
		onReachBottom() {
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.status = 'loading';
				this.isLoadMore = true
				this.params.pageNum++
				this.getCarList()
			}
		},
		methods: {
			async getConfig() {
				const res = await this.$request({
					url: '/system/shopconfig/listWx'
				})
				// console.log('电话号码', res.rows[0]);
				let num = res.rows[0].carTel
				this.rtel = this.addHyphenEveryThreeChars(num)
			},
			addHyphenEveryThreeChars(str) {
				let modifiedPhoneNumber = str.replace(/(\d{3})(\d{4})(\d{4})/, "$1-$2-$3");
				return modifiedPhoneNumber;
			},
			gettel() {
				uni.makePhoneCall({
					phoneNumber: this.rtel //仅为示例
				});
			},
			getdetlis() {
				uni.navigateTo({
					url: '/subCarPages/details/details'
				})
			},
			// 获取公告
			async getNotice() {
				const res = await this.$request({
					url: '/system/notice/listWx',
					data: {
						noticeType: 1,
						pageSize: 5
					}
				})

				let notice = []
				for (let i = 0; i < res.rows.length; i++) {
					notice.push(
						res.rows[i].noticeTitle
					)
				}
				this.notice = notice;
			},
			// 获取注册经销商二手车列表
			async getCarList() {
				let carType = this.tab1Show ? '经销商' : '会员'
				const res = await this.$request({
					url: '/system/car/listWx',
					data: {
						carBrand: this.keyword,
						orderBy: this.orderBy,
						carType,
						pageSize: this.params.pageSize,
						pageNum: this.params.pageNum,
						beginCarKilometers: this.kilometersParams.length > 0 ? this.kilometersParams[0] : '',
						endCarKilometers: this.kilometersParams.length > 0 ? this.kilometersParams[1] : '',
						beginCarPrice: this.priceRangeParams.length > 0 ? this.priceRangeParams[0] : '',
						endCarPrice: this.priceRangeParams.length > 0 ? this.priceRangeParams[1] : '',
					}
				})
				this.carList = this.carList.concat(res.rows);

				if (res.rows.length < this.params.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
					this.status = 'nomore';
					this.isLoadMore = true
				} else {
					this.isLoadMore = false
				}

				this.loadingShow = false
				// console.log(res);
			},
			// 筛选过滤
			filterList() {
				this.params.pageNum = 1
				this.carList = []
				this.getCarList()
				this.selectDownListShow = false
			},
			resetFilterList() {
				this.orderBy = ''
				this.params.pageNum = 1
				this.carList = []
				this.kilometersParams = []
				this.priceRangeParams = []
				this.getCarList()
				this.selectDownListShow = false
			},
			// 按逗号分隔字符串，获取第一个元素，用于图片展示
			firstSubstring(string) {
				if (string.includes(',')) {
					return string.split(',')[0];
				} else {
					return string;
				}
			},
			// 参数日期，获取据今天时间差
			getDurationFromDate(dateString) {
				// 将传入的日期字符串转换为 Date 对象
				var inputDate = new Date(dateString);

				// 获取当前日期
				var currentDate = new Date();

				// 计算年份差值
				var yearDiff = currentDate.getFullYear() - inputDate.getFullYear();

				// 计算月份差值
				var monthDiff = (currentDate.getMonth() + 1) - (inputDate.getMonth() + 1);

				// 如果月份差值为负数，年份差值减 1，月份差值加 12
				if (monthDiff < 0) {
					yearDiff--;
					monthDiff += 12;
				}

				// 判断年份等于 0 且月份不等于 0 的情况，只返回月份
				if (yearDiff === 0 && monthDiff !== 0) {
					return monthDiff + '个月';
				}

				// 判断年份等于 0 且月份等于 0 的情况，返回"准新车"
				if (yearDiff === 0 && monthDiff === 0) {
					return "准新车";
				}

				// 返回年份和月份
				return yearDiff + '年' + monthDiff + '个月';
			},

			// 格式化金额，转为万元单位
			formatAmountToWan(num) {
				num = Number(num);
				if (num == 0) {
					return num + "";
				} else {
					return new Decimal(num).div(new Decimal(10000)).toString();
				}
			},
			// 切换tab页
			changeTab(tabIndex) {
				if (tabIndex == 1) {
					this.tab1Show = false
					this.tab2Show = true

				}
				if (tabIndex == 2) {
					this.tab1Show = true
					this.tab2Show = false
				}
				this.carList = []
				this.params.pageNum = 1
				this.params.pageSize = 10
				this.getCarList()
			},

			// 价格下拉菜单
			showPriceDownList() {
				this.priceDownListShow = !this.priceDownListShow
			},
			// 筛选下拉菜单
			showSelectDownList() {
				this.selectDownListShow = !this.selectDownListShow
			},
			orderBySelect(orderBy) {
				this.orderBy = orderBy
				this.carList = []
				this.params.pageNum = 1
				this.getCarList()
				this.priceDownListShow = false
				this.kilometersDownListShow = false
				this.selectDownListShow = false
			},
			setPriceRangeParams(e) {
				this.priceRangeParams = e
			},
			setKilometersParams(e) {
				this.kilometersParams = e
			},
			goCarInfo(id) {
				this.$tab.navigateTo(`/subCarPages/carInfo/carInfo?id=${id}`)
			}
		},
	};
</script>
<style lang="scss" scoped>
	@import './index.rpx.css';

	.jsx {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.xian {
		border: 1px solid black;
		width: 30%;
		height: 0px;
	}

	.dian {
		font-size: 55px;
		font-weight: bold;
		margin: 0 10px;
	}

	.q-box {
		width: 95%;
		height: 103px;
		border-radius: 8px;
		margin: 0 auto;
		overflow: hidden;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}

		margin-top: 10px;
	}

	.baizi {
		position: absolute;
		width: 100%;
		text-align: center;
		transform: translate(-50%);
		left: 50%;
		top: 35px;
		// left: 25%;
		font-size: 26px;
		text-shadow: 0px 0px 7px #42464C;
		font-family: HuXiaoBo-NanShen;
		font-weight: 600;
		z-index: 99;
		color: white;
		font-style: italic
	}

	.bai-yuan {
		box-shadow: 0px 0px 13px 5px rgba(216, 216, 216, 0.61);
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: white;
		position: fixed;
		bottom: 60px;
		right: 20px;
		z-index: 99;
		overflow: hidden;
		padding: 0px;
	}

	.text-top {
		color: rgba(67, 67, 67, 1);
		font-size: 32rpx;
		font-weight: 700;
		line-height: 32rpx;
	}

	.carList {
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 700rpx;

		margin: 0 auto;

		.goods {
			width: 330rpx;
			margin: 20rpx 0;

			.hot {
				position: relative;
				top: -170rpx;
				left: 10rpx
			}

			.carTitle {}

			.carAge {
				font-size: 12px;
				color: #b5b5b5;
				margin: 10rpx 0;
			}

			.goodImg {
				border-radius: 25rpx;
				margin: 10rpx 0;
			}
		}
	}

	.downList {
		width: 750rpx;
		position: relative;
		top: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		z-index: 9999;
		border-radius: 5rpx;

		.btn {
			width: 160rpx;
			height: 50rpx;
			padding: 10rpx;
			font-size: 24rpx;
			text-align: center;
			margin-bottom: 10rpx;
			margin-right: 10rpx;
			background-color: #e5e5e5;
		}
	}

	.postBtn {


		padding: 10rpx 20rpx;
		background: linear-gradient(to left, #4c78b5, #8cbdff);
		border-radius: 15rpx;
		color: #FFF;

	}
</style>