<template>
	<div class="userDetail">
		<div class="content-head">
			<dataBreadcrumb :breads="breads"></dataBreadcrumb>
			<h3>查看</h3>
			<div>查看基本信息、企业资质文件</div>
		</div>
		<div class="detail-list">
			<div>
				<h5>基本信息</h5>
				<ul class="flex">
					<li>
						<div>单位名称</div>
						<div>{{detail.companyName}}</div>
					</li>
					<li>
						<div>注册角色</div>
						<div>11</div>
					</li>
					<li>
						<div>法人姓名</div>
						<div>{{detail.legalPersonName}}</div>
					</li>
					<li>
						<div>法人电话</div>
						<div>11</div>
					</li>
					<li>
						<div>统一社会信用代码</div>
						<div>{{detail.socialCode}}</div>
					</li>
					<li>
						<div>行政区域 </div>
						<div>{{detail.companyName}}</div>
					</li>
					<li>
						<div>单位性质</div>
						<div>{{detail.companyNature}}</div>
					</li>
					<li>
						<div>单位所在地</div>
						<div>{{detail.location}}</div>
					</li>
                    <li>
                    	<div>行业类型</div>
                    	<div>222</div>
                    </li>
					<li>
						<div>开户银行名称</div>
						<div>222</div>
					</li>
					<li>
						<div>结算账户</div>
						<div>222</div>
					</li>
					<li>
						<div>结算账户名</div>
						<div>222</div>
					</li>
					<li>
						<div>注册资本(万元)</div>
						<div>{{detail.registeredCapital}}</div>
					</li>
					<li>
						<div>联系地址</div>
						<div>{{detail.contactAddress}}</div>
					</li>
					<li>
						<div>管理员姓名</div>
						<div>{{detail.companyName}}</div>
					</li>
					<li>
						<div> 手机号 </div>
						<div>{{detail.legalPersonPhone}}</div>
					</li>
					<li>
						<div> 身份证 </div>
						<div>222</div>
					</li>
					<li>
						<div>电子邮箱 </div>
						<div>{{detail.companyName}}</div>
					</li>
				</ul>
				<div class="detail-item">
					<div>经营范围</div>
					<div>一般项目：技术服务，技术开发</div>
				</div>
				<div class="detail-item">
					<div>法人身份证正反面</div>
					<el-image v-for="(item,index) in imglist" :src="item.src" :key="index" style="margin-right:20px"></el-image>
				</div>
				<div class="detail-item">
					<div>三证合一扫描件</div>
					<el-image v-for="(item,index) in imglist" :src="item.src" :key="index" style="margin-right:20px"></el-image>
				</div>
				<div class="detail-item">
					<div>其他资料</div>
					<div class="flex-between pdf">
						<div>pdf文件</div>
						<div>预览</div>
						<div>下载</div>
					</div>
				</div>
			</div>
		</div>
		<div class="operation">
			<button @click="edit">编辑</button>
		</div>
	</div>
</template>

<script>
	import {
		companyDetail
	} from '@api/common/list'
	import dataBreadcrumb from '@components/dataBreadcrumb.vue'
	export default {
		components: {
			dataBreadcrumb
		},
		data() {
			return {
				detail: "",
				breads: ['查看基本信息', '企业资质文件'],
				informationList: [{
					title: '单位名称',
					message: '腾讯'
				}, {
					title: '注册角色',
					message: '采购商'
				}, {
					title: '法人姓名',
					message: '谢墩满'
				}, {
					title: '法人电话',
					message: '1784574567'
				}, {
					title: '统一社会信用代码',
					message: '91330104MA27YU1X0K'
				}, {
					title: '行政区域',
					message: '浙江省 杭州市 滨江区'
				}, {
					title: '单位性质',
					message: '有限责任公司'
				}, {
					title: '单位所在地',
					message: '浙江 温州'
				}, {
					title: '行业类型',
					message: '娱乐业'
				}, {
					title: '开户银行名称',
					message: '农行'
				}, {
					title: '结算账号',
					message: '34567567856789'
				}, {
					title: '结算账户名',
					message: '谢天'
				}, {
					title: '注册资本(万元)',
					message: '100'
				}, {
					title: '联系地址',
					message: '浙江温州'
				}, {
					title: '管理员姓名',
					message: '谢'
				}, {
					title: '手机号',
					message: '18957015590'
				}, {
					title: '身份证',
					message: '456789056789078'
				}, {
					title: '电子邮箱',
					message: '34567890@qq.com'
				}],
				imglist: [{
					src: require('@static/images/img.png')
				}, {
					src: require('@static/images/img.png')
				}]
			}
		},
		methods: {
			edit() {
				this.$router.push('/purchaser/organization/informationEdit')
			},
			async getcompanyDetail() {
				try {
					let companyId = localStorage.getItem("companyId")
					const {
						data,
						code
					} = await companyDetail(companyId)
					if (code === 200) {
						this.detail = data
					}
				} catch (e) {
					console.log(e)
				}
			}
		},
		created() {
			this.getcompanyDetail()
		}
	}
</script>

<style scoped>
	.detail-list>div>ul>li {
		margin-right: 150px;
		margin-bottom: 50px;
		width: 180px
	}

	.detail-list>div>ul {
		flex-wrap: wrap;
		margin-left: 30px;
		margin-top: 20px;
	}

	.detail-head {
		margin-left: 30px;
		padding-top: 10px;
	}

	.detail-head>h3 {
		font-weight: bold;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.detail-list {
		box-sizing: border-box;
		padding-top: 20px;
		background-color: #F0F2F5;
		margin-top: 10px;
	}

	.detail-list>div {
		background-color: #FFFF;
		padding-bottom: 20px;
	}

	.detail-list h5 {
		font-weight: bold;
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid #F0F2F5;
		box-sizing: border-box;
		padding-left: 30px;
	}

	.detail-item {
		margin-left: 30px;
		margin-bottom: 30px;
	}

	.detail-item>div:first-child {
		margin-bottom: 10px;
	}

	.pdf {
		width: 170px
	}

	.pdf>div:nth-child(2),
	.pdf>div:last-child {
		width: 50px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		border-radius: 10px;
		border: 1px solid #000
	}

	.operation {
		margin-bottom: 10px;
		display: flex;
		justify-content: flex-end;
	}

	.operation>button {
		width: 50px;
		height: 30px;
		border-radius: 2px;
		background: #fff;
		border: 1px solid #999;
	}

	.flex-button>button {
		margin-left: 10px;
	}

	.flex-button>button:last-child {
		background: #28e;
		color: #fff
	}
</style>
