<template>
	<view>
		<navBar :leftText="navTitle" :hideNavBg="true"></navBar>
		<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
		<view class="chartDesC relative" :style="'margin-top:'+contentTop+'px;'">
			<view v-if="type==1" class="tabC" >
				<view :class="'item relative '+(selectCategory==index?'select':'')" v-for="(item,index) in categoryList" :key="index" @click="clickCategoryItem(index)">
					{{item}}
					<view v-if="selectCategory==index" class="line absolute"></view>
				</view>
			</view>
			<view v-if="type==1&&tradeData" class="volumeAmountC flex">
				<block v-if="tradeData.volume>100000000">
					<text class="volume">成交量：{{(tradeData.volume/100000000).toFixed(2)}}亿</text>
				</block>
				<block v-else>
					<text v-if="tradeData.volume>10000" class="volume">成交量：{{(tradeData.volume/10000).toFixed(2)}}万</text>
					<text v-else class="volume">成交量：{{tradeData.volume}}</text>
				</block>
				<block v-if="tradeData.amount>100000000">
					<text class="amount">成交金额：{{(tradeData.amount/100000000).toFixed(2)}}亿元</text>
				</block>
				<block v-else>
					<text v-if="tradeData.amount>10000" class="amount">成交金额：{{(tradeData.amount/10000).toFixed(2)}}万元</text>
					<text v-else class="amount">成交金额：{{tradeData.amount}}元</text>
				</block>
			</view>
			<view v-if="type==1" style="width:700rpx; height:400rpx">
				<l-echart ref="chartRef"></l-echart>
			</view>
			<view class="section">关联描述</view>
			<view class="des">{{relatedDesc}}<text class="ai">（AI合成）</text></view>
			<view class="riskTips">
				【风险提示：解析内容由价值前沿人工采集整理自新闻、公告、研报等公开信息，团队辛苦编写，未经许可严禁转载。本产品内容内容均不构成投资建议，请投资者注意风险，独立审慎决策。】
			</view>
		</view>
		
		<view v-if="type==1&&sourceList.length>0" class="infoSourceC">
			<view class="section">信息来源</view>
			<view class="list">
				<view class="item" v-for="(item,index) in sourceList" :key="index">
					<view class="content">{{item.sentences}}</view>
					<view class="article">——《{{item.report_title}}》</view>
					<view class="authorDateC flex">
						<view class="author flex1">{{item.author}}</view>
						<view class="date">{{getLocalDate(item.declare_date)}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { inject } from 'vue';
	import { stockCandlestickChartData, stockDetails } from '@/request/api';
	import { accDiv, accMul, accSub, getLocalDate } from '@/utils/util.js';
	const echarts = require('../../../uni_modules/lime-echart/static/echarts.min.js');

	export default {
		data() {
			return {
				navH:inject('navHeight'),
				contentTop:'',	
				navTitle:'',
				type:'',		//1事件详情2投资详情
				eventId:'',		//事件id
				stockCode:'',	//股票code
				categoryList:['分时图','日K线'],
				selectCategory:0,
				tradeData:null,  //成交数据
				option:{
					title: {
						show:false
					},
					tooltip: {
						position:function (pos, params, dom, rect, size) {
							// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
							var obj = {top: '10%'};
							obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
							
							return obj;
						},
						trigger: 'axis',
						axisPointer: {
						  type: 'cross'
						},
						formatter: function (params) {
							console.log(params)
							let res = '日期：'+params[0].name+'\n'+'开盘价：'+params[0].data[1]+'\n'+'收盘价：'+params[0].data[2]+'\n'+'最低价：'+params[0].data[3]+'\n'+'最高价：'+params[0].data[4]
							return res; // 经过这么一加工，最终返回出去并渲染，最终就出现了我们所看的效果
						},
					},
					legend: { 
					  show:false
					},
					grid: {
						top: '10%',
						left: '10%',
						right: '10%',
						bottom:"15%"
					},
					xAxis: {
						type: 'category',
						data: [],
						boundaryGap: false,
						axisLine: { onZero: false },
						splitLine: { show: false },
						min: 'dataMin',
						max: ''
					},
					yAxis: {
						scale: true,
						splitArea: {
						  show: true
						}
					},
					dataZoom: [
						{
						  type: 'inside',
						  start: 50,
						  end: 100
						},
						{
						  show: true,
						  type: 'slider',
						  top: '90%',
						  start: 50,
						  end: 100
						}
					],
					series: [
					{
						name: '日K',
						type: 'candlestick',
						data: [],
						itemStyle: {
							color: '#ffffff',
							color0: '#355422',
							borderColor: '#c00000',
							borderColor0: '#355422'
						}
					}],
					
				},
				option1:{
					title: {
						show:false
					},
					tooltip: {
						position:function (pos, params, dom, rect, size) {
							// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
							var obj = {top: '3%'};
							obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
							
							return obj;
						},
						trigger: 'axis',
						formatter: function (params) {
							let res = '时间：'+params[0].name+'\n'+'高：'+params[0].data[2]+'\n'+'开：'+params[0].data[3]
							+'\n'+'低：'+params[0].data[4]+'\n'+'收：'+params[0].data[1]+'\n'+'涨幅：'+params[0].data[5]+'%'
							// +'\n'+'量：'+params[0].data[6]+'\n'+'金额：'+params[0].data[7]
							return res; 
						},
					},
					grid: {
						top: '10%',
						left: '12%',
						right: '14%',
						bottom: '10%'
					},
					xAxis: {
						type:'category',
						scale:true,
						axisLabel: {
							customValues:['09:30','10:00','10:30','11:00','11:30','13:00','13:30','14:00','14:30','15:00',]
						},
					},
					yAxis: {
						show:false,
						scale:true,
					},
					dataZoom: [
						{
						  type: 'inside'
						}
					],
					series:{
						name: '分时图',
						type: 'line',
						symbol:'none',
						markLine: {
							silent: true,
							symbol:['none','none'],
							lineStyle: {
								type:'solid',
								width: 1,
								color: '#dedede'
							}, 
						  z:1
						},
						data: [],
					},
					animation:false
				},
				relatedDesc:'',			//关联描述
				sourceList:[],			//来源列表
				getLocalDate:getLocalDate
			}
		},
		onLoad(e) {
			if(e.code)
			{
				this.type = e.type
				if(e.type==1)
				{
					//事件详情
					this.contentTop = this.navH+20/750*inject('windowWidth')
					this.eventId = e.id
					this.stockCode = e.code 
					this.getStockDetailsData()
				}else 
				{
					//投资详情
					this.contentTop = this.navH
					this.navTitle = e.name+'('+e.code+')'
					this.relatedDesc = e.des
				}
			}
		},
		methods: {
			async init() {
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chartRef.init(echarts);
				// chart.on('click',function (params) {
				// 	console.log(params)
				// })
				console.log(chart)
				if(this.selectCategory==0)
				{
					//分时图
					chart.setOption(this.option1)
				}else
					chart.setOption(this.option)
			},
			/**
			 * 点击切换分类
			 * @param {Object} index
			 */
			clickCategoryItem(index)
			{
				if(this.selectCategory!=index)
				{
					this.selectCategory = index
					if(index==1)
					{
						//日k
						this.getStockCandlestickChartData()
					}else 
						this.init()
				}
			},
			/**
			 * 获取股票详情数据
			 */
			getStockDetailsData()
			{
				let stockCode = this.stockCode 
				let eventId = this.eventId
				stockDetails(eventId,stockCode).then(res=>{
					if(res.code==200)
					{
						this.navTitle = res.data.basic_info.stock_name+'('+res.data.basic_info.stock_code+')'
						let data = res.data.minute_chart_data 
						this.tradeData = res.data.latest_trade
						let categoryData = []
						let valueData = []
						let open = data[0].open
						for (let item of data) {
							categoryData.push(item.time)
							let rate = accMul(accDiv(accSub(item.close,open),open).toFixed(4),100) 
							let volume = item.volume 
							if (volume>10000) {
								volume = (volume/10000).toFixed(0)+'万'
							}
							let amount = item.amount 
							if (amount>10000)
							{
								amount = (amount/10000).toFixed(0)+'万'
							}
							valueData.push([item.time,item.close,item.high,item.open,item.low,rate,volume,amount])
						}
						let min = open 
						let max = 0
						for (let item of valueData) {
							let value = item[1]
							if(parseFloat(value)<min)
							{
								min = parseFloat(value)
							}
							if(parseFloat(value)>max)
							{
								max = parseFloat(value)
							}
						}
						let minInterval = (open - min)/3
						let maxInterval = (max - open)/3
						let intervalList = []
						if(minInterval>maxInterval)
						{
							for (var i = 3; i > 0; i--) {
								intervalList.push(open-i*minInterval)
							}
							for (var i = 0; i < 4; i++) {
								intervalList.push(open+i*minInterval)
							}
						}else 
						{
							for (var i = 3; i > 0; i--) {
								intervalList.push(open-i*maxInterval)
							}
							for (var i = 0; i < 4; i++) {
								intervalList.push(open+i*maxInterval)
							}
						}
						this.option1.xAxis.data = categoryData
						this.option1.yAxis.min = intervalList[0].toFixed(2)
						this.option1.yAxis.max = intervalList[intervalList.length-1].toFixed(2)
						this.option1.series.data = valueData
						let markData = []
						let time = res.data.event_info.event_start_time.split('T')[1]
						time = time.substring(0,5)
						for (let item of intervalList) {
							markData.push({
								xAxis:time,
								lineStyle:{
									type:'solid',
									width: 1,
									color: '#ffd700'
								},
								label:{
									position:'middle',
									formatter:'事件发生',
									color: '#ffd700'
								}
							},
							{
								yAxis:item,
								label:{
									show:true,
									position:'start',
									color:'#333'
								},
							},
							{
								yAxis:item,
								label:{
									show:true,
									position:'end',
									formatter:accMul(accDiv(accSub(item,open),open).toFixed(4),100)+'%',
									color:'#333'
								},
							})
						}
						this.option1.series.markLine.data = markData
						let relatedDesc = res.data.related_desc
						if(relatedDesc)
						{
							this.relatedDesc = relatedDesc.relation_desc
							if(relatedDesc.retrieved_sources)
							{
								this.sourceList = relatedDesc.retrieved_sources
							}
						}
						this.init()
					}else 
						uni.showToast({
							title:res.message,
							icon:'none'
						})
				}).catch(error=>{
					
				})
			},
			/**
			 * 获取股票K线数据
			 */
			getStockCandlestickChartData()
			{
				let stockCode = this.stockCode
				let param = {chart_type:'minute'}
				if(this.selectCategory==1)
				{
					param.chart_type = 'daily'
				}
				stockCandlestickChartData(stockCode,param).then(res=>{
					let data = res.data 
					let categoryData = []
					let valueData = []
					for (let item of data) {
						categoryData.push(item.time)
						valueData.push([item.open,item.close,item.low,item.high])
					}
					this.option.xAxis.data = categoryData
					this.option.series[0].data = valueData
					this.init()
				}).catch(error=>{
					
				})
			}
		}
	}
</script>

<style lang="less">
page 
{
	background-color: #070707;
}
.topBg
{
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
.chartDesC 
{
	background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
	margin: 0 25rpx;
	padding-top: 10rpx;
	border-radius: 10rpx;
	.tabC
	{
		.item 
		{
			display: inline-block;
			padding: 0 25rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #42485B;
		}
		.item.select
		{
			font-weight: bold;
			color: #F3C368;
			.line 
			{
				background-color: #F3C368;
				left: calc((100% - 50rpx)/2);
				bottom: 0;
				width: 50rpx;
				height: 2rpx;
			}
		}
	}
	.volumeAmountC {
		padding: 25rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #666;
		.volume {
			margin-right: 30rpx;
		}
	}
	.section
	{
		padding: 0 25rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #222;
	}
	.des 
	{
		margin: 0 25rpx;
		line-height: 1.4rem;
		font-size: 24rpx;
		font-weight: 500;
		color: #666;
		.ai 
		{
			color: #EC3440;
		}
	}
	.riskTips 
	{
		margin: 20rpx 25rpx 0;
		padding-bottom: 30rpx;
		line-height: 1.2rem;
		font-size: 22rpx;
		color: #A2A2A1;
	}
}

.infoSourceC 
{
	.section
	{
		padding: 0 25rpx;
		line-height: 80rpx;
		font-size: 27rpx;
		font-weight: bold;
		color: #F3C368;
	}
	.list
	{
		padding: 0 25rpx;
		.item 
		{
			background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);			
			margin-bottom: 20rpx;
			padding: 30rpx 26rpx;
			border-radius: 10rpx;
			.content 
			{
				font-size: 24rpx;
				font-weight: 500;
				color: #222;
			}
			.article
			{
				margin-top: 10rpx;
				font-size: 22rpx;
				font-weight: 500;
				color: #666;
				text-align: right;
			}
			.authorDateC
			{
				margin-top: 30rpx;
				font-size: 22rpx;
				font-weight: 500;
				color: #AAA;
				.author 
				{
					margin-right: 10rpx;
				}
			}
		}
	}
}
.contentC.radius 
{
	margin-top: 10rpx;
	border-radius: 20rpx 20rpx 0 0;
}
</style>
