<template>
	<view>
		<view style="color: #2B2B2B; font-weight: 500; font-size: 24rpx;">
			<view style="display: flex;align-items: center; padding: 20rpx; box-sizing: border-box;">
				<image src="/pagesStock/static/icon/cwfx-1.png" mode="widthFix"
					style="width: 40rpx; height: 40rpx;"></image>
				<view class="flex1" style="margin: 0 10rpx; font-size: 28rpx;">盈利能力</view>
				<image src="/static/icon/home/conceptCenter/next.png" mode="widthFix"
					style="width: 13rpx; height: 22rpx;"></image>
			</view>
			<view style="display: grid; gap: 20rpx; grid-template-columns: repeat(4, 1fr); margin: 0 20rpx;">
				<view
					style="display: flex; align-items: center; justify-content: center; text-align: center; font-size: 20rpx; color: #999999; border: 1rpx solid #D2D2D2; padding: 3rpx 5rpx; box-sizing: border-box;"
					:style="{color: index == 0 ? '#BB8520' : '#999999', border: `1rpx solid ${index == 0 ? '#F2C369' : '#D2D2D2'}`,  'background-color': (index == 0 ? '#FFFAF1' : '#FFFFFF')}"
					v-for="(item,index) in ['净资产收益率(ROE)%', '净资产收益率(扣非)%', '净资产收益率(加权)%', '总资产报酬率(ROA)%', '毛利率%', '净利率%', '营业利润率%', '成本费用利润率%']"
					:key="index">
					{{item}}
				</view>
			</view>
			<view class="flex" style="padding: 20rpx; box-sizing: border-box;">
				<view class="flex1" style="font-size: 28rpx;">查看详细数据</view>
				<view
					style="color: #F2C369; font-size: 22rpx; padding: 2rpx 10rpx; border-radius: 5rpx; border: 1rpx solid #F2C369; text-align: center; margin: 0 10rpx;">
					单季度</view>
				<view class="flex"
					style="padding: 3rpx 10rpx;border: 1rpx solid #D2D2D2;">
					<image style="width: 23rpx; height: 23rpx;" src="/pagesStock/static/icon/all-icon.png"
						mode="widthFix"></image>
					<view style="margin: 0 10rpx; color: #999999; font-size: 22rpx;">全部</view>
					<image style="width: 11rpx; height: 6rpx;" src="/pagesStock/static/icon/all-down.png"
						mode="widthFix"></image>
				</view>
			</view>
	
			<view style="height: 500rpx;">
				<l-echart ref="chartRef1"></l-echart>
			</view>
	
		</view>
	
		<view style="color: #2B2B2B; font-weight: 500; font-size: 24rpx;">
			<view style="display: flex;align-items: center; padding: 20rpx; box-sizing: border-box;">
				<image src="/pagesStock/static/icon/cwfx-2.png" mode="widthFix"
					style="width: 40rpx; height: 40rpx;"></image>
				<view class="flex1" style="margin: 0 10rpx; font-size: 28rpx;">每股指标</view>
				<image src="/static/icon/home/conceptCenter/next.png" mode="widthFix"
					style="width: 13rpx; height: 22rpx;"></image>
			</view>
	
			<view style="display: grid; gap: 20rpx; grid-template-columns: repeat(4, 1fr); margin: 0 20rpx;">
				<view
					style="display: flex; align-items: center; justify-content: center; text-align: center; font-size: 20rpx; color: #999999; border: 1rpx solid #D2D2D2; padding: 3rpx 5rpx; box-sizing: border-box;"
					:style="{color: index == 0 ? '#BB8520' : '#999999', border: `1rpx solid ${index == 0 ? '#F2C369' : '#D2D2D2'}`,  'background-color': (index == 0 ? '#FFFAF1' : '#FFFFFF')}"
					v-for="(item,index) in ['每股收益(EPS)', '基本每股收益', '稀释每股收益', '扣非每股收益', '每股净资产', '每股经营现金流', '每股资本公积', '每股未分配利润']"
					:key="index">
					{{item}}
				</view>
			</view>
	
			<view style="display: flex;align-items: center; padding: 20rpx; box-sizing: border-box;">
				<view class="flex1" style="font-size: 28rpx;">查看详细数据</view>
				<view
					style="color: #F2C369; font-size: 22rpx; padding: 2rpx 10rpx; border-radius: 5rpx; border: 1rpx solid #F2C369; text-align: center; margin: 0 10rpx;">
					单季度</view>
				<view
					style="display: flex; align-items: center; padding: 3rpx 10rpx; box-sizing: border-box; border: 1rpx solid #D2D2D2;">
					<image style="width: 23rpx; height: 23rpx;" src="/pagesStock/static/icon/all-icon.png"
						mode="widthFix"></image>
					<view style="margin: 0 10rpx; color: #999999; font-size: 22rpx;">全部</view>
					<image style="width: 11rpx; height: 6rpx;" src="/pagesStock/static/icon/all-down.png"
						mode="widthFix"></image>
				</view>
			</view>
			<view style="height: 500rpx;">
				<l-echart ref="chartRef2"></l-echart> 
			</view>
	
		</view>
	</view>
</template>

<script>
	export default {
		name:"cwfx-view",
		data() {
			return {
				option1:{
					legend:{
						show:true,
						data:['ROE','同比(右)']
					},
					grid:{
						left:'2%',
						right:'2%',
						top:'5%',
						bottom:'30%'
					},
					xAxis: {
					    type: 'category',
					    data: [],
						axisLabel:{
							// interval:0
						}
					},
					yAxis: [{
							type: 'value',
							name:'(%)',
							position:'left',
							alignTicks:true,
							axisLine:{
								onZero:false
							}
						},
						{
							type: 'value',
							name:'(%)',
							position:'right',
							alignTicks:true,
							axisLine:{
							  onZero:false
							}
						}
					],
					dataZoom:[{
						type:'slider'
					}],
					series: [
					    {
					      type: 'bar',
						  name:'营业收入',
					      data: [],
						  yAxisIndex:0
					    },
						{
						  type: 'line',
						  name:'净利润',
						  data: [],
						  yAxisIndex:1
						}
					]
				},
			};
		},
		props: {
			barCategoryList1:Array,
			barList1:Array,
			lineList:Array,		//折线图数据
			barCategoryList1:Array,
			barList1:Array,
		},
		methods:{
			clickProfitabilityIndicators(item) {
				
			}
		}
	}
</script>

<style>

</style>