<template>
	<view class="container">
		<!-- <image src="../../static/sjfx.png" mode="" class="bgimg"></image> -->
		<view class="pj">
			<view class="pjtitle">
				面源污染治理效果评价
			</view>
			<view class="ybecharts">
				<image src="../../static/data_bg_img.png" mode=""></image>
				<view class="ybechartstext">
					{{pjnr}}
				</view>
			</view>
			<view class="bot3">
				<view class="bot3_left" v-for="(item,index) in pjlist.slice(0,3)" :key="index">
					<view class="bfb">
						{{item.detailValue}}
					</view>
					<view class="bfbname">
						{{item.detailCode}}
					</view>
				</view>
			</view>
		</view>
		<view class="qst">
			<view class="qsttitle">
				重要污染物趋势图
			</view>
			<view class="sxbox wrwCov">
				<view class="leftsxbox">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{array[index]}}
							<image src="../../static/data_btn_sanjiao_xia.png"></image>
						</view>
					</picker>
				</view>
				<view class="rightsxbox">
					<picker mode="date" :value="dateqs" :start="startDate" :end="endDate" @change="bindDateqsChange">
						<view class="uni-input">{{dateqs}} <image src="../../static/data_btn_sanjiao_xia.png"></image></view>
					</picker>
				</view>
			</view>
			<!-- 年月日选择器 -->
			<view class="uni-form-item uni-column">
			  <radio-group class="radio-group" @change="radioChange">
			    <label class="radio-label" v-for="(item, index) in timList" :key="item.value" :class="{ 'checked': current === index }">
			      <radio :value="item.value" :checked="index === current" class="radio-item" color="#0f6efe" />
			      <view class="radio-text">{{item.name}}</view>
			    </label>
			  </radio-group>
			</view>
			<view class="qstcontent">
				<qiun-data-charts 
				  type="line"
				  :opts="opts"
				  :chartData="chartData"
				  :enableScroll="true"
				  :ontouch="true"
				  canvas2d
				/>
			</view>
		</view>
		<view class="znyj">
			<view class="znyj_top">
				<view class="znyjtop_left">
					智能预警
				</view>
				<view class="znyjtop_right">
					预警次数 <span class="numbers">{{cutMoneyFiter(total) || 0}}</span>次
				</view>
			</view>
			<view class="sxbox">
				<view class="leftsxbox">
					<picker @change="bindPickerChange1" :value="index1" :range="array1">
						<view class="uni-input1">{{array1[index1]}}
							<image src="../../static/data_btn_sanjiao_xia.png"></image>
						</view>
					</picker>
				</view>
				<view class="rightsxbox">
					<picker mode="date" fields="year" :value="date" :start="startDate" :end="endDate"
						@change="bindDateChange">
						<view class="uni-input2">{{date}}
							<image src="../../static/data_btn_sanjiao_xia.png"></image>
						</view>
					</picker>
				</view>
			</view>
			<view style="width: 100%;height: 12rpx;border-bottom: 2rpx solid #f6f8f8;"></view>
			<view class="list_item_bot">
				<scroll-view style="height: 530rpx;" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
					<view class="lists_item" v-for="(item,index) in list" :key="index">
						<view class="litCovv">
							<text class="yujTit">{{item.fullDeviceName?item.fullDeviceName:''}}</text>
							<view class="yujTwo">
								<text class="yujxiangm">{{item.alertContent[0].name?item.alertContent[0].name:''}}</text>
								<text class="yujdanw">{{item.alertContent[0].val}}{{item.alertContent[0].unit}}</text>
								<text class="yujiTime">{{item.datetime}}</text>
							</view>
						</view>
					</view>
					<view class="load">
						<uni-load-more :status="loadStatus"></uni-load-more>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="pagebot">

		</view>
	</view>
</template>

<script>
	import uniEcCanvas from '../../components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '../../components/uni-ec-canvas/echarts.js'
	export default {
		components: {
			uniEcCanvas,
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				height: 0,
				scorllheight: 0,
				zt: '',
				date: new Date().getFullYear().toString(),
				array: [],
				index: 0,
				index1: 0,
				array1: [],
				arrays: [],
				list: [],
				tabList: ['站点名称', '告警指标', '指标值', '告警时间'],
				pjlist: [],
				chartData: {
					categories: [],
					series: []
				},
				opts: {
					color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [15,10,0,15],
					dataLabel: false,
					dataPointShape: false,
					enableScroll: false,
					legend: {},
					xAxis: {
						disabled: false,
						gridType: 'dash',
						dashLength: 2,
					},
					yAxis: {
					  gridType: "dash",
					  dashLength: 2,
					  data: [
						{
						  min: 0,
						  max: 150
						}
					  ]
					},
					extra: {
					  line: {
						type: "curve",
						width: 2,
						activeType: "hollow",
						linearType: "custom",
						onShadow: true,
						animation: "horizontal"
					  }
					}
				},
				pjnr: '',
				pageNo: 1,
				pageSize: 9,
				allNum: '',
				isLastpage: '',
				intervalId: null,
				loadStatus: 'more',
				isLoadMore: false,
				show: false,
				show1: false,
				top: 0,
				total: 0,
				yearStr: null,
				stationName1: '',
				stationCode1: null,
				stationCode: '',
				arrays1: [],
				zxtdata: [],
				timList: [{
						value: 'yearMonth',
						name: '年'
					},
					{
						value: 'monthDays',
						name: '月'
					},
					{
						value: 'dayhours',
						name: '日'
					},
				],
				current: 0,
				dateqs: new Date().getFullYear().toString(),
				datetwo: currentDate,
				riqinumber: 'yearMonth',
				startDate: '2000-01-01',
				endDate: '2030-12-31'
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					var pxToRpxScale = 750 / res.windowWidth
					var ktxStatusHeight = res.statusBarHeight * pxToRpxScale
					var navigationHeight = 44 * pxToRpxScale
					this.height = res.windowHeight * pxToRpxScale
					this.scorllheight = this.height
				}
			});
			this.index = 0
			this.index1 = 0
			this.getpj()
			this.importWyw()
			this.getazsurvMulchRecord()
			this.getyjList()
		},
		methods: {
			// 格式化数字
			cutMoneyFiter(val) {
				if (!val && val !== 0) return 0
				return val
			},
			// 获取站点列表
			importWyw() {
				this.array = []
				this.arrays = []
				this.arrays1 = [{
					label: '全部监测设备',
					value: ''
				}]
				this.$http.get('/applet/survStationInfo/list').then(res => {
					for (var i = 0; i < res.data.data.length; i++) {
						this.arrays.push({
							label: res.data.data[i].stationName,
							value: res.data.data[i].stationCode
						})
						this.arrays1.push({
							label: res.data.data[i].stationName,
							value: res.data.data[i].stationCode
						})
						this.array.push(res.data.data[i].stationName)
					}
					// 站点数据加载完成后，设置默认站点并获取趋势数据
					if (this.array.length > 0) {
						this.stationCode = this.arrays[0]?.value || ''
						// 延迟一点确保数据已渲染
						setTimeout(() => {
							this.qushicov()
						}, 300)
					}
				}).catch(err => {
					console.log('获取站点列表失败', err)
				})
			},
			// 获取监测站点设备数据
			getazsurvMulchRecord() {
				this.arrays = []
				this.array1 = ['全部监测设备']
				this.arrays1 = [{
					label: '全部监测设备',
					value: ''
				}]
				this.$http.get('/applet/survDeviceDeploy/survDeviceList').then(res => {
					for (var i = 0; i < res.data.data.length; i++) {
						this.arrays.push({
							label: res.data.data[i].fullDeviceName,
							value: res.data.data[i].id
						})
						this.arrays1.push({
							label: res.data.data[i].fullDeviceName,
							value: res.data.data[i].id
						})
						this.array1.push(res.data.data[i].fullDeviceName)
					}
				}).catch(err => {
					console.log('获取设备列表失败', err)
				})
			},
			// 获取预警列表
			getyjList() {
				let params = {}
				params.pageNo = this.pageNo
				params.pageSize = this.pageSize
				params.deployId = this.stationCode1
				params.yearStr = this.yearStr
				uni.showLoading({
					title: '加载中'
				});
				this.list = []
				this.$http.get('/applet/wxclient/alertRecord', {
					params: params
				}).then(res => {
					if (res.data.code == 0) {
						var data = res.data.data.records
						for (var i = 0; i < data.length; i++) {
							data[i].times = data[i].alertTime.replace(" ", ":").replace(/\:/g, "-").split("-");
							data[i].nian = data[i].times[0];
							data[i].yue = data[i].times[1] - 1;
							data[i].ri = data[i].times[2];
							data[i].shi = data[i].times[3];
							data[i].fen = data[i].times[4];
							data[i].miao = data[i].times[5];
							data[i].datetime = data[i].yue + '-' + data[i].ri + ' ' + data[i].shi + ':' + data[i].fen
							if (data[i].alertContent && data[i].alertContent.indexOf('监测数据名称:') != -1) {
								data[i].alertContent = data[i].alertContent.replace('监测数据名称:', '')
							}
							// 如果alertContent是字符串，转换为数组格式
							if (typeof data[i].alertContent === 'string') {
								data[i].alertContent = [{
									name: '告警',
									val: data[i].alertContent,
									unit: ''
								}]
							}
						}
						this.list = this.list.concat(data)
						this.total = res.data.data.total
						if (res.data.data.total != 0) {
							this.allNum = Number(res.data.data.total) / Number(this.pageSize) + '';
							if (this.allNum.indexOf('.') == -1) {
								this.allNum = this.allNum;
							} else {
								this.allNum = parseInt(Number(this.allNum) + 1);
							}
							if (this.pageNo == this.allNum) {
								this.isLastpage = true;
								this.loadStatus = 'nomore'
							} else {
								this.isLastpage = false;
								this.loadStatus = 'more'
							}
						} else {
							this.isLastpage = true;
							this.loadStatus = 'nomore'
						}
					}
					uni.hideLoading();
					this.isRefresher = false
				}).catch(err => {
					uni.hideLoading();
					console.log('获取预警列表失败', err)
				})
			},
			// 分页加载
			lower() {
				if (this.isLastpage) {
					return
				}
				clearInterval(this.intervalId);
				var num = 1;
				this.intervalId = setInterval(() => {
					num = num + 1;
				}, 1000)
				this.pageNo = this.pageNo + 1;
				let params = {}
				params.pageNo = this.pageNo
				params.pageSize = this.pageSize
				params.deployId = this.stationCode1
				params.yearStr = this.yearStr
				this.$http.get('/applet/wxclient/alertRecord', {
					params: params
				}).then(res => {
					if (res.data.code == 0) {
						var data = res.data.data.records
						for (var i = 0; i < data.length; i++) {
							data[i].times = data[i].alertTime.replace(" ", ":").replace(/\:/g, "-").split("-");
							data[i].nian = data[i].times[0];
							data[i].yue = data[i].times[1] - 1;
							data[i].ri = data[i].times[2];
							data[i].shi = data[i].times[3];
							data[i].fen = data[i].times[4];
							data[i].miao = data[i].times[5];
							data[i].datetime = data[i].yue + '-' + data[i].ri + ' ' + data[i].shi + ':' + data[i].fen
							if (data[i].alertContent && data[i].alertContent.indexOf('监测数据名称:') != -1) {
								data[i].alertContent = data[i].alertContent.replace('监测数据名称:', '')
							}
							if (typeof data[i].alertContent === 'string') {
								data[i].alertContent = [{
									name: '告警',
									val: data[i].alertContent,
									unit: ''
								}]
							}
						}
						this.list = this.list.concat(data)
						if (res.data.data.total != 0) {
							if (this.pageNo == this.allNum) {
								this.isLastpage = true;
								this.loadStatus = 'nomore'
							} else {
								this.isLastpage = false;
								this.loadStatus = 'more'
							}
						} else {
							this.isLastpage = true;
							this.loadStatus = 'nomore'
						}
					}
				}).catch(err => {
					console.log('加载更多预警失败', err)
				})
			},
			// 获取评价
			getpj() {
				this.$http.post('/applet/wxclient/displayInfo?infoType=' + 'effect_assess').then(res => {
					let data = res.data.data.effect_assess.detailList
					this.pjlist = data
					for (var i = 0; i < data.length; i++) {
						if (data[i].detailCode == '综合评价') {
							this.pjnr = data[i].detailValue
						}
					}
				}).catch(err => {
					console.log('获取评价失败', err)
				})
			},
			// 选择年月日
			radioChange(e) {
				this.riqinumber = e.detail.value
				// 更新当前选中的索引
				this.timList.forEach((item, index) => {
					if (item.value === e.detail.value) {
						this.current = index
					}
				})
				// 根据选择的模式调整日期格式
				let currentDate = new Date()
				let year = currentDate.getFullYear()
				let month = String(currentDate.getMonth() + 1).padStart(2, '0')
				let day = String(currentDate.getDate()).padStart(2, '0')
				
				if (this.riqinumber === 'yearMonth') {
					this.dateqs = String(year)
				} else if (this.riqinumber === 'monthDays') {
					this.dateqs = year + '-' + month
				} else {
					this.dateqs = year + '-' + month + '-' + day
				}
				this.qushicov()
			},
			// 趋势时间选择
			bindDateqsChange(e) {
				let selectedDate = e.detail.value
				if (this.riqinumber === 'yearMonth') {
					this.dateqs = selectedDate.slice(0, 4)
				} else if (this.riqinumber === 'monthDays') {
					this.dateqs = selectedDate.slice(0, 7)
				} else {
					this.dateqs = selectedDate
				}
				this.qushicov()
			},
			// 趋势接口
			qushicov() {
				// 如果没有站点编码，使用默认值或等待
				if (!this.stationCode) {
					console.log('站点编码为空，使用默认站点')
					if (this.arrays.length > 0) {
						this.stationCode = this.arrays[0].value
					} else {
						// 如果站点还没加载完成，延迟重试
						setTimeout(() => {
							if (this.arrays.length > 0) {
								this.stationCode = this.arrays[0].value
								this.qushicov()
							}
						}, 500)
						return
					}
				}
				
				let data = {
					summrayMode: this.riqinumber,
					startTime: this.dateqs,
					stationCode: this.stationCode,
				}
				console.log('请求趋势数据参数:', data)
				
				this.$http.post('/applet/survDeviceDeploy/waterIntegrateStatistic', data).then(iem => {
					let lynum = iem.data.data
					console.log('趋势数据返回:', lynum)
					
					// 数据为空时显示空图表
					if (!lynum || !lynum.tableHead || !lynum.tableData2 || lynum.tableHead.length === 0) {
						console.log('趋势数据为空')
						this.chartData = {
							categories: [],
							series: []
						}
						return
					}
					
					setTimeout(() => {
						let categories = []
						let displayCategories = []
						let series = []
						let allValues = []
						
						// 处理X轴数据
						categories = lynum.tableIndex || []
						if (categories.length > 0) {
							const first = categories[0]
							const middle = categories[Math.floor(categories.length / 2)]
							const last = categories[categories.length - 1]
							
							displayCategories = categories.map((item, index) => {
								if (index === 0 || index === Math.floor(categories.length / 2) || index === categories.length - 1) {
									return item
								}
								return ''
							})
						}
						
						// 处理series数据
						lynum.tableHead.forEach((header, index) => {
							const seriesData = (lynum.tableData2 || []).map(row => {
								const value = row[index] === "0" ? 0 : parseFloat(row[index]) || 0
								allValues.push(value)
								return value
							})
							
							series.push({
								name: header.eleDesc || header.name || '指标',
								data: seriesData
							})
						})
						
						// 动态计算Y轴范围
						if (allValues.length > 0) {
							const maxValue = Math.max(...allValues)
							const minValue = Math.min(...allValues)
							const padding = maxValue * 0.1 || 10
							const yAxisMax = maxValue + padding
							const yAxisMin = Math.max(0, minValue - padding)
							
							this.opts = {
								...this.opts,
								yAxis: {
									gridType: "dash",
									dashLength: 2,
									data: [
										{
											min: yAxisMin,
											max: yAxisMax || 100
										}
									]
								}
							}
						}
						
						this.chartData = {
							categories: displayCategories,
							series: series
						}
						console.log('图表数据:', this.chartData)
					}, 300)
				}).catch(err => {
					console.log('趋势数据请求失败', err)
					this.chartData = {
						categories: [],
						series: []
					}
				})
			},
			// 折线图切换站点
			bindPickerChange: function(e) {
				this.index = e.detail.value
				let stationName = this.array[this.index]
				for (var i = 0; i < this.arrays.length; i++) {
					if (stationName == this.arrays[i].label) {
						this.stationCode = this.arrays[i].value
						break
					}
				}
				this.qushicov()
			},
			// 预警切换站点
			bindPickerChange1: function(e) {
				this.index1 = e.detail.value
				this.stationName1 = this.array1[this.index1]
				for (var i = 0; i < this.arrays1.length; i++) {
					if (this.stationName1 == this.arrays1[i].label) {
						this.stationCode1 = this.arrays1[i].value
						break
					}
				}
				if (this.stationName1 == '全部监测设备') {
					this.stationCode1 = null
				}
				this.pageNo = 1
				this.getyjList()
			},
			// 预警切换日期
			bindDateChange: function(e) {
				this.yearStr = e.detail.value
				this.date = e.detail.value
				this.pageNo = 1
				this.getyjList()
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 10;
				} else if (type === 'end') {
					year = year + 10;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

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

	.container {
		padding: 0 32rpx;
		box-sizing: border-box;
		overflow-y: scroll;
		overflow-x: hidden;
	}

	.bgimg {
		width: 100%;
		height: 2022rpx;
	}

	.pj {
		background: #FFFFFF;
		border-radius: 34rpx;
		padding: 41rpx 31rpx 33rpx;
	}

	.pjtitle {
		font-size: 32rpx;
		font-family: Source Han Sans SC;
		font-weight: bold;
		color: #2F3841;
		margin-bottom: 31rpx;
	}

	.ybecharts {
		width: 100%;
		height: 279rpx;
		margin-bottom: 38rpx;
		display: flex;
		justify-content: center;
		position: relative;
	}

	.ybecharts image {
		width: 90%;
		height: 100%;
	}

	.ybechartstext {
		color: #2DC37B;
		font-size: 60rpx;
		position: absolute;
		bottom: 13rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.bot3 {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.bot3_left {
		border-right: 2rpx solid #E6E9EF;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 33%;
	}

	.bot3_left:last-child {
		border: none;
	}

	.bfb {
		font-size: 42rpx;
		font-family: DIN Next LT Pro;
		font-weight: 500;
		color: #184C9A;
	}

	.bfbname {
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #9CA9BE
	}

	.qst {
		background: #FFFFFF;
		border-radius: 34rpx;
		padding-top: 43rpx;
		padding-bottom: 34rpx;
		margin-top: 26rpx;
	}

	.qsttitle {
		font-size: 32rpx;
		font-family: Source Han Sans SC;
		font-weight: bold;
		color: #2F3841;
		padding-left: 33rpx;
	}

	.qstcontent {
		height: 400rpx;
		width: 98%;
		padding-left: 20rpx;
	}

	.uni-ec-canvas {
		width: 100%;
		height: 500rpx;
	}

	.search {
		height: 72rpx;
		padding: 0 32rpx 0;
		margin-top: 32rpx;
	}
	.wrwCov{
		width: 94%!important;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.uni-input {
		width: 100%;
		height: 72rpx;
		font-size: 28rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #667482;
		background: #F6F6F6;
		border-radius: 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 22rpx 25rpx;
	}

	.uni-input image {
		width: 44rpx;
		height: 44rpx;
	}

	.znyj {
		padding: 43rpx 31rpx 43rpx 32rpx;
		background: #FFFFFF;
		border-radius: 34rpx;
		margin-top: 26rpx;
	}

	.znyj_top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 32rpx;
	}

	.znyjtop_left {
		font-size: 32rpx;
		font-family: Source Han Sans SC;
		font-weight: bold;
		color: #2F3841;
	}

	.znyjtop_right {
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #B3C1D1;
	}

	.numbers {
		font-size: 34rpx;
		font-family: DIN Next LT Pro;
		font-weight: 500;
		color: #FF4343;
		margin-left: 9rpx;
		margin-right: 11rpx;
	}

	.sxbox {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.leftsxbox {
		width: 60%;
	}

	.rightsxbox {
		width: 35%;
	}

	.uni-input1 {
		width: 100%;
		height: 72rpx;
		background: #F6F6F6;
		border-radius: 16rpx;
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #667482;
		padding: 22rpx 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.uni-input1 image {
		width: 44rpx;
		height: 44rpx;
	}

	.uni-input2 {
		width: 100%;
		height: 72rpx;
		background: #F6F6F6;
		border-radius: 16rpx;
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #667482;
		padding: 22rpx 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.uni-input2 image {
		width: 44rpx;
		height: 44rpx;
	}

	.scrolltop {
		padding: 34rpx 0rpx 16rpx 0rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #F6F8FB;
	}

	.tabitem {
		font-size: 26rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #2F3841;
		display: inline-block;
		padding-bottom: 26rpx;
	}

	.tabitem:first-child {
		width: 31%;
	}

	.tabitem:nth-child(2) {
		width: 27%;
	}

	.tabitem:nth-child(3) {
		width: 19%;
	}

	.tabitem:nth-child(4) {
		flex: 1
	}

	.scroll-Y {
		box-sizing: border-box;
	}

	.lists_item {
		padding-top: 35rpx;
		box-sizing: border-box;
		.litCovv{
			width: 100%;
			height: 120rpx;
			border-radius: 16rpx;
			background-color: #f6f6f6;
			overflow: hidden;
			.yujTit{
				display: block;
				margin-left: 2%;
				margin-top: 10rpx;
				font-size: 28rpx;
				color: #333;
				margin-bottom: 10rpx;
				font-weight: 500;
			}
			.yujTwo{
				width: 96%;
				height: 60rpx;
				line-height: 60rpx;
				margin-left: 2%;
				overflow: hidden;
				.yujxiangm{
					display: inline-block;
					padding: 6rpx 10rpx;
					background-color: #22BB8A;
					height: 30rpx;
					line-height: 30rpx;
					color: #fff;
					font-size: 24rpx;
					border-radius: 10rpx;
				}
				.yujdanw{
					height: 50rpx;
					line-height: 50rpx;
					color:#FF4242;
					font-size: 28rpx;
					margin-left: 3%;
				}
				.yujiTime{
					font-size: 16rpx;
					color: #999;
					float: right;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 24rpx;
				}
			}
		}
	}

	.jczbs {
		width: 32%;
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #667482;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.zbz {
		width: 27%;
		font-size: 24rpx;
		font-family: DIN Next LT Pro;
		font-weight: 400;
		padding-right: 10rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.sbsj {
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #667482;
		flex: 1;
	}

	.szqss {
		width: 24rpx;
	}

	.zbzs {
		width: 19%;
		font-size: 24rpx;
		font-family: DIN Next LT Pro;
		font-weight: 400;
		padding-right: 10rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.load {
		text-align: center;
		color: #c6c6c6;
	}

	.pagebot {
		height: 100rpx;
	}
	
	// 选择年月日
	.radio-group {
	  display: flex;
	  justify-content: space-around;
	  border-radius: 20rpx;
	  padding: 8rpx;
	  .radio-label {
	    display: flex;
	    align-items: center;
	    padding: 12rpx 24rpx;
	    border-radius: 16rpx;
	    transition: all 0.3s ease;
	    flex: 1;
	    justify-content: center;
	    margin: 0 4rpx;
	    
	    &:active {
	      background: rgba(15, 110, 254, 0.1);
	    }
	    
	    &.checked {
	      background: #0f6efe;
	      
	      .radio-text {
	        color: #ffffff;
	        font-weight: 600;
	      }
	    }
	    
	    .radio-item {
	      transform: scale(0.8);
	      margin-right: 8rpx;
	      
	      &[checked] {
	        color: #ffffff;
	      }
	    }
	    
	    .radio-text {
	      font-size: 24rpx;
	      font-family: Source Han Sans SC;
	      font-weight: 500;
	      color: #667482;
	      transition: color 0.3s ease;
	      white-space: nowrap;
	    }
	  }
	}
	.qstim{
		width: 40%;
		display: block;
		margin: 0 auto;
		margin-top: 20rpx;
	}
	.qstim image {
		width: 44rpx;
		height: 44rpx;
	}
</style>