<template>
	<view class="wrap">
		<view class="banner-wrap bg-wh">
			<view class="pic-wrap">
				<image class="pic" :src="form.mall.coverDrawing" mode="widthFix"></image>
				<view class="pro-title">{{ form.mall.productName }}</view>
			</view>
		</view>
		
		<view class="detail">
			<ul class="tabs">
				<li :class="{active: curTab === 0}" @click="tabChange(0)">主页</li>
				<li :class="{active: curTab === 1, disabled: !form.interfaceDiagram}" @click="tabChange(1)">商品</li>
			</ul>
		</view>
		
		<view v-if="!curTab" class="detail">
			<view class="title">公司简介</view>
		</view>
		<view v-else class="list">
			<view class="item">
				<image class="pic" src="@/static/image/info-bg.jpg"></image>
				<view class="texts">
					<view class="name">测试标题</view>
					<view class="price">￥12.8</view>
				</view>
			</view>
			<view class="item">
				<image class="pic" src="@/static/image/info-bg.jpg"></image>
				<view class="texts">
					<view class="name">测试标题</view>
					<view class="price">￥12.8</view>
				</view>
			</view>
			<view class="item">
				<image class="pic" src="@/static/image/info-bg.jpg"></image>
				<view class="texts">
					<view class="name">测试标题</view>
					<view class="price">￥12.8</view>
				</view>
			</view>
			<view class="item">
				<image class="pic" src="@/static/image/info-bg.jpg"></image>
				<view class="texts">
					<view class="name">测试标题</view>
					<view class="price">￥12.8</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { detailsOfGoods, addToShoppingCart, shoppingCartList, productCategoryList } from '@/apis/modules/product.js'
	export default {
		data() {
			return {
				id: '',
				curTab: 0,
				tabs: [
					{
						name: '详情介绍',
						id: 0
					},
					{
						name: '界面图',
						id: 1
					},
					{
						name: '参数',
						id: 2
					}
				],
				form: {
					classificationIds: [],
					interfaceDiagram: [],
					mall: {
					  coverDrawing: ''
					},
					goodsRes: {},
					mallAnnex: []
				},
				shopCartTotal: 0,
				types: [],
				dotsStyles: {
					backgroundColor: 'rgba(83, 200, 249,0.3)',
					border: '1px rgba(83, 200, 249,0.3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
					selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
				},
				mpStyle: {
					p: 'font-size: 25rpx !important;font-family: Microsoft Yahei !important;font-weight: 400 !important;color: #333 !important;',
					span: 'font-size: 25rpx !important;font-family: Microsoft Yahei !important;font-weight: 400 !important;color: #333 !important;'
				}
			}
		},
		onShow() {
			const pages = getCurrentPages()
			const { options } = pages[pages.length - 1]
			this.id = options.id
			this.getInfo()
			this.getShopCart()
			this.getTypes()
		},
		methods: {
			// 获取详情
			getInfo() {
				uni.showLoading({
					title: '加载中'
				})
				detailsOfGoods(this.id).then(res => {
					const e = res.orderDetails
					e.mall.productIntroduction = this.$util.removeTag(e.mall.productIntroduction)
					// e.mall.detailedIntroduction = this.$util.removeTag(e.mall.detailedIntroduction)
					this.form = e
					const pics = this.form.mall.interfaceDiagram
					if (pics) {
						this.form.interfaceDiagram = pics.split(',')
						// this.tabs.push({
						// 	name: '界面图',
						// 	id: 1
						// })
					}
					// this.form.mallAnnex && this.form.mallAnnex.length && this.tabs.push({
					// 	name: '参数',
					// 	id: 2
					// })
					uni.hideLoading()
				}).catch(e => {
					uni.hideLoading()
				})
			},
			// 获取购物车数量
			getShopCart() {
				shoppingCartList({
					pageNum: 1,
					pageSize: 1000,
				}).then(({ data }) => {
					this.shopCartTotal = data.total
				}).catch(e => {})
			},
			// 产品分类
			getTypes() {
				productCategoryList().then(res => {
					this.types = res.classificationList
				}).catch(e => {})
			},
			// tab切换
			tabChange(id) {
				this.curTab = id
			},
			// 下载全部
			downloadAll() {
				const fileName = []
				const urls = []
				this.form.mallAnnex.forEach(e => {
					fileName.push(e.fileName)
					urls.push(e.filePath)
				})
				uni.setStorageSync('files', {
					copyWriting: this.form.mall.productName,
					fileName,
					urls
				})
				this.$util.to(`/team/send/send`)
			},
			// 下载附件
			download(item) {
				uni.setStorageSync('files', {
					copyWriting: this.form.mall.productName,
					fileName: [item.fileName],
					urls: [item.filePath]
				})
				this.$util.to(`/team/send/send`)
			},
			// 加入购物车
			addShop() {
				uni.showLoading({
					title: '加载中'
				})
				addToShoppingCart({
					mallId: this.id
				}).then(res => {
					this.$util.sucMsg('加购成功')
					uni.hideLoading()
					this.getShopCart()
				}).catch(e => {
					uni.hideLoading()
				})
			},
			// 下单
			order() {
				const { mall } = this.form
				const classificationId = this.form.classificationIds[0]
				const authority = this.$util.getOrderType(classificationId)
				// 把该产品添加至缓存
				uni.setStorageSync('courses', [{
					dataOrCourseId: mall.associatedProduct, // id
					mallId: mall.mallId,
					productName: mall.productName, // 名称
					periodOfUse: '', // 使用期限
					startTime: this.$util.formatDate(new Date(), 'yyyy-MM-dd'), // 开始
					endTime: '', // 终止
					remainingPeriod: '', // 剩余期限
					marketValue: '', // 市场价
					marketPrice: mall.marketUnitPrice, // 市场单价
					finalPrice: 0, // 成交价
					finalValue: 0, // 成交单价（数据产品特有）
					discountRate: '0%', // 折扣率
					accountNum: 1, // 账号数
					totalAmount: '', // 总价
					isEnable: 0, // 启用否：1启用，0禁用
					ship: 0, // 发货否（0未发货，1已发货，默认不发货）
					authority, // 区分权限
					options: 2,
					miniProgramPictureAddress: mall.appletIcon || '', // 图标
					settlementPrice: 0, // 结算价
					settlementPriceUnit: 0, // 结算单价
					serviceFee: 0 // 平台服务费（前端计算后展示，不入库）
				}])
				this.$util.to(`../orderDetail/orderDetail?shopCart=1`)
			}
		}
	}
</script>

<style scoped lang="scss">
.wrap {
	padding-bottom: 140rpx;
}
.banner-wrap {
	width: 100%;
	border-radius: 0px 0px 20px 20px;
	.pic-wrap {
		padding: 20rpx 32rpx;
		border-bottom: 1px solid #E2E2E2;
	}
	.pic {
		width: 100%;
	}
	.pro-title {
		margin-top: 22rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
	}
	.fields {
		padding: 26rpx 32rpx;
	}
	.field {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #333;
		&:first-child {
			margin-bottom: 22rpx;
		}
		.icon {
			width: 36rpx;
			height: 36rpx;
			margin-right: 12rpx ;
		}
	}
}
.tabs {
	display: flex;
	justify-content: center;
	margin-bottom: 32rpx;
	li {
		width: 33.33%;
		text-align: center;
		font-size: 28rpx;
		color: #333;
		white-space: nowrap;
	}
	.active {
		color: #007EFF;
		&:after {
			content: '';
			display: block;
			width: 40rpx;
			height: 8rpx;
			margin: 18rpx auto 0;
			border-radius: 4px;
			background-color: #007EFF;
		}
	}
}
.detail {
	padding: 34rpx 32rpx;
	margin: 16rpx 0;
	border-radius: 20px;
	background-color: #fff;
}
.list {
	display: flex;
	flex-wrap: wrap;
	padding: 0 10rpx;
	.item {
		width: calc((100% - 40rpx) / 2);
		margin: 20rpx 10rpx;
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;
	}
	.pic {
		width: 100%;
		height: 200rpx;
	}
	.texts {
		padding: 20rpx;
	}
	.name {
		margin-bottom: 10rpx;
		font-size: 30rpx;
		font-weight: 600;
	}
	.price {
		font-size: 26rpx;
		color: #ff0047;
	}
}
</style>
