<template>
	<view>
		<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
		<view class="navTitle fixed" :style="'top:'+menuTop+'px;line-height:'+menuH+'px;'">首页</view>
		<view class="searchC fixed flex" :style="'top:'+navH+'px;'">
			<image class="icon" src="/static/icon/home/search.png" mode="widthFix"></image>
			<input class="flex1" type="text" v-model="keywords" placeholder="搜索话题/股票名称" placeholder-style="color:#94989A"/>
			<view class="line"></view>
			<view class="search" @click="clickSearch()">搜索</view>
		</view>
		<view class="screenCategoryC fixed" :style="'top:'+contentTop+'px'">
			<view class="sortScreenC flex between">
				<view class="timeCategoryC">
					<view :class="'item '+(selectTimeCategory==index?'select':'')" v-for="(item,index) in timeCategoryList" :key="index" @click="clickTimeCategoryItem(index)">{{item.name}}</view>
				</view>
				<view class="flex">
					<view class="sortC flex" @click="clickSort()">
						<image class="icon" src="/static/icon/home/sort.png" mode="widthFix"></image>
						<text>排序</text>
					</view>
					<view class="line"></view>
					<view class="screenC flex" @click="clickScreenItem()">
						<image class="icon" src="/static/icon/home/screen.png" mode="widthFix"></image>
						<text>筛选</text>
					</view>
				</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'" @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="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">
								<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/follow.png" mode="widthFix"></image>
								<text>{{item.follower_count}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<uni-popup ref="sortPopup" type="top" mask-background-color="transparent">
			<view class="sortPopup relative">
				<image class="arrow absolute" src="/static/icon/home/sortArrow.png" mode="widthFix"></image>
				<view class="list" :style="'margin-top:'+sortListTop+'px;'">
					<view class="item flex" v-for="(item,index) in sortList" :key="index" @click="clickSortListItem(item)">
						<image class="icon" :src="item.icon" mode="aspectFit"></image>
						<text> {{item.name}}</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="screenPopup" type="top">
			<view class="screenPopup" :style="'padding-top:'+menuTop+'px;'">
				<view class="navC flex" :style="'height:'+menuH+'px;'">
					<image class="icon" src="/static/icon/backBlack.png" mode="widthFix"></image>
					<view class="title">筛选</view>
				</view>
				<view class="flexStretch" style="max-height: 1000rpx;">
					<view class="screenCategoryList">
						<view :class="'item relative '+(selectScreenCategory==index?'select':'')" v-for="(item,index) in screenCategoryList" :key="index" @click="clickScreenCategoryItem(index)">
							{{item}}
							<view v-if="selectScreenCategory==index" class="line absolute"></view>
						</view>
					</view>
					<view class="screenContentC flex1">
						<block v-if="selectScreenCategory==0">
							<view class="section">选择日期</view>
							<view class="dateC flex">
								<view class="start flex1">{{startDate}}</view>
								<view class="and">至</view>
								<view class="end flex1">{{endDate}}</view>
							</view>
							<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 monthDateList[selectMonthIndex]" :key="index" @click="clickSelectDate(item)">
									<block v-if="item.isToday">
										<view class="date today">{{item.day}}</view>
									</block>
									<block v-else>
										<block v-if="item.date==startDate||item.date==endDate">
											<view class="date select">{{item.day}}</view>
										</block>
										<block v-else-if="item.timestamp>startTimeStamp&&item.timestamp<endTimeStamp">
											<view class="date inRange">{{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>
									</block>
								</view>
							</view>
						</block>
						<block v-if="selectScreenCategory==1">
							<view class="section">选择体系</view>
							<view class="industryCategoryC flexWrap">
								<view :class="'item '+(selectIndustryTopCategory==index?'select':'')"  v-for="(item,index) in industryCategoryList" :key="index" @click="clickIndustryTopCategoryItem(index)">
									{{item.classification_name}}
								</view>
							</view>
							<view class="industrySearchC flex">
								<image class="icon" src="/static/icon/home/search.png" mode="widthFix"></image>
								<input class="flex1" type="text" v-model="industryKeywords" placeholder="搜索行业" placeholder-style="color:#94989A" @input="industrySearch"/>
							</view>
							<view v-if="industryKeywords.length>0" class="searchResultList">
								<block v-for="(item,index) in searchResultList" :key="index">
									<block v-for="(sitem,sindex) in item.hierarchy" :key="sindex">
										<block v-for="(titem,tindex) in sitem.level2_sectors" :key="tindex">
											<block v-for="(fitem,findex) in titem.level3_sectors" :key="findex">
												 <view class="item" @click="clickIndustrySearchItem(fitem)">
													 <text :class="industryKeywords.indexOf(citem)>-1?'key':''" v-for="(citem,cindex) in (fitem.level3_sector+'/'+titem.level2_sector+'/'+sitem.level1_sector)" :key="cindex">{{citem}}</text>
												 </view> 
											</block>
										</block>
									</block>
								</block>
							</view>
							<view v-else class="industryList">
								<view v-if="selectIndustrySecondCategory>-1" class="selectCategoryList flexWrap">
									<view v-if="selectIndustrySecondCategory>-1" class="item flex" @click="deleteIndustrySecondCategoryItem()">
										{{industryCategoryList[selectIndustryTopCategory].hierarchy[selectIndustrySecondCategory].level1_sector}}
										<view class="deleteC">
											<image class="icon" src="/static/icon/home/delete.png"></image>
										</view>
									</view>
									<view v-if="selectIndustryThirdCategory>-1" class="item flex" @click="deleteIndustryThirdCategoryItem()">
										{{industryCategoryList[selectIndustryTopCategory].hierarchy[selectIndustrySecondCategory].level2_sectors[selectIndustryThirdCategory].level2_sector}}
										<view class="deleteC">
											<image class="icon" src="/static/icon/home/delete.png"></image>
										</view>
									</view>
									<view v-if="selectIndustryForthCategory>-1" class="item flex" @click="deleteIndustryForthCategoryItem()">
										{{industryCategoryList[selectIndustryTopCategory].hierarchy[selectIndustrySecondCategory].level2_sectors[selectIndustryThirdCategory].level3_sectors[selectIndustryForthCategory].level3_sector}}
										<view class="deleteC">
											<image class="icon" src="/static/icon/home/delete.png"></image>
										</view>
									</view>
								</view>
								<view class="list">
									<view class="topCategory">{{industryCategoryList[selectIndustryTopCategory].classification_name}}</view>
									<view class="secondList">
										<view class="secondItem" v-for="(sitem,sindex) in industryCategoryList[selectIndustryTopCategory].hierarchy" :key="sindex">
											<view :class="'categoryC flex '+(selectIndustrySecondCategory==sindex?'select':'')" @click.stop="clickIndustrySecondCategoryItem(sindex)">
												<view class="spread">{{(selectIndustrySecondCategory==sindex&&sitem.isSpread)?'-':'+'}}</view>
												<view class="category">{{sitem.level1_sector}}</view>
											</view>
											<block v-if="sitem.isSpread">
												<view class="thirdList" v-for="(titem,tindex) in industryCategoryList[selectIndustryTopCategory].hierarchy[sindex].level2_sectors" :key="tindex">
													<view class="thirdItem">
														<view :class="'categoryC flex '+(selectIndustrySecondCategory==sindex&&selectIndustryThirdCategory==tindex?'select':'')" @click.stop="clickIndustryThirdCategoryItem(sindex,tindex)">
															<view class="spread">{{(selectIndustrySecondCategory==sindex&&selectIndustryThirdCategory==tindex&&titem.isSpread)?'-':'+'}}</view>
															<view class="category">{{titem.level2_sector}}</view>
														</view>
														<block v-if="titem.isSpread">
															<view class="forthList" v-for="(fitem,findex) in industryCategoryList[selectIndustryTopCategory].hierarchy[sindex].level2_sectors[tindex].level3_sectors" :key="findex">
																<view class="forthItem" @click.stop="clickIndustryForthCategoryItem(sindex,tindex,findex)">
																	<view :class="'categoryC flex '+(selectIndustrySecondCategory==sindex&&selectIndustryThirdCategory==tindex&&selectIndustryForthCategory==findex?'select':'')">
																		<view class="category flex1">{{fitem.level3_sector}}</view>
																		<view v-if="selectIndustrySecondCategory==sindex&&selectIndustryThirdCategory==tindex&&selectIndustryForthCategory==findex" class="selectC">
																			<image class="icon" src="/static/icon/home/industry_s.png" mode="widthFix"></image>
																		</view>
																	</view>
																</view>
															</view>
														</block>
													</view>
												</view>
											</block>
										</view>
									</view>
								</view>
							</view>
						</block>
						<block v-if="selectScreenCategory==2">
							<view class="section">重要性</view>
							<view class="importanceList flexWrap">
								<view :class="'item '+(selectImportanceIndex==index?'select':'')" v-for="(item,index) in importanceList" :key="index" @click="clickImportanceItem(index)">
									{{item.name}}
								</view>
							</view>
						</block>
					</view>
				</view>
				<view class="btnC flex">
					<view class="cancel btn flex1" @click="clickCancel()">取消</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:'',
				sortListTop:'',
				keywords:'',	//关键词
				sortList:[],
				selectSortKey:'',	//选中排序key
				timeCategoryList:[],
				selectTimeCategory:0,
				stockCategoryList:[],
				topScrollWidth:0,
				secondScrollWidth:0,
				selectTopCategory:0,
				topScrollLeft:0,
				selectSecondCategory:0,
				secondScrollLeft:0,
				screenCategoryList:['日期范围','行业分类','重要性'],
				selectYearMonth:'',		//选择的年月日
				startDate:'',		//选择开始日期
				startTimeStamp:'',	//开始日期时间戳
				endDate:'',			//选择结束日期
				endTimeStamp:'',	//结束日期时间戳
				weekList:['一','二','三','四','五','六','日'],
				monthDateList:[],
				selectMonthIndex:0,		//选中月份下标
				selectMonth:'',			//选中年月
				industryCategoryList:[],		//行业分类数组
				industryKeywords:'',			//行业分类搜索关键词
				searchResultList:[],			//行业分类搜索结果数组
				selectIndustryTopCategory:0,	//选中行业一级分类
				selectIndustrySecondCategory:-1,	//选中行业二级分类
				selectIndustryThirdCategory:-1,	//选中行业三级分类
				selectIndustryForthCategory:-1,	//选中行业四级分类
				selectScreenCategory:0,
				importanceList:[],				//重要性数组
				selectImportanceIndex:0,		//选择重要性下标
				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,
				loadAll:false,
				getRateStr:getRateStr,
				getRateUpOrDown:getRateUpOrDown,
				getLocaleTime:getLocaleTime
			}
		},
		onLoad() {
			this.contentTop = this.navH + (74+20)/750*this.windowWidth
			this.listTop = this.contentTop + (22+80+72)/750*this.windowWidth
			this.sortListTop = this.navH + (22+80+80)/750*this.windowWidth
			Promise.all([this.getEventFilterListData(),this.getIndustryCategoryListData(),this.getStockCategoryListData()]).then(res=>{
				this.getEventListData()
			}).catch(error=>{
				
			})
			let currentDate = new Date();
			// 获取当前年份
			let currentYear = currentDate.getFullYear();
			let currentMonth = currentDate.getMonth()+1;
			let currentDay = currentDate.getDate();
			let monthDateList = []
			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});
					}
					monthDateList.push(daysOfMonth)
				}
			}
			this.monthDateList = monthDateList
		},
		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()
		},
		onPullDownRefresh() {
			this.clickSearch()
		},
		methods: {
			loadMoreData()
			{
				if(!this.loadAll)
				{
					this.page ++
					if(this.selectScreenCategory==0)
					{
						this.getEventListData()
					}else
						this.getHotEventListData()
				}
			},
			async init() {
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chartRef.init(echarts);
				chart.setOption(this.option)
			},
			/**
			 * 点击搜索
			 */
			clickSearch()
			{
				this.page = 1
				if(this.selectTimeCategory==0)
				{
					this.getEventListData()
				}else 
					this.getHotEventListData()
			},
			/**
			 * 点击事件筛选
			 * @param {Object} index
			 */
			clickTimeCategoryItem(index)
			{
				if(this.selectTimeCategory!=index)
				{
					this.selectTimeCategory = index
					if(index==0)
					{
						//最新
						this.getEventListData()
					}else 
						//热门
						this.getHotEventListData()
				}
			},
			/**
			 * 点击排序
			 */
			clickSort()
			{
				this.$refs['sortPopup'].open()
			},
			/**
			 * 点击排序选项
			 */
			clickSortListItem(item)
			{
				this.selectSortKey = item.key
				this.$refs['sortPopup'].close()
				if(this.selectTimeCategory==0)
				{
					//最新
					this.getEventListData()
				}else 
					this.getHotEventListData()
			},
			/**
			 * 点击筛选
			 */
			clickScreenItem()
			{
				this.$refs['screenPopup'].open()
			},
			/**
			 * 点击筛选弹窗取消
			 */
			clickCancel()
			{
				this.$refs["screenPopup"].close()
			},
			/**
			 * 点击筛选弹窗确定
			 */
			clickCertain()
			{
				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
					if(this.selectTimeCategory==0)
					{
						//最新
						this.getEventListData()
					}else 
						this.getHotEventListData()
				}
			},
			/**
			 * 点击选择二级分类
			 * @param {Object} index
			 */
			clickSecondCategoryItem(event,index)
			{
				if(this.selectSecondCategory!=index)
				{
					this.selectSecondCategory = index
					let offsetLeft = event.currentTarget.offsetLeft
					this.secondScrollLeft = offsetLeft - this.secondScrollWidth/2
					if(this.selectTimeCategory==0)
					{
						//最新
						this.getEventListData()
					}else 
						this.getHotEventListData()
				}
			},
			/**
			 * 点击上个月
			 */
			clickPreMonth()
			{
				if(this.selectMonthIndex>0)
				{
					this.selectMonthIndex --
					let monthList = this.monthDateList[this.selectMonthIndex]
					let month = ''
					for (let item of monthList) {
						if(item.isCurrentMonth)
						{
							month = item.month
							break
						}
					}					
					this.selectMonth = this.monthDateList[this.selectMonthIndex][0].year+'-'+(month>9?month:('0'+month))
				}
			},
			/**
			 * 点击下个月
			 */
			clickNextMonth()
			{
				if(this.selectMonthIndex<this.monthDateList.length-1)
				{
					this.selectMonthIndex ++
					let monthList = this.monthDateList[this.selectMonthIndex]
					let month = ''
					for (let item of monthList) {
						if(item.isCurrentMonth)
						{
							month = item.month
							break
						}
					}
					this.selectMonth = this.monthDateList[this.selectMonthIndex][0].year+'-'+(month>9?month:('0'+month))
				}
			},
			/**
			 * 点击选择开始日期和结束日期
			 * @param {Object} item
			 */
			clickSelectDate(item)
			{
				if(this.startDate)
				{
					if(this.endDate) {
						//如果选过结束日期了
						this.startDate = item.date
						this.startTimeStamp = item.timestamp
						this.endDate = null
						this.endTimeStamp = null
					}else 
					{
						let date1 = new Date(this.startDate)
						let date2 = new Date(item.date)
						if(date1>date2)
						{
							this.endDate = this.startDate 
							this.endTimeStamp = this.startTimeStamp
							this.startDate = item.date
							this.startTimeStamp = item.timestamp
						}else 
						{
							this.endDate = item.date
							this.endTimeStamp = item.timestamp
						}
					}
				}else
				{
					//如果没选过开始日期
					this.startDate = item.date
					this.startTimeStamp = item.timestamp
				}
			},
			/**
			 * 选择行业分类一级分类
			 */
			clickIndustryTopCategoryItem(index)
			{
				if(this.selectIndustryTopCategory!=index)
				{
					this.selectIndustryTopCategory = index
				}
			},
			/**
			 * 行业分类搜索
			 */
			industrySearch(e)
			{
				let keywords = e.detail.value
				this.industryKeywords = keywords
				let arr = []
				for (let item of this.industryCategoryList) {
					let index = this.industryCategoryList.indexOf(item)
					for (let item1 of item.hierarchy) {
						let index1 = item.hierarchy.indexOf(item1)
						let arr1 = []
						if(item1.level1_sector.indexOf(keywords)>-1)
						{
							arr1.push(item1)
							arr.push({classification_name:item.classification_name,hierarchy: arr1})
						}
						for (let item2 of item1.level2_sectors) {
							let index2 = item1.level2_sectors.indexOf(item2)
							let arr2 = []
							if(item2.level2_sector.indexOf(keywords)>-1)
							{
								arr2.push(item2)
								arr1.push({level1_sector:item1.level1_sector,level2_sectors: arr2})
								arr.push({classification_name:item.classification_name,hierarchy: arr1})
							}
							for (let item3 of item2.level3_sectors) {
								let index3 = item2.level3_sectors.indexOf(item3)
								let arr3 = []
								if(item3.level3_sector.indexOf(keywords)>-1)
								{
									item3.index = index
									item3.index1 = index1
									item3.index2 = index2
									item3.index3 = index3
									arr3.push(item3)
									arr2.push({level2_sector:item2.level2_sector,level3_sectors: arr3})
									arr1.push({level1_sector:item1.level1_sector,level2_sectors: arr2})
									arr.push({classification_name:item.classification_name,hierarchy: arr1})
								}
							}
						}
					}
				}
				this.searchResultList = arr
			},
			/**
			 * 点击选择搜索结果
			 * @param {Object} item
			 */
			clickIndustrySearchItem(item)
			{
				this.industryKeywords = ''
				this.selectIndustryTopCategory = item.index
				this.selectIndustrySecondCategory = item.index1
				this.selectIndustryThirdCategory = item.index2
				this.selectIndustryForthCategory = item.index3
			},
			/**
			 * 选择行业分类二级分类
			 */
			clickIndustrySecondCategoryItem(index)
			{
				if(this.selectIndustrySecondCategory!=index)
				{
					this.selectIndustrySecondCategory = index
				}
				this.industryCategoryList[this.selectIndustryTopCategory].hierarchy[index].isSpread = !this.industryCategoryList[this.selectIndustryTopCategory].hierarchy[index].isSpread
			},
			/**
			 * 选择行业分类三级分类
			 */
			clickIndustryThirdCategoryItem(sindex,index)
			{
				if(this.selectIndustrySecondCategory!=sindex)
				{
					this.selectIndustrySecondCategory = sindex
				}
				if(this.selectIndustryThirdCategory!=index)
				{
					this.selectIndustryThirdCategory = index
				}
				this.industryCategoryList[this.selectIndustryTopCategory].hierarchy[sindex].level2_sectors[index].isSpread = !this.industryCategoryList[this.selectIndustryTopCategory].hierarchy[sindex].level2_sectors[index].isSpread
			},
			/**
			 * 选择行业分类四级分类
			 */
			clickIndustryForthCategoryItem(sindex,tindex,index)
			{
				if(this.selectIndustrySecondCategory!=sindex)
				{
					this.selectIndustrySecondCategory = sindex
				}
				if(this.selectIndustryThirdCategory!=tindex)
				{
					this.selectIndustryThirdCategory = tindex
				}
				if(this.selectIndustryForthCategory!=index)
				{
					this.selectIndustryForthCategory = index
				}
			},
			/**
			 * 删除选中的行业二级分类
			 */
			deleteIndustrySecondCategoryItem()
			{
				this.selectIndustrySecondCategory = -1
				this.selectIndustryThirdCategory = -1
				this.selectIndustryForthCategory = -1
			},
			/**
			 * 删除选中的行业三级分类
			 */
			deleteIndustryThirdCategoryItem()
			{
				this.selectIndustryThirdCategory = -1
				this.selectIndustryForthCategory = -1
			},
			/**
			 * 删除选中的行业四级分类
			 */
			deleteIndustryForthCategoryItem()
			{
				this.selectIndustryForthCategory = -1
			},
			/**
			 * 点击选择重要性
			 */
			clickImportanceItem(index)
			{
				if(this.selectImportanceIndex!=index)
				{
					this.selectImportanceIndex = index
				}
			},
			/**
			 * 点击展开收起内容
			 * @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)
							let timeList = [...res.data.sort_options]
							this.timeCategoryList = timeList.splice(0,2)
							let sortList = [...res.data.sort_options]
							for (let item of sortList) {
								if(item.name=='最新')
								{
									item.icon = '/static/icon/home/new.png'
								}
								if(item.name=='热门')
								{
									item.icon = '/static/icon/home/hot.png'
								}
								if(item.name=='收益率')
								{
									item.icon = '/static/icon/home/yield.png'
								}
							}
							this.sortList = res.data.sort_options.splice(0,3)
							this.importanceList = res.data.importance_options
							this.importanceList.unshift({desc: "全部",key: "all",name: "全部"})
						}else 
						{
							reject(1)
							uni.showToast({
								title:res.message,
								icon:'none'
							})
						}
					}).catch(error=>{
						reject(1)
					})
				})
				
			},
			/**
			 * 获取行业分类
			 */
			getIndustryCategoryListData()
			{
				return new Promise((resolve,reject)=>{
					industryCategoryList().then(res=>{
						this.industryCategoryList = res.data
						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.startDate)
				{
					param.start_date = this.startDate
				}
				if(this.endDate)
				{
					param.end_date = this.endDate
				}
				if(this.selectImportanceIndex>0)
				{
					param.importance = this.importanceList[this.selectImportanceIndex].key
				}
				if(this.selectSortKey)
				{
					param.sort = this.selectSortKey
				}
				if(this.selectIndustryForthCategory>-1)
				{
					param.industry_level = 4
					param.industry_classification = this.industryCategoryList[this.selectIndustryTopCategory].hierarchy[this.selectIndustrySecondCategory].level2_sectors[this.selectIndustryThirdCategory].level3_sectors[this.selectIndustryForthCategory].level3_sector
				}else 
				{
					if(this.selectIndustryThirdCategory>-1)
					{
						param.industry_level = 3
						param.industry_classification = this.industryCategoryList[this.selectIndustryTopCategory].hierarchy[this.selectIndustrySecondCategory].level2_sectors[this.selectIndustryThirdCategory].level2_sector
					}else 
					{
						if(this.selectIndustrySecondCategory>-1)
						{
							param.industry_level = 2
							param.industry_classification = this.industryCategoryList[this.selectIndustryTopCategory].hierarchy[this.selectIndustrySecondCategory].level1_sector
							
						}else 
						{
							param.industry_level = 1
							param.industry_classification = this.industryCategoryList[this.selectIndustryTopCategory].classification_name
						}
					}
				}
				eventList(param).then(res=>{
					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=>{
					
				})
			},
			/**
			 * 获取热门事件数据
			 */
			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.startDate)
				{
					param.start_date = this.startDate
				}
				if(this.endDate)
				{
					param.end_date = this.endDate
				}
				if(this.selectImportanceIndex>0)
				{
					param.importance = this.importanceList[this.selectImportanceIndex].key
				}
				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">
.topBg
{
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
.navTitle 
{
	left: 0;
	margin: 0 23rpx;
	font-size: 36rpx;
	font-weight: bold;
	color: white;
}
.searchC 
{
	background-color: white;
	left: 0;
	right: 0;
	margin: 20rpx 25rpx 0;
	padding: 0 20rpx;
	height: 75rpx;
	border-radius: 20rpx;
	font-size: 26rpx;
	font-weight: 500;
	.icon 
	{
		margin-right: 16rpx;
		width: 30rpx;
		height: auto;
	}
	input 
	{
		height: 100%;
	}
	.line 
	{
		background-color: #E1E1E1;
		width: 1rpx;
		height: 40rpx;
	}
	.search 
	{
		padding: 0 25rpx;
		color: #F97316;
	}
}
.screenCategoryC
{
	background-color: white;
	margin-top: 22rpx;
	left: 0;
	right: 0;
	border-radius: 20rpx 20rpx 0 0;
	.sortScreenC
	{
		font-weight: 500;
		.timeCategoryC
		{
			.item 
			{
				display: inline-block;
				padding: 0 26rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				color: #42485B;
			}
			.item.select 
			{
				font-weight: bold;
				color: #F97316;
			}
		}
		.sortC
		{
			padding: 0 14rpx;
			font-size: 24rpx;
			color: #999;
			.icon 
			{
				margin-right: 4rpx;
				width: 22rpx;
				height: auto;
			}
		}
		.line 
		{
			background-color: #999;
			width: 1rpx;
			height: 25rpx;
		}
		.screenC 
		{
			padding: 0 14rpx;
			font-size: 24rpx;
			color: #999;
			.icon 
			{
				margin-right: 5rpx;
				width: 24rpx;
				height: auto;
			}
		}
	}
	.topCategoryC
	{
		white-space: nowrap;
		border-bottom: solid 1rpx #E4E4E4;
		.item 
		{
			display: inline-block;
			line-height: 72rpx;
			padding: 0 28rpx;
			font-size: 27rpx;
			font-weight: 500;
			color: #42485B;
		}
		.item.select
		{
			font-weight: bold;
			color: black;
			.line 
			{
				background-color: #F97316;
				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
{
	background-color: white;
	left: 0;
	right: 0;
	bottom: calc(55px + env(safe-area-inset-bottom));
	overflow-y: scroll;
	.list 
	{
		padding: 0 25rpx;
		.item 
		{
			padding: 30rpx 0;
			border-bottom: solid 1rpx #E4E4E4;
			.level
			{
				margin-right: 16rpx;
				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 
			{
				// min-width: 0;
				font-size: 30rpx;
				font-weight: bold;
				color: #222;
			}
			.content 
			{
				margin-top: 20rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #666;
				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-top: 24rpx;
				.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: #C00000;
				}
				.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 
				{
					font-size: 22rpx;
					font-weight: 500;
					color: #aaa;
				}
				.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;
						}
					}
					
				}
			}
		}
	}
}
.sortPopup
{
	background-color: white;
	margin-left: calc(100% - (170rpx + 54rpx));
	width: 170rpx;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	border-radius: 10rpx;
	.arrow 
	{
		top: -13rpx;
		left: 38rpx;
		width: 26rpx;
		height: auto;
	}
	.list 
	{
		.item 
		{
			padding: 20rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #444;
			.icon 
			{
				margin-right: 11rpx;
				width: 20rpx;
				height: 20rpx;
			}
		}
	}
}
.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;
		}
	}
	.screenCategoryList
	{
		background-color: #F8F7FD;
		width: 175rpx;
		.item 
		{
			padding: 0 23rpx;
			line-height: 90rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #333;
		}
		.item.select
		{
			background-color: white;
			font-weight: bold;
			color: #F97316;
			.line 
			{
				background-color: #F97316;
				top: calc((100% - 25rpx)/2);
				left: 0;
				width: 8rpx;
				height: 25rpx;
				border-radius: 0 5rpx 5rpx 0;
			}
		}
	}
	.screenContentC 
	{
		padding: 30rpx 0 60rpx;
		max-height: 1100rpx;
		overflow-y: scroll;
		.section 
		{
			padding: 0 20rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #222;
		}
		.dateC 
		{
			background-color: #F6F6F6; 
			margin: 30rpx 20rpx 0;
			height: 70rpx;
			border-radius: 5rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #B0B0B0;
			.start 
			{
				text-align: right;
			}
			.and 
			{
				margin: 0 20rpx;
			}
		}
		.yearMonthC
		{
			margin-top: 30rpx;
			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.select 
				{
					background-color: #FF7E1A;
					color: white;
				}
				.date.today 
				{
					// background-color: #FF7E1A;
					color: #FF7E1A;
				}
				.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;
				}
			}
		}
		.industryCategoryC 
		{
			margin: 14rpx 20rpx 0;
			padding-bottom: 20rpx;
			border-bottom: solid 1rpx #E4E4E4;
			.item 
			{
				background-color: #F6F6F6;
				margin: 0 20rpx 20rpx 0;
				padding: 0 30rpx;
				line-height: 70rpx;
				border-radius: 10rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #666;
			}
			.item.select
			{
				background-color: #F97316;
				color: white;
			}
		}
		.industrySearchC 
		{
			background-color: #F6F6F6;
			margin: 28rpx 22rpx 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;
			}
		}
		.searchResultList
		{
			.item 
			{
				padding: 10rpx 44rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #444;
				.key 
				{
					color: #F97316;
				}
			}
		}
		.industryList
		{
			margin-top: 24rpx;
			.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: 16rpx;
			padding: 0 20rpx;
			.item 
			{
				background-color: #F6F6F6;
				margin: 0 20rpx 20rpx 0;
				width: 150rpx;
				line-height: 70rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
				color: #666;
				text-align: center;
			}
			.item.select
			{
				background-color: #F97316;
				color: white;
			}
		}
	}
	.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: #F97316;
			font-weight: bold;
			color: white;
		}
	}
}
</style>
