<template>
	<view class="merchant-bg">
		<view class="cover">
			<image :src="item.customerVo.logoUrl" mode="aspectFit"></image>
		</view>
		<view class="info" v-if="current==0">
			<view class="name">
				{{item.customerVo.customerName}}
			</view>
			<view class="desc">
				<uni-icons type="location" color="#666"></uni-icons>
				{{item.customerVo.registryAddress}}
			</view>
			<view class="desc">
				商品数量：{{item.productNum}}
			</view>
			<view class="desc">
				成交数量：{{item.tradingNum}}
			</view>
		</view>

		<view class="info" v-if="current==1">
			<view class="name">
				{{item.customerVo.customerName}}
			</view>
			<view class="desc">
				主营规格：
				{{item.customerVo.mainCategory}}
			</view>
			<view class="desc">
				简介：{{item.customerVo.introduce}}
			</view>
		</view>
		<view class="right">
			<view class="btn" @tap="collect">
				{{item.followed?$t('index.collect-cancel'):$t('index.collect')}}
			</view>
			<view class="btn enter" style="margin-top: 20rpx;" @tap="enterShop">
				{{$t('index.enter-shop')}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		collectShop
	} from '@/config/api.js'
	export default {
		name: 'ShopCell',
		props: ['item', 'current'],
		data() {
			return {}
		},
		methods: {
			enterShop() {
				let code = (this.item.platformType == 'supplier' || this.item.platformType == 'buyer,seller') ? this.item
					.supplierCode : this.item.sellerCode
				uni.navigateTo({
					url: `/pages/shop/shop?id=${this.item.id}&platformType=${this.item.platformType}&code=${code}`
				})
			},
			collect() {
				collectShop(this.item.id, this.item.followed).then((res) => {
					this.item.followed = !this.item.followed
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.merchant-bg {
		display: flex;
		padding: 30rpx 0 30rpx 30rpx;
		background: white;

		.cover {
			width: 180rpx;
			height: 180rpx;
			overflow: hidden;
			flex-shrink: 0;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.info {
			display: flex;
			flex-grow: 1;
			flex-direction: column;
			justify-content: center;
			padding-left: 20rpx;
			overflow: hidden;
			white-space: nowrap;

			.name {
				font-weight: 500;
				font-size: 32rpx;
			}

			.desc {
				color: #666;
			}
		}

		.right {
			display: flex;
			flex-shrink: 0;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 0 30rpx;

			.btn {
				padding: 0 30rpx;
				height: 70rpx;
				line-height: 70rpx;
				border: 1rpx solid #D5E2F3;
				border-radius: 10rpx;
				color: #666;
			}

			.enter {
				background: #b60001;
				color: white;
			}
		}
	}
</style>