<template>
	<view class="warpper">
		<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;">
			<view class="card-box">
				<view class="card-header">
					<view class="left-text">基本信息</view>
					<view class="right-text" @tap="gotoTap">跟进记录</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">{{info.name}}</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 u-line-2">
								<text>主营：{{ info.mainBusiness }}</text>
							</view>
						</view>
					</view>
					<view class="company-box">
						<view>
							<view><text class="title">法定代表人</text></view>
							<view class="value">{{ info.legalPersonName }}</view>
						</view>
						<view class="">
							<view><text class="title">注册资本</text></view>
							<view class="value">{{ info.registeredCapital }}万</view>
						</view>
						<view class="">
							<view><text class="title">成立时间</text></view>
							<view class="value">{{ transformDate(info.foundDate) }}</view>
						</view>
					</view>
					<view class="site">
						<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image>
						<text class="text">{{ info.locProvinceName }}{{ info.locCityName }} {{ info.locDetail }}</text>
					</view>
				</view>
			</view>
			<uGap></uGap>
			<view class="card-box">
				<view class="card-header"><view class="left-text">工商信息</view></view>
				<view class="card-content">
					<view class="gs-info">
						<view class="row">
							<view class="info-title">
								<text>
									社会统一
									<br />
									信用代码：
								</text>
							</view>
							<view class="info-value"><text>{{info.uniformSocialCreditCode}}</text></view>
						</view>
						<view class="row">
							<view class="info-title"><text>营业执照：</text></view>
							<view class="look-over" @tap="previewImg(info.businessLicenseImg, [info.businessLicenseImg])"><text>点击查看</text></view>
						</view>
						<view class="row">
							<view class="info-title"><text>所属行业：</text></view>
							<view class="info-value"><text>{{info.belongIndustry}}</text></view>
						</view>
						<view class="row">
							<view class="info-title"><text>登记状态：</text></view>
							<view class="info-value"><text>{{info.registrationStatus}}</text></view>
						</view>
					</view>
				</view>
			</view>
			<uGap></uGap>
			<view class="card-box">
				<view class="card-header"><view class="left-text">厂房信息</view></view>
				<view class="card-content">
					<view class="cf-info">
						<view class="row">
							<view class="left">
								<view class="title"><text>产房面积：</text></view>
								<view class="value"><text>{{info.plantArea}}m²</text></view>
							</view>
							<view class="right">
								<view class="title"><text>年营业额：</text></view>
								<view class="value"><text>{{info.annualTurnover}}万</text></view>
							</view>
						</view>
						<view class="row">
							<view class="left">
								<view class="title"><text>产房照片：</text></view>
								<view class="look-over" @tap="previewImg(info.factoryImgList[0], info.factoryImgList)"><text>点击查看</text></view>
							</view>
							<view class="right">
								<view class="title"><text>租赁合同：</text></view>
								<view class="look-over" @tap="previewImg(info.leaseContract, [info.leaseContract])"><text>点击查看</text></view>
							</view>
						</view>
					</view>
					<view class="site">
						<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image>
						<text class="text">{{info.factoryAddress}}</text>
					</view>
				</view>
			</view>
			<uGap></uGap>
			<view class="card-box">
				<view class="card-header"><view class="left-text">法律诉讼</view></view>
				<view class="card-content" style="margin: 20rpx 0rpx;">
					<view class="no-data">
						暂无法律诉讼
					</view>
					<!-- <view class="fl-info" v-for="(item, index) in 2" :key="index">
						<view class="row">
							<view class="title">
								<view class="left">
									<view class="dot"></view>
									<view><text>买卖合同纠纷案件执行首次执行裁定书</text></view>
								</view>
							</view>
							<view class="other">
								<view class="left-text"><text>案件：</text></view>
								<view><text>金融借款合同纠纷</text></view>
							</view>
							<view class="other">
								<view class="left-text"><text>案号：</text></view>
								<view><text>(2019)鲁0911执1608号</text></view>
							</view>
							<view class="other">
								<view class="left-text"><text>裁判日期：</text></view>
								<view><text>2019/12/09</text></view>
							</view>
						</view>
					</view> -->
				</view>
				<view class="see-more" v-if="false">
					<view class="" @tap="seemoreTap">
						<text>查看更多</text>
						<image class="icon" :src="!seemoreFlag ? '/static/imgs/client-detail/arrow-up-icon.png' : '/static/imgs/client-detail/arrow-down-icon.png'"></image>
					</view>
				</view>
			</view>
			<uGap></uGap>
			<view class="card-box">
				<view class="card-header"><view class="left-text">经营异常</view></view>
				<view class="card-content" style="margin: 20rpx 0rpx;">
					<view class="no-data">
						暂无经营异常
					</view>
					<!-- <view class="fl-info" v-for="(item, index) in 2" :key="index">
						<view class="row">
							<view class="title">
								<view class="left">
									<view class="dot"></view>
									<view><text>编号 44012020013906</text></view>
								</view>
								<view class="valid"><text>有效</text></view>
							</view>
							<view class="other">
								<view class="left-text"><text>抵押人：</text></view>
								<view><text>金融借款合同纠纷</text></view>
							</view>
							<view class="other">
								<view class="left-text"><text>抵押权人：</text></view>
								<view><text>(2019)鲁0911执1608号</text></view>
							</view>
							<view class="other">
								<view class="left-text"><text>债务期限：</text></view>
								<view><text>2020/01/24～2023/01/24</text></view>
							</view>
							<view class="other">
								<view class="left-text"><text>债务数额：</text></view>
								<view><text>243.95万人民币</text></view>
							</view>
						</view>
					</view> -->
				</view>
			</view>
			<uGap></uGap>
			<view class="card-box">
				<view class="card-header"><view class="left-text">征信信息</view></view>
				<view class="card-content" style="margin: 20rpx 0rpx;">
					<view class="no-data">
						暂无征信信息
					</view>
					<!-- <view class="fl-info" v-for="(item, index) in 2" :key="index">
						<view class="row">
							<view class="other">
								<view class="left-text"><text>立案日期：</text></view>
								<view><text>2021/07/21</text></view>
							</view>
							<view class="other">
								<view class="left-text"><text>案号：</text></view>
								<view><text>(2019)鲁0911执1608号</text></view>
							</view>
							<view class="other">
								<view class="left-text"><text>执行标准：</text></view>
								<view><text>24563345元</text></view>
							</view>
							<view class="other">
								<view class="left-text"><text>执行法院：</text></view>
								<view><text>太原市杏花岭区人民法院</text></view>
							</view>
						</view>
					</view> -->
				</view>
			</view>
		</scroll-list>
	</view>
</template>

<script>
import uGap from '@/components/u-gap/u-gap.vue'
import { getBaseInfo } from '@/apis/clientDetailApi'
import { go2 } from '@/utils/hook.js'
export default {
	components: {
		uGap
	},
	props: {
		customerId: {
			type: String,
			default: null
		}
	},
	data() {
		return {
			option: {
				size: 10,
				auto: true,
				emptyText: '暂无数据~',
				background: '#F7F8FA',
				disabled: true
			},
			info: {},
			seemoreFlag: true
		}
	},
	methods: {
		gotoTap() {
			go2('follow-up-records')
			
		},
		getBaseInfo() {
			getBaseInfo({customerId: this.customerId }).then(res => {
				// console.log('基础信息', res)
				this.info = res
			})
		},
		seemoreTap() {
			this.seemoreFlag = !this.seemoreFlag
		},
		transformDate(date) {
			if (date) {
				return date.split('-').join('/')
			}
			return ''
		},
		previewImg(index, list) {
			uni.previewImage({
				urls: list,
				current: index
			});
		},
		downCallback() {},
		upCallback() {}
	}
}
</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: 20rpx 32rpx;

			.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: 34rpx 0rpx;

		.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;
		}
	}
	.see-more {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		line-height: 80rpx;
		background: #ffffff;
		border-top: 2rpx solid #dddddd;
		padding: 0rpx 32rpx;
		font-size: 28rpx;
		color: #007aff;
		letter-spacing: 0;
		text-align: center;
		font-weight: 400;
		.icon {
			width: 24rpx;
			height: 24rpx;
		}
	}
	.gs-info {
		padding: 20rpx 32rpx;
		.row {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 16rpx;
		}
	}
	.cf-info {
		padding: 20rpx 32rpx;

		.row {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16rpx;
		}
		.title {
			flex: 0 0 150rpx;
			font-size: 28rpx;
			color: #888888;
			letter-spacing: 0;
			font-weight: 400;
			margin-right: 8rpx;
		}
		.value {
			font-size: 28rpx;
			color: #333333;
			letter-spacing: 0;
			font-weight: 400;
		}
		.left {
			display: flex;
			flex-direction: row;
			width: 60%;
		}
		.right {
			display: flex;
			flex-direction: row;
			width: 40%;
		}
	}

	.fl-info {
		padding-bottom: 20rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
		.row {
			background: #f7f8fa;
			border-radius: 8px;
			padding: 24rpx;
			.title {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				color: #333333;
				letter-spacing: 0;
				font-weight: 500;
				margin-bottom: 20rpx;
				.left {
					display: flex;
					flex-direction: row;
					align-items: center;
				}
				.dot {
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					background: #adbac9;
					margin-right: 8rpx;
				}
				.valid {
					font-size: 28rpx;
					color: #36cfc9;
					letter-spacing: 0;
					font-weight: 500;
				}
			}
			.other {
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 28rpx;
				color: #888888;
				letter-spacing: 0;
				font-weight: 400;
				margin-bottom: 16rpx;
				.left-text {
					width: 140rpx;
					margin-right: 8rpx;
				}
			}
		}
	}
	.info-title {
		font-size: 28rpx;
		color: #888888;
		letter-spacing: 0;
		font-weight: 400;
		margin-right: 8rpx;
		width: 140rpx;
	}
	.info-value {
		font-size: 28rpx;
		color: #333333;
		letter-spacing: 0;
		font-weight: 400;
	}
	.look-over {
		font-size: 28rpx;
		color: #007aff;
		letter-spacing: 0;
		font-weight: 400;
	}
	.no-data {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 160rpx;
		font-size: 28rpx;
		color: #888888;
		letter-spacing: 0;
		font-weight: 400;
	}
}
</style>
