<template>
	<view class="basicInfo">
		<view class="table">
			<view class="tr" v-for="(name,key) in groupNames" :key="key">
				<view class="td">{{ name }}</view>
				<view class="td" v-if="key == 'enterpriseQualificationUrl'">
					<image class="logo" :src="infoObj[key]" mode="widthFix"></image>
				</view>
				<view class="td" v-else-if="key == 'logo'">
					<image class="logo" :src="infoObj[key]" mode="aspectFill"></image>
				</view>
				<view class="td" v-else>
					{{ infoObj[key] }}
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupNames: {
					enterpriseName: "企业名称",
					companyTypeName: "企业类型",
					bankname: "开户行",
					registerPersonPhoneTel: "注册人申请电话",
					legalPersonTel: "法人电话",
					businessLicenseEndDate: "营业执照截止日期",
					enterpriseEmail: "企业邮箱",
					qualificationNumber: "劳资证书号",
					enterpriseProperty: "单位性质",
					projectDirectorName: "项目负责人",
					enterpriseQualificationUrl: "资质图片",
					enterpriseLegalPerson: "法定代表人",
					socialCode: "统一社会信用代码",
					registeredCapital: "注册资金(万元)",
					bankcardnumber: "银行账号",
					businessNumber: "营业执照注册号",
					enterpriseAddress: "企业地址",
					enterpriseSafeAllow: "安全生产许可证",
					logo: "logo",
					projectDirectorPhone: "项目负责人电话"
				},
				infoObj: {}
			};
		},
		onLoad() {
			this.getInfo()
		},
		methods: {
			getInfo() {
				// 获取基本信息
				this.sendRequest({
					url: "xmgl/xzSupplier/getXzSupplierByUserId",
					data: {
						userId: uni.getStorageSync("userInfoObj").userId
					},
					method: "POST",
					success: (res) => {
						console.log(res);
						let data = res.result;
						data.enterpriseProperty = data.enterpriseProperty == 1 ?
							"国有企业" :
							data.enterpriseProperty == 2 ?
							"三资企业" :
							data.enterpriseProperty == 3 ?
							"集体企业" :
							data.enterpriseProperty == 4 ?
							"私营企业" :
							""
						this.infoObj = data;
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F4F5FD;
	}
</style>
<style lang="scss" scoped>
	$border-color: #eee;
	$border-width: 2rpx;

	.basicInfo {
		padding: 30rpx 50rpx;

		.table {
			width: 100%;

			.tr {
				display: flex;
				position: relative;

				&::after {
					content: "";
					position: absolute;
					left: 0;
					top: 0;
					width: $border-width;
					height: 100%;
					background-color: $border-color;
				}

				&::before {
					content: "";
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					height: $border-width;
					background-color: $border-color;
				}

				&:nth-child(2n) {
					background-color: #FAFAFA;
				}

				&:nth-child(2n-1) {
					background-color: #FFFFFF;
				}

				.td {
					display: flex;
					width: 50%;
					padding: 25rpx 20rpx;
					font-size: 30rpx;
					position: relative;
					white-space: pre-wrap;
					word-break: break-word;

					.img {
						width: 200rpx;
						height: auto;
					}

					.logo {
						width: 100rpx;
						height: 100rpx;
					}

					&::after {
						content: "";
						position: absolute;
						right: 0;
						top: 0;
						width: $border-width;
						height: 100%;
						background-color: $border-color;
					}
				}
			}
		}
	}
</style>
