<template>
	<view>
		<navBar leftText="概念中心" :hideNavBg="true" :hideBack="true"></navBar>
		<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
		<view class="topC fixed" :style="'top: '+navH+'px;'">
			<view class="searchRankC flex">
				<view class="searchC flex flex1">
					<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:#EEE" confirm-type="search" @confirm="clickSearch()"/>
				</view>
				<view class="rank" @click="clickRank()">排行榜</view>
			</view>
			<view class="dateScreenC flex">
				<view class="flex1">最新数据: {{newestPriceDate}}</view>
				<view class="sortTypeC flex" @click="clickSortType()">
					<image class="icon" src="/static/icon/home/conceptCenter/sortType.png" mode="widthFix"></image>
					<view>{{sortTypeStr}}</view>
					<image class="arrow" src="/static/icon/home/conceptCenter/conceptScreenArrow.png" mode="widthFix"></image>
				</view>
				<view class="line"></view>
				<view class="transactionDateC flex" @click="clickTransactionDate()">
					<image class="icon" src="/static/icon/home/conceptCenter/transactionDate.png" mode="widthFix"></image>
					<view>交易日期</view>
					<image class="arrow" src="/static/icon/home/conceptCenter/conceptScreenArrow.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<scroll-view scroll-y direction="vertical" class="conceptList fixed" :style="'top: '+listTop+'px;'" refresher-enabled :refresher-triggered="isRefreshing" @refresherrefresh="pullDownRefresh()" @scrolltolower="loadMoreData()">
			<view class="list">
				<view class="item" v-for="(item,index) in conceptList" :key="index">
					<view class="titleChgStockNumC flex">
						<view class="title" @click.stop="clickConceptItem(item.concept)">{{item.concept}}</view> 
						<view v-if="item.price_info" :class="'chg '+(getRateUpOrDown(item.price_info.avg_change_pct)?'down':'up')">{{getChgRateStr(item.price_info.avg_change_pct)}}%</view>
						<view v-if="item.price_info" :class="'stockNum '+(getRateUpOrDown(item.price_info.avg_change_pct)?'down':'up')">{{item.stock_count}} 只股票</view>
					</view>
					<view class="content" @click.stop="clickConceptItem(item.concept)">{{item.description}}</view>
					<view class="hotStockC flex">
						<view class="title">热门个股</view>
						<view class="stockList flex">
							<view class="stockItem" v-for="(sitem,sindex) in item.stocks.slice(0,3)" :key="sindex">{{sitem.name}}</view>
							<view class="more" @click.stop="clickStockMore(item)">+{{item.stock_count-3}}更多</view>
						</view>
						<!-- <view v-else class="notVipC flex" @click.stop="clickNotVip()">
							<image class="icon" src="/static/icon/home/conceptCenter/lock.png" mode="widthFix"></image>
							<view>需升级Pro会员查看{{item.stock_count}}只个股</view>
						</view> -->
					</view>
					<view class="transactionDateHistoryTimeC flex">
						<view class="transactionDate flex1">交易时间：{{item.price_info?item.price_info.trade_date:''}}</view>
						<view class="historyTimeC flex" @click.stop="clickHistoricalTimeline(item)">
							<image class="icon" src="/static/icon/home/conceptCenter/timeAxis.png" mode="widthFix"></image>
							<view>历史时间轴</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<uni-popup ref="rankPopup" type="bottom" :safeArea="false">
			<view class="rankPopup relative">
				<view class="popTitle">排行榜</view>
				<view class="closeC absolute" @click="clickRankClose()">
					<image class="icon" src="/static/icon/home/close.png" mode="widthFix"></image>
				</view>
				<view class="statisticsC">
					<view class="titleRangeC flex">
						<image class="icon" src="/static/icon/home/conceptCenter/statistics.png" mode="widthFix"></image>
						<view class="flex1">
							<view class="title">概念统计中心</view>
							<view class="range">统计范围: {{startDateStr}} 至 {{endDateStr}} </view>
						</view>
					</view>
					<view class="cycleC flex">
						<view class="title">统计周期：</view>
						<view class="list flex">
							<view :class="'item '+(selectCycleIndex==index?'select':'')" v-for="(item,index) in cycleList" :key="index" @click="clickRankCycleListItem(index)">
								{{item}}
							</view>
						</view>
					</view>
					<view v-if="selectCycleIndex==3" class="rangeC flex">
						<view class="startDateC" @click="clickCustomDateCycle(2)">{{selectStartDateStr}}</view>
						<view class="and">至</view>
						<view class="endDateC" @click="clickCustomDateCycle(3)">{{selectEndDateStr}}</view>
						<view class="apply" @click="clickApply()">应用</view>
					</view>
				</view>
				<view class="tabC flex">
					<view :class="'item flex1 flexCenter '+(selectTab==index?'select':'')" v-for="(item,index) in rankTabList" :key="index" @click="clickRankTabItem(index)">
						<image v-if="selectTab==index" class="icon" :src="item.selectIcon" mode="widthFix"></image>
						<image v-else class="icon" :src="item.icon" mode="widthFix"></image>
						<view>{{item.title}}</view>
					</view>
				</view>
				<view class="rankList">
					<view class="item flex" v-for="(item,index) in rankList" :key="index">
						<image v-if="index==0" class="rankIcon" src="/static/icon/home/conceptCenter/rank1.png" mode="widthFix"></image>
						<image v-if="index==1" class="rankIcon" src="/static/icon/home/conceptCenter/rank2.png" mode="widthFix"></image>
						<image v-if="index==2" class="rankIcon" src="/static/icon/home/conceptCenter/rank3.png" mode="widthFix"></image>
						<view v-if="index>2" class="rankIndex">{{index+1}}</view>
						<view class="flex1">
							<view class="title" @click.stop="clickConceptItem(item.name)">{{item.name}}</view>
							<block v-if="selectTab==3||selectTab==4">
								<view v-if="selectTab==3" class="calendarBrowseC">均幅 {{item.avg_change}}%</view>
								<view v-if="selectTab==4" class="calendarBrowseC">累计 +{{item.total_change}}%</view>
							</block>
							<block v-else>
								<view class="calendarBrowseC flex">
									<view v-if="selectTab==0||selectTab==1" class="chgC flex">
										<image class="icon" src="/static/icon/home/conceptCenter/rankChg.png" mode="widthFix"></image>
										<view>{{item.news_count}}</view>
									</view>
									<view class="calendarC flex">
										<image class="icon" src="/static/icon/home/conceptCenter/calendar.png" mode="widthFix"></image>
										<view>{{item.news_count}}</view>
									</view>
									<view v-if="selectTab==2" class="browseC flex">
										<image class="icon" src="/static/icon/home/conceptCenter/browse.png" mode="widthFix"></image>
										<view><view>{{item.report_count}}</view></view>
									</view>
								</view>
							</block>
						</view>
						<view class="valueC flex">
							<image :class="'icon '+(selectTab==4?'continuousRise':'')" :src="rankTabList[selectTab].selectIcon" mode="widthFix"></image>
							<view v-if="selectTab==0">{{item.change_pct}}%</view>
							<view v-if="selectTab==1">{{item.change_pct}}%</view>
							<view v-if="selectTab==2">{{item.total_mentions}}</view>
							<view v-if="selectTab==3">{{item.volatility}}%</view>
							<view v-if="selectTab==4">{{item.consecutive_days}}天</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="sortTypePopup" type="top" mask-background-color="transparent" :animation="false">
			<view class="sortTypePopup 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 sortTypeList" :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="transactionDatePopup" type="bottom" :safeArea="false">
			<view class="transactionDatePopup">
				<view class="btnTitleC flex">
					<view class="btn cancel" @click="clickCancel()">取消</view>
					<view class="title flex1">交易日期</view>
					<view class="btn confirm" @click="clickConfirm()">确认</view>
				</view>
				<view class="yearMonthC flex">
					<view class="btn" @click="clickPreMonth()">
						<image class="icon" src="/static/icon/home/conceptCenter/pre.png" mode="widthFix"></image>
					</view>
					<view class="yearMonth flex1">
						<picker mode="date" fields="month" @change="">
							<view>{{selectMonth}}</view>
						</picker>
					</view>
					<view class="btn" @click="clickNextMonth()">
						<image class="icon" src="/static/icon/home/conceptCenter/next.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.date==selectDateStr">
							<view class="date select">{{item.day}}</view>
						</block>
						<block v-else>
							<block v-if="!item.isCurrentMonth">
								<view class="date notCurrentMonth">{{item.day}}</view>
							</block>
							<block v-else>
								<view class="date">{{item.day}}</view>
							</block>
						</block>
					</view>
				</view>
				<view class="quickTimeC flexCenter">
					<view class="item" v-for="(item,index) in quickTimeList" :key="index" @click="clickQuickTimeItem(index)">{{item}}</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="vipPopup" type="center">
			<view class="vipPopup">
				<image class="topIcon" src="/static/icon/home/conceptCenter/vipPopIcon.png" mode="widthFix"></image>
				<view class="popTitle">需要Pro版订阅</view>
				<view class="popSubtitle">当前功能需要更高权限</view>
				<view class="moduleC visit">
					<view class="section">您正在尝试访问</view>
					<view class="visitC relative">
						<view class="line absolute"></view>
						<view class="contentC relative flex">
							<image class="icon" src="/static/icon/home/conceptCenter/visitModule.png" mode="widthFix"></image>
							<view>概念统计中心和热门个股</view>
						</view>
					</view>
				</view>
				<view class="moduleC">
					<view class="section flex">
						当前订阅
						<view class="version free">免费版</view>
					</view>
					<view class="list">
						<view class="item flex">
							<image class="icon" src="/static/icon/home/conceptCenter/free_s.png" mode="widthFix"></image>
							<view>基础事件浏览</view>
						</view>
						<view class="item flex">
							<image class="icon" src="/static/icon/home/conceptCenter/free_s.png" mode="widthFix"></image>
							<view>有限历史事件查看</view>
						</view>
					</view>
				</view>
				<view class="moduleC">
					<view class="section flex">
						所需订阅
						<view class="version pro">Pro版</view>
					</view>
					<view class="list">
						<view class="item flex">
							<image class="icon" src="/static/icon/home/conceptCenter/pro_s.png" mode="widthFix"></image>
							<view>相关标的分析</view>
						</view>
						<view class="item flex">
							<image class="icon" src="/static/icon/home/conceptCenter/pro_s.png" mode="widthFix"></image>
							<view>相关概念分析</view>
						</view>
						<view class="item flex">
							<image class="icon" src="/static/icon/home/conceptCenter/pro_s.png" mode="widthFix"></image>
							<view>完整历史事件</view>
						</view>
					</view>
				</view>
				<view class="btnC flex">
					<view class="btn flex1 later" @click="clickLater()">稍后再说</view>
					<view class="btn flex1 upgrade" @click="clickUpgradeAtOnce()">立即升级</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script >
	import { inject } from 'vue';
	import { conceptRankList, eventRelatedConcept, newestPriceDate, membershipStatus } from '@/request/api';
	import { getChgRateStr, getRateUpOrDown } from '@/utils/util';
	import CryptoJS from 'crypto-js'
	
	export default {
		data() {
			return {
				navH:inject('navHeight'),
				listTop:'',
				sortListTop:'',
				keywords:'',	//搜索关键字
				newestPriceDate:'',		//最新价格日期
				popType:'',			//日期弹窗类型1交易日期2排行榜开始日期3排行榜结束日期
				cycleList:['3天','7天','14天','自定义'],	//统计周期
				selectCycleIndex:0,	//选中周期下标
				startDateStr:'',	//统计开始日期
				endDateStr:'',		//统计结束日期
				selectStartDateStr:'', 		//选择的自定义开始日期
				selectStartMonthIndex:0,    //开始日期选中月份下标
				selectStartMonth:'',	    //结束日期选中年月
				selectEndDateStr:'', 	    //选择的自定义结束日期
				selectEndMonthIndex:0,      //结束日期选中月份下标
				selectEndMonth:'',	    	//结束日期选中年月
				rankTabList:[{
					icon:'/static/icon/home/conceptCenter/increaseRate.png',
					selectIcon:'/static/icon/home/conceptCenter/increaseRate_s.png',
					title:'涨幅榜'
				},
				{
					icon:'/static/icon/home/conceptCenter/decreaseRate.png',
					selectIcon:'/static/icon/home/conceptCenter/decreaseRate_s.png',
					title:'跌幅榜'
				},
				{
					icon:'/static/icon/home/conceptCenter/active.png',
					selectIcon:'/static/icon/home/conceptCenter/active_s.png',
					title:'活跃榜'
				},
				{
					icon:'/static/icon/home/conceptCenter/fluctuate.png',
					selectIcon:'/static/icon/home/conceptCenter/fluctuate_s.png',
					title:'波动榜'
				},
				{
					icon:'/static/icon/home/conceptCenter/continuousRise.png',
					selectIcon:'/static/icon/home/conceptCenter/continuousRise_s.png',
					title:'连涨榜'
				}],
				selectTab:0,
				rankList:[],		//排行榜
				sortTypeList:[{
					icon:'/static/icon/home/conceptCenter/chgSort.png',
					name:'涨跌幅',
					key:'change_pct'
				},
				{
					icon:'/static/icon/home/conceptCenter/correlationSort.png',
					name:'相关度',
					key:'_score'
				},
				{
					icon:'/static/icon/home/conceptCenter/stockNumSort.png',
					name:'股票数量',
					key:'stock_count'
				},
				{
					icon:'/static/icon/home/conceptCenter/conceptNameSort.png',
					name:'概念名称',
					key:'concept_name'
				}],
				sortType:'change_pct',	//选择的排序方式
				sortTypeStr:'涨跌幅',	//选择的排序方式
				weekList:['一','二','三','四','五','六','日'],
				monthDateList:[],
				selectMonthIndex:0,			//选中月份下标
				selectMonth:'',				//选中年月
				selectDateStr:'',			//选中日期
				selectTradeDateStr:'',		//交易日期选中日期
				selectTradeMonthIndex:0,    //交易日期选中月份下标
				selectTradeMonth:'',	    //交易日期选中年月
				quickTimeList:['今天','昨天','一周前','一月前'],
				conceptList:[],
				page:1,
				isRefreshing:false,		//下拉刷新
				loadAll:false,			//是否加载完毕
				getRateUpOrDown:getRateUpOrDown,
				getChgRateStr:getChgRateStr,
				memberInfo:null,	//会员信息
			}
		},
		onLoad() {
			this.listTop = this.navH + (20+70+20+30+20)/750*inject('windowWidth')
			this.sortListTop = this.navH + (20+70+20+30+20)/750*inject('windowWidth')
			let currentDate = new Date();
			// 获取当前年份
			let currentYear = currentDate.getFullYear();
			let currentMonth = currentDate.getMonth()+1;
			let currentDay = currentDate.getDate();
			this.selectMonthIndex = this.selectTradeMonthIndex = this.selectEndMonthIndex = 20*12+currentMonth-1
			this.selectMonth = this.selectTradeMonth = this.selectEndMonth = currentYear+'年'+currentMonth+'月'
			this.selectDateStr = this.selectTradeDateStr = this.endDateStr = this.selectEndDateStr = currentYear+'-'+(currentMonth>9?currentMonth:('0'+currentMonth))+'-'+(currentDay>9?currentDay:('0'+currentDay))
			let startDate = new Date(currentDate)
			startDate.setDate(startDate.getDate()-3)
			let startYear = startDate.getFullYear();
			let startMonth = startDate.getMonth()+1;
			let startDay = startDate.getDate();
			this.selectStartMonthIndex = (20 + currentYear - startYear)*12+startMonth-1
			this.selectStartMonth = startYear+'年'+startMonth+'月'
			this.startDateStr = this.selectStartDateStr = startYear+'-'+(startMonth>9?startMonth:('0'+startMonth))+'-'+(startDay>9?startDay:('0'+startDay))
			this.generateMonthDateListData()
			this.getNewestPriceDateData()
			this.getRankListData()
			this.getMemberStatusData()
		},
		methods: {
			/**
			 * 生成日历数据
			 */
			generateMonthDateListData()
			{
				let currentDate = new Date();
				// 获取当前年份
				let currentYear = currentDate.getFullYear();
				let currentMonth = currentDate.getMonth()+1;
				let currentDay = currentDate.getDate();
				let monthDateList = []
				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
			},
			/**
			 * 下拉刷新
			 */
			pullDownRefresh(){
				this.isRefreshing = true
				this.clickSearch()
			},
			/**
			 * 上拉加载
			 */
			loadMoreData()
			{
				if(!this.loadAll)
				{
					this.page ++
					this.getConceptCenterData()
				}
			},
			/**
			 * 点击搜索
			 */
			clickSearch()
			{
				this.page = 1 
				this.getConceptCenterData()
			},
			/**
			 * 点击排行榜
			 */
			clickRank()
			{
				this.$refs["rankPopup"].open()
			},
			/**
			 * 点击关闭排行榜弹窗 
			 */
			clickRankClose()
			{
				this.$refs["rankPopup"].close()
			},
			/**
			 * 点击切换统计周期
			 */
			clickRankCycleListItem(index)
			{
				if (this.selectCycleIndex!=index) {
					this.selectCycleIndex = index
					if (index==3)
					{
						//自定义周期
						
					}else 
					{
						let currentDate = new Date();
						// 获取当前年份
						let currentYear = currentDate.getFullYear();
						// 获取当前月
						let currentMonth = currentDate.getMonth()+1;
						// 获取当前日
						let currentDay = currentDate.getDate();
						let selectDate = new Date(currentDate)
						if (index==0)
						{
							selectDate.setDate(selectDate.getDate()-3)
						}else if (index==1)
						{
							selectDate.setDate(selectDate.getDate()-7)
						}else if (index==2)
						{
							selectDate.setDate(selectDate.getDate()-14)
						}
						let startYear = selectDate.getFullYear();
						let startMonth = selectDate.getMonth()+1;
						let startDay = selectDate.getDate();
						this.endDateStr = this.selectEndDateStr = currentYear+'-'+(currentMonth>9?currentMonth:('0'+currentMonth))+'-'+(currentDay>9?currentDay:('0'+currentDay))
						this.startDateStr = this.selectStartdateStr = startYear+'-'+(startMonth>9?startMonth:('0'+startMonth))+'-'+(startDay>9?startDay:('0'+startDay))
						this.getRankListData()
					}
				}
			},
			/**
			 * 点击自定义周期日期
			 * @param {Object} type
			 */
			clickCustomDateCycle(type)
			{
				this.popType = type 
				if (type==2) {
					//排行榜自定义开始时间
					this.selectDateStr = this.selectStartDateStr
					this.selectMonth = this.selectStartMonth
					this.selectMonthIndex = this.selectStartMonthIndex
				} else {
					//排行榜自定义结束时间
					this.selectDateStr = this.selectEndDateStr
					this.selectMonth = this.selectEndMonth
					this.selectMonthIndex = this.selectEndMonthIndex
				}
				this.$refs["transactionDatePopup"].open()
			},
			/**
			 * 点击应用最新日期
			 */
			clickApply()
			{
				let startTimeStamp = new Date(this.selectStartDateStr)
				let endTimeStamp = new Date(this.selectEndDateStr)
				if(startTimeStamp>endTimeStamp)
				{
					uni.showToast({
						title:'开始日期不能晚于结束日期',
						icon:'none'
					})
					return
				}
				this.startDateStr = this.selectStartDateStr
				this.endDateStr = this.selectEndDateStr
				this.getRankListData()
			},
			/**
			 * 点击切换排行榜分类
			 * @param {Object} index
			 */
			clickRankTabItem(index)
			{
				if (this.selectTab!=index) {
					this.selectTab = index
					this.getRankListData()
				}
			},
			/**
			 * 点击切换排序方式
			 */
			clickSortType()
			{
				this.$refs["sortTypePopup"].open()
			},
			/**
			 * 点击切换排序方式
			 * @param {Object} item
			 */
			clickSortListItem(item)
			{
				this.sortType = item.key
				this.sortTypeStr = item.name
				this.clickSearch()
				this.$refs["sortTypePopup"].close()
			},
			/**
			 * 点击交易日期
			 */
			clickTransactionDate()
			{
				this.popType = 1
				this.selectDateStr = this.selectTradeDateStr
				this.selectMonth = this.selectTradeMonth
				this.selectMonthIndex = this.selectTradeMonthIndex
				this.$refs["transactionDatePopup"].open()
			},
			/**
			 * 点击取消
			 */
			clickCancel()
			{
				this.$refs["transactionDatePopup"].close()
			},
			/**
			 * 点击确认
			 */
			clickConfirm()
			{
				this.clickCancel()
				if (this.popType==1) {
					//交易日期
					this.selectTradeDateStr = this.selectDateStr
					this.selectTradeMonth = this.selectMonth
					this.selectTradeMonthIndex = this.selectMonthIndex
					this.getConceptCenterData()
				}else if (this.popType==2) {	
					//排行榜自定义周期开始时间
					this.selectStartDateStr = this.selectDateStr
					this.selectStartMonth = this.selectMonth
					this.selectStartMonthIndex = this.selectMonthIndex
				}else 
				{
					//排行榜自定义周期结束时间
					this.selectEndDateStr = this.selectDateStr
					this.selectEndMonth= this.selectMonth
					this.selectEndMonthIndex = this.selectMonthIndex
				}
			},
			/**
			 * 点击上个月
			 */
			clickPreMonth()
			{
				if(this.selectMonthIndex>0)
				{
					this.selectMonthIndex --
					let monthList = this.monthDateList[this.selectMonthIndex]
					let year = ''
					let month = ''
					for (let item of monthList) {
						if(item.isCurrentMonth)
						{
							year = item.year
							month = item.month
							break
						}
					}					
					this.selectMonth = year+'年'+month+'月'
				}
			},
			/**
			 * 点击下个月
			 */
			clickNextMonth()
			{
				if(this.selectMonthIndex<this.monthDateList.length-1)
				{
					this.selectMonthIndex ++
					let monthList = this.monthDateList[this.selectMonthIndex]
					let year = ''
					let month = ''
					for (let item of monthList) {
						if(item.isCurrentMonth)
						{
							year = item.year
							month = item.month
							break
						}
					}
					this.selectMonth = year+'年'+month+'月'
				}
			},
			monthChange(e)
			{
				let currentDate = new Date();
				//当前年份
				let currentYear = currentDate.getFullYear()
				//选中年月
				let yearMonth = e.detail.value
				let selectYear = parseInt(yearMonth.split('-')[0])
				let selectMonth = parseInt(yearMonth.split('-')[1])
				this.selectMonthIndex = (selectYear - (currentYear - 20))*12+selectMonth-1
				this.selectMonth = selectYear+'年'+selectMonth+'月'
			},
			/**
			 * 点击选择交易日期
			 * @param {Object} item
			 */
			clickSelectDate(item)
			{
				if (this.selectDateStr!=item.date){
					//记录选中日期
					this.selectDateStr = item.date
				}
			},
			/**
			 * 点击快捷时间选择
			 */
			clickQuickTimeItem(index)
			{
				let currentDate = new Date();
				let currentYear = currentDate.getFullYear();
				if (index==0) {
					//今天
					let currentMonth = currentDate.getMonth()+1;
					let currentDay = currentDate.getDate();
					this.selectMonthIndex = 20*12+currentMonth-1
					this.selectMonth = currentYear+'年'+currentMonth+'月'
					this.selectDateStr = currentYear+'-'+(currentMonth>9?currentMonth:('0'+currentMonth))+'-'+(currentDay>9?currentDay:('0'+currentDay))
				}else if (index==1) {
					//昨天
					let yesterday = new Date(currentDate)
					yesterday.setDate(yesterday.getDate()-1)
					let yesterdayYear = yesterday.getFullYear();
					let yesterdayMonth = yesterday.getMonth()+1;
					let yesterdayDay = yesterday.getDate();
					this.selectMonthIndex = (20 - (currentYear-yesterdayYear))*12+yesterdayMonth-1
					this.selectMonth = yesterdayYear+'年'+yesterdayMonth+'月'
					this.selectDateStr = yesterdayYear+'-'+(yesterdayMonth>9?yesterdayMonth:('0'+yesterdayMonth))+'-'+(yesterdayDay>9?yesterdayDay:('0'+yesterdayDay))
				}else if (index==2) {
					//一周前
					let weekAgo = new Date(currentDate)
					weekAgo.setDate(weekAgo.getDate()-7)
					let weekAgoYear = weekAgo.getFullYear();
					let weekAgoMonth = weekAgo.getMonth()+1;
					let weekAgoDay = weekAgo.getDate();
					this.selectMonthIndex = (20 - (currentYear-weekAgoYear))*12+weekAgoMonth-1
					this.selectMonth = weekAgoYear+'年'+weekAgoMonth+'月'
					this.selectDateStr = weekAgoYear+'-'+(weekAgoMonth>9?weekAgoMonth:('0'+weekAgoMonth))+'-'+(weekAgoDay>9?weekAgoDay:('0'+weekAgoDay))
				}else 
				{
					//一月前
					let monthAgo = new Date(currentDate)
					monthAgo.setDate(monthAgo.getDate()-30)
					let monthAgoYear = monthAgo.getFullYear();
					let monthAgoMonth = monthAgo.getMonth()+1;
					let monthAgoDay = monthAgo.getDate();
					this.selectMonthIndex = (20 - (currentYear-monthAgoYear))*12+monthAgoMonth-1
					this.selectMonth = monthAgoYear+'年'+monthAgoMonth+'月'
					this.selectDateStr = monthAgoYear+'-'+(monthAgoMonth>9?monthAgoMonth:('0'+monthAgoMonth))+'-'+(monthAgoDay>9?monthAgoDay:('0'+monthAgoDay))
				}
			},
			/**
			 * 非vip点击
			 */
			clickNotVip()
			{
				this.$refs["vipPopup"].open()
			},
			/**
			 * 点击稍后再说
			 */
			clickLater()
			{
				this.$refs["vipPopup"].close()
			},
			/**
			 * 点击立即升级
			 */
			clickUpgradeAtOnce()
			{
				this.clickLater()
			},
			/**
			 * 点击查看相关概念
			 */
			clickConceptItem(name)
			{
				let md5 = CryptoJS.MD5(name).toString()
				uni.navigateTo({
					url:'/pages/index/conceptDetails/conceptDetails?name='+md5
				})
			},
			/**
			 * 点击查看更多个股
			 */
			clickStockMore(item)
			{
				uni.navigateTo({
					url:'/pages/concept/hotStock/hotStock?id='+item.concept_id
				})
			},
			/**
			 * 点击查看历史时间轴
			 */
			clickHistoricalTimeline(item)
			{
				uni.navigateTo({
					url:'/pages/concept/historicalTimeline/historicalTimeline?id='+item.concept_id
				})
			},
			/**
			 * 获取概念中心数据
			 */
			getConceptCenterData()
			{
				let dateStr = this.selectDateStr
				let selectDateTimestamp = new Date(this.selectDateStr).getTime()
				let newestTimeStamp = new Date(this.newestPriceDate).getTime()
				if (selectDateTimestamp > newestTimeStamp) {
					//如果选择的日期在最新交易日之前
					dateStr = this.newestPriceDate
				}
				let param = {query:this.keywords,size:10,page:this.page,sort_by:this.sortType,isJson:1,trade_date:dateStr}
				eventRelatedConcept(param).then(res=>{
					this.isRefreshing = false
					if (res.page == 1) {
						this.conceptList = res.results
					}else {
						this.conceptList = this.conceptList.concat(res.results) 
					}
					if (res.page==res.total_pages) {
						this.loadAll = true
					}
				}).catch(error=>{
					this.isRefreshing = false
				})
			},
			/**
			 * 获取最新价格数据
			 */
			getNewestPriceDateData(){
				newestPriceDate().then(res=>{
					this.newestPriceDate = res.latest_trade_date
					this.getConceptCenterData()
				}).catch(error=>{
					
				})
			},
			/**
			 * 获取会员状态
			 */
			getMemberStatusData()
			{
				let token = uni.getStorageSync('token')
				if (!token) {
					return
				}
				membershipStatus().then(res=>{
					if (res.code==200) {
						this.memberInfo = res.data
					} else 
						uni.showToast({
							title:res.message,
							icon:'none'
						})
				}).catch(error=>{
					
				})
			},
			/**
			 * 获取排行榜数据
			 */
			getRankListData()
			{
				var params = {}
				if (this.selectCycleIndex==3)
				{
					//自定义周期
					params.start_date = this.startDateStr
					params.end_date = this.endDateStr
				}else 
				{
					params.day = 3
					if(this.selectCycleIndex==1) {
						params.day = 7
					}else if(this.selectCycleIndex==2) {
						params.day = 14
					}
				}
				conceptRankList(params).then(res=>{
					if (this.selectTab==0) {
						//涨幅榜
						this.rankList = res.data.hot_concepts
					}else if (this.selectTab==1) {
						//跌幅榜
						this.rankList = res.data.cold_concepts
					} else if (this.selectTab==2) {
						//活跃榜
						this.rankList = res.data.active_concepts
					}else if (this.selectTab==3) {
						//波动榜
						this.rankList = res.data.volatile_concepts
					}else {
						//连涨榜
						this.rankList = res.data.momentum_concepts
					}
				}).catch(error=>{
					
				})
			},
		}
	}
</script>

<style lang="less">
page 
{
	background-color: #070707;
}
.topBg 
{
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}   
.topC 
{
	margin-top: 20rpx;
	left: 0;
	right: 0;
	.searchRankC
	{
		padding: 0 25rpx;
		.searchC
		{
			background-color: #292929B3;
			padding: 0 25rpx;
			height: 70rpx;
			border-radius: 35rpx;
			border: solid 1rpx #363636;
			.icon 
			{
				margin-right: 12rpx;
				width: 25rpx;
				height: auto;
			}
			input 
			{
				font-size: 22rpx;
				font-weight: 500;
				color: white;
			}
		}
		.rank
		{
			padding: 0 14rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #B5B6B6;
		}
	}
	.dateScreenC 
	{
		padding: 20rpx 0 20rpx 27rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #CCCDD1;
		.sortTypeC 
		{
			padding: 0 24rpx;
			.icon 
			{
				margin-right: 14rpx;
				width: 30rpx;
				height: auto;
			}
		}
		.line
		{
			background-color: #CCCDD1;
			width: 1rpx;
			height: 25rpx;
		}
		.transactionDateC 
		{
			padding: 0 17rpx;
			.icon
			{
				margin-right: 10rpx;
				width: 23rpx;
				height: auto;
			}
		}
		.arrow 
		{
			margin-left: 7rpx;
			width: 11rpx;
			height: auto;
		}
	}
}
.conceptList 
{
	left: 0;
	right: 0;
	bottom: calc(55px + env(safe-area-inset-bottom));
	.list 
	{
		padding: 0 25rpx;
		.item 
		{
			background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
			margin-bottom: 24rpx;
			border-radius: 10rpx;
			.titleChgStockNumC 
			{
				padding: 24rpx 18rpx 0;
				.title 
				{
					margin-right: 20rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #3D3D3D;
					word-break: break-all;
				}
				.chg
				{
					margin-right: 20rpx;
					padding: 0 13rpx;
					line-height: 40rpx;
					border-radius: 20rpx;
					font-size: 22rpx;
					font-weight: bold;
					color: white;
				}
				.chg.up 
				{
					background-color: #EC3440;
				}
				.chg.down 
				{
					background-color: #355422;
				}
				.stockNum 
				{
					flex-shrink: 0;
					padding: 0 16rpx;
					line-height: 36rpx;
					border-radius: 20rpx;
					font-size: 22rpx;
					font-weight: bold;
				}
				.stockNum.up
				{
					color: #EC3440;
					border: solid 2rpx #EC3440; 
				}
				.stockNum.down
				{
					color: #355422;
					border: solid 2rpx #355422; 
				}
			}
			.content 
			{
				margin-top: 26rpx;
				padding: 0 22rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #71675D;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.hotStockC 
			{
				margin-top: 30rpx;
				padding: 0 20rpx;
				.title 
				{
					margin-right: 10rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #936E5C;
				}
				.stockList 
				{
					font-size: 22rpx;
					.stockItem 
					{
						background-color: #3D3D3D;
						margin-right: 10rpx;
						padding: 0 8rpx;
						line-height: 36rpx;
						border-radius: 5rpx 20rpx 5rpx 20rpx;
						color: #EFDDD1;
					}
					.more 
					{
						color: #936E5C;
						line-height: 36rpx;
					}
				}
				.notVipC 
				{
					background-color: #3D3D3D;
					padding: 0 21rpx 0 16rpx;
					line-height: 36rpx;
					border-radius: 5rpx;
					font-size: 22rpx;
					color: #F3C368;
					.icon 
					{
						margin-right: 9rpx;
						width: 15rpx;
						height: auto;
					}
				}
			}
			.transactionDateHistoryTimeC 
			{
				padding: 20rpx 22rpx 30rpx;
				.transactionDate 
				{
					font-size: 20rpx;
					font-weight: 500;
					color: #666;
				}
				.historyTimeC 
				{
					background-color: #F3C368;
					padding: 0 10rpx 0 15rpx;
					line-height: 36rpx;
					border-radius: 10rpx;
					font-size: 22rpx;
					font-weight: 500;
					color: #101213;
					.icon 
					{
						margin-right: 7rpx;
						width: 20rpx;
						height: auto;
					}
				}
			}
		}
	}
}
.rankPopup 
{
	background-color: white;
	padding-bottom: env(safe-area-inset-bottom);
	border-radius: 20rpx 20rpx 0 0;
	.popTitle 
	{
		padding-top: 30rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		text-align: center;
	}
	.closeC 
	{
		padding: 26rpx;
		top: 0;
		right: 0;
		.icon 
		{
			width: 20rpx;
			height: auto;
		}
	}
	.statisticsC 
	{
		background: linear-gradient(-30deg, #F3C368 0%, #FAD590 100%);
		margin: 20rpx 25rpx 0;
		padding: 24rpx 30rpx;
		border-radius: 10rpx;
		.titleRangeC 
		{
			.icon 
			{
				margin-right: 21rpx;
				width: 80rpx;
				height: auto;
			}
			.title 
			{
				font-size: 30rpx;
				font-weight: bold;
			}
			.range 
			{
				font-size: 22rpx;
				font-weight: 500;
				color: #232323;
			}
		}
		.cycleC 
		{
			margin-top: 20rpx;
			.title 
			{
				font-size: 24rpx;
				font-weight: bold;
			}
			.list 
			{
				.item 
				{
					background-color: #ffffff4D;
					margin-right: 15rpx;
					padding: 0 15rpx;
					line-height: 50rpx;
					border-radius: 5rpx;
					font-size: 24rpx;
					font-weight: 500;
				}
				.item.select 
				{
					background-color: #ffffff99;
				}
			}
		}
		.rangeC 
		{
			margin-top: 10rpx;
			font-size: 26rpx;
			.startDateC 
			{
				padding: 0 10rpx;
				border: solid 2rpx white; 
				border-radius: 10rpx;
			}
			.and 
			{
				margin: 0 10rpx;
			}
			.endDateC
			{
				padding: 0 10rpx;
				border: solid 2rpx white; 
				border-radius: 10rpx;
			}
			.apply 
			{
				padding: 0 10rpx;
			}
		}
	}
	.tabC 
	{
		background-color: #FFF3DD;
		margin: 20rpx 25rpx 0;
		border-radius: 10rpx 10rpx 0 0;
		.item 
		{
			height: 60rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #070707;
			.icon 
			{
				margin-right: 7rpx;
				width: 11rpx;
				height: auto;
			}
		}
		.item.select 
		{
			background-color: #FF7722;
			color: white;
		}
		.item:last-child
		{
			.icon 
			{
				width: 15rpx;
				height: auto;
			}
		}
	}
	.rankList
	{
		margin-top: 22rpx;
		padding: 0 25rpx;
		max-height: 500rpx;
		overflow-y: scroll;
		.item 
		{
			margin-bottom: 20rpx;
			padding: 20rpx 22rpx;
			border-radius: 10rpx;
			border: solid 1rpx #FCE2B2;
			.rankIcon 
			{
				margin-right: 34rpx;
				width: 35rpx;
				height: auto;
			}
			.rankIndex 
			{
				background-color: #898989;
				margin-right: 34rpx;
				width: 36rpx;
				line-height: 41rpx;
				clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
				font-size: 24rpx;
				color: #F7FAFC;
				text-align: center;
			}
			.title 
			{
				font-size: 26rpx;
				font-weight: bold;
				color: #3D3D3D;
			}
			.calendarBrowseC 
			{
				font-size: 24rpx;
				font-weight: 500;
				color: #936E5C;
				.chgC 
				{
					margin-right: 30rpx;
					.icon 
					{
						margin-right: 6rpx;
						width: 15rpx;
						height: auto;
					}
				}
				.calendarC 
				{
					margin-right: 30rpx;
					.icon 
					{
						margin-right: 6rpx;
						width: 16rpx;
						height: auto;
					}
				}
				.browseC
				{
					.icon 
					{
						margin-right: 6rpx;
						width: 17rpx;
						height: auto;
					}
				}
			}
			.valueC 
			{
				background-color: #FF7722;
				padding: 0 24rpx;
				height: 40rpx;
				border-radius: 5rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: white;
				.icon 
				{
					margin-right: 6rpx;
					width: 11rpx;
					height: auto;
				}
				.icon.continuousRise 
				{
					width: 15rpx;
					height: auto;
				}
			}
		}
	}
}
.sortTypePopup
{
	background-color: white;
	margin-left: calc(100% - (170rpx + 120rpx));
	width: 170rpx;
	box-shadow: 0 5rpx 10px 0 rgba(7, 7, 7, 0.15);
	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;
			}
		}
	}
}
.transactionDatePopup 
{
	background-color: white;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	border-radius: 20rpx 20rpx 0 0;
	.btnTitleC 
	{
		.btn 
		{
			padding: 20rpx 26rpx;
			font-size: 28rpx;
			font-weight: 500;
		}
		.btn.cancel 
		{
			color: #727A8E;
		}
		.btn.confirm 
		{
			color: #D79412;
		}
		.title 
		{
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
		}
	}
	.yearMonthC 
	{
		background-color: #F7F7F7;
		margin: 0 25rpx;
		height: 70rpx;
		border-radius: 35rpx;
		.btn 
		{
			padding: 0 52rpx;
			.icon  
			{
				width: 13rpx;
				height: auto;
			}
			
		}
		.yearMonth 
		{
			font-size: 32rpx;
			font-weight: 500;
			color: #070707;
			text-align: center;
		}
	}
	.weekList 
	{
		padding: 0 38rpx;
		.item 
		{
			margin-right: 13rpx;
			line-height: 72rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #A7A7A7;
			text-align: center;
		}
	}
	.monthDateList
	{
		padding: 0 38rpx;
		.item 
		{
			margin-bottom: 12rpx;
			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: #2A2A2A;
				text-align: center;
			}
			.date.select 
			{
				background-color: #F2C367;
				color: white;
			}
			.date.notCurrentMonth
			{
				background-color: #FCFCFC;
				color: #999;
			}
		}
	}
	.quickTimeC 
	{
		margin-top: 16rpx;
		.item 
		{
			margin-right: 25rpx;
			width: 120rpx;
			line-height: 56rpx;
			border-radius: 30rpx;
			border: solid 2rpx #4E4E4E; 
			font-size: 24rpx;
			font-weight: 500;
			color: #4E4E4E;
			text-align: center;
		}
		.item:last-child 
		{
			margin-right: 0;
		}
	}
}
.vipPopup 
{
	background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
	margin: 0 95rpx;
	padding-bottom: 34rpx;
	width: 560rpx;
	border-radius: 10rpx;
	.topIcon
	{
		margin: -60rpx 0 0 calc((100% - 143rpx)/2);
		width: 143rpx;
		height: auto;
	}
	.popTitle 
	{
		margin-top: 28rpx;
		font-size: 40rpx;
		font-weight: bold;
		color: #101213;
		text-align: center;
	}
	.popSubtitle 
	{
		margin-top: 20rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #493F2B;
		text-align: center;
	}
	.moduleC 
	{
		background-color: white;
		margin: 0 30rpx 20rpx;
		padding-top: 25rpx;
		border-radius: 10rpx;
		.section  
		{
			padding: 0 25rpx;
			font-size: 26rpx;
			font-weight: bold;
			color: #333;
			.version 
			{
				margin-left: 18rpx;
				padding: 0 15rpx;
				line-height: 32rpx;
				border-radius: 10rpx;
				font-size: 22rpx;
			}
			.version.free 
			{
				background-color: #3D3D3D;
				color: #FEFCFB; 
			}
			.version.pro 
			{
				background-color: #F2C367;
				color: #3D3D3D;
			}
		}
		.visitC 
		{
			margin: 18rpx 24rpx 0;
			height: 60rpx;
			.line 
			{
				background-color: #F2C367;
				top: 0;
				left: 0;
				width: 44rpx;
				height: 100%;
				border-radius: 7rpx 0 0 7rpx;
			}
			.contentC 
			{
				background-color: #F7F7F7;
				margin-left: 6rpx;
				padding: 0 15rpx;
				height: 100%;
				border-radius: 10rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #3D3D3D;
				.icon 
				{
					margin-right: 14rpx;
					width: 25rpx;
					height: auto;
				}
			}
		}
		.list 
		{
			padding-bottom: 10rpx;
			.item 
			{
				padding: 10rpx 25rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #333;
				.icon 
				{
					margin-right: 13rpx;
					width: 27rpx;
					height: auto;
				}
			}
		}
	}
	.moduleC.visit 
	{
		margin-top: 20rpx;
		padding-bottom: 25rpx;
	}
	.btnC 
	{
		margin: 28rpx 92rpx 0;
		.btn 
		{
			line-height: 60rpx;
			border-radius: 10rpx;
			font-size: 24rpx;
			font-weight: bold;
			text-align: center;
		}
		.btn.later
		{
			background-color: #EDEDED;
			margin-right: 56rpx;
		}
		.btn.upgrade 
		{
			background-color: #F2C367;
		}
	}
}
</style>
