<template>
	<view class="kline">
		<l-f2 ref="chart"></l-f2>
	</view>
</template>

<script>
	import F2 from '@/uni_modules/lime-f2/components/lime-f2/f2.min.js'
	import lF2 from '@/uni_modules/lime-f2/components/lime-f2/'
	export default {
		components: {
			lF2,
		},
		data() {
			return {
			}
		},
		async mounted() {
			let data = await this.getData()
			// 绘制K线
			this.$refs.chart.init(config => {
				data = data.slice(0, 150);
				const BASIC_PRICE = 6.95;
				data.sort(function(obj1, obj2) {
					return obj1.time > obj2.time ? 1 : -1;
				});
				data.forEach(function(obj) {
					obj.range = [obj.start, obj.end, obj.max, obj.min];
					obj.trend = obj.start <= obj.end ? 0 : 1;
				});
				const chart = new F2.Chart(Object.assign(config));
				chart.source(data, {
					range: {
						tickCount: 5,
						formatter: function formatter(val) {
							return val.toFixed(2);
						}
					},
					time: {
						tickCount: 3
					}
				});
				chart.tooltip({
					showCrosshairs: true,
					showXTip: true,
					showYTip: true,
					crosshairsType: 'xy',
					custom: true,
					yTip: function yTip(val) {
						return {
							text: val.toFixed(2),
							fill: '#333',
							fontSize: 10
						};
					},
			
					xTip: {
						fill: '#333',
						fontSize: 10
					},
					xTipBackground: {
						fill: '#EDF2FE'
					},
					yTipBackground: {
						fill: '#EDF2FE'
					},
					crosshairsStyle: {
						stroke: '#0F8DE8'
					}
				});
				chart.axis('range', {
					grid: {
						stroke: '#ddd',
						lineWidth: 1,
						lineDash: null
					},
					label: {
						fill: '#999'
					}
				});
				chart.axis('time', {
					label: function label(text, index, total) {
						const textCfg = {
							fill: '#999'
						};
						if (index === 0) {
							textCfg.textAlign = 'left';
						}
						if (index === total - 1) {
							textCfg.textAlign = 'right';
						}
						return textCfg;
					},
			
					grid: {
						lineWidth: 1,
						stroke: '#ddd'
					}
				});
				chart.guide().line({
					start: ['min', BASIC_PRICE],
					end: ['max', BASIC_PRICE],
					style: {
						lineDash: [8],
						stroke: '#F68300'
					}
				});
				chart.guide().text({
					position: ['min', BASIC_PRICE],
					content: BASIC_PRICE,
					style: {
						fill: '#808080',
						textAlign: 'start',
						textBaseline: 'bottom',
						fontSize: 10,
						fontWeight: 'bold'
					},
					offsetX: 2
				});
				chart.guide().rect({
					start: ['0%', '0%'],
					end: ['100%', '100%'],
					style: {
						stroke: '#ddd',
						lineWidth: 1,
						fill: '#fff',
						opacity: 1,
						fillOpacity: 0
					}
				});
				chart.schema()
					.position('time*range')
					.color('trend', function(trend) {
						return ['#F4333C', '#1CA93D'][trend];
					})
					.shape('candle');
				chart.render();
				return chart;
			});
		},
		methods: {
			getData() {
				// plus.screen.lockOrientation('landscape-primary')
				return new Promise((resolve) => {
					uni.request({
						url: 'https://gw.alipayobjects.com/os/antfincdn/c4ROEPcthk/candle-sticks.json',
						success: (res) => {
							resolve(res.data)
						}
					})
				})
			}
		},
		onUnload() {
			console.log('222')
		}
	}
</script>

<style lang="scss">
	.kline{
	}
</style>
