<template>
	<view>
		<!-- 资产负债表 -->
		<view @click="itemClick(0)" 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 class="indicatorC" style="display: grid; gap: 20rpx; grid-template-columns: repeat(3, 1fr); margin: 0 20rpx;">
				<view :class="'item flexCenter '+(cashFlowIndicatorIndex==index?'select':'')"
					v-for="(item,index) in ['货币资金', '所有者权益', '关键指标']" :key="index">
					{{item}}
				</view>
			</view>
	
			<view class="flex" style="padding: 20rpx;">
				<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: 400rpx;">
				<l-echart ref="chartRef1"></l-echart>
			</view>
			
			<view v-if="financialBalanceList.length>0" style="background-color: #FAFAFC; border-radius: 10rpx; margin: 0 20rpx; padding: 20rpx 0;">
				<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
					<view style="flex: 1; color: #999999; margin-right: 20rpx;">资产总计</view>
					<view style="text-align: right; color: #2A2A2A;">{{getNumStr(financialBalanceList[0].assets.total)}}</view>
				</view>
				<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
					<view style="flex: 1; color: #999999; margin-right: 20rpx;">负债合计</view>
					<view style="text-align: right; color: #2A2A2A;">{{getNumStr(financialBalanceList[0].liabilities.total)}}</view>
				</view>
				<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
					<view style="flex: 1; color: #999999; margin-right: 20rpx;">所有者权益</view>
					<view style="text-align: right; color: #2A2A2A;">{{getNumStr(financialBalanceList[0].equity.total)}}</view>
				</view>
				<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
					<view style="flex: 1; color: #999999; margin-right: 20rpx;">货币资金</view>
					<view style="text-align: right; color: #2A2A2A;">{{getNumStr(financialBalanceList[0].assets.current_assets.cash)}}</view>
				</view>
				<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
					<view style="flex: 1; color: #999999; margin-right: 20rpx;">资本公积金</view>
					<view style="text-align: right; color: #2A2A2A;">{{getNumStr(financialBalanceList[0].equity.capital_reserve)}}</view>
				</view>
				<view class="flex between" style=" font-size: 24rpx; font-weight: 500; margin: 20rpx;">
					<view style="flex: 1; color: #999999; margin-right: 20rpx;">盈余公积金</view>
					<view style="text-align: right; color: #2A2A2A;">{{getNumStr(financialBalanceList[0].equity.surplus_reserve)}}</view>
				</view>
				<view class="flex between" style="font-size: 24rpx; font-weight: 500; margin: 20rpx;">
					<view style="flex: 1; color: #999999; margin-right: 20rpx;">未分配利润</view>
					<view style="text-align: right; color: #2A2A2A;">{{getNumStr(financialBalanceList[0].equity.undistributed_profit)}}</view>
				</view>
			</view>
		</view>
		<!-- 现金流量表 -->
		<view style="color: #2B2B2B; font-weight: 500; font-size: 24rpx;">
			<view class="flex" style="padding: 20rpx;">
				<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 class="indicatorC" style="display: grid; gap: 20rpx; grid-template-columns: repeat(3, 1fr); margin: 0 20rpx;">
				<view :class="'item flexCenter '+(cashFlowIndicatorIndex==index?'select':'')" v-for="(item,index) in ['经营现金流', '筹资现金流', '投资现金流']" :key="index" @click="clickCashFlowIndicatorItem(index)">
					{{item}}
				</view>
			</view>
		
			<view class="flex" style="padding: 20rpx;">
				<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: 400rpx;">
				<l-echart ref="chartRef2"></l-echart>
			</view>
			<view style="background-color: #FAFAFC; border-radius: 10rpx; margin: 0 20rpx; padding: 20rpx 0;">
				<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
					<view style="flex: 1; color: #999999; margin-right: 20rpx;">经营性现金流</view>
					<view style="text-align: right; color: #2A2A2A;">3.50亿</view>
				</view>
				<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
					<view style="flex: 1; color: #999999; margin-right: 20rpx;">经营性现金流增长率</view>
					<view style="text-align: right; color: #2A2A2A;">16.94%</view>
				</view>
				<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
					<view style="flex: 1; color: #999999; margin-right: 20rpx;">投资性现金流</view>
					<view style="text-align: right; color: #2A2A2A;">-5544.90万</view>
				</view>
				<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
					<view style="flex: 1; color: #999999; margin-right: 20rpx;">筹资性现金流</view>
					<view style="text-align: right; color: #2A2A2A;">-1.16亿</view>
				</view>
				<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
					<view style="flex: 1; color: #999999; margin-right: 20rpx;">合计现金流</view>
					<view style="text-align: right; color: #2A2A2A;">1.79亿</view>
				</view>
				<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
					<view style="flex: 1; color: #999999; margin-right: 20rpx;">合计现金流增长率</view>
					<view style="text-align: right; color: #2A2A2A;">935.58%</view>
				</view>
			</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-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 class="indicatorC" style="display: grid; gap: 20rpx; grid-template-columns: repeat(3, 1fr); margin: 0 20rpx;">
				<view :class="'item flexCenter '+(profitIndicatorIndex==index?'select':'')"
					v-for="(item,index) in ['净利润', '营业收入', '期间费用']" :key="index" @click="clickProfitIndicatorItem(index)">
					{{item}}
				</view>
			</view>
		
			<view style="display: flex;align-items: center; padding: 20rpx;">
				<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; border: 1rpx solid #D2D2D2; margin-right: 10rpx;">
					<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
					style="display: flex; align-items: center; 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: 400rpx;">
				<l-echart ref="chartRef3"></l-echart>
			</view>
			<view style="background-color: #FAFAFC; border-radius: 10rpx; margin: 0 20rpx; padding: 20rpx 0;">
				<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
					<view style="flex: 1; color: #999999; margin-right: 20rpx;">净利润</view>
					<view style="text-align: right; color: #2A2A2A;">-6525.56万</view>
				</view>
				<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
					<view style="flex: 1; color: #999999; margin-right: 20rpx;">净利润增长率</view>
					<view style="text-align: right; color: #2A2A2A;">-1600.69%</view>
				</view>
				<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
					<view style="flex: 1; color: #999999; margin-right: 20rpx;">营业总收入</view>
					<view style="text-align: right; color: #2A2A2A;">3.64亿</view>
				</view>
				<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
					<view style="flex: 1; color: #999999; margin-right: 20rpx;">营业总收入增长率</view>
					<view style="text-align: right; color: #2A2A2A;">-26.28%</view>
				</view>
				<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
					<view style="flex: 1; color: #999999; margin-right: 20rpx;">营业利润</view>
					<view style="text-align: right; color: #2A2A2A;">-7539.55万</view>
				</view>
				<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
					<view style="flex: 1; color: #999999; margin-right: 20rpx;">营业利润增长率</view>
					<view style="text-align: right; color: #2A2A2A;">-201.00%</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getNumStr } from '../../utils/util';

	export default {
		name:"cwsj-view",
		data() {
			return {
				profitabilityIndicatorIndex:0,
				profitIndicatorIndex:0,
				cashFlowIndicatorIndex:0,
				option1:{
					legend:{
						show:true,
						data:['期间费用','同比(右)']
					},
					grid:{
						left:'2%',
						right:'2%',
						top:'5%',
						bottom:'30%'
					},
					xAxis: {
					    type: 'category',
					    data: [],
						axisLabel:{
							rotate:45,
							fontSize:10
						}
					},
					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:'ROE',
					      data: [],
						  yAxisIndex:0
					    },
						{
						  type: 'line',
						  name:'同比',
						  data: [],
						  yAxisIndex:1
						}
					]
				},
				option2:{
					legend:{
						show:true,
						data:['经营现金流','同比(右)']
					},
					grid:{
						left:'2%',
						right:'2%',
						top:'5%',
						bottom:'30%'
					},
					xAxis: {
					    type: 'category',
					    data: [],
						axisLabel:{
							fontSize:10,
							rotate:45
						}
					},
					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:'ROE',
					      data: [],
						  yAxisIndex:0
					    },
						{
						  type: 'line',
						  name:'同比',
						  data: [],
						  yAxisIndex:1
						}
					]
				},
				option3:{
					legend:{
						show:true,
						data:['期间费用','同比(右)']
					},
					grid:{
						left:'2%',
						right:'2%',
						top:'5%',
						bottom:'30%'
					},
					xAxis: {
					    type: 'category',
					    data: [],
						axisLabel:{
							rotate:45,
							fontSize:10
						}
					},
					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:'ROE',
					      data: [],
						  yAxisIndex:0
					    },
						{
						  type: 'line',
						  name:'同比',
						  data: [],
						  yAxisIndex:1
						}
					]
				},
				getNumStr:getNumStr
			};
		},
		props:{
			financialBalanceList:Array, 			//资产负债表
			cashFlowList:Array,						//现金流量表
			incomeStatementList:Array,				//利润表
		},
		watch:{
			
		},
		methods:{
			/**
			 * 点击切换现金流量表指标
			 * @param {Object} index
			 */
			clickCashFlowIndicatorItem(index) {
				if(this.cashFlowIndicatorIndex!=index) {
					this.cashFlowIndicatorIndex = index
				}
			},
			/**
			 * 点击切换利润表指标
			 * @param {Object} index
			 */
			clickProfitIndicatorItem(index) {
				if(this.profitIndicatorIndex!=index) {
					this.profitIndicatorIndex = index
				}
			}
		}
	}
</script>

<style lang="less">
.indicatorC 
{
	.item 
	{
		padding: 10rpx;
		border: 1rpx solid #D2D2D2; 
		font-size: 20rpx; 
		color: #999999; 
		text-align: center; 
	}
	.item.select 
	{
		background-color: #FFFAF1;
		color: #BB8520;
		border: 1rpx solid #F2C369;
	}
}
</style>