<template>
	<view>
		<navBar :leftText="navTitle"></navBar>
		<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
		<view class="tabC fixed" :style="'top:'+navH+'px;'">
			<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 class="contentC fixed" :style="'top:'+contentTop+'px;'">
			<view style="width:750rpx; height:400rpx">
				<l-echart ref="chartRef"></l-echart>
			</view>
			<view class="section">关联描述</view>
			<view class="des">全球原油运输巨头，VLCC运力规模全球第一，直接受益于霍尔木兹海峡地缘风险带来的运价上涨及风险溢价。</view>
		</view>
	</view>
</template>

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

	export default {
		data() {
			return {
				navH:inject('navHeight'),
				contentTop:'',	
				navTitle:'',
				stockCode:'',	//股票code
				categoryList:['分钟线','分时图','日K线'],
				selectCategory:0,
				option:{
				  title: {
				    show:false
				  },
				  tooltip: {
				    trigger: 'axis',
				    axisPointer: {
				      type: 'cross'
				    }
				  },
				  legend: { 
					  show:false
				  },
				  grid: {
				    left: '10%',
				    right: '10%',
				    bottom: '15%'
				  },
				  xAxis: {
				    type: 'category',
				    data: [],
				    boundaryGap: false,
				    axisLine: { onZero: false },
				    splitLine: { show: false },
				    min: 'dataMin',
				    max: 'dataMax'
				  },
				  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: '#ec0000',
				        color0: '#8A0000',
				        borderColor: '#00da3c',
				        borderColor0: '#008F28'
				      },
				      markPoint: {
				        label: {
				          formatter: function (param) {
				            return param != null ? Math.round(param.value) + '' : '';
				          }
				        },
				        data: [
				          {
				            name: 'Mark',
				            coord: ['2013/5/31', 2300],
				            value: 2300,
				            itemStyle: {
				              color: 'rgb(41,60,85)'
				            }
				          },
				          {
				            name: 'highest value',
				            type: 'max',
				            valueDim: 'highest'
				          },
				          {
				            name: 'lowest value',
				            type: 'min',
				            valueDim: 'lowest'
				          },
				          {
				            name: 'average value on close',
				            type: 'average',
				            valueDim: 'close'
				          }
				        ],
				        tooltip: {
				          formatter: function (param) {
				            return param.name + '<br>' + (param.data.coord || '');
				          }
				        }
				      },
				      markLine: {
				        symbol: ['none', 'none'],
				        data: [
				          [
				            {
				              name: 'from lowest to highest',
				              type: 'min',
				              valueDim: 'lowest',
				              symbol: 'circle',
				              symbolSize: 10,
				              label: {
				                show: false
				              },
				              emphasis: {
				                label: {
				                  show: false
				                }
				              }
				            },
				            {
				              type: 'max',
				              valueDim: 'highest',
				              symbol: 'circle',
				              symbolSize: 10,
				              label: {
				                show: false
				              },
				              emphasis: {
				                label: {
				                  show: false
				                }
				              }
				            }
				          ],
				          {
				            name: 'min line on close',
				            type: 'min',
				            valueDim: 'close'
				          },
				          {
				            name: 'max line on close',
				            type: 'max',
				            valueDim: 'close'
				          }
				        ]
				      }
				    }
				  ]
				},
			}
		},
		onLoad(e) {
			this.contentTop = this.navH+(60+10)/750*inject('windowWidth')
			if(e.code)
			{
				this.stockCode = e.code 
				this.getStockDetailsData()
				this.getStockCandlestickChartData()
			}
		},
		methods: {
			async init() {
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chartRef.init(echarts);
				chart.setOption(this.option)
			},
			/**
			 * 点击切换分类
			 * @param {Object} index
			 */
			clickCategoryItem(index)
			{
				if(this.selectCategory!=index)
				{
					this.selectCategory = index
					if(index==0||index==2)
					{
						this.getStockCandlestickChartData()
					}
				}
			},
			/**
			 * 获取股票详情数据
			 */
			getStockDetailsData()
			{
				let stockCode = this.stockCode 
				stockDetails(stockCode).then(res=>{
					if(res.code==200)
					{
						this.navTitle = res.data.basic_info.stock_name+'('+res.data.basic_info.stock_code+')'
					}else 
						uni.showToast({
							title:res.message,
							icon:'none'
						})
				}).catch(error=>{
					
				})
			},
			/**
			 * 获取股票K线数据
			 */
			getStockCandlestickChartData()
			{
				let stockCode = this.stockCode
				let param = {chart_type:'minute'}
				if(this.selectCategory==2)
				{
					param.chart_type = 'daily'
				}
				stockCandlestickChartData(stockCode,param).then(res=>{
					let data = res.data 
					let categoryData = []
					for (let item of data) {
						categoryData.push(item.time)
					}
					this.option.xAxis.data = categoryData
					this.init()
				}).catch(error=>{
					
				})
			}
		}
	}
</script>

<style lang="less">
.topBg
{
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
.tabC
{
	background-color: white;
	margin-top: 10rpx;
	left: 0;
	right: 0;
	border-radius: 20rpx 20rpx 0 0;
	.item 
	{
		display: inline-block;
		padding: 0 30rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #42485B;
	}
	.item.select
	{
		font-weight: bold;
		color: #F97316;
		.line 
		{
			background-color: #F97316;
			left: calc((100% - 50rpx)/2);
			bottom: 0;
			width: 50rpx;
			height: 2rpx;
		}
	}
}
.contentC 
{
	background-color: white;
	left: 0;
	right: 0;
	bottom: 0;
	.section  
	{
		padding: 0 28rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #222;
	}
	.des 
	{
		padding: 0 30rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #666;
	}
	
}
</style>
