<template>
	<view class="whole">
		<view class="supplyBox">
			<image :src="info.logo" mode="aspectFill"></image>
			<view class="text">
				<view class="tit">{{info.name}}</view>
				<view class="num" v-if="info.sub_num"><text>{{info.sub_num}}万</text>人关注</view>
			</view>
		</view>
		<image :src="image" mode="widthFix" class="image"></image>
	</view>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { get } from '@/api/request.js'
	
	export default {
		setup() {
			const data = reactive({
				info: {},
				image: ''
			})
			const getInfo = (id) => {
				get('/api/v1/shop/service/provider/' + id).then((res) => {
					data.info = res.data
					data.image = res.data.supplier && res.data.supplier.business_license + '!license_watermarek'
				})
			}
			
			return {
				...toRefs(data),
				getInfo
			}
		},
		onLoad(options) {
			this.getInfo(options.id)
		}
	}
</script>

<style lang="scss" scoped>
	.whole{
		width: 100%;
		height: 100vh;
		overflow: auto;
		padding-top: 20rpx;
		.supplyBox{
			margin-bottom: 20rpx;
			border-radius: 8rpx;
			padding: 32rpx 24rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			image{
				width: 46px;
				height: 46px;
				margin-right: 24rpx;
				border-radius: 6rpx;
			}
			.text{
				display: flex;
				flex-direction: column;
				color: #333;
				font-size: 30rpx;
				width: calc(100% - 250rpx);
				.num{
					font-size: 26rpx;
					margin-top: 6rpx;
				}
				text{
					font-weight: bold;
				}
			}
		}
	}
	.image{
		width: 100%;
	}
	
</style>