<template>
	<view>
		<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
		<navBar leftText="事件中心" :hideNavBg="true" :hideBack="true"></navBar>
		<view class="topC fixed" :style="'top:'+navH+'px;'">
			<view class="searchC flex" >
				<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:#eeeeee" confirm-type="search" @confirm="clickSearch()"/>
			</view>
			<view class="screenC flex">
				<block v-for="(item,index) in screenCategoryList" :key="index">
					<view :class="'item flex '+(index==2?'level':'')"  @click="clickScreenItem(index)">
						<image class="icon" :src="item.icon" mode="widthFix"></image>
						<view>{{item.title}}</view>
						<image class="arrow" src="/static/icon/home/conceptCenter/conceptScreenArrow.png" mode="widthFix"></image>
					</view>
					<view v-if="index<screenCategoryList.length-1" class="flex1"></view>
				</block>
			</view>
			<view class="timeCategoryC flex">
				<view :class="'item flex1 '+(selectTimeCategory==index?'select':'')" v-for="(item,index) in timeCategoryList" :key="index" @click="clickTimeCategoryItem(index)">{{item.name}}</view>
			</view>
			<!-- <scroll-view scroll-x :scroll-left="topScrollLeft" class="topCategoryC" id="topCategory">
				<view :class="'item relative '+(selectTopCategory==index?'select':'')" v-for="(item,index) in stockCategoryList" :key="index" @click="clickTopCategoryItem($event,index)">
					{{item.primary_sector}}
					<view class="line absolute"></view>
				</view>
			</scroll-view> -->
			<!-- <scroll-view v-if="stockCategoryList.length>0&&stockCategoryList[selectTopCategory].sub_sectors.length>0" scroll-x :scroll-left="secondScrollLeft" class="secondCategoryC" id="secondCategory">
				<view :class="'item '+(selectSecondCategory==index?'select':'')" v-for="(item,index) in stockCategoryList[selectTopCategory].sub_sectors" :key="index" @click="clickSecondCategoryItem($event,index)">
					{{item}}
				</view>
			</scroll-view> -->
		</view>
		<scroll-view scroll-y class="eventListC fixed" :style="'top:'+listTop+'px'" refresher-enabled :refresher-triggered="isRefreshing" @refresherrefresh="pullDownRefresh()" @scrolltolower="loadMoreData()">
			<!-- <view style="width:750rpx; height:400rpx">
				<l-echart ref="chartRef"></l-echart>
			</view> -->
			<view class="list">
				<view class="item" @click="clickEventItem(item.id)" v-for="(item,index) in eventList" :key="index">
					<view class="levelTitleC flex">
						<view :class="'level '+item.importance">{{item.importance}}</view>
						<view class="title flex1">{{item.title}}</view>
					</view>
					<view :class="'content '+(item.isExpand?'':'retract')" @click.stop="clickExpandOrRetract(index)">{{item.description}}</view>
					<scroll-view scroll-x class="increaseRateList">
						<view :class="'rateItem '+(getRateUpOrDown(item.related_avg_chg)?'down':'up')">
							平均涨幅: 
							<image v-if="getRateUpOrDown(item.related_avg_chg)" class="arrow" src="/static/icon/home/downArrow.png" mode="widthFix"></image>
							<image v-else class="arrow" src="/static/icon/home/upArrow.png" mode="widthFix"></image>
							{{getRateStr(item.related_avg_chg)}}%
						</view>
						<view :class="'rateItem '+(getRateUpOrDown(item.related_max_chg)?'down':'up')">
							最大涨幅: 
							<image v-if="getRateUpOrDown(item.related_max_chg)" class="arrow" src="/static/icon/home/downArrow.png" mode="widthFix"></image>
							<image v-else class="arrow" src="/static/icon/home/upArrow.png" mode="widthFix"></image>
							{{getRateStr(item.related_max_chg)}}%
						</view>
						<view :class="'rateItem '+(getRateUpOrDown(item.related_week_chg)?'down':'up')">
							周涨幅: 
							<image v-if="getRateUpOrDown(item.related_week_chg)" class="arrow" src="/static/icon/home/downArrow.png" mode="widthFix"></image>
							<image v-else class="arrow" src="/static/icon/home/upArrow.png" mode="widthFix"></image>
							{{getRateStr(item.related_week_chg)}}%
						</view>
					</scroll-view>
					<!-- <scroll-view scroll-x class="stockList">
						<view class="stockItem" v-for="(sitem,sindex) in item.related_stocks" :key="sindex" @click.stop="clickLookRelatedStockItem(item.id,sitem.stock_code)">{{sitem.stock_name}} <text :class="'change '+(getRateUpOrDown(sitem.daily_change)?'down':'up')">{{(getRateUpOrDown(sitem.daily_change)?'':'+')+sitem.daily_change}}%</text></view>
					</scroll-view> -->
					<view class="timeToolBarC flex">
						<view class="time flex1">{{getLocaleTime(item.created_at)}}</view> 
						<view class="toolBarC flex">
							<view class="toolItem flex"> 
								<image class="icon" src="/static/icon/home/browser.png" mode="widthFix"></image>
								<text>{{item.view_count}}</text>
							</view>
							<view class="toolItem flex" @click.stop="clickFollowEvent(item.id)">
								<image class="icon" src="/static/icon/home/like.png" mode="widthFix"></image>
								<text>{{item.follower_count}}</text>
							</view>
							<view class="toolItem flex">
								<image class="icon" src="/static/icon/home/comment.png" mode="widthFix"></image>
								<text>{{item.post_count}}</text>
							</view>
							<view class="toolItem flex" @click.stop="clickFollowEvent(item.id)">
								<image class="icon" src="/static/icon/home/collect.png" mode="widthFix"></image>
								<text>{{item.follower_count}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<uni-popup ref="screenPopup" type="top">
			<view class="screenPopup" :style="'padding-top:'+menuTop+'px;'">
				<view class="navC flex" :style="'height:'+menuH+'px;'" @click="clickCancel()">
					<image class="icon" src="/static/icon/backBlack.png" mode="widthFix"></image>
					<view class="title">筛选</view>
				</view>
				<view class="screenC flex">
					<block v-for="(item,index) in screenCategoryList" :key="index">
						<view :class="'item flex '+(index==2?'level':'')"  @click="clickScreenItem(index)">
							<image class="icon" :src="item.icon" mode="widthFix"></image>
							<view>{{item.title}}</view>
							<image class="arrow" src="/static/icon/home/conceptCenter/conceptScreenArrow.png" mode="widthFix"></image>
						</view>
						<view v-if="index<screenCategoryList.length-1" class="flex1"></view>
					</block>
				</view>
				<block v-if="selectScreenCategory==0">
					<view class="quickTimeC flexWrap">
						<view :class="'item '+(selectQuickTimeIndex==index?'select':'')" v-for="(item,index) in quickTimeList" :key="index" @click="clickQuickTimeItem(index,item)">
							{{item.title}}
						</view>
					</view>
					<view class="dateRangeC flex">
						<view class="dateC start flexCenter flex1">
							<image class="icon" src="/static/icon/home/dateRange.png" mode="widthFix"></image>
							<view v-if="startDateStr">{{startDateStr}}</view>
							<view v-else>请选择开始时间</view>
						</view>
						<view class="line"></view>
						<view class="dateC end flexCenter flex1">
							<image class="icon" src="/static/icon/home/dateRange.png" mode="widthFix"></image>
							<view v-if="endDateStr">{{endDateStr}}</view>
							<view v-else>请选择结束时间</view>
						</view>
					</view>
					<view class="datePickerC flex">
						<picker-view class="dateList" indicator-style="height: 43px;" :value="startDateValue" @change="startDateChange">
							<picker-view-column>
								<view class="item" v-for="(item,index) in yearList" :key="index">{{item}}年</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in monthList" :key="index">{{item}}月</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in dayList" :key="index">{{item}}日</view>
							</picker-view-column>
						</picker-view>
						<picker-view class="dateList" indicator-style="height: 43px;" :value="endDateValue" @change="endDateChange">
							<picker-view-column>
								<view class="item" v-for="(item,index) in yearList" :key="index">{{item}}年</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in monthList" :key="index">{{item}}月</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in dayList" :key="index">{{item}}日</view>
							</picker-view-column>
						</picker-view>
					</view>
				</block>
				<block v-if="selectScreenCategory==1">
					<view class="industrySearchC flex">
						<image class="icon" src="/static/icon/home/industrySearch.png" mode="widthFix"></image>
						<input class="flex1" type="text" v-model="industryKeywords" placeholder="搜索行业" placeholder-style="color:#94989A" @input="industrySearch"/>
					</view>
					<view class="industryCategoryC">
						<block v-if="industryKeywords.length>0">
							<view class="topCategoryList">
								<view :class="'item relative '+(searchIndustryTopCategory==index?'select':'')"  v-for="(item,index) in searchResultList" :key="index" @click="clickSearchIndustryTopCategoryItem(index,item)">
									{{item.level1_sector}}
									<view class="line absolute"></view>
								</view>
							</view>
							<view class="secondCategoryList">
								<view :class="'item relative '+(searchIndustrySecondCategory==index?'select':'')"  v-for="(item,index) in searchResultList[searchIndustryTopCategory].level2_sectors" :key="index" @click="clickSearchIndustrySecondCategoryItem(index,item)">
									{{item.level2_sector}}
								</view>
							</view>
							<view class="thirdCategoryList flex1">
								<block v-if="searchResultList[searchIndustryTopCategory].level2_sectors.length>0">
									<view :class="'item flex relative '+(searchIndustryThirdCategory==index?'select':'')"  v-for="(item,index) in searchResultList[searchIndustryTopCategory].level2_sectors[searchIndustrySecondCategory].level3_sectors" :key="index" @click="clickSearchIndustryThirdCategoryItem(index,item)">
										<view class="flex1">{{item.level3_sector}}</view> 
										<image v-if="searchIndustryThirdCategory==index" class="select" src="/static/icon/home/industry_s.png" mode="widthFix"></image>
									</view>
								</block>
							</view>
						</block>
						<block v-else>
							<view class="topCategoryList">
								<view :class="'item relative '+(selectIndustryTopCategory==index?'select':'')"  v-for="(item,index) in industryCategoryList" :key="index" @click="clickIndustryTopCategoryItem(index)">
									{{item.level1_sector}}
									<view class="line absolute"></view>
								</view>
							</view>
							<view class="secondCategoryList flex1">
								<view :class="'item relative '+(selectIndustrySecondCategory==index?'select':'')"  v-for="(item,index) in industryCategoryList[selectIndustryTopCategory].level2_sectors" :key="index" @click="clickIndustrySecondCategoryItem(index)">
									{{item.level2_sector}}
								</view>
							</view>
							<view class="thirdCategoryList flex1">
								<block v-if="industryCategoryList[selectIndustryTopCategory].level2_sectors.length>0">
									<view :class="'item flex relative '+(selectIndustryThirdCategory==index?'select':'')"  v-for="(item,index) in industryCategoryList[selectIndustryTopCategory].level2_sectors[selectIndustrySecondCategory].level3_sectors" :key="index" @click="clickIndustryThirdCategoryItem(index)">
										<view class="flex1">{{item.level3_sector}}</view> 
										<image v-if="selectIndustryThirdCategory==index" class="select" src="/static/icon/home/industry_s.png" mode="widthFix"></image>
									</view>
								</block>
							</view>
						</block>
					</view>
				</block>
				<view v-if="selectScreenCategory==2" class="importanceList">
					<view :class="'item flex '+(item.select?'select':'')" v-for="(item,index) in importanceList" :key="index" @click="clickImportanceItem(item)">
						<view class="flex1">{{item.name}}</view>
						<image v-if="item.select" class="icon" src="/static/icon/home/level_s.png" mode="widthFix"></image>
					</view>
				</view>
				<view v-if="selectScreenCategory==3" class="sortTypeList">
					<view :class="'item flex '+(selectSortKey==item.key?'select':'')" v-for="(item,index) in sortTypeList" :key="index" @click="clickSortListItem(item)">
						<image class="icon" :src="item.icon" mode="widthFix"></image>
						<view>{{item.name}}</view>
					</view>
				</view>
				<view v-if="selectScreenCategory!=3" class="btnC flex">
					<view class="cancel btn flex1" @click="clickReset()">重置</view>
					<view class="certain btn flex1" @click="clickCertain()">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { inject } from 'vue'
	import { filterOptions, eventList, homeData, industryCategoryList, loginByEmail, followEvent, stockCategoryList } from '@/request/api'
	import { getRateStr, getRateUpOrDown, getLocaleTime } from '@/utils/util.js'
	const echarts = require('../../uni_modules/lime-echart/static/echarts.min.js');

	export default {
		data() {
			return {
				menuTop:inject('menuTop'),
				menuH: inject('menuHeight'),
				navH:inject('navHeight'),
				windowWidth:inject('windowWidth'),
				contentTop:'',
				listTop:'',
				screenCategoryList:[{
					icon:'/static/icon/home/timeScreen.png',
					title:'时间筛选',
				},
				{
					icon:'/static/icon/home/industryScreen.png',
					title:'行业筛选',
				},
				{
					icon:'/static/icon/home/eventLevel.png',
					title:'事件等级',
				}],
				keywords:'',	//关键词
				timeCategoryList:[],
				selectTimeCategory:0,
				stockCategoryList:[],
				topScrollWidth:0,
				secondScrollWidth:0,
				selectTopCategory:0,
				topScrollLeft:0,
				selectSecondCategory:0,
				secondScrollLeft:0,
				selectScreenCategory:0,		//0时间筛选1行业筛选2事件等级3最新排序
				quickTimeList:[{
					title:'最新',
					key:'latest'
				},
				{
					title:'盘中',
					key:'intraday'
				},
				{
					title:'早盘',
					key:'morning'
				},
				{
					title:'午盘',
					key:'afternoon'
				},
				{
					title:'今日全天',
					key:'today'
				},
				{
					title:'昨日',
					key:'yesterday'
				},
				{
					title:'近一周',
					key:'week'
				},
				{
					title:'近一月',
					key:'month'
				}],
				selectQuickTimeIndex:-1,
				startDateStr:'',		//选择开始日期
				startTimeStamp:'',	//开始日期时间戳
				endDateStr:'',			//选择结束日期
				endTimeStamp:'',	//结束日期时间戳
				yearList:[],		//年份列表
				monthList:[],		//月份列表
				dayList:[],			//日列表
				startDateValue:[0,0,0],
				endDateValue:[0,0,0],
				industryCategoryList:[],		//行业分类数组
				industryKeywords:'',			//行业分类搜索关键词
				searchResultList:[],			//行业分类搜索结果数组
				selectIndustryTopCategory:0,	//选中行业一级分类
				selectIndustrySecondCategory:0,	//选中行业二级分类
				selectIndustryThirdCategory:0,	//选中行业三级分类
				searchIndustryTopCategory:0,	//搜索结果选中行业一级分类
				searchIndustrySecondCategory:0,	//搜索结果选中行业二级分类
				searchIndustryThirdCategory:0,	//搜索结果选中行业三级分类
				importanceList:[],				//重要性数组
				sortTypeList:[],					
				selectSortKey:'',				//选中排序key
				option:{
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow' 
						},
						confine: true
					},
					grid:{
						left: '0%',
						right: '0%',
						top: '10%',
						bottom: '20%',
					},
					xAxis: [
						{
							type: 'category',
							data: ['跌停','跌停~5%','5~1%','1~0%','平盘','0~1%','1~5%','5%~涨停','涨停'],
							axisTick:{
								show:false
							},
							axisLine:{
								show:false
							},
							axisLabel: {
								fontSize:10,
								interval:'0',
								textStyle:{
									color: function (value, index) {
									    return (index==0)?'#355422':(index==8?'#C00000':'#515151');
									}
								}
							}
						}
					],
					yAxis: [
						{
							type: 'value',
							show:false,
							axisTick: { show: false },
						}
					],
					series: [
						{
							name: '热度',
							type: 'bar',
							label: {
								show:true,
								position:'top',
								fontSize:12,
							},
							itemStyle:{
								borderRadius:[5,5,0,0]	
							},
							data: [],
						}
					]
				},
				eventList:[],
				page:1,
				isRefreshing:false,				//是否正在下拉刷新
				loadAll:false,					//是否加载完毕
				getRateStr:getRateStr,
				getRateUpOrDown:getRateUpOrDown,
				getLocaleTime:getLocaleTime,
			}
		},
		onLoad() {
			this.contentTop = this.navH + (70+74)/750*this.windowWidth
			this.listTop = this.contentTop + (22+72)/750*this.windowWidth
			this.generateDateListData()
			Promise.all([this.getEventFilterListData(),this.getIndustryCategoryListData(),this.getStockCategoryListData()]).then(res=>{
				this.getEventListData()
			}).catch(error=>{
				
			})
		},
		onReady() {
			// uni.createSelectorQuery().select('#topCategory').boundingClientRect(rect=>{
			//     this.topScrollWidth = Math.round(rect.width)
			// }).exec()
			// uni.createSelectorQuery().select('#secondCategory').boundingClientRect(rect=>{
			// 	if(rect)
			// 	{
			// 		this.secondScrollWidth = Math.round(rect.width)
			// 	}
			// }).exec()
		},
		methods: {
			/**
			 * 生成日期数据
			 */
			generateDateListData()
			{
				let currentDate = new Date()
				let year = currentDate.getFullYear()
				let month = currentDate.getMonth()
				let day = currentDate.getDate()
				let date = new Date(year,month+1,0)
				let monthDays = date.getDate()
				for (var i = 2000; i < 2060; i++) {
					this.yearList.push(i)
				}
				for (var i = 0; i < 12*60; i++) {
					this.monthList.push((i%12)+1)
				}
				for (var i = 0; i < monthDays*60; i++) {
					this.dayList.push((i%monthDays)+1)
				}
				let that = this
				setTimeout(function() {
					that.startDateValue = [year-2000,month+12*30,(day-1)+monthDays*30]
					that.endDateValue = [year-2000,month+12*30,(day-1)+monthDays*30]
				}, 100);
				
			},
			/**
			 * 下拉刷新
			 */
			pullDownRefresh(){
				this.isRefreshing = true
				this.clickSearch()
			},
			/**
			 * 上拉加载
			 */
			loadMoreData()
			{
				if(!this.loadAll)
				{
					this.page ++
					if(this.selectTimeCategory==0)
					{
						this.getEventListData()
					}else
						this.getHotEventListData()
				}
			},
			async init() {
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chartRef.init(echarts);
				chart.setOption(this.option)
			},
			/**
			 * 点击搜索
			 */
			clickSearch()
			{
				this.loadAll = false
				this.page = 1
				if(this.selectTimeCategory==1)
				{
					this.getHotEventListData()
				}else 
					this.getEventListData()
			},
			/**
			 * 点击事件筛选
			 * @param {Object} index
			 */
			clickTimeCategoryItem(index)
			{
				if(this.selectTimeCategory!=index)
				{
					this.selectTimeCategory = index
					this.clickSearch()
				}
			},
			/**
			 * 点击排序选项
			 */
			clickSortListItem(item)
			{
				this.selectSortKey = item.key
				this.clickCancel()
				this.clickSearch()
			},
			/**
			 * 点击筛选
			 */
			clickScreenItem(index)
			{
				this.selectScreenCategory = index
				this.$refs['screenPopup'].open()
			},
			/**
			 * 点击筛选弹窗取消
			 */
			clickCancel() 
			{
				this.$refs['screenPopup'].close()
			},
			/**
			 * 点击筛选弹窗重置
			 */
			clickReset()
			{
				if (this.selectScreenCategory == 0) {
					//时间筛选
					this.selectQuickTimeIndex = -1;
					this.startDateStr = this.endDateStr = ''
				}else if (this.selectScreenCategory == 1) {
					//行业筛选
					this.industryKeywords = ''
					this.searchResultList = []	
					this.selectIndustryTopCategory = 0
					this.selectIndustrySecondCategory = 0
					this.selectIndustryThirdCategory = 0
					this.searchIndustryTopCategory = 0
					this.searchIndustrySecondCategory = 0	
					this.searchIndustryThirdCategory = 0	
				}else if (this.selectScreenCategory == 2) {
					//事件等级
					for (let item of this.importanceList) {
						item.select = false
					}
				}
				this.clickCancel()
				this.clickSearch()
			},
			/**
			 * 点击筛选弹窗确定
			 */
			clickCertain()
			{
				if (this.selectScreenCategory==0) {
					//如果是时间筛选
					if (this.selectQuickTimeIndex == -1) {
						if(!this.startDateStr) {
							uni.showToast({
								title:'请选择开始时间',
								icon:'none'
							})
							return
						}
						if(!this.endDateStr) {
							uni.showToast({
								title:'请选择结束时间',
								icon:'none'
							})
							return
						}
						if (this.endTimeStamp < this.startTimeStamp)
						{
							uni.showToast({
								title:'开始时间不能晚于结束时间',
								icon:'none'
							})
							return
						}
					}
				}
				this.clickCancel()
				this.clickSearch()
			},
			/**
			 * 点击筛选分类
			 * @param {Object} index
			 */
			clickScreenCategoryItem(index)
			{
				if(this.selectScreenCategory!=index)
				{
					this.selectScreenCategory = index
				}
			},
			/**
			 * 点击选择一级分类
			 * @param {Object} index
			 */
			clickTopCategoryItem(event,index)
			{
				if(this.selectTopCategory!=index)
				{
					this.selectTopCategory = index
					this.selectSecondCategory = 0
					let offsetLeft = event.currentTarget.offsetLeft
					this.topScrollLeft = offsetLeft - this.topScrollWidth/2
					// if(index==0)
					// {
						this.listTop = this.contentTop + (22+80+72)/750*this.windowWidth
					// }else
					// 	this.listTop = this.contentTop + (22+80+72+42+42)/750*this.windowWidth
					this.clickSearch()
				}
			},
			/**
			 * 点击选择二级分类
			 * @param {Object} index
			 */
			clickSecondCategoryItem(event,index)
			{
				if(this.selectSecondCategory!=index)
				{
					this.selectSecondCategory = index
					let offsetLeft = event.currentTarget.offsetLeft
					this.secondScrollLeft = offsetLeft - this.secondScrollWidth/2
					this.clickSearch()
				}
			},
			/**
			 * 点击选择快捷时间
			 */
			clickQuickTimeItem(index)
			{
				this.startDateStr = this.endDateStr = ''
				if(this.selectQuickTimeIndex!=index) {
					this.selectQuickTimeIndex = index
				}
			},
			/**
			 * 监听日期选择
			 * @param {Object} e
			 */
			startDateChange(e)
			{
				this.selectQuickTimeIndex = -1
				let value = e.detail.value
				if (value[1]!=this.startDateValue[1]) {
					//如果改变了月份
					let year = value[0]+2000
					let month = value[1]%12
					let date = new Date(year,month+1,0)
					let monthDays = date.getDate()
					this.dayList = []
					for (var i = 0; i < monthDays*60; i++) {
						this.dayList.push((i%monthDays)+1)
					}
				}
				this.startDateValue = e.detail.value
				let year = value[0]+2000
				let month = value[1]%12 + 1
				let date = new Date(year,month,0)
				let monthDays = date.getDate()
				let day = value[2]%monthDays + 1
				this.startDateStr = year+'-'+(month>9?month:('0'+month))+'-'+(day>9?day:('0'+day))
				var startDateStr = this.startDateStr.replace(/-/g,'/')+' '+'00:00:00'
				this.startTimeStamp = new Date(startDateStr).getTime()
			},
			/**
			 * 监听结束日期选择
			 * @param {Object} e
			 */
			endDateChange(e)
			{
				this.selectQuickTimeIndex = -1
				let value = e.detail.value
				if (value[1]!=this.endDateValue[1]) {
					//如果改变了月份
					let year = value[0]+2000
					let month = value[1]%12
					let date = new Date(year,month+1,0)
					let monthDays = date.getDate()
					this.dayList = []
					for (var i = 0; i < monthDays*60; i++) {
						this.dayList.push((i%monthDays)+1)
					}
				}
				this.endDateValue = e.detail.value
				let year = value[0]+2000
				let month = value[1]%12 + 1
				let date = new Date(year,month,0)
				let monthDays = date.getDate()
				let day = value[2]%monthDays + 1
				this.endDateStr = year+'-'+(month>9?month:('0'+month))+'-'+(day>9?day:('0'+day))
				var endDateStr = this.endDateStr.replace(/-/g,'/')+' '+'00:00:00'
				this.endTimeStamp = new Date(endDateStr).getTime()
			},
			/**
			 * 行业分类搜索
			 */
			industrySearch(e)
			{
				let keywords = e.detail.value
				this.industryKeywords = keywords
				if (keywords) {
					let arr = []
					for (let item of this.industryCategoryList) {
						let index = this.industryCategoryList.indexOf(item)
						if(item.level1_sector.indexOf(keywords)>-1)
						{
							item.index = index
							arr.push(item)
						}else 
						{
							let arr1 = []
							for (let item1 of item.level2_sectors) {
								let index1 = item.level2_sectors.indexOf(item1)
								if(item1.level2_sector.indexOf(keywords)>-1)
								{
									item1.index = index
									item1.index1 = index1
									arr1.push(item1)
								}else 
								{
									let arr2 = []
									for (let item2 of item1.level3_sectors) {
										let index2 = item1.level3_sectors.indexOf(item2)
										if(item2.level3_sector.indexOf(keywords)>-1)
										{
											item2.index = index 
											item2.index1 = index1 
											item2.index2 = index2
											arr2.push(item2)
										}
									}
									if(arr2.length>0){
										arr2.unshift({level3_sector:'全部',index:index,index2:0})
										arr1.push({level2_sector:item1.level2_sector,level3_sectors: arr2,index:index,index1:index1})
									}
								}
							}
							if(arr1.length>0)
							{
								arr1.unshift({level2_sector:'全部',level3_sectors:[{level3_sector:'全部',level4_sectors:[]}],index:index,index1:0})
								arr.push({level1_sector:item.level1_sector,level2_sectors: arr1,index:index})
							}
						}
					}
					this.searchResultList = arr
				}else 
				{
					this.searchResultList = this.industryCategoryList
					this.searchIndustryTopCategory = this.searchIndustrySecondCategory = this.searchIndustryThirdCategory = 0
				}
			},
			/**
			 * 选择行业分类搜索结果一级分类
			 */
			clickSearchIndustryTopCategoryItem(index,item)
			{
				if(this.searchIndustryTopCategory!=index)
				{
					this.searchIndustryTopCategory = index
					this.selectIndustryTopCategory = item.index
					this.searchIndustrySecondCategory = this.selectIndustrySecondCategory = 0
				}
			},
			/**
			 * 选择行业分类搜索结果二级分类
			 */
			clickSearchIndustrySecondCategoryItem(index,item)
			{
				if(this.searchIndustrySecondCategory!=index)
				{
					this.searchIndustrySecondCategory = index
					this.selectIndustrySecondCategory = item.index1
					this.searchIndustryThirdCategory = this.selectIndustryThirdCategory = 0
				}
			},
			/**
			 * 选择行业分类搜索结果三级分类
			 */
			clickSearchIndustryThirdCategoryItem(index,item)
			{
				if(this.searchIndustryThirdCategory!=index)
				{
					this.searchIndustryThirdCategory = index
					this.selectIndustryThirdCategory = item.index2
				}
			},
			/**
			 * 选择行业分类一级分类
			 */
			clickIndustryTopCategoryItem(index)
			{
				if(this.selectIndustryTopCategory!=index)
				{
					this.selectIndustryTopCategory = index
					this.selectIndustrySecondCategory = 0
				}
			},
			/**
			 * 选择行业分类二级分类
			 */
			clickIndustrySecondCategoryItem(index)
			{
				if(this.selectIndustrySecondCategory!=index)
				{
					this.selectIndustrySecondCategory = index
					this.selectIndustryThirdCategory = 0
				}
			},
			/**
			 * 选择行业分类三级分类
			 */
			clickIndustryThirdCategoryItem(index)
			{
				if(this.selectIndustryThirdCategory!=index)
				{
					this.selectIndustryThirdCategory = index
				}
			},
			/**
			 * 点击选择重要性
			 */
			clickImportanceItem(item)
			{
				item.select = !item.select
				if(item.key=='all')
				{
					if (item.select) {
						//如果选中的是全选
						for (let item1 of this.importanceList) {
							if(item1.key!=item.key)
							{
								item1.select = false
							}
						}
					}
				}else 
				{
					for (let item1 of this.importanceList) {
						if(item1.key=='all')
						{
							item1.select = false
						}
					}
				}
			},
			/**
			 * 点击展开收起内容
			 * @param {Object} index
			 */
			clickExpandOrRetract(index)
			{
				this.eventList[index].isExpand = !this.eventList[index].isExpand
			},
			/**
			 * 点击相关股票
			 * @param {Object} id 事件id
			 * @param {Object} code 股票代码
			 */
			clickLookRelatedStockItem(id,code)
			{
				uni.navigateTo({
					url:'/pages/index/stockDetails/stockDetails?type=1&code='+code+'&id='+id
				})
			},
			/**
			 * 点击关注事件
			 * @param {Object} id
			 */
			clickFollowEvent(id)
			{
				followEvent(id).then(res=>{
					uni.showToast({
						title:res.message,
						icon:'none'
					})
					this.clickSearch()
				}).catch(error=>{
					
				})	
			},
			/**
			 * 查看事件详情
			 */
			clickEventItem(id) 
			{
				let that = this
				uni.$on('editSuccess',res=>{
					that.clickSearch()
					uni.$off('editSuccess')
				})
				uni.navigateTo({
					url:'/pages/index/eventDetails/eventDetails?id='+id
				})
			},
			/**
			 * 获取事件筛选项
			 */
			getEventFilterListData()
			{
				return new Promise((resolve,reject)=>{
					filterOptions().then(res=>{
						if(res.code==200)
						{
							resolve(1)
							this.timeCategoryList = res.data.sort_options
							this.importanceList = res.data.importance_options
							this.importanceList.unshift({desc: "全部",key: "all",name: "全部"})
						}else 
						{
							resolve(1)
							uni.showToast({
								title:res.message,
								icon:'none'
							})
						}
					}).catch(error=>{
						reject(1)
					})
				})
				
			},
			/**
			 * 获取行业分类
			 */
			getIndustryCategoryListData()
			{
				return new Promise((resolve,reject)=>{
					industryCategoryList().then(res=>{
						let list = res.data[0].hierarchy
						list.unshift({level1_sector:'全部',level2_sectors:[]})
						for (let item of list) {
							let index = list.indexOf(item)
							item.index = index
							item.level2_sectors.unshift({level2_sector:'全部',level3_sectors:[]})
							for (let item1 of item.level2_sectors) {
								let index1 = item.level2_sectors.indexOf(item1)
								item1.index1 = index1
								item1.level3_sectors.unshift({level3_sector:'全部',level4_sectors:[]})
								for (let item2 of item1.level3_sectors) {
									let index2 = item1.level3_sectors.indexOf(item2)
									item2.index2 = index2
								}
							}
						}
						this.industryCategoryList = list						
						resolve(1)
					}).catch(error=>{
						reject(1)
					})
				})
			},
			/**
			 * 获取股票分类
			 */
			getStockCategoryListData()
			{
				return new Promise((resolve,reject)=>{
					stockCategoryList().then(res=>{
						if(res.code==200)
						{
							for (let item of res.data) {
								item.sub_sectors.unshift('全部')
							}
							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 = {page:this.page,q:this.keywords}
				if(this.selectTopCategory>0)
				{
					param.stock_sector = this.stockCategoryList[this.selectTopCategory].primary_sector
				}
				if(this.selectSecondCategory>0)
				{
					param.secondary_sector = this.stockCategoryList[this.selectTopCategory].sub_sectors[this.selectSecondCategory]
				}
				if(this.selectQuickTimeIndex>-1)
				{
					param.time_filter = this.quickTimeList[this.selectQuickTimeIndex].key
				}
				if(this.startDateStr)
				{
					param.start_date = this.startDateStr
				}
				if(this.endDateStr)
				{
					param.end_date = this.endDateStr
				}
				if(this.selectIndustryThirdCategory>0)
				{
					param.industry_level = 4
					param.industry_classification = this.industryCategoryList[this.selectIndustryTopCategory].level2_sectors[this.selectIndustrySecondCategory].level3_sectors[this.selectIndustryThirdCategory].level3_sector
				}else 
				{
					if(this.selectIndustrySecondCategory>0)
					{
						param.industry_level = 3
						param.industry_classification = this.industryCategoryList[this.selectIndustryTopCategory].level2_sectors[this.selectIndustrySecondCategory].level2_sector
					}else 
					{
						if(this.selectIndustryTopCategory>0) {
							param.industry_level = 2
							param.industry_classification = this.industryCategoryList[this.selectIndustryTopCategory].level1_sector
						}
					}
				}
				let arr = []
				for (let item of this.importanceList) {
					if (item.select) {
						arr.push(item.key)
					}
				}
				if(arr.length>0)
				{
					param.importance = arr.join(',')
				}
				if(this.selectTimeCategory!=1)
				{
					param.sort = this.timeCategoryList[this.selectTimeCategory].key
				}
				eventList(param).then(res=>{
					this.isRefreshing = false
					if(res.success)
					{
						// let valueData = []
						// let data = res.data.overall_stats.change_distribution
						// valueData.push({
						// 	value:data.limit_down,
						// 	itemStyle: {color:'#35542266'},
						// 	label:{
						// 		textStyle: {color:'#35542266'},
						// 	},
						// })
						// valueData.push({
						// 	value:data.down_over_5,
						// 	itemStyle: {color:'#35542299'},
						// 	label:{
						// 		textStyle: {color:'#355422'},
						// 	},
						// },)
						// valueData.push({
						// 	value:data.down_5_to_1,
						// 	itemStyle: {color:'#355422CC'},
						// 	label:{
						// 		textStyle: {color:'#355422'},
						// 	},
						// })
						// valueData.push({
						// 	value:data.down_within_1,
						// 	itemStyle: {color:'#355422'},
						// 	label:{
						// 		textStyle: {color:'#355422'},
						// 	},
						// })
						// valueData.push({
						// 	value:data.flat,
						// 	itemStyle: {color:'#ACB0C0'},
						// 	label:{
						// 		textStyle: {color:'#666'},
						// 	},
						// },)
						// valueData.push({
						// 	value:data.up_within_1,
						// 	itemStyle: {color:'#C00000'},
						// 	label:{
						// 		textStyle: {color:'#C00000'},
						// 	},
						// })
						// valueData.push({
						// 	value:data.up_1_to_5,
						// 	itemStyle: {color:'#C00000CC'},
						// 	label:{
						// 		textStyle: {color:'#C00000'},
						// 	}
						// })
						// valueData.push({
						// 	value:data.up_over_5,
						// 	itemStyle: {color:'#C0000099'},
						// 	label:{
						// 		textStyle: {color:'#C00000'},
						// 	}
						// })
						// valueData.push({
						// 	value:data.limit_up,
						// 	itemStyle: {color:'#C0000066'},
						// 	label:{
						// 		textStyle: {color:'#C0000066'},
						// 	}
						// })
						// this.option.series[0].data = valueData
						// this.init()
						if(this.page==1)
						{
							this.eventList = res.data.events
						}else 
							this.eventList = this.eventList.concat(res.data.events)
						this.loadAll = !res.data.pagination.has_next
					}
				}).catch(error=>{
					this.isRefreshing = false
				})
			},
			/**
			 * 获取热门事件数据
			 */
			getHotEventListData()
			{
				let param = {page:this.page,q:this.keywords}
				if(this.selectTopCategory>0)
				{
					param.stock_sector = this.stockCategoryList[this.selectTopCategory].primary_sector
				}
				if(this.selectSecondCategory>0)
				{
					param.secondary_sector = this.stockCategoryList[this.selectTopCategory].sub_sectors[this.selectSecondCategory]
				}
				if(this.selectQuickTimeIndex>-1)
				{
					param.time_filter = this.quickTimeList[this.selectQuickTimeIndex].key
				}
				if(this.startDateStr)
				{
					param.start_date = this.startDateStr
				}
				if(this.endDateStr)
				{
					param.end_date = this.endDateStr
				}
				
				if(this.selectIndustryThirdCategory>0)
				{
					param.industry_level = 4
					param.industry_classification = this.industryCategoryList[this.selectIndustryTopCategory].level2_sectors[this.selectIndustrySecondCategory].level3_sectors[this.selectIndustryThirdCategory].level3_sector
				}else 
				{
					if(this.selectIndustrySecondCategory>0)
					{
						param.industry_level = 3
						param.industry_classification = this.industryCategoryList[this.selectIndustryTopCategory].level2_sectors[this.selectIndustrySecondCategory].level2_sector
					}else 
					{
						if(this.selectIndustryTopCategory>0) {
							param.industry_level = 2
							param.industry_classification = this.industryCategoryList[this.selectIndustryTopCategory].level1_sector
						}
					}
				}
				let arr = []
				for (let item of this.importanceList) {
					if (item.select) {
						arr.push(item.key)
					}
				}
				if(arr.length>0)
				{
					param.importance = arr.join(',')
				}
				if(this.selectSortKey)
				{
					param.sort = this.selectSortKey
				}
				homeData(param).then(res=>{
					if(res.code==200)
					{
						if(this.page==1)
						{
							this.eventList = res.data.events
						}else 
							this.eventList = this.eventList.concat(res.data.events)
					}else 
						uni.showToast({
							title:res.message,
							icon:'none'
						})
				}).catch(error=>{
					
				})
			}
		}
	}
</script>

<style lang="less">
page 
{
	background-color: #070707; 
}
.topBg
{
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
.topC 
{
	left: 0;
	right: 0;
	.searchC
	{
		background-color: #292929B3;
		margin: 20rpx 25rpx 0;
		padding: 0 25rpx;
		height: 70rpx;
		border-radius: 35rpx;
		font-size: 22rpx;
		font-weight: 500;
		.icon 
		{
			margin-right: 12rpx;
			width: 25rpx;
			height: auto;
		}
		input 
		{
			height: 100%;
			color: white;
		}
	}
	.screenC 
	{
		margin: 0 25rpx;
		border-bottom: solid 1rpx #373737; 
		.item 
		{
			padding: 0 8rpx;
			height: 64rpx;
			font-size: 24rpx;
			color: #CCCDD1;
			.icon
			{
				margin-right: 13rpx;
				width: 17rpx;
				height: auto;
			}
			.arrow
			{
				margin-left: 9rpx;
				width: 11rpx;
				height: auto;
			}
		}
		.item:first-child 
		{
			.icon 
			{
				margin-right: 12rpx;
				width: 20rpx;
				height: auto;
			}
		}
		.item.level
		{
			.icon 
			{
				margin-right: 13rpx;
				width: 16rpx;
				height: auto;
			}
		}
	}
	.timeCategoryC
	{
		margin-top: 10rpx;
		.item 
		{
			line-height: 60rpx;
			font-size: 32rpx;
			color: #CCCDD1;
			text-align: center;
		}
		.item.select 
		{
			font-weight: bold;
			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;
			}
		}
	}
	.secondCategoryC
	{
		white-space: nowrap;
		padding: 21rpx 20rpx;
		.item 
		{
			display: inline-block;
			line-height: 44rpx;
			padding: 0 11rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #42485B;
		}
		.item.select
		{
			background-color: #FFF6F0;
			color: #F97316;
			border-radius: 5rpx;
		}
	}
}
.eventListC
{
	left: 0;
	right: 0;
	bottom: calc(55px + env(safe-area-inset-bottom));
	overflow-y: scroll;
	.list 
	{
		padding: 0 25rpx;
		.item 
		{
			background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
			margin-bottom: 20rpx;
			padding: 30rpx 0;
			border-radius: 10rpx;
			.levelTitleC 
			{
				padding: 0 18rpx 0 20rpx;
				.level
				{
					margin-right: 18rpx;
					width: 50rpx;
					line-height: 40rpx;
					border-radius: 10rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: white;
					text-align: center;
				}
				.level.S
				{
					background-color: #CC4C02;
				}
				.level.A
				{
					background-color: #EC7014;
				}
				.level.B
				{
					background-color: #FB9A29;
				}
				.level.C
				{
					background-color: #FEC44F;
				}
				.title 
				{
					font-size: 30rpx;
					font-weight: bold;
					color: #3D3D3D;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
			.content 
			{
				margin: 20rpx 22rpx 0;
				font-size: 24rpx;
				font-weight: 500;
				color: #71675D;
				word-break: break-all;
			}
			.content.retract 
			{
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.increaseRateList
			{
				white-space: nowrap;
				margin: 20rpx 22rpx 0;
				.rateItem
				{
					display: inline-block;
					margin-right: 15rpx;
					line-height: 44rpx;
					padding: 0 14rpx;
					border-radius: 10rpx;
					font-size: 22rpx;
					font-weight: bold;
					color: white;
					.arrow 
					{
						width: 15rpx;
						height: auto;
					}
				}
				.rateItem.up
				{
					background-color: #EC3440;
				}
				.rateItem.down
				{
					background-color: #355422;
				}
			}
			.stockList 
			{
				white-space: nowrap;
				margin-top: 20rpx;
				.stockItem
				{
					background-color: #F8F8F8;
					margin-right: 21rpx;
					display: inline-block;
					padding: 0 20rpx;
					line-height: 60rpx;
					border-radius: 10rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #222;
					.change.down 
					{
						color: #355422;
					}
					.change.up
					{
						color: #F97316;
					}
				}
			}
			.timeToolBarC
			{
				margin-top: 20rpx;
				.time 
				{
					margin-left: 22rpx;
					font-size: 22rpx;
					font-weight: 500;
					color: #666;
				}
				.toolBarC
				{
					.toolItem
					{
						padding: 0 20rpx;
						font-size: 26rpx;
						font-weight: bold;
						color: #666;
						.icon
						{
							margin-right: 13rpx;
							width: 29rpx;
							height: auto;
						}
					}
					.toolItem:first-child
					{
						.icon 
						{
							margin-right: 15rpx;
							width: 33rpx;
							height: auto;
						}
					}
				}
			}
		}
	}
}

.screenPopup 
{
	background-color: white;
	border-radius: 0 0 20rpx 20rpx;
	overflow: hidden;
	.navC 
	{
		padding: 0 25rpx;
		font-size: 36rpx;
		font-weight: bold;
		.icon 
		{
			margin-right: 12rpx;
			width: 32rpx;
			height: auto;
		}
	}
	.screenC
	{
		margin: 20rpx 25rpx 0;
		border-bottom: solid 1rpx #F0F0F0; 
		.item 
		{
			padding: 0 8rpx;
			height: 64rpx;
			font-size: 24rpx;
			color: #3E3E3E;
			.icon
			{
				margin-right: 13rpx;
				width: 17rpx;
				height: auto;
			}
			.arrow
			{
				margin-left: 9rpx;
				width: 11rpx;
				height: auto;
			}
		}
		.item:first-child 
		{
			.icon 
			{
				margin-right: 12rpx;
				width: 20rpx;
				height: auto;
			}
		}
		.item.level
		{
			.icon 
			{
				margin-right: 13rpx;
				width: 16rpx;
				height: auto;
			}
		}
	}
	.quickTimeC 
	{
		padding: 30rpx 48rpx 20rpx;
		.item 
		{
			margin: 0 32rpx 30rpx 0;
			width: calc((100% - 96rpx)/4);
			line-height: 58rpx;
			border-radius: 30rpx;
			border: solid 1rpx #4E4E4E;
			font-size: 24rpx;
			font-weight: 500;
			color: #4E4E4E;
			text-align: center;
		}
		.item:nth-child(4n)
		{
			margin-right: 0;
		}
		.item.select 
		{
			border: solid 1rpx #F3C368; 
			color: #F3C368;
		}
	}
	.dateRangeC 
	{
		padding: 0 25rpx;
		border-radius: 5rpx;
		.dateC 
		{
			background-color: #F7F7F7;
			height: 76rpx;
			border-radius: 38rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #999;
			.icon 
			{
				margin-right: 17rpx;
				width: 28rpx;
				height: auto;
			}
		}
		.dateC.select 
		{
			border: solid 1rpx #F3C368;
			color: #F3C368;
		}
		.line 
		{
			background-color: #999;
			margin: 0 12rpx;
			width: 36rpx;
			height: 2rpx;
		}
	}
	.dateList 
	{
		width: 50%;
		height: 430rpx;
		.item 
		{
			line-height: 43px;
			font-size: 32rpx;
			font-weight: 500;
			color: #778595;
			text-align: center;
		}
	}
	
	.industrySearchC 
	{
		background-color: #F6F6F6;
		margin: 30rpx 25rpx 0;
		padding: 0 22rpx;
		height: 75rpx;
		border: solid 1rpx #DBDBDB;
		border-radius: 10rpx;
		font-size: 26rpx;
		font-weight: 500;
		.icon 
		{
			margin-right: 16rpx;
			width: 30rpx;
			height: auto;
		}
	}
	.industryCategoryC
	{
		margin-top: 38rpx;
		display: flex;
		.topCategoryList 
		{
			background-color: #F8F7FD;
			height: 736rpx;
			overflow-y: scroll;
			.item 
			{
				padding: 0 26rpx;
				width: 175rpx;
				line-height: 90rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #333;
			}
			.item.select 
			{
				background-color: white;
				font-weight: bold;
				color: #E7A933;
				.line 
				{
					background-color: #F3C368;
					top: calc((100% - 25rpx)/2);
					left: 0;
					width: 8rpx;
					height: 25rpx;
					border-radius: 0 5rpx 5rpx 0;
				}
			}
		}
		.secondCategoryList 
		{
			width: 278rpx;
			.item
			{
				padding: 0 26rpx;
				line-height: 90rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #333;
			}
			.item.select 
			{
				font-weight: bold;
				color: #E7A933;
			}
		}
		.thirdCategoryList
		{
			.item
			{
				padding: 0 26rpx;
				line-height: 90rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #333;
			}
			.item.select 
			{
				font-weight: bold;
				color: #E7A933;
				.select 
				{
					width: 22rpx;
					height: auto;
				}
			}
		}
	}
	.searchResultList
	{
		max-height: 500rpx;
		overflow-y: scroll;
		.item 
		{
			padding: 10rpx 44rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #444;
			.key 
			{
				color: #F97316;
			}
		}
	}
	.industryList
	{
		margin-top: 24rpx;
		max-height: 500rpx;
		overflow-y: scroll;
		.selectCategoryList 
		{
			padding: 0 22rpx;
			.item 
			{
				background-color: #FFF1E7;
				margin-right: 15rpx;
				padding-left: 16rpx;
				line-height: 38rpx;
				border-radius: 10rpx;
				border: solid .5px #F97316;
				font-size: 22rpx;
				font-weight: 500;
				color: #F97316;
				.deleteC 
				{
					padding: 0 11rpx;
					.icon 
					{
						width: 15rpx;
						height: 15rpx;
					}
				}
			}
		}
		.list 
		{
			margin-top: 20rpx;
			.topCategory 
			{
				padding: 0 22rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #F97316;
			}
			.secondItem 
			{
				padding: 0 22rpx;
			}
			.thirdItem 
			{
				padding-left: 36rpx;
			}
			.forthItem
			{
				padding-left: 36rpx;
				.categoryC.select 
				{
					border-bottom: solid .5px #F97316;
				}
			}
			.categoryC 
			{
				height: 50rpx;
				.spread 
				{
					margin-right: 12rpx;
					width: 24rpx;
					line-height: 22rpx;
					border: solid .5px #8C8C8C;
					font-size: 22rpx;
					color: #8C8C8C;
					text-align: center;
				}
				.category 
				{
					font-size: 24rpx;
					font-weight: 500;
					color: #444;
					
				}
			}
			.categoryC.select 
			{
				.spread
				{
					color: #F97316;
					border: solid .5px #F97316;
				}
				.category 
				{
					color: #F97316;
				}
				.selectC
				{
					width: 24rpx;
					height: 24rpx;
					border: solid .5px #F97316;
					.icon 
					{
						display: block;
						width: 20rpx;
						height: auto;
					}
				}
			}
		}
	}
	.importanceList 
	{
		margin-top: 12rpx;
		padding: 0 50rpx 25rpx;
		.item 
		{
			background-color: #F7F7F7;
			margin-bottom: 20rpx;
			padding: 0 50rpx;
			height: 70rpx;
			border-radius: 10rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #4E4E4E;
		}
		.item.select
		{
			border: solid 2rpx #F3C368; 
			.icon 
			{
				width: 26rpx;
				height: auto;
			}
		}
	}
	.sortTypeList 
	{
		padding: 0 25rpx 15rpx;
		.item 
		{
			height: 80rpx;
			border-bottom: solid 1rpx #EAEAEA;
			font-size: 24rpx;
			font-weight: 500;
			color: #778595;
			.icon 
			{
				margin-right: 12rpx;
				width: 23rpx;
				height: auto;
			}
		}
		.item.select 
		{
			color: #3D3D3D;
		}
		.item:last-child 
		{
			border: none;
		}
	}
	.btnC 
	{
		overflow: hidden;
		.btn 
		{
			line-height: 100rpx;
			font-size: 28rpx;
			text-align: center;
		}
		.btn.cancel 
		{
			background-color: #F8F7FD;
			font-weight: 500;
			color: #999;
		}
		.btn.certain 
		{
			background-color: #F3C368;
			font-weight: bold;
			color: #101213;
		}
	}
}
</style>
