<template>
	<view class="company-page">
		<view class="top-img">
			<image :src="banner" style="width: 100%;height: 100%;"/>
		</view>
		<view class="detail">
			<view class="name">
				{{detail.name}}
			</view>
			
			<view class="comment">
				<view class="logo">
					<image :src="detail.logo?detail.logo:logo" style="width: 100%;height: 100%;"/>
				</view>
				<view class="content">
					<mp-html :content="detail.comment" />
				</view>
			</view>
			
			<view class="address">
				<span style="display: inline-block;">
					<TnIcon name="map-fill" color="#24ba97" size="42"/>
				</span>
				<span>地址：{{detail.address}}</span>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, reactive, ref } from 'vue';
	import request from '@/utils/request';
	import { onLoad } from "@dcloudio/uni-app";
	
	const banner = ref('http://static.cqtlcm.com/index_top.png')
	
	const detail = reactive<{
		address?:string,
		comment?:string,
		logo?:string,
		name?:string
	}>({})
	
	const logo = ref('/static/noimage.png')
	
	const companyId = ref()
	
	const getCompanyDetail = (id:number) =>{
		request({
			url:'/employ/company/' + id,
			method:'GET'
		}).then((res)=>{
			Object.assign(detail,res.data.data)
			console.log(res.data.data)
		})
	}		
	
	onMounted(()=>{
		getCompanyDetail(companyId.value)
	})

	onLoad((options)=>{
		companyId.value = options.companyId
	})
	
</script>

<style lang="scss" scoped>
	.company-page{
		.top-img{
			height: 420rpx;
			width: 100%;
		}
		.detail{
			padding: 0 40rpx;
			.name{
				text-align: center;
				font-weight: bold;
				font-size: 36rpx;
				padding:20rpx 0
			}
			.comment{
				padding: 40rpx 0;
				.logo{
					width: 180px;
					height: 180rpx;
					margin: auto;
				}
				.content{
					margin-top: 20rpx;
					color: #444;
				}
			}
			.address{
				color: #444;
				margin-top: 40rpx;
			}
		}
	}
</style>