<template>
	<view class="branchList">
		<view class="item" v-for="(item,index) in branchList" :key="index">
			<view class="titleStatusC flex">
				<view class="title flex1">{{item.branch_name}}</view>
				<view :class="'statusC flex '+(item.business_status=='注销'?'logOff':'exist')">
					<image v-if="item.business_status=='注销'" class="icon" src="/pagesStock/static/icon/logOffStatus.png" mode="widthFix">
					</image>
					<image v-else class="icon" src="/pagesStock/static/icon/existStatus.png" mode="widthFix"></image>
					<view>{{item.business_status}}</view>
				</view>
			</view>
			<view class="infoC topInfo flex">
				<view class="infoItem leftInfo flex flex1">
					<view class="title">注册资本</view>
					<view class="content flex1">{{item.register_capital}}</view>
				</view>
				<view class="infoItem rightInfo flex flex1">
					<view class="title">法人代表</view>
					<view class="content flex1">{{item.legal_person}}</view>
				</view>
			</view>
			<view class="infoC flex">
				<view class="infoItem leftInfo flex flex1">
					<view class="title">成立日期</view>
					<view class="content flex1">{{item.register_date}}</view>
				</view>
				<view class="infoItem rightInfo flex flex1">
					<view class="title">关联企业</view>
					<view class="content flex1">{{item.related_company_count}}家</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"fzjg-view",
		data() {
			return {
				
			};
		},
		props:{
			branchList:Array
		}
	}
</script>

<style lang="less">
.branchList {
	margin-top: 38rpx;
	padding: 0 20rpx;

	.item {
		background-color: #FAFAFC;
		margin-bottom: 20rpx;
		padding: 20rpx;
		border-radius: 10rpx;

		.titleStatusC {
			font-size: 28rpx;
			font-weight: bold;
			color: #2B2B2B;

			.statusC {
				padding: 0 10rpx;
				line-height: 28rpx;
				border-radius: 15rpx;
				font-size: 20rpx;
				font-weight: 500;
				.icon {
					margin-right: 3rpx;
					width: 16rpx;
					height: auto;
				}
			}

			.statusC.exist {
				background-color: #FFF7E9;
				border: solid 1rpx #F2C369;
				color: #F2C369;
			}
			
			.statusC.logOff {
				background-color: #FFF1F1;
				border: solid 1rpx #EF3535;
				color: #EF3535;
			}
		}

		.infoC {
			height: 50rpx;

			.infoItem {
				.title {
					margin-right: 16rpx;
					font-size: 22rpx;
					font-weight: 500;
					color: #999;
				}

				.content {
					font-size: 24rpx;
					font-weight: bold;
					color: #2A2A2A;
					text-align: right;
				}
			}

			.infoItem.leftInfo {
				margin-right: 20rpx;
			}

			.infoItem.rightInfo {
				margin-left: 20rpx;
			}
		}

		.infoC.topInfo {
			margin-top: 10rpx;
		}
	}
}
</style>