<template>
	<view>
		<uni-nav-bar class="nvbar" leftIcon="left" @clickLeft="navigatorBack">
			<view slot="left">
				<uni-icons type="back" size="23" color="#FFFFFF"></uni-icons>
			</view>
			<view slot="default" class="center uninavebartext">
				{{ Status.navbar.title }}
			</view>
		</uni-nav-bar>
		<view class="contentBg">
			<view class="row">
				<view class="typeItem fleft" :class="{'active':Status.tabType=='link'}" @click.stop="tabChange('link')">
					连接记录</view>
				<view class="typeItem fleft" :class="{'active':Status.tabType=='warn'}" @click.stop="tabChange('warn')">
					报警记录</view>
				<view class="filterIco fright" @click.stop="showFilter()">
					<image class="img" src="/static/images/common/filter.png" mode="aspectFit"></image>
				</view>
				<view class="clear"></view>
			</view>
			<view class="row" v-show="Status.tabType=='warn'">
				<view class="typeItem fleft" :class="{'active':filter.warnType=='all'}" @click.stop="warnChange('all')">
					全部报警</view>
				<view class="typeItem fleft" :class="{'active':filter.warnType=='join'}"
					@click.stop="warnChange('join')">
					闯入报警</view>
				<view class="typeItem fleft" :class="{'active':filter.warnType=='force'}"
					@click.stop="warnChange('force')">
					强制报警</view>
				<view class="clear"></view>
			</view>


			<mescroll-uni class="device-list" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:up="Status.upOption" :down="Status.downOption" :fixed="false"
				:style="{ height: Status.mescrollHeight + 'px' }">


				<view v-show="Status.tabType=='link'" class="linkLi" v-for="item,index in linkList">
					<view class="header" :class="{expand:item.expand}" @click.stop="ExpandToggle(item,index,'link')">
						<text>{{DateFormat(item.linkEqs[0].linkTime,'yyyy-MM-dd HH:mm:ss')}}</text>
						<uni-icons type="right" v-show="!item.expand" color="#FFFFFF" size="16"></uni-icons>
						<uni-icons type="down" v-if="item.expand" color="#aed600" size="17"></uni-icons>
					</view>
					<view v-if="item.expand" class="body">
						<view class="listItem">
							<view>设备数量</view>
							<view>{{item.linkEqs.length}}</view>
						</view>
						<view class="line"></view>
						<view class="listItem" v-for="dev,i in item.linkEqs">
							<view>设备名称</view>
							<view>{{dev.linkName?dev.linkName:dev.linkMac}}</view>
						</view>
					</view>
				</view>

				<view v-show="Status.tabType=='warn'" class="warnPanel">

					<view class="warnCardHeader" v-show="warnList.length>0">
						<view class="column">报警类型</view>
						<view class="column">设备名称</view>
						<view class="column">报警时间</view>
					</view>
					<view class="warnLi" :class="{'first':index==0,'last':index==warnList.length-1}"
						v-for="item,index in warnList">
						<view class="column red">{{item.warnType}}</view>
						<view class="column">{{item.warnName?item.warnName:item.warnMac}}</view>
						<view class="column">
							<view>{{DateFormat(item.warnTime,'yyyy/MM/dd')}}</view>
							<view>{{DateFormat(item.warnTime,'HH:mm:ss')}}</view>
						</view>
					</view>

				</view>
			</mescroll-uni>

			<view v-if="Status.BottomMenuShow" class="prevContent" @click.stop="showFilter()">
				<view class="p100" @click.stop="">
					<view class="filterMode">
						<view class="fleft modeItem" @click.stop="filterModeChange()"
							:class="{ active: !Status.filterMode }">月份选择</view>
						<view class="fleft modeItem" @click.stop="filterModeChange()"
							:class="{ active: Status.filterMode }">自定义时间</view>
						<view class="clear"></view>
					</view>
					<view v-show="Status.filterMode">
						<view class="mothPanel">
							<view class="mothItem center" :class="{active:Status.filterDayType=='monthThree'}"
								@click.stop="mothItemChange('monthThree')">近三个月</view>
							<view class="mothItem center" :class="{active:Status.filterDayType=='monthOne'}"
								@click.stop="mothItemChange('monthOne')" }>近一个月</view>
							<view class="mothItem center" :class="{active:Status.filterDayType=='customer'}"
								@click.stop="mothItemChange('customer')">自定义</view>

						</view>
						<view class="mothPanel">
							<view class="mask" v-show="Status.filterMode && Status.filterDayType!='customer'"></view>
							<view class="mtxt center" :class="{active:Status.filterDayMode=='start'}"
								@click.stop="Status.filterDayMode='start'">
								{{filter.start}}
							</view>
							<view class="mspl center">
								一
							</view>
							<view class="mtxt center" :class="{active:Status.filterDayMode=='end'}"
								@click.stop="Status.filterDayMode='end'">
								{{filter.end}}
							</view>
						</view>

					</view>
					<view class="previewPannel">
						<view class="mask" v-show="Status.filterMode && Status.filterDayType!='customer'"></view>

						<picker-view indicator-class="myIndicator" :value="Status.datePickValue" @change="bindChange"
							class="picker-view">
							<picker-view-column>
								<view class="item center" :class="{
                    active: Status.datePickValue[0] == index,
                    borderLeft: Status.datePickValue[0] === index,
                    preOne:
                      Status.datePickValue[0] === index - 1 ||
                      Status.datePickValue[0] === index + 1,
                    preTwo:
                      Status.datePickValue[0] === index - 2 ||
                      Status.datePickValue[0] === index + 2,
                  }" v-for="(item, index) in dic.years" :key="index">{{ item }}年</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item center" :class="{
                    active: Status.datePickValue[1] === index,
                    preOne:
                      Status.datePickValue[1] === index - 1 ||
                      Status.datePickValue[1] === index + 1,
                    preTwo:
                      Status.datePickValue[1] === index - 2 ||
                      Status.datePickValue[1] === index + 2,
                  }" v-for="(item, index) in dic.months" :key="index">{{ item }}月</view>
							</picker-view-column>
							<picker-view-column v-if="Status.filterMode">
								<view class="item center" :class="{
                    active: Status.datePickValue[2] == index,
                    borderRight: Status.datePickValue[2] == index,
                    preOne:
                      Status.datePickValue[2] === index - 1 ||
                      Status.datePickValue[2] === index + 1,
                    preTwo:
                      Status.datePickValue[2] === index - 2 ||
                      Status.datePickValue[2] === index + 2,
                  }" v-for="(item, index) in dic.days" :key="index">{{ item }}日</view>
							</picker-view-column>
						</picker-view>
					</view>
					<view class="footerBtn">
						<view class="btn btnReset" @click.stop="checkDateReset();">重置</view>
						<view class="btn btnOK" @click.stop="checkDateOK()">确定</view>
					</view>
				</view>
			</view>
		</view>

		<global-loading ref="loading" />
	</view>
</template>


<script>
	import {
		showLoading,
		hideLoading,
		updateLoading
	} from "@/utils/loading.js";
	import Common from "@/utils/Common.js";

	var these = null;
	var time = null;
	export default {
		data() {
			return {
				mescroll: null,
				Status: {
					navbar: {
						title: "历史记录",
					},
					mescrollHeight: 100,
					upOption: {
						auto: false,
						noMoreSize: 0,
						offset: 50,
						isLock: false,
						empty: {
							tip: "暂无数据",
							hideScroll: false,
						},
						textNoMore: "没有更多数据了",
					},
					downOption: {
						auto: true,
						autoShowLoading: false,
					},
					BottomMenuShow: false, //是否显示底部筛选层
					filterMode: true, //是否筛选日期
					filterDayMode: 'end', //当前筛选的是开始还是结束
					filterDayType: 'customer', //当前筛选的日期是哪种类型
					tabType: 'link',

					datePickValue: [999, 999, 999] //日期选择控件绑定的值

				},
				filter: {
					MM: '',
					start: '',
					end: '',
					warnType: 'all',
				},
				linkList: [], //连接记录
				warnList: [], //报警记录
				dic: {
					years: [],
					months: [],
					days: [],
				},
				device: {
					id: "",
					deviceName: "",
					deviceImei: "",
					deviceMac: "",
					communicationMode: 0,
					devicePic: "",
					typeName: "",
					bluetoothName: null,
					deviceStatus: null,
					bindingTime: "",
					onlineStatus: 0,
					battery: "0",
					latitude: null,
					longitude: null,
					alarmStatus: null,
					detailPageUrl: "/pages/650/HBY650",
					showConfirm: false
				},
			};
		},
		onLoad() {
			these = this;
			this.getSystemInfoSyncH();
			this.checkDateReset();
			this.mothItemChange('customer');

			let eventChannel = this.getOpenerEventChannel();

			eventChannel.on('detailData', function(data) {
				var device = data.data;
				these.device = device;
				these.tabChange('link');
			});


		},
		computed: {},
		methods: {
			DateFormat: function(date, format) {
				return Common.DateFormat(date, format);
			},
			ExpandToggle(item, index, type) {

				let expand = item.expand;
				if (expand === undefined) {
					expand = false;
				}
				if (type == 'link') {

					this.$set(this.linkList[index], 'expand', !expand)
				} else {
					this.$set(this.warnList[index], 'expand', !expand)
				}
			},
			tabChange(key) {
				this.Status.tabType = key;

				this.downCallback();
			},
			warnChange(key) {
				this.filter.warnType = key;
				this.downCallback();
			},
			mothItemChange(key) {

				this.Status.filterDayType = key;
				let diff = 0;
				switch (key) {
					case "monthThree":
						diff = -2;
						break;
					case "monthOne":
						diff = -1;
						break;
					case "customer":
						diff = 0;
						break;
				}
				let today = new Date();
				let end = Common.DateFormat(today, 'yyyy-MM-dd');

				let start = Common.DateFormat(today.setMonth(diff), 'yyyy-MM-dd');
				this.filter.start = start;
				this.filter.end = end;

				this.Status.filterDayMode = 'end';
			},
			checkDateReset() {
				if (this.Status.filterMode && this.Status.filterDayType != 'customer') {
					return;
				}
				this.Inityears();
				this.initMonths();

				this.dic.days = [];

				if (this.Status.filterMode) {
					this.initDays();
					let day = new Date().getDate();
					this.dic.days.find((item, idx) => {
						if (item == day) {
							this.Status.datePickValue[2] = idx;
							return true;
						}
					});


				}
				//在浏览器上修改了datePickValue值，控件不刷新，直接修改dom的样式，App无此问题
				//为了方便在浏览器中查看效果，添加以下代码
				let systemInfo = uni.getSystemInfoSync();
				if (systemInfo.uniPlatform == 'web') {
					setTimeout(() => {
						if (!document) {
							console.error("document不可用");

							return;
						}


						let eles = document.querySelectorAll('.uni-picker-view-content');
						if (eles && eles.length && eles.length > 0) {
							let top0 = this.Status.datePickValue[0] * 34;
							top0 = 'translateY(-' + top0 + 'px) translateZ(0px)';
							eles[0].style.transform = top0;

							top0 = this.Status.datePickValue[1] * 34;
							top0 = 'translateY(-' + top0 + 'px) translateZ(0px)';
							eles[1].style.transform = top0;
							if (eles.length === 3 && this.Status.filterMode) {
								top0 = this.Status.datePickValue[2] * 34;
								top0 = 'translateY(-' + top0 + 'px) translateZ(0px)';
								eles[2].style.transform = top0;
							}
						}
					}, 50);
				}


			},
			checkDateOK() {
				let yyyy = this.dic.years[this.Status.datePickValue[0]];
				let MM = this.dic.months[this.Status.datePickValue[1]];
				MM = MM < 10 ? '0' + MM : MM;
				if (this.Status.filterMode) { //选择了时间段
					this.filter.MM = "";
				} else {
					this.filter.start = "";
					this.filter.end = "";
					this.filter.MM = yyyy + '-' + MM;
				}
				this.Status.BottomMenuShow = false;
				this.downCallback();

			},
			showFilter() {
				this.Status.BottomMenuShow = !this.Status.BottomMenuShow;
			},
			filterModeChange() {
				this.Status.filterMode = !this.Status.filterMode;
				if (this.Status.filterMode) {
					this.filter.MM = '';
					this.initDays();
				} else {
					this.filter.start = '';
					this.filter.end = '';
					this.Status.filterDayType = '';
				}
			},
			Inityears: function() {
				let start = 2025;
				let end = new Date().getFullYear();
				let yyyy = [];

				for (var i = start; i <= end; i++) {
					yyyy.push(i);

				}
				if (yyyy.length < 5) {
					for (var j = start; j >= 1970; j--) {
						yyyy.unshift(j);
						if (yyyy.length == 5) {
							break;
						}
					}
				}
				this.Status.datePickValue[0] = yyyy.length - 1;
				this.dic.years = yyyy;
			},
			initMonths: function() {
				let mms = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
				let month = new Date().getMonth() + 1;
				mms.find((i, index) => {
					if (i === month) {
						this.Status.datePickValue[1] = index;

						return true;
					}
				});

				this.dic.months = mms;
			},
			initDays() {
				if (!this.Status.filterMode) {
					return;
				}

				let yyyy = this.dic.years[this.Status.datePickValue[0]];
				let mm = this.dic.months[this.Status.datePickValue[1]];
				let days = 30;
				switch (mm) {
					case 1:
					case 3:
					case 5:
					case 7:
					case 8:
					case 10:
					case 12: {
						days = 31;
						break;
					}
					case 2: {
						if (yyyy && mm) {
							days =
								(yyyy % 4 === 0 && yyyy % 100 !== 0) || yyyy % 400 === 0 ?
								29 :
								28;
						} else {
							days = 28;
						}
						break;
					}
					default:
						days = 30;
						break;
				}

				let arr = [];
				for (let i = 1; i <= days; i++) {
					arr.push(i);
				}
				this.dic.days = arr;
			},
			bindChange(e) {

				let val = e.detail.value;
				this.Status.datePickValue = val;
				if (this.Status.filterMode) {
					setTimeout(() => {
						this.initDays();
						let yyyy = this.dic.years[this.Status.datePickValue[0]];
						let MM = this.dic.months[this.Status.datePickValue[1]];
						MM = MM < 10 ? '0' + MM : MM
						let dd = this.dic.days[this.Status.datePickValue[2]];
						dd = dd < 10 ? '0' + dd : dd;
						let date = yyyy + '-' + MM + '-' + dd;
						if (this.Status.filterDayMode == 'start') {
							this.filter.start = date;
						} else {
							this.filter.end = date;
						}
					}, 50);
				}


			},
			navigatorBack() {
				uni.navigateBack();
			},
			getSystemInfoSyncH() {

				let sysInfo = uni.getSystemInfoSync();
				this.Status.mescrollHeight = sysInfo.screenHeight - 140;
				console.log("mescrollHeight=", this.Status.mescrollHeight);
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			// 下拉刷新
			downCallback() {
				console.log("下拉加载");
				if (this.mescroll) {
					this.mescroll.resetUpScroll(false);
					this.mescroll.scrollTo(0, 0);
				}
				this.getData();
			},
			// 上拉加载
			upCallback() {
				console.log("上拉加载");

				this.getData();
			},
			getData() {
				clearTimeout(time);
				time = setTimeout(() => {
						console.error("正在加载第" + these.mescroll.num + "页数据");

						let hasNext = true;
						const systemInfo = uni.getSystemInfoSync();
						if (!these.device.id && systemInfo.uniPlatform != 'web') {

							these.mescroll.endSuccess(0, hasNext);
							return;
						}

						let linkKey = "102_" + these.device.id + "_linked";
						let warnKey = "102_" + these.device.id + "_warning";

						let getLinkData = () => {
							console.log("11111111111111111");
							let arr = [];
							let total = 0;
							if (systemInfo.uniPlatform == 'web') {
								total = 100;
								for (let i = 0; i < 20; i++) {
									const timestamp = 1710072900000 + (i * 3600000); // 每小时递增
									const numItems = Math.floor(Math.random() * 5) + 1; // 1-5条

									const item = {
										"linkId": timestamp.toString(),
										"linkEqs": []
									};

									for (let j = 0; j < numItems; j++) {
										// 生成随机的linkTime和linkMac
										const hours = Math.floor(Math.random() * 24);
										const minutes = Math.floor(Math.random() * 60);
										const macPart = () => Math.floor(Math.random() * 256).toString(16)
											.padStart(2, '0')
											.toUpperCase();
										const mac =
											`${macPart()}:${macPart()}:${macPart()}:${macPart()}:${macPart()}:${macPart()}`;

										let date =
											`2026-01-${11 + Math.floor(i/24)}T${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00Z`;
										date = Common.DateFormat(new Date(date), 'yyyy-MM-dd HH:mm:ss');
										item.linkEqs.push({
											"linkTime": date,
											"linkMac": mac
										});
									}

									arr.push(item);
								}
							} else {
								debugger;
								let array = uni.getStorageSync(linkKey);
								console.log("arrary=", array);
								let data = [];
								if (array) {
									data = data.concat(array);
								} else {
									data = [{
										"linkId": 1769582277562,
										"read": false,
										"linkEqs": [{
												"linkTime": "2026-01-28T06:38:26.487Z",
												"linkMac": "9A:ED:F1:72:AB:3C"
											},
											{
												"linkTime": "2026-01-28T06:38:26.487Z",
												"linkMac": "EE:97:ED:F1:72:AB:3C"
											}
										]
									}];
								}
								let start=null;
								let end=null;
								if (!these.Status.filterMode) {
									if (these.filter.MM) {
										 start = new Date(these.filter.MM + '-01');
										 end = start.setMonth(1);
										data = data.filter(v => {

											let t = v.linkEqs[0].linkTime
											if (!t instanceof Date) {
												t = new Date(v.linkEqs[0].linkTime);
											}

											return t >= start && t <= end;
										});
									}

								} else {
									if (these.filter.start && these.filter.end) {
										console.log("these.filter.start=",these.filter.start);
										console.log("these.filter.end=",these.filter.end);
										 start = new Date(these.filter.start);
										 end = new Date(these.filter.end);
										end.setMonth(1);
										console.log("start=",start);
										console.log("end=",end);
										if(start && end){
											data = data.filter(v => {
											debugger;
												let t = v.linkEqs[0].linkTime
												if (!(t instanceof Date)) {
													t = new Date(v.linkEqs[0].linkTime);
												}
											
												if(t >= start && t <= end){
													return true;
												}
												return false;
											});
										}
										
									} else if (these.filter.start) {
										 start = new Date(these.filter.start);

										data = data.filter(v => {
											let t = v.linkEqs[0].linkTime
											if (!(t instanceof Date)) {
												t = new Date(v.linkEqs[0].linkTime);
											}

											return t >= start;
										});
									} else if (these.filter.end) {
										 end = new Date(these.filter.end).setMonth(1);

										data = data.filter(v => {

											let t = v.linkEqs[0].linkTime
											if (!(t instanceof Date)) {
												t = new Date(v.linkEqs[0].linkTime);
											}

											return t < end;
										});
									}

								}

								total = data.length;
								let bgIdx = (these.mescroll.num - 1) * 20;
								let endIdx = these.mescroll.num * 20;

								arr = data.slice(bgIdx, endIdx);


							}

							return {
								rows: arr,
								total: total
							};
						}

						let getWarnData = () => {

							let arr = [];
							let total = 0;
							if (systemInfo.uniPlatform == 'web') {

								for (let i = 0; i < 20; i++) {
									const timestamp = 1710072900000 + (i * 3600000); // 每小时递增
									const numItems = Math.floor(Math.random() * 5) + 1; // 1-5条

									const item = {
										"linkId": timestamp.toString(),
										"linkEqs": []
									};


									// 生成随机的linkTime和linkMac
									const hours = Math.floor(Math.random() * 24);
									const minutes = Math.floor(Math.random() * 60);
									const macPart = () => Math.floor(Math.random() * 256).toString(16).padStart(2,
											'0')
										.toUpperCase();
									const mac =
										`${macPart()}:${macPart()}:${macPart()}:${macPart()}:${macPart()}:${macPart()}`;

									let date =
										`2026-01-${11 + Math.floor(i/24)}T${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00Z`;
									date = Common.DateFormat(new Date(date), 'yyyy-MM-dd HH:mm:ss');
									let warnType = ""; //
									if (these.filter.warnType == 'all') {
										warnType = Math.floor(Math.random() * 100) % 2 == 1 ? '闯入报警' : '强制报警'
										total = 100;
									} else if (these.filter.warnType == 'join') {
										warnType = '闯入报警';
										total = 50;
									} else {
										warnType = '强制报警';
										total = 50;
									}

									arr.push({
										linkId: timestamp.toString(),
										warnType: warnType,
										warnMac: mac,
										warnTime: date,
										warnName: ""
									});
								}
							} else {
								let array = uni.getStorageSync(warnKey);
								let data = [];
								if (array) {
									data = data.concat(array);
								}
								if (these.filter.warnType != 'all') {
									let type = these.filter.warnType == 'join' ? '闯入报警' : '强制报警';
									data = data.filter(v => {
										return v.warnType == type;
									});
								}
								if (these.Status.filterMode) {
									if (these.filter.start && these.filter.end) {

										console.log("these.filter.start=" + these.filter.start);
										console.log("hese.filter.end=" + these.filter.end);
										let start = new Date(these.filter.start);
										let end = new Date(these.filter.end);
										end.setMonth(1);
										data = data.filter(v => {

											let t = v.warnTime
											if (!(t instanceof Date)) {
												t = new Date(v.warnTime);
											}

											return t >= start && t <= end;
										});
									} else if (these.filter.start) {
										let start = new Date(these.filter.start);
										data = data.filter(v => {

											let t = v.warnTime
											if (!(t instanceof Date)) {
												t = new Date(v.warnTime);
											}

											return t >= start;
										});
									} else if (these.filter.end) {
										let end = new Date(these.filter.end).setMonth(1);
										data = data.filter(v => {
											let t = v.warnTime
											if (!(t instanceof Date)) {
												t = new Date(v.warnTime);
											}
											return t < end;
										});
									}
								} else {
									if (these.filter.MM) {
										let start = new Date(these.filter.MM + '-01');
										let end = start.setMonth(1);
										data = data.filter((v) => {
											let t = v.warnTime
											if (!(t instanceof Date)){
												t = new Date(v.warnTime);
											}
											return t >= start && t < end;
										});
									}

								}

								console.error("data=", data);
								total = data.length;
								let bgIdx = (these.mescroll.num - 1) * 20;
								let endIdx = these.mescroll.num * 20;

								arr = data.slice(bgIdx, endIdx);



							}

							return {
								rows: arr,
								total: total
							};
						}

						let readMsg = (arr) => {
							let keys = [linkKey, warnKey];
							for (let index = 0; index < keys.length; index++) {
								let key = keys[index];

								let array = uni.getStorageSync(key)
								let flag = false;
								for (let i = 0; i < array.length; i++) {
									let msg = arr.find(v => {
										return v.key == array[i].key
									});
									if (msg && !msg.read) {
										flag = true;
										array[i].read = true;
									}

								}
								if (flag) {
									uni.setStorage({
										key: key,
										data: array
									});
								}
							}

						}

						let data = null;
						if (these.Status.tabType == 'link') {
							data = getLinkData();

							if (these.mescroll.num == 1) {
								these.linkList = data.rows;
							} else {
								these.linkList = these.linkList.concat(data.rows);
							}

							if (data.length < 20 || these.linkList.length >= data.total) {
								hasNext = false;
							} else {
								hasNext = true;
							}

						} else {
							data = getWarnData();
							if (these.mescroll.num == 1) {
								these.warnList = data.rows;
							} else {
								these.warnList = these.warnList.concat(data.rows);
							}

							if (data.length < 20 || these.warnList.length >= data.total) {
								hasNext = false;
							} else {
								hasNext = true;
							}
						}


						readMsg(data.rows);
						these.mescroll.endSuccess(data.rows.length, hasNext);


					},
					500);



			}
		},
	};
</script>

<style scoped>
	.uninavebartext {
		width: 100%;
		font-size: 32rpx;
	}

	.contentBg {
		height: calc(100vh - 44px) !important;
		width: 100%;

		height: auto;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.row {
		width: 100%;
		height: 60rpx;
	}

	.row .typeItem {
		width: 160rpx;
		text-align: center;
		position: relative;
	}

	.row .typeItem.active {
		color: #AED600;
	}

	.row .typeItem.active::after {
		content: "";
		z-index: 1;
		position: absolute;
		width: 16px;
		height: 4px;
		border-radius: 30px;
		background: #AED600;
		transform: translateX(-50%);
		top: 45rpx;
		left: 50%;
	}

	.row .filterIco {
		width: 40rpx;
		height: 40rpx;
		margin-top: 8rpx;
	}

	.row .filterIco .img {
		width: 34rpx;
		height: 34rpx;
	}

	.p100 {
		width: 100%;
		height: auto;
		border-radius: 20px 20px 0px 0px;
		background-color: rgba(42, 42, 42, 1);
		box-sizing: border-box;
		padding: 20rpx;
	}

	.prevContent {
		width: 100%;
		height: 100%;

		position: fixed;
		top: 0px;
		left: 0px;

		z-index: 999;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: flex-end;
		align-items: flex-end;
		justify-content: center;
		/* background-color: #00000000; */
	}

	.prevContent .previewPannel {
		width: 100%;
		height: 170px;
		box-sizing: border-box;
		background-color: #00000000;
		position: relative;
		z-index: 2;
		margin: 30rpx 0rpx;
	}

	.prevContent .previewPannel .mask,
	.mothPanel .mask {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 3;
		background-color: #00000000;

	}

	.prevContent .filterMode {
		height: 80rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		justify-content: flex-start;
	}

	.filterMode .modeItem {
		width: 30%;
		text-align: center;
		height: 60rpx;
		line-height: 40rpx;
		color: #ffffff66;
		font-family: "PingFang SC";
		font-style: Regular;
		font-size: 32rpx;
		font-weight: 400;
		position: relative;
	}

	.filterMode .modeItem.active {
		color: rgba(174, 214, 0, 1);
	}

	.filterMode .modeItem.active::after {
		content: "";
		position: absolute;
		border-radius: 5px;
		background-color: rgba(174, 214, 0, 1) !important;

		width: 30rpx;
		height: 10rpx;
		bottom: 0px;
		left: 50%;
		z-index: 1;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.prevContent .footerBtn {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		height: 100rpx;
	}

	.prevContent .footerBtn .btn {
		width: 240rpx;
		height: 74rpx;
		line-height: 74rpx;
		text-align: center;
		box-sizing: border-box;
		font-family: 'PingFang SC';
		font-style: Medium;
		font-size: 24rpx;
		font-weight: 400;
		letter-spacing: 12rpx;
		text-align: center;
		border: 1px solid #00000000;
		border-radius: 130rpx;
	}

	.prevContent .footerBtn .btn.btnReset {

		border: 1px solid #ffffff !important;

		color: #FFFFFF;

	}

	.prevContent .footerBtn .btn.btnOK {
		background-color: #AED600;
		color: #232323;
		border-color: #AED600 !important;
	}

	.picker-view {
		width: 100%;
		height: 100%;

		background-color: #00000000;
	}

	/deep/ .myIndicator {
		/* display: none !important; */

		background: rgba(58, 58, 58, 1);
		z-index: 0 !important;
	}

	/deep/.picker-view .myIndicator::before {
		display: none !important;
	}

	/deep/.picker-view .myIndicator::after {
		display: none !important;
	}

	/deep/.picker-view uni-picker-view-column:first-child .uni-picker-view-group .myIndicator {
		border-top-left-radius: 34rpx !important;
		border-bottom-left-radius: 34rpx !important;
	}

	/deep/.picker-view uni-picker-view-column:last-child .uni-picker-view-group .myIndicator {
		border-top-right-radius: 34rpx !important;
		border-bottom-right-radius: 34rpx !important;
	}

	.item {
		text-align: center;
		height: 34px;
		font-family: "PingFang SC";
	}

	.item.active {
		color: #bbe600;
		font-size: 36rpx;
	}

	.item.preOne {
		font-size: 32rpx;
	}

	.item.preTwo {
		background: linear-gradient(180deg,
				rgba(255, 255, 255, 0) 0%,
				rgba(255, 255, 255, 0.5) 117.5%);

		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		font-family: "PingFang SC";
		font-style: Regular;
		font-size: 30rpx;
	}

	.picker-view .item.borderLeft {}

	.picker-view .item.borderRight {}

	.nvbar {
		top: 0px;
	}

	.mothPanel {
		width: 100%;
		height: 80rpx;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0px 30rpx;
		position: relative;
	}

	.mothPanel .mothItem {
		width: 22%;
		height: 55rpx;
		border-radius: 16rpx;
		background-color: #3A3A3A;
		color: #FFFFFF57;
		box-sizing: border-box;
		border: 1px solid #00000000;
		font-family: 'PingFang SC';
		font-style: Regular;
		font-size: 26rpx;
		font-weight: 400;
		text-align: center;
	}

	.mothPanel .mothItem.active,
	.mothPanel .mtxt.active {

		border: 1px solid #aed600 !important;
		color: #aed600 !important;
	}


	.mothPanel .mtxt {
		height: 80%;
		width: 43%;
		border-radius: 32rpx;
		background: #3a3a3a;
		color: rgba(255, 255, 255, 0.87);
		font-family: 'PingFang SC';
		font-style: Regular;
		font-size: 26rpx;
		font-weight: 400;
		text-align: center;
	}

	.mothPanel .mspl {
		height: 100%;
		width: 10%;
	}

	.linkLi {
		height: auto;
		width: 100%;
		box-sizing: border-box;
		padding: 15rpx 0rpx;

		color: rgba(255, 255, 255, 0.87);

		font-family: 'PingFang SC';
		font-style: Regular;
		font-size: 28rpx;
		font-weight: 400;

		letter-spacing: 0px;
		text-align: left;
	}

	.linkLi .header {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: space-between;
		align-items: center;
	}

	.linkLi .header.expand {
		color: #aed600;
	}

	.linkLi .body {
		border-radius: 16rpx;
		background: rgba(26, 26, 26, 1);
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 20rpx;
		margin: 10rpx 0rpx;
	}

	.linkLi .body .listHeader {}

	.linkLi .body .line {
		width: 100%;
		height: 0rpx;
		border-bottom: 1rpx solid #ffffff0f;
		margin: 15rpx 0rpx;
	}

	.linkLi .body .listItem {
		height: 50rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		justify-content: space-between;
		font-family: 'PingFang SC';
		font-style: Regular;
		font-size: 28rpx;
		font-weight: 300;
	}

	.warnCardHeader {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 45px;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		position: sticky;
		z-index: 3;
		top: 0rpx;
		background: rgba(26, 26, 26, 1);
	}

	.warnCardHeader .column {
		width: calc(100% / 3);
		text-align: center;
	}

	.warnPanel {
		width: 100%;
		height: 100%;





	}

	.warnLi {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 85rpx;
		position: relative;
		background: rgba(26, 26, 26, 1);
	}

	.warnLi.last {
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	}

	.warnLi.first::before {
		position: absolute;
		content: "";
		z-index: 2;
		width: calc(100% - 60rpx);

		border-top: 1px solid rgba(255, 255, 255, 0.06);
		top: 0px;
	}

	.warnLi::after {
		position: absolute;
		content: "";
		z-index: 1;
		width: calc(100% - 60rpx);

		border-top: 1px solid rgba(255, 255, 255, 0.06);
		top: 100%;

	}

	.warnLi .column {
		width: calc(100% / 3);
		text-align: center;
	}

	.warnLi .column.red {
		color: #e03434;
	}
</style>