<template>
	<view class="safe-area-inset-bottom">
		<view class="card">
			<view class="item" >
				<text  class="left">商户名</text>
				<text class="right">{{detail.name}}</text>
			</view>
			<view class="item">
				<text  class="left">业务处理人</text>
				<text class="right">{{detail.personName}}</text>
			</view>
			<view class="item">
				<text  class="left">门店地区</text>
				<text class="right">{{detail.province}} - {{detail.city}} - {{detail.area}}</text>
			</view>
			<view class="item">
				<text class="left" style="width: 40%;">具体地址</text>
				<text class="right">{{detail.address || '暂无'}}</text>
			</view>
			<view class="item">
				<text class="left">所属商场</text>
				<text class="right">{{detail.mallName || '暂无'}} </text>
			</view>
			<view class="item">
				<text class="left">商场区域</text>
				<text class="right">{{detail.mallAreaName || '暂无'}}</text>
			</view>
			<view class="item">
				<text class="left">店铺类型</text>
				<view class="right">
					<view class="cu-tag tag-bg round sm" v-for="(item,index) in tags" :key="index">
						{{item}}
					</view>
				</view>
			</view>
			<view class="item" style="justify-content: flex-start;flex-direction: column;">
				<text class="left">店铺实况</text>
				<view class="flex justify-start padding-top-20 flex-wrap">
					<image @click="$util.preview(detail.businessLicense)" style="width: 30%;height: 120rpx;margin: 10rpx;" :src="detail.businessLicense" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			shopId: String
		},
		
		data() {
			return {
				detail:{},
				tags:[],
			}
		},
		created() {
			this.fetchDetail()
		},
		methods: {
			fetchDetail(){
				this.$api.shop.detail({id:this.shopId}).then(res=>{
					this.detail=res.data
					this.tags=this.detail.labelNames.split(',')
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tag-bg{
		background-color: #FF9447;
		color: #FFFFFF;
	}
	.card{
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		
		.title{
			font-size: 32rpx;
			font-weight: 800;
			padding-bottom: 10rpx;
		}
		
		.item{
			padding: 30rpx 0;
			display: flex;
			justify-content: space-between;
			
			.left{
				color: #999999;
			}
			
			.right{
				color: #252525;
			}
		}
	}
</style>
