<template>
	<view class="warpper">
		<view class="card-box">
			<view class="card-header">
				<view class="left-text">基本信息</view>
				<view class="right-text">跟进记录</view>
			</view>
			<view class="card-content">
				<view class="info">
					<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif"
						mode=""></image>
					<view class="content">
						<view class="title">
							<text class="text">广州市金骏彩色印务有限公司</text>
							<image class="icon"
								:src="info.registrationStatus ? '/static/imgs/general/cooperation-icon.png' : '/static/imgs/general/no-cooperation-icon.png'">
							</image>
						</view>
						<view class="desc">
							<text>主营：生产画册、书刊、包装盒、手提袋子、手机钢化膜盒子、蛋糕盒等。</text>
						</view>
					</view>
				</view>
				<view class="company-box">
					<view>
						<view>
							<text class="title">法定代表人</text>
						</view>
						<view class="value">
							曹孟德
						</view>
					</view>
					<view class="">
						<view>
							<text class="title">注册资本</text>
						</view>
						<view class="value">
							1727.2万
						</view>
					</view>
					<view class="">
						<view>
							<text class="title">成立时间</text>
						</view>
						<view class="value">
							2021/12/22
						</view>
					</view>
				</view>
				<view class="site">
					<image class="icon" src="/static/imgs/client-list/navigation-icon.png"></image>
					<text class="text">广东省广州市天河区车陂街道联合社区西区8栋8408</text>
				</view>
			</view>
			<uGap></uGap>
		</view>
	</view>
</template>

<script>
	import uGap from '@/components/u-gap/u-gap.vue'
	export default {
		components: {
			uGap
		},
		data() {
			return {
				info: {
					"annualTurnover": 0,
					"belongIndustry": "string",
					"businessLicenseImg": "string",
					"factoryAddress": "string",
					"factoryImgList": [
						"string"
					],
					"foundDate": "2022-01-05T02:20:30.776Z",
					"id": 0,
					"leaseContract": "string",
					"legalPersonName": "string",
					"locCityId": 0,
					"locCityName": "string",
					"locDetail": "string",
					"locDistriceName": "string",
					"locDistrictId": 0,
					"locProvinceId": 0,
					"locProvinceName": "string",
					"locStreetId": 0,
					"locStreetName": "string",
					"mainBusiness": "string",
					"name": "string",
					"plantArea": 0,
					"registeredCapital": 0,
					"registrationStatus": "string",
					"shortName": "string",
					"uniformSocialCreditCode": "string"
				}
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.warpper {
		width: 750rpx;
		height: 100%;

		.card-box {
			.card-header {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				height: 88rpx;
				line-height: 88rpx;
				border-bottom: 2rpx solid #DDDDDD;
				padding: 0rpx 32rpx;

				.left-text {
					font-size: 30rpx;
					color: #000000;
					letter-spacing: 0;
					font-weight: 600;
				}

				.right-text {
					font-size: 28rpx;
					color: #007AFF;
					letter-spacing: 0;
					text-align: right;
					font-weight: 400;
				}
			}
		}

		.card-content {
			.info {
				width: 750rpx;
				display: flex;
				flex-direction: row;
				padding: 30rpx 32rpx 48rpx;

				.image {
					width: 140rpx;
					height: 140rpx;
					flex: 0 0 140rpx;
					margin-right: 20rpx;
				}

				.content {
					.title {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-start;

						.text {
							font-size: 32rpx;
							color: #000000;
							font-weight: 600;
						}

						.icon {
							width: 100rpx;
							height: 32rpx;
							flex-grow: 0;
							flex-shrink: 0;
							margin-left: 8rpx;
						}
					}

					.desc {
						margin-top: 14rpx;
						font-size: 26rpx;
						color: #333333;
						line-height: 1.6;
					}
				}
			}
		}

		.company-box {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			padding-bottom: 34rpx;

			.title {
				font-size: 24rpx;
				color: #888888;
				letter-spacing: 0;
				text-align: center;
				font-weight: 400;
			}

			.value {
				font-size: 28rpx;
				color: #333333;
				letter-spacing: 0;
				text-align: center;
				padding-top: 16rpx;
				font-weight: 500;
			}
		}

		.site {
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 80rpx;
			line-height: 80rpx;
			background: #FFFFFF;
			border-top: 2rpx solid #DDDDDD;
			padding: 0rpx 32rpx;

			.icon {
				width: 32rpx;
				height: 32rpx;
				flex-grow: 0;
				flex-shrink: 0;
				margin-right: 10rpx;
			}

			.text {
				font-size: 26rpx;
				color: #333333;
				letter-spacing: 0;
				text-align: left;
				line-height: 32rpx;
				font-weight: 400;
			}
		}

	}
</style>
