<template>
	<view class="container" v-if="shop!=null">
		<scroll-view scroll-y="true" @scroll="handleScoll" style="height: 100vh;width: 100vw;overflow: auto;">
			<view style="position: fixed;z-index: 2;top: 0;left: 0;right: 0;">
				<uni-nav-bar @clickLeft="backEvent" :border="false" fixed="true" statusBar="true"
					:backgroundColor="bgColor" color="#fff" left-icon="back"
					:title="$t('index.shop-name')"></uni-nav-bar>
			</view>
			<view class="header">
				<view class="header-info">
					<view class="cover">
						<image :src="shop.customerVo.logoUrl" mode="aspectFit"></image>
					</view>
					<view class="info">
						<view class="name">
							{{shop.customerVo.customerName}}
						</view>
						<view>
							<view class="sub">
								{{$t('index.address')}}：{{shop.customerVo.registryAddress}}
							</view>

							<view class="sub">
								{{$t('index.yewu')}}：{{shop.customerVo.mainCategory}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 展约率 -->
			<view class="rate-bg">
				<view class="rate-item">
					<view class="label">
						{{$t('index.view-rate')}}
					</view>
					<view class="progress-bg">
						<view class="progress" :style="{width: shop.customerVo.buyerMarginRate +'%'}">
						</view>
					</view>
					<view class="value">
						{{shop.customerVo.buyerMarginRate}}%
					</view>
				</view>
				<view class="rate-item">
					<view class="label">
						{{$t('index.response-rate')}}
					</view>
					<view class="progress-bg">
						<view class="progress" :style="{width: shop.customerVo.supplierMarginRate +'%'}">
						</view>
					</view>
					<view class="value">
						{{shop.customerVo.supplierMarginRate}}%
					</view>
				</view>
				<view class="rate-item">
					<view class="label">
						{{$t('index.back-rate')}}
					</view>
					<view class="progress-bg">
						<view class="progress" style="width: 0%;">
						</view>
					</view>
					<view class="value">
						0%
					</view>
				</view>

				<view class="operate-bg">
					<view @click="collectShop" class="btn"
						style="border: 1px solid #B60001;color: #B60001;height: 68rpx;margin-right: 20rpx;">
						{{shop.followed?$t('index.collect-cancel'):$t('index.collect-shop')}}
					</view>
					<view class="btn" style="background: #B60001;color: #fff;font-weight: 100;">
						{{$t('index.enter-shop')}}
					</view>
				</view>
			</view>

			<view class="factory-info" v-if="shop.factoryInfoVO!=undefined">
				<view class="factory-title">
					{{$t('index.company-introduce')}}
				</view>
				<view class="factory-header">
					<view class="cover">
						<image :src="shop.factoryInfoVO.factoryDirectorFileResponseVo.fullFilePath" mode="aspectFill">
						</image>
					</view>
					<!-- <view class="btn">
						<view>
							{{$t('index.company-appointment')}}
						</view>
					</view> -->
					<view class="desc">
						<view class="item">
							<text class="label">{{$t('index.business-type')}}</text><text
								class="value">{{shop.factoryInfoVO.businessType}}</text>
						</view>
						<view class="item">
							<text class="label">{{$t('index.create-year')}}</text><text
								class="value">{{shop.factoryInfoVO.yearOfEstablishment}}</text>
						</view>
						<view class="item">
							<text class="label">{{$t('index.create-inout-mode')}}</text><text
								class="value">{{shop.factoryInfoVO.mainBusiness}}</text>
						</view>
						<view class="item">
							<text class="label">{{$t('index.factory-support')}}</text><text
								class="value">{{shop.factoryInfoVO.factorySupportContent}}</text>
						</view>
					</view>
					<rich-text :nodes="shop.factoryInfoVO.factoryIntroduction"></rich-text>
				</view>
				<view class="factory-title">
					{{$t('index.trade-capacity')}}
				</view>
				<view class="introduce">
					<rich-text :nodes="shop.factoryInfoVO.tradeCapacity"></rich-text>
				</view>
				<view class="factory-title">
					{{$t('index.product-capacity')}}
				</view>
				<view class="introduce">
					<rich-text :nodes="shop.factoryInfoVO.productionCapacity"></rich-text>
				</view>
				<view class="factory-title">
					{{$t('index.company-show')}}
				</view>
				<view class="introduce">
					<view style="width: 670rpx;" v-for="(item,index) in shop.factoryInfoVO.showFileList" :key="index">
						<image style="width: 100%;" :src="item.fullFilePath" mode="widthFix"></image>
					</view>
				</view>
			</view>

			<view class="shop-list" :style="{paddingBottom: products.length==0?0:'30rpx'}">
				<uni-collapse>
					<uni-collapse-item>
						<template #title>
							<view class="product-class" style="height: 88rpx; flex-wrap: nowrap;">
								<view style="display: flex;" v-for="(item,index) in selects" :key="index">
									<view class="class-item"
										style="max-width: 180rpx;text-overflow: ellipsis;overflow: hidden;white-space: nowrap">
										<text>{{item.categoryName}}</text>
									</view>
									<uni-icons v-if="selects.length-1!=index" type="right"></uni-icons>
									<uni-icons @tap="deleteEvent" v-if="selects.length-1==index && item.categoryCode!=0"
										type="closeempty"></uni-icons>
								</view>
							</view>
						</template>
						<view class="product-class">
							<view v-for="(item,index) in categories" :key="index">
								<view class="class-item" @click="selectCategory(item)">
									<text>{{item.categoryName}}</text>
								</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>

				<view style="padding: 0	30rpx ">
					<ShoppingMall :operate="false" :list="products"></ShoppingMall>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getShopInfo,
		collectShop,
		getProductClass,
		getShopProductList
	} from '@/config/api.js'
	import ShoppingMall from '@/components/shopping-mall/shopping-mall.vue'
	export default {
		components: {
			ShoppingMall
		},
		data() {
			return {
				shop: null,
				level: 1,
				platformType: '',
				categoryCode: '',
				code: '',
				page: 1,
				selects: [{
					categoryCode: "",
					categoryName: "全部",
					level: 1
				}],
				products: [],
				bgColor: 'transparent',
				categories: []
			}
		},
		methods: {
			handleScoll(event) {
				if (event.detail.scrollTop < 110) {
					this.bgColor = 'transparent'
				} else {
					this.bgColor = '#b60001'
				}
			},
			backEvent() {
				uni.navigateBack()
			},
			collectShop() {
				let that = this
				collectShop(this.shop.id, this.shop.followed).then(res => {
					that.shop.followed = !that.shop.followed
				})
			},
			async getData(params) {
				const {
					content
				} = await getShopInfo(params)
				this.shop = content
			},
			async getProductClass() {
				const {
					content
				} = await getProductClass({
					level: this.level,
					categoryCode: this.categoryCode,
					type: this.platformType
				})
				this.categories.splice(0, this.categories.length)
				this.categories = [...content]
			},
			async getProductList() {
				const {
					content
				} = await getShopProductList({
					platformType: this.platformType,
					categoryCode: this.categoryCode,
					page: this.page,
					code: this.code
				})
				this.products = [...content.content]
			},
			selectCategory(item) {
				let last = this.selects[this.selects.length - 1]
				if (last.level == item.level) {
					this.selects.pop()
				}
				this.selects.push(item)
				if (item.level == 1) {
					this.level = 2
				}
				if (item.level == 2) {
					this.level = 3
				}
				if (item.level == 3) {
					return
				}
				this.categoryCode = item.categoryCode
				this.getProductClass()
				this.getProductList()
			},
			deleteEvent() {
				this.selects.pop()
				this.level = this.selects.length + 1
				if (this.selects.length == 0) {
					this.selects.push({
						categoryCode: "",
						categoryName: "全部",
						level: 1
					})
				}
				let last = this.selects[this.selects.length - 1]
				this.categoryCode = last.categoryCode
				this.getProductClass()
				this.getProductList()
			},
			onchange() {}
		},
		onLoad(option) {
			this.platformType = option.platformType
			this.code = option.code
			this.getData({
				id: option.id,
				platformType: option.platformType,
				code: option.code
			})
			this.getProductClass()
			this.getProductList()
		}
	}
</script>

<style scoped lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}


	.header {
		position: relative;
		width: 750rpx;
		height: 420rpx;
		background: linear-gradient(180deg, #FBC3C3 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(153deg, #A3D4F2 0%, #62B5E5 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.header-info {
			position: absolute;
			bottom: 52rpx;
			display: flex;
			flex-direction: row;
			padding: 0 40rpx;

			.cover {
				width: 160rpx;
				height: 160rpx;
				background: white;
				flex-shrink: 0;

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

			.info {
				height: 160rpx;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				flex-grow: 1;

				.name {
					flex: 1;
					font-weight: bold;
					font-size: 34rpx;
					color: #FFFFFF;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.sub {
					margin-top: 16rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 24rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}
		}
	}

	.rate-bg {
		background: white;
		width: 670rpx;
		padding: 0 40rpx;
		padding-top: 18rpx;

		.rate-item {
			display: flex;
			align-items: center;
			height: 74rpx;

			.label {
				line-height: 74rpx;
				color: #222;
				font-size: 28rpx;
			}

			.progress-bg {
				flex-grow: 1;
				background: #F2F2F2;
				height: 24rpx;
				margin: 0 26rpx;
				border-radius: 20rpx;

				.progress {
					height: 24rpx;
					background: linear-gradient(263deg, #E74917 0%, #F39811 100%), #F2F2F2;
					border-radius: 20rpx;
				}
			}

			.value {
				width: 78rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #B60001;
				line-height: 28rpx;
				text-align: right;
			}
		}

		.operate-bg {
			display: flex;
			padding: 0 54rpx 54rpx 54rpx;
			justify-content: space-between;

			.btn {
				margin-top: 18rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				width: 312rpx;
			}
		}
	}

	.factory-info {
		.factory-title {
			padding: 0 40rpx;
			height: 88rpx;
			background: #fff;
			font-size: 34rpx;
			color: #222;
			font-weight: 500;
			line-height: 88rpx;

		}

		.factory-header {
			margin-top: 20rpx;
			padding: 40rpx 40rpx 0 40rpx;
			background: #fff;

			.cover {
				width: 670rpx;
				height: 376rpx;

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

			.btn {
				margin-top: 30rpx;
				border: 1px solid #B60001;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #B60001;
				height: 72rpx;
				line-height: 72rpx;
				font-size: 28rpx;
			}

			.desc {
				padding: 30rpx 0;

				.item {
					height: 50rpx;
					line-height: 50rpx;
					font-size: 28rpx;

					.label {
						display: inline-block;
						color: #999;
						width: 180rpx;

					}

					.value {
						color: #222;
					}
				}
			}
		}

		.introduce {
			background: #fff;
			margin-top: 20rpx;
			padding: 40rpx 40rpx 40rpx 40rpx;
			width: 670rpx;
		}
	}

	.contact {
		background: white;
		width: 690rpx;
		padding: 20rpx 30rpx;

		.desc {
			height: 70rpx;
			line-height: 70rpx;
		}
	}

	.shop-list {
		margin-top: 20rpx;
		background: white;
		width: 100%;

		.product-class {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			width: 100%;
			line-height: 88rpx;

			.class-item {
				height: 88rpx;
				padding: 0 20rpx 0 40rpx;
				line-height: 88rpx;
			}
		}
	}
</style>