<template>
	<div class="information">
		<div class="clearfix">
			<div class="field-box">
				<div class="left-field">机构名称：</div>
				<div class="right-field">{{baseInfo.name}}</div>
			</div>
			<div class="field-box">
				<div class="left-field">机构负责人：</div>
				<div class="right-field">{{baseInfo.contacts}}</div>
			</div>
			<!-- 			<div class="field-box">
				<div class="left-field">供应商id：</div>
				<div class="right-field">{{baseInfo.id}}</div>
			</div> -->
			<!-- <div class="field-box">
				<div class="left-field">分销商id：</div>
				<div class="right-field">{{baseInfo.id}}</div>
			</div> -->
			<div class="field-box">
				<div class="left-field">联系电话：</div>
				<div class="right-field">{{baseInfo.phonenum}}</div>
			</div>
			<div class="field-box">
				<div class="left-field">手机号码：</div>
				<div class="right-field">{{baseInfo.telephone}}</div>
			</div>
			<div class="field-box">
				<div class="left-field">电子邮箱：</div>
				<div class="right-field">{{baseInfo.email}}</div>
			</div>
<!-- 			<div class="field-box">
				<div class="left-field">类型(字典)：</div>
				<div class="right-field">{{baseInfo.type}}</div>
			</div> -->
			<div class="field-box">
				<div class="left-field">状态：</div>
				<div class="right-field" style="padding: 0 10px 10px;">
					<el-tag :type="baseInfo.status===0?'primary':'danger'"
						disable-transitions>{{baseInfo.status===0?'正常':'禁用'}}</el-tag>
				</div>
			</div>
			<div class="field-box">
				<div class="left-field">邮编：</div>
				<div class="right-field">{{baseInfo.postcode}}</div>
			</div>
			<div class="field-box">
				<div class="left-field">联系地址：</div>
				<div class="right-field">{{baseInfo.address}}</div>
			</div>
			<div class="field-box">
				<div class="left-field">纳税人识别号：</div>
				<div class="right-field">{{baseInfo.taxnum}}</div>
			</div>
		</div>
		<div class="field-box" style="width: 100%;">
			<div class="left-field">备注：</div>
			<div class="right-field">{{baseInfo.remark}}</div>
		</div>
	</div>
</template>

<script lang="ts">
	import { Component, Vue } from "vue-property-decorator";
	@Component
	export default class Information extends Vue {
		baseInfo : any = {}
		created() {
			// 生产厂商
			// this.getRequest('/maindata/maindataMaterialManufacturer/page');
			// 供应商
			this.getRequest('/maindata/maindataMaterialSupplier/page');
			// 分销商
			// this.getRequest('/maindata/maindataMaterialDistributor/page');
		}
		getRequest(url : any) {
			(this as any).$request({
				url: url,
				method: 'get'
			}).then((res : any) => {
				// console.log(res);
				if (res.code === 200) {
					this.baseInfo = res.data.records[0];
					console.log(this.baseInfo);
				}
			}).catch(() => {});
		}
	}
</script>

<style lang="scss" scoped>
	.information {
		width: 1200px;
		min-width: 1200px;
		margin: 100px auto 0;
	}

	.field-box {
		width: 33.3%;
		float: left;
		margin-bottom: 60px;
	}

	.left-field {
		float: left;
		width: 120px;
		text-align: right;
		line-height: 43px;
		color: #333;
		// word-wrap: break-word; // 换行
	}

	.right-field {
		float: left;
		width: calc(100% - 150px);
		color: #333;
		height: 42px;
		line-height: 42px;
		border-bottom: 1px solid #ddd;
	}
</style>