<template>
	<view>
		<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
		<navBar leftText="投资日历" :hideNavBg="true" :hideBack="true"></navBar>
		<view class="searchC fixed flex" :style="'top:'+navH+'px;'">
			<image class="icon" src="/static/icon/home/conceptCenter/search.png" mode="widthFix"></image>
			<input class="flex1" type="text" v-model="keywords" placeholder="搜索股票/话题..." placeholder-style="color:#94989A" confirm-type="search" @confirm="clickSearch()"/>
		</view>
		<scroll-view scroll-y class="contentC fixed" :style="'top:'+contentTop+'px;'" refresher-enabled :refresher-triggered="isRefreshing" @refresherrefresh="pullDownRefresh()" @scrolltolower="loadMoreData()">
			<view class="calendarC">
				<view class="todayC flex" >
					<view class="todayDateC flex" @click="clickSelectMonth()">
						<view class="date">{{selectDate}}</view>
						<!-- <image class="icon" src="/static/icon/invest/calendar.png" mode="widthFix"></image> -->
					</view>
					<view class="flex1"></view>
					<view class="today" @click="clickTodayDate()">今</view>
				</view>
				<view class="weekList flex">
					<view class="item flex1" v-for="(item,index) in weekList" :key="index">{{item}}</view>
				</view>
				<view v-if="isExpand" class="monthDateList flexWrap">
					<block v-for="(item,index) in monthDateList" :key="index">
						<block v-if="item.className">
							<view v-if="item.className=='bg-gradient-danger'" :class="'item flexColumnCenter danger '+(selectDate==item.date?'select':'')"  @click="clickSelectDate(item)">
								<view class="date">{{item.day}}</view>
								<view class="eventNum">{{item.eventCount}}</view>
							</view>
							<view v-if="item.className=='bg-gradient-warning'" :class="'item flexColumnCenter warning '+(selectDate==item.date?'select':'')"  @click="clickSelectDate(item)">
								<view class="date">{{item.day}}</view>
								<view class="eventNum">{{item.eventCount}}</view>
							</view>
							<view v-if="item.className=='bg-gradient-info'" :class="'item flexColumnCenter info '+(selectDate==item.date?'select':'')"  @click="clickSelectDate(item)">
								<view class="date">{{item.day}}</view>
								<view class="eventNum">{{item.eventCount}}</view>
							</view>
							<view v-if="item.className=='bg-gradient-success'" :class="'item flexColumnCenter success '+(selectDate==item.date?'select':'')"  @click="clickSelectDate(item)">
								<view class="date">{{item.day}}</view>
								<view class="eventNum">{{item.eventCount}}</view>
							</view>
						</block>
						<block v-else>
							<view class="item flexColumnCenter">
								<view :class="'date '+(item.isCurrentMonth?'':' notCurrentMonth')">{{item.day}}</view>
								<view class="eventNum"></view>
							</view>
						</block>
					</block>
				</view>
				<view v-else class="weekDateList flex">
					<block v-for="(item,index) in weekDateList" :key="index">
						<block v-if="item.className">
							<view v-if="item.className=='bg-gradient-danger'" :class="'item flex1 flexColumnCenter danger '+(selectDate==item.date?'select':'')" @click="clickSelectDate(item)">
								<view class="date">{{item.day}}</view>
								<view class="eventNum">{{item.eventCount}}</view>
							</view>
							<view v-if="item.className=='bg-gradient-warning'" :class="'item flex1 flexColumnCenter warning '+(selectDate==item.date?'select':'')" @click="clickSelectDate(item)">
								<view class="date">{{item.day}}</view>
								<view class="eventNum">{{item.eventCount}}</view>
							</view>
							<view v-if="item.className=='bg-gradient-info'" :class="'item flex1 flexColumnCenter info '+(selectDate==item.date?'select':'')" @click="clickSelectDate(item)">
								<view class="date">{{item.day}}</view>
								<view class="eventNum">{{item.eventCount}}</view>
							</view>
							<view v-if="item.className=='bg-gradient-success'" :class="'item flex1 flexColumnCenter success '+(selectDate==item.date?'select':'')" @click="clickSelectDate(item)">
								<view class="date">{{item.day}}</view>
								<view class="eventNum">{{item.eventCount}}</view>
							</view>
						</block>
						<block v-else>
							<view class="item flex1 flexColumnCenter" @click="clickSelectDate(item)">
								<view class="date">{{item.day}}</view>
								<view class="eventNum">{{item.className?item.eventCount:''}}</view>
							</view>
						</block>
					</block>
				</view>
				<view class="expandBgC flexCenter">
					<view class="expandC flex" @click="clickExpandOrRetract()">
						<text>{{isExpand?'收起':'展开'}}</text> 
						<image v-if="isExpand" class="arrow" src="/static/icon/invest/upArrow.png" mode="widthFix"></image>
						<image v-else class="arrow" src="/static/icon/invest/downArrow.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="tabC">
				<view :class="'item '+(selectTab==index?'select':'')" v-for="(item,index) in tabList" :key="index" @click="clickTabItem(index)">{{item}}</view>
			</view>
			<!-- <scroll-view scroll-x class="topCategoryC">
				<view :class="'item relative '+(selectTopCategory==index?'select':'')" v-for="(item,index) in stockCategoryList" :key="index" @click="clickTopCategoryItem(index)">
					{{item.primary_sector}}
					<view v-if="selectTopCategory==index" class="line absolute"></view>
				</view>
			</scroll-view> -->
			<view v-if="selectTab==0" class="eventList">
				<view class="item" v-for="(item,index) in eventList" :key="index" @click="clickEventItem(item.id)">
					<view class="timeStarFollowC flex">
						<view class="time">{{getLocaleHourMinute(item.start_time)}}</view>
						<view class="starC">
							<view class="starList flex" >
								<image class="icon" :src="(sindex<(item.category.star_rating)?'/static/icon/invest/star_s.png':'/static/icon/invest/star.png')" mode="widthFix" v-for="(sitem,sindex) in 5" :key="index"></image>
							</view>
						</view>
						<view class="flex1"></view>
						<!-- <view class="follow">+关注</view> -->
					</view>
					<view class="categoryTitleC flex">
						<view class="category">{{item.category.event_type}}</view>
						<view class="title flex1">{{item.title}}</view>
					</view>
					<!-- <scroll-view scroll-x class="labelC">
						<view class="label" v-for="(titem,tindex) in item.tags" :key="tindex">
							{{titem}}
						</view>
					</scroll-view> -->
					<view class="content">
						<ua-markdown :source="replaceAnswerLabel(item.description)" />
					</view>
					<scroll-view v-if="item.related_concepts" scroll-x class="percentList">
						<view class="percentItem" v-for="(citem,cindex) in item.related_concepts" :key="cindex">
							{{citem.name}}
							<zui-progress-circle :position="citem.score" :range="[270,630]" :size="26" :ring-width="2" :texture="['#F3C368','#E3E3E3']">
								<view class="num">{{accMul(citem.score,100)}}%</view>
							</zui-progress-circle>
						</view>
					</scroll-view>
				</view>
			</view>
			<view v-if="selectTab==1" class="dataList"> 
				<view class="item" v-for="(item,index) in dataList" :key="index"> 
					<view class="flex">
						<view class="time flex1">{{getLocaleHourMinute(item.created_at)}}</view>
						<view class="starC relative">
							<view class="starList flex" >
								<image class="icon" :src="(sindex<(item.star)?'/static/icon/invest/star_s.png':'/static/icon/invest/star.png')" mode="widthFix" v-for="(sitem,sindex) in 5" :key="index"></image>
							</view>
						</view>
					</view>
					<view class="title">{{item.title}}</view>
					<view class="valueList flex between">
						<view class="pre">前值 {{item.former}}</view>
						<view class="prediction">预测 {{item.forecast?item.forecast:'--'}}</view>
						<view class="actual">实际 {{item.fact?item.fact:'--'}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<uni-popup ref="popup" type="top">
			<view class="popup" :style="'margin-top:'+navH+'px;'">
				<view class="yearMonthC flex">
					<view class="preC btn flexCenter" @click="clickPreMonth()">
						<image class="icon" src="/static/icon/home/monthLeftArrow.png" mode="widthFix"></image>
					</view>
					<view class="yearMonth flex1">{{selectMonth}}</view>
					<view class="nextC btn flexCenter" @click="clickNextMonth()">
						<image class="icon" src="/static/icon/home/monthRightArrow.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="weekList flex">
					<view class="item flex1" v-for="(item,index) in weekList" :key="index">{{item}}</view>
				</view>
				<view class="monthDateList flexWrap">
					<view class="item flexColumnCenter" v-for="(item,index) in calendarDateList[selectMonthIndex]" :key="index" @click="clickSelectDate(item)">
						<block v-if="item.isToday||item.date==selectDate">
							<view class="date today">{{item.day}}</view>
						</block>
						<block v-else>
							<block v-if="!item.isCurrentMonth">
								<view class="date notCurrentMonth">{{item.day}}</view>
							</block>
							<block v-else>
								<view class="date">{{item.day}}</view>
							</block>
						</block>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { inject } from 'vue'
	import { stockCategoryList, calendarEventList, calendarDataList, calendarEventCount,  } from '@/request/api'
	import { accMul, getLocaleHourMinute, replaceAnswerLabel } from '@/utils/util'
	
	export default {
		data() {
			return {
				menuTop:inject('menuTop'),
				menuH: inject('menuHeight'),
				navH:inject('navHeight'),
				windowWidth:inject('windowWidth'),
				contentTop:'',
				keywords:'',		//搜索关键字
				isRefreshing:false,
				todayDate:'',		//今日日期
				calendarDateList:[],	//日历日期
				selectMonth:'',			//选中月份
				selectMonthIndex:0,		//选中月份下标
				weekList:['一','二','三','四','五','六','日'],
				weekDateList:[],		//当前周日期
				monthDateList:[],		//当前月日期
				isExpand:false,			//是否展开日期
				tabList:['事件','数据'],
				selectTab:0,
				stockCategoryList:[],
				selectTopCategory:0,
				listTop:'',
				todayDate:'',		//今日日期
				selectDate:'',		//选择查看的日期
				progress: 75,
				eventList:[],	//事件列表
				dataList:[],	//数据列表
				page:1,
				loadAll:false,
				getLocaleHourMinute:getLocaleHourMinute,
				replaceAnswerLabel:replaceAnswerLabel,
				accMul:accMul
			}
		},
		onLoad() {
			let date = new Date()
			this.contentTop = this.navH + (75+20)/750*inject('windowWidth')
			let currentYear = date.getFullYear()
			let currentMonth = date.getMonth()+1
			let currentDay = date.getDate()
			this.todayDate = this.selectDate = currentYear+'-'+(currentMonth>9?currentMonth:('0'+currentMonth))+'-'+(currentDay>9?currentDay:('0'+currentDay))
			let week = date.getDay() || 7
			let diff = week - 1
			let daysOfWeek = [];
			for (var i = 0; i < 7; i++) {
				let newDate = new Date()
				newDate.setDate(currentDay - diff + i); // 设置日期为当前周的相应日期
				let newDay = newDate.getDate()
				let date = currentYear+'-'+(currentMonth>9?currentMonth:('0'+currentMonth))+'-'+(newDay>9?newDay:('0'+newDay))
				daysOfWeek.push({date:date,day:newDay,isToday:newDay==currentDay?true:false});
			}
			this.weekDateList = daysOfWeek
			let calendarDateList = []
			this.selectMonthIndex = 20*12+currentMonth-1
			this.selectMonth = currentYear + '-' + (currentMonth>9?currentMonth:('0'+currentMonth))
			for (var i = currentYear-20; i < currentYear+20; i++) {
				for (var j = 0; j < 12; j++) {
					let date = new Date(i,j+1,0)
					let firstDayOfMonth = new Date(i,j+1,0);
					firstDayOfMonth.setDate(1);
					//获取当前月天数
					let currentMonthDay = date.getDate()
					let firstDayWeek = firstDayOfMonth.getDay() || 7
					let daysOfMonth = []
					for (var k = 1; k <= currentMonthDay; k++) {
						let newDate = new Date(i,j+1,0)
						newDate.setDate(k); // 设置日期为当前月的相应日期
						let newMonth = newDate.getMonth()+1
						let newDay = newDate.getDate()
						let time = newDate.getTime()
						let date = i+'-'+(newMonth>9?newMonth:('0'+newMonth))+'-'+(newDay>9?newDay:('0'+newDay))
						daysOfMonth.push({date:date,year:i,month:newMonth,day:newDay,isToday:(i==currentYear&&newMonth==currentMonth&&newDay==currentDay)?true:false,isCurrentMonth:true,timestamp:time});
					}
					for (var k = 0; k < firstDayWeek-1; k++) {
						//获取上月天数 
						let year = i
						let month = j
						if(j<1)
						{
							year = i - 1
							month = 12
						}
						let lastMonthDay = new Date(year, month, 0).getDate()	
						//获取上月日期
						let newDate = new Date(year,month-1,lastMonthDay-k) 
						let newMonth = newDate.getMonth()+1 
						let newDay = newDate.getDate() 
						let time = newDate.getTime()
						let date = year+'-'+(newMonth>9?newMonth:('0'+newMonth))+'-'+(newDay>9?newDay:('0'+newDay))
						daysOfMonth.unshift({date:date,year:year,month:newMonth,day:newDay,isToday:false,isCurrentMonth:false,timestamp:time});
					}
					// 下一个月的第一天
					let nextMonthFirstDay = new Date(i, j+1, 1);
					// 然后减去一天就是当前月的最后一天
					let lastDayOfMonth = new Date(nextMonthFirstDay - (24 * 60 * 60 * 1000)); // 减去一天的毫秒数
					let lastDayWeek = lastDayOfMonth.getDay() || 7; // 返回0（星期天）到6（星期六）之
					for (var k = 1; k < 8-lastDayWeek; k++) {
						let year = i
						let month = j
						if(month>11)
						{
							month = 0
							year ++
						}
						//获取下月日期
						let newDate = new Date(year,month + 1,k)
						let newMonth = newDate.getMonth()+1 
						let newDay = newDate.getDate() 
						let time = newDate.getTime()
						let date = year+'-'+(newMonth>9?newMonth:('0'+newMonth))+'-'+(newDay>9?newDay:('0'+newDay))
						daysOfMonth.push({date:date,year:year,month:newMonth,day:newDay,isToday:false,isCurrentMonth:false,timestamp:time});
					}
					calendarDateList.push(daysOfMonth)
				}
			}
			this.calendarDateList = calendarDateList
			this.monthDateList = calendarDateList[this.selectMonthIndex]
			this.listTop = this.contentTop + (68+40+96+74+70+22)/750*inject('windowWidth')
			Promise.all([this.getStockCategoryListData(),this.getCurrentMonthEventCountData()]).then(res=>{
				this.getEventListData()
			}).catch(error=>{
				
			})
		},
		computed: {
		    circumference() {
		      return Math.PI * 100; // 圆周长，半径为50的圆周长
		    }
		},
		methods: {
			reloadData()
			{
				this.page = 1 
				this.loadAll = false
				if(this.selectTab==0)
				{
					this.getEventListData()
				}else 
					this.getDataListData()
			},
			pullDownRefresh()
			{
				this.isRefreshing = true
				this.reloadData()
			},
			loadMoreData()
			{
				if(!this.loadAll)
				{
					this.page ++
					if(this.selectTab==0)
					{
						this.getEventListData()
					}else 
						this.getDataListData()
				}
			},
			/**
			 * 点击搜索
			 */
			clickSearch()
			{
				this.reloadData()
			},
			/**
			 * 点击选择月份
			 */
			clickSelectMonth()
			{
				this.$refs['popup'].open()
			},
			/**
			 * 点击今日日期
			 */
			clickTodayDate()
			{
				if(this.selectDate!=this.todayDate)
				{
					this.selectDate = this.todayDate
					let date = new Date()
					let currentMonth = date.getMonth()+1
					this.selectMonthIndex = 20*12+currentMonth-1
					this.reloadData()
				}
			},
			/**
			 * 点击展开或收起
			 */
			clickExpandOrRetract()
			{
				this.isExpand = !this.isExpand
				if(this.isExpand)
				{
					this.listTop = this.contentTop + (68+40+96*6+74+70+74+22)/750*this.windowWidth
				}else
					this.listTop = this.contentTop + (68+40+96+74+70+74+22)/750*this.windowWidth
			},
			/**
			 * 点击上个月
			 */
			clickPreMonth()
			{
				if(this.selectMonthIndex>0)
				{
					this.selectMonthIndex --
					let monthList = this.calendarDateList[this.selectMonthIndex]
					let month = ''
					for (let item of monthList) {
						if(item.isCurrentMonth)
						{
							month = item.month
							break
						}
					}					
					this.selectMonth = this.calendarDateList[this.selectMonthIndex][0].year+'-'+(month>9?month:('0'+month))
				}
			},
			/**
			 * 点击下个月
			 */
			clickNextMonth()
			{
				if(this.selectMonthIndex<this.calendarDateList.length-1)
				{
					this.selectMonthIndex ++
					let monthList = this.calendarDateList[this.selectMonthIndex]
					let month = ''
					for (let item of monthList) {
						if(item.isCurrentMonth)
						{
							month = item.month
							break
						}
					}
					this.selectMonth = this.calendarDateList[this.selectMonthIndex][0].year+'-'+(month>9?month:('0'+month))
				}
			},
			/**
			 * 选中日期
			 * @param {Object} item
			 */
			clickSelectDate(item)
			{
				if(this.selectDate!=item.date)
				{
					this.selectDate = item.date
					this.reloadData()
				}
			},
			/**
			 * 点击切换事件或者数据
			 */
			clickTabItem(index)
			{
				if(this.selectTab!=index)
				{
					this.selectTab = index 
					this.reloadData()
				}
			},
			/**
			 * 选择一级分类
			 */
			clickTopCategoryItem(index)
			{
				if(this.selectTopCategory!=index)
				{
					this.selectTopCategory = index 
					this.reloadData()
				}
			},
			/**
			 * 点击查看事件详情
			 */
			clickEventItem(id)
			{
				uni.navigateTo({
					url:'/pages/invest/investDetails/investDetails?id='+id
				})
			},
			/**
			 * 获取股票分类
			 */
			getStockCategoryListData()
			{
				return new Promise((resolve,reject)=>{
					stockCategoryList().then(res=>{
						if(res.code==200)
						{
							res.data.unshift({primary_sector:'全部',sub_sectors:[]})
							this.stockCategoryList = res.data
							resolve(1)
						}else
						{
							uni.showToast({
								title:res.message,
								icon:'none'
							})
							reject(1)
						}
							
					}).catch(error=>{
						reject(1)
					})
				})
				
			},
			/**
			 * 获取事件列表数据
			 */
			getEventListData()
			{
				let param = {start:this.selectDate,q:this.keywords,page:this.page}
				if(this.selectTopCategory>0)
				{
					param.category = this.stockCategoryList[this.selectTopCategory].primary_sector
				}
				calendarEventList(param).then(res=>{
					this.isRefreshing = false
					if(res.code==200)
					{
						if(res.data.page==1)
						{
							this.eventList = res.data.events
						}else 
							this.eventList = this.eventList.concat(res.data.events)
						if(res.data.page==res.data.total_pages)
						{
							this.loadAll = true
						}
					}else 
						uni.showToast({
							title:res.message,
							icon:'none'
						})
				}).catch(error=>{
					this.isRefreshing = false
				})
			},
			/**
			 * 获取事件列表数据
			 */
			getDataListData()
			{
				let param = {start:this.selectDate,q:this.keywords,page:this.page}
				if(this.selectTopCategory>0)
				{
					param.category = this.stockCategoryList[this.selectTopCategory].primary_sector
				}
				calendarDataList(param).then(res=>{
					this.isRefreshing = false
					if(res.code==200)
					{
						this.dataList = res.data.data_list
					}else 
						uni.showToast({
							title:res.message,
							icon:'none'
						})
				}).catch(error=>{
					this.isRefreshing = false
				})
			},
			/**
			 * 获取当前月份每一天的事件数量
			 */
			getCurrentMonthEventCountData()
			{
				return new Promise((resolve,reject)=>{
					calendarEventCount().then(res=>{
						for (let item of res) {
							let date = item.start
							for (let s of this.weekDateList) {
								if(s.date == date)
								{
									 s.eventCount = item.title
									 s.className = item.className
								}
							}
							for (let s of this.monthDateList) {
								if(s.date == date)
								{
									s.eventCount = item.title
									s.className = item.className
								}
							}
						}
						resolve(1)
					}).catch(error=>{
						reject(1)
					})
				})
			}
		}
	}
</script>

<style lang="less">
page 
{
	background-color: #070707; 
}
.topBg
{
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
.searchC 
{
	background-color: #292929B3;
	left: 0;
	right: 0;
	margin: 20rpx 25rpx 0;
	padding: 0 25rpx;
	height: 70rpx;
	border: solid 1rpx #363636; 
	border-radius: 35rpx;
	font-size: 22rpx;
	font-weight: 500;
	.icon 
	{
		margin-right: 16rpx;
		width: 30rpx;
		height: auto;
	}
	input 
	{
		height: 100%;
		color: white;
	}
	.line 
	{
		background-color: #E1E1E1;
		width: 1rpx;
		height: 40rpx;
	}
	.search 
	{
		padding: 0 25rpx;
		color: #F97316;
	}
}
.contentC
{
	left: 0;
	right: 0;
	bottom: calc(55px + env(safe-area-inset-bottom));
	margin-top: 20rpx;
	overflow-y: scroll;
	.calendarC 
	{
		background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
		margin: 0 25rpx;
		border-radius: 20rpx;
		.todayC
		{
			padding: 12rpx 26rpx;
			.todayDateC
			{
				font-size: 32rpx;
				font-weight: bold;
				color: #3D3D3D;
				.icon 
				{
					margin-left: 16rpx;
					width: 30rpx;
					height: auto;
				}
			}
			.today 
			{
				background-color: #F3C368;
				width: 40rpx;
				line-height: 40rpx;
				border-radius: 50%;
				font-size: 26rpx;
				font-weight: 500;
				color: #070707;
				text-align: center;
			}
		}
		.weekList
		{
			.item 
			{
				line-height: 40rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #292621;
				text-align: center;
			}
		}
		.weekDateList
		{
			margin-top: 6rpx;
			padding: 0 20rpx;
			.item 
			{
				margin-right: 16rpx;
				padding: 10rpx 0 6rpx;
				border-radius: 5rpx;
				.date 
				{
					font-size: 24rpx;
					font-weight: bold;
					color: #2A2A2A;
				}
				.eventNum
				{
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-top: 2rpx;
					font-size: 18rpx;
					font-weight: bold;
				}
			}
			.item:nth-child(7n)
			{
				margin-right: 0;
			}
			.item.select 
			{
				.date 
				{
					color: white;
				}
			}
			.item.danger
			{
				background-color: #EB4A461A;
				color: #EB4A46;
			}
			.item.select.danger
			{
				background-color: #EB4A46;
				color: white;
			}
			.item.warning
			{
				background-color: #FD9A141A;
				color: #FD9A14;
			}
			.item.select.warning
			{
				background-color: #FD9A14;
				color: white;
			}
			.item.info
			{
				background-color: #16BBCF1A;
				color: #16BBCF;
			}
			.item.select.info
			{
				background-color: #16BBCF;
				color: white;
			}
			.item.success
			{
				background-color: #55AE591A;
				color: #55AE59;
			}
			.item.select.success
			{
				background-color: #55AE59;
				color: white;
			}
		}
		.monthDateList
		{
			margin-top: 6rpx;
			padding: 0 20rpx;
			.item 
			{
				margin: 0 16rpx 20rpx 0;
				padding: 10rpx 0 6rpx;
				width: calc((100% - 96rpx)/7);
				border-radius: 5rpx;
				.date 
				{
					font-size: 26rpx;
					font-weight: bold;
					color: #2A2A2A;
				}
				.date.notCurrentMonth
				{
					color: #999;
				}
				.eventNum
				{
					margin-top: 2rpx;
					font-size: 18rpx;
					font-weight: bold;
				}
			}
			.item:nth-child(7n) 
			{
				margin-right: 0;
			}
			.item.select
			{
				.date 
				{
					color: white;
				}
			}
			.item.danger
			{
				background-color: #EB4A461A;
				color: #EB4A46;
			}
			.item.select.danger
			{
				background-color: #EB4A46;
				color: white;
			}
			.item.warning
			{
				background-color: #FD9A141A;
				color: #FD9A14;
			}
			.item.select.warning
			{
				background-color: #FD9A14;
				color: white;
			}
			.item.info
			{
				background-color: #16BBCF1A;
				color: #16BBCF;
			}
			.item.select.info
			{
				background-color: #16BBCF;
				color: white;
			}
			.item.success
			{
				background-color: #55AE591A;
				color: #55AE59;
			}
			.item.select.success
			{
				background-color: #55AE59;
				color: white;
			}
		}
		.expandBgC 
		{
			margin: 0 25rpx;
			border-bottom: solid 1rpx #E4E4E4;
			.expandC
			{
				padding: 20rpx 0;
				font-size: 22rpx;
				font-weight: 500;
				color: #8A857C;
				.arrow 
				{
					margin-left: 7rpx;
					width: 15rpx;
					height: auto;
				}
			}
		}
	}
	.tabC 
	{
		margin-top: 10rpx;
		.item 
		{
			display: inline-block;
			padding: 0 27rpx;
			line-height: 70rpx;
			font-size: 32rpx;
			color: #CCCDD1;
		}
		.item.select 
		{
			color: #F3C368;
		}
	}
	.topCategoryC
	{
		white-space: nowrap;
		.item 
		{
			display: inline-block;
			line-height: 72rpx;
			padding: 0 28rpx;
			font-size: 27rpx;
			font-weight: 500;
			color: #939393;
		}
		.item.select
		{
			font-weight: bold;
			color: #F3C368;
			.line 
			{
				background-color: #F3C368;
				left: calc((100% - 50rpx)/2);
				width: 50rpx;
				height: 2rpx;
				bottom: 0;
			}
		}
	}
}
.eventList
{
	padding: 18rpx 25rpx;
	.item 
	{
		background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
		margin-bottom: 20rpx;
		padding: 30rpx 20rpx;
		border-radius: 10rpx;
		.timeStarFollowC 
		{
			.time
			{
				margin-right: 22rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #767676;
			}
			.starC 
			{
				.starList
				{
					top: 0;
					left: 0;
				}
				.icon 
				{
					margin-right: 9rpx;
					width: 27rpx;
					height: auto;
				}
			}
			.follow 
			{
				background-color: #3D3D3D;
				width: 90rpx;
				line-height: 40rpx;
				border-radius: 20rpx;
				font-size: 22rpx;
				font-weight: 500;
				color: #F2C367;
				text-align: center;
			}
			.follow.select 
			{
				background-color: #F3C368;
				color: #3D3D3D;
			}
		}
		.categoryTitleC 
		{
			margin-top: 18rpx;
			.category
			{
				background-color: #F3C368;
				margin-right: 12rpx;
				padding: 0 12rpx;
				line-height: 40rpx;
				border-radius: 8rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #070707;
			}
			.title 
			{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 28rpx;
				font-weight: bold;
				color: #3D3D3D;
			}
		}
		.labelC
		{
			margin-top: 12rpx;
			.label 
			{
				display: inline-block;
				margin-right: 10rpx;
				padding: 0 10rpx;
				line-height: 30rpx;
				font-size: 20rpx;
				font-weight: 500;
				border-radius: 5rpx;
				border: solid 1rpx #333;
			}
		}
		.content 
		{
			margin-top: 20rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			text-overflow: ellipsis;
			overflow: hidden;
			font-size: 24rpx;
			font-weight: 500;
			color: #71675D;
		}
		.percentList
		{
			white-space: nowrap;
			margin-top: 26rpx;
			.percentItem 
			{
				display: inline-flex;
				align-items: center;
				background-color: white;
				box-shadow: 0 7rpx 18rpx 0 rgba(217,217,217,0.28);
				margin-right: 20rpx;
				padding: 0 20rpx;
				height: 70rpx;
				border-radius: 10rpx;
				font-size: 26rpx;
				font-weight: bold;
				color: #222;
				zui-progress-circle
				{
					margin-left: 20rpx;
				}
				.num 
				{
					width: 23px;
					line-height:23px;
					font-size: 17rpx;
					font-weight: bold;
					color: #999;
					text-align: center;
				}
			}
			.percentItem:last-child
			{
				margin-right: 0;
			}
		}
	}
}
.dataList 
{
	padding: 0 25rpx;
	.item 
	{
		padding: 30rpx 0;
		border-bottom: solid 1rpx #E4E4E4;
		.time
		{
			font-size: 24rpx;
			font-weight: bold;
			color: #767676;
		}
		.starC 
		{
			.starList
			{
				top: 0;
				left: 0;
			}
			.icon 
			{
				margin-right: 9rpx;
				width: 27rpx;
				height: auto;
			}
		}
		.title
		{
			margin-top: 16rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 30rpx;
			font-weight: bold;
			color: #222;
		}
		.valueList
		{
			margin-top: 20rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #666;
		}
	}
}
.popup
{
	background-color: white;
	padding: 30rpx 0;
	.yearMonthC
	{
		padding: 0 30rpx;
		.yearMonth
		{
			text-align: center;
			font-size: 24rpx;
		}
		.btn 
		{
			background-color: #f8f8f8;
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			.icon 
			{
				display: block;
				width: 24rpx;
				height: auto;
			}
		}
	}
	.weekList
	{
		margin-top: 20rpx;
		padding: 0 30rpx;
		.item 
		{
			line-height: 40rpx;
			font-size: 24rpx;
			color: #a1a1a1;
			text-align: center;
		}
	}
	.monthDateList
	{
		padding: 0 30rpx;
		.item 
		{
			margin-bottom: 10rpx;
			width: calc(100%/7);
			.date 
			{
				background-color: #f8f8f8;
				width: calc(100% - 10rpx);
				line-height: 64rpx;
				border-radius: 15rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #333;
				text-align: center;
			}
			.date.today 
			{
				background-color: #FF7E1A;
				color: white;
			}
			.date.inRange 
			{
				background-color: #FFF2EB;
			}
			.date.notCurrentMonth
			{
				background-color: #fdfdfd;
				color: #c3c3c3;
			}
			.eventNum
			{
				margin-top: 12rpx;
				width: 80rpx;
				height: 30rpx;
				line-height: 30rpx;
				border-radius: 5rpx;
				font-size: 16rpx;
				font-weight: 500;
				color: white;
				text-align: center;
			}
		}
	}
}
</style>
