<template>
	<view class="safe-area-inset-bottom">
		<view class="card">
			<text class="title">商户信息</text>
			<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.location}}</text>
			</view>
			<view class="item">
				<text class="left">具体地址</text>
				<text class="right">{{detail.address || '暂无'}}</text>
			</view>
			<view class="item">
				<map @tap="goMap" style="width: 100%; height: 200px;" :latitude="detail.latitude"
					:longitude="detail.longitude" :markers="covers">
				</map>
			</view>
			<view class="item">
				<text class="left">公司负责人</text>
				<text class="right">{{detail.personName}}</text>
			</view>
			<view class="item">
				<text class="left" style="width: 200rpx;">公司总类</text>
				<view class="right">
					<u-tag color="#FF9447" style="margin-left: 10rpx;" :key="index1" v-for="(item1,index1) in tags"
						:text="item1" size="mini" type="warning" mode="plain" />
				</view>
			</view>
			<view class="item" style="justify-content: flex-start;flex-direction: column;">
				<text class="left">营业执照</text>
				<view class="center padding-top-20">
					<image @click="$util.preview(audit.businessLicense)" style="width: 70%;height: 250rpx;"
						:src="audit.businessLicense" mode="aspectFill"></image>
				</view>
			</view>
			<view class="item" style="justify-content: flex-start;flex-direction: column;">
				<text class="left">店铺实况</text>
				<view class="flex margin-top-40" style="width: 100%;">
					<image v-for="(item,index) in imgList" :key="index" :src="item" @click="$util.preview(item)" style="width: 19%;height: 130rpx;margin-right: 10rpx;" 
						mode="aspectFill"></image>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			shopId: String
		},

		data() {
			return {
				detail: {},
				audit: {},
				tags: [],
				imgList: [],
				covers: [{
					width: '30',
					height: '30',
					latitude: 0,
					longitude: 0,
					iconPath: '/static/icon/map.png'
				}]
			}
		},
		created() {
			this.fetchDetail()
			this.fetchAudit()
		},
		methods: {
			fetchDetail() {
				this.$api.shop.detail({
					id: this.shopId
				}).then(res => {
					this.detail = res.data
					this.covers[0].latitude = this.detail.latitude
					this.covers[0].longitude = this.detail.longitude
					this.tags = this.detail.labelKey.split(",")
					this.imgList = this.detail.shopPic.split(",")
				})
			},
			fetchAudit() {
				this.$api.audit.detail({
					entityId: this.shopId
				}).then(res => {
					this.audit = res.data
				})
			},
			goMap() {
				let latitude=parseInt(this.detail.latitude)
				let longitude=parseInt(this.detail.longitude)
				let name=this.detail.name
				let address=this.detail.address
				uni.openLocation({
					latitude, //纬度
					longitude, //经度
					name,
					address,
					fail: (err) => {
						console.log(err);
					}
				});
			}
		}
	}
</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>
