<template>
	<view class="whole">
		<view class="title">主体信息</view>
		<up-cell-group>
		  <up-cell title="店铺名称" :value="info.shop_name || info.name" :border="false" />
		  <up-cell title="经营类目" :value="info.comment" :border="false" />
		  <up-cell title="营业执照" value=" " isLink @click="preView([image])" :border="false" />
		  <up-cell v-for="it in licenses" :key="it.id" :title="it.name" value=" " :border="false" isLink @click="preView(it.content)" />
		</up-cell-group>
	</view>
	
</template>

<script>
	import { reactive, toRefs } from 'vue'
	import { get } from '@/api/request.js'
	
	export default {
		setup() {
			const data = reactive({
				id: 0,
				image: '',
				info: {},
				licenses: []
			})
			
			function preView(list) {
				let urls = list || []
				uni.previewImage({
					urls: urls,
					current: 0
				})
			}
			
			function getStoreInfo() {
				get('/api/v1/supplier/qualifications', { goods_id: data.id}).then((res) => {
					data.info = res.data
					data.licenses = res.data.licenses || []
					data.licenses.forEach((item) => {
						item.content = item.content.map((it) => {
							return it + '!license_watermarek'
						})
					})
					data.image = res.data.business_license + '!license_watermarek'
				})
			}
			
			return {
				...toRefs(data),
				preView,
				getStoreInfo
			}
		},
		async onLoad(options) {
			this.id = options.id || 0
			this.getStoreInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.whole{
		background-color: #fff;
		.title{
			font-size: 34rpx;
			font-weight: bold;
			padding: 50rpx 16px 20rpx;
		}
		.title{
			font-size: 32rpx;
			font-weight: bold;
		}
		.desc{
			font-size: 28rpx;
			color: #999;
			margin: 20rpx 0 60rpx;
		}
		.btn{
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			background-color: v-bind('Color');
			color: #fff;
			font-size: 30rpx;
			border-radius: 80rpx;
		}
	}
	::v-deep .van-cell__title{
		width: 200rpx;
		flex: none !important;
	}
</style>
