<template>
	<view class="buy-container">
		<swiper indicator-dots style="height: 120rpx;" autoplay indicator-active-color="#fff">
			<swiper-item>
				<image src="/static/images/banner_1.png" style="width: 100vw;height: 120rpx;"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/images/banner_2.png" style="width: 100vw;height: 120rpx;"></image>
			</swiper-item>
		</swiper>
		<!-- 全托管 -->
		<view class="buy-all-container">
			<view class="buy-all-box">
				<view class="pd-20">
					<view class="buy-all-title">
						<view class="buy-all-txt">
							<text class="txt">全托管</text>
							<text class="money">¥{{allPrice/100}}-{{(allPrice+urgent)/100}}</text>
						</view>
						<view class="buy-all-btn" @click="doBuy" data-type="ALL">购买</view>
					</view>
					<view class="buy-desc-box mt-10">
						<view class="buy-desc-txt">从下单到取证,仅需提供基本信息,我们为您提供一站式管家服务.</view>
						<view class="mt-10" style="font-size: 12px;">提供的服务</view>
						<view class="buy-desc-item mt-10">
							<view class="buy-desc-row">
								<image src="../../../static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
								<text class="txt">包可运行软件开发与搭建</text>
							</view>
							<view class="buy-desc-row">
								<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
								<text class="txt">包鉴别材料撰写</text>
							</view>
						</view>
						<view class="buy-desc-item mt-10">
							<view class="buy-desc-row">
								<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
								<text class="txt">包代办,包下证,包开发票提</text>
							</view>
							<view class="buy-desc-row">
								<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
								<text class="txt">供可运行软件安装包</text>
							</view>
						</view>
						<view class="buy-desc-item mt-10">
							<view class="buy-desc-row">
								<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
								<text class="txt">提供可运行软件云服务900天</text>
							</view>
							<view class="buy-desc-row">
								<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
								<text class="txt">提供可运行软件演示视频</text>
							</view>
						</view>
						<view class="buy-desc-item mt-10">
							<view class="buy-desc-row">
								<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
								<text class="txt">客服一对一服务</text>
							</view>
						</view>
						<view class="mt-10">
							<text style="font-size:12px;">使用流程</text>
							<view class="buy-desc-column mt-10 list">
								<view class="buy-desc-row-no-margin list-item">
									<text class="txt">填写系统名称</text>
								</view>
								<view class="buy-desc-row-no-margin list-item">
									<text class="txt">填写基本信息</text>
								</view>
								<view class="buy-desc-row-no-margin list-item">
									<text class="txt">接收证书</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 写材料 -->
		<view class="buy-all-box">
			<view class="pd-20">
				<view class="buy-all-title">
					<view class="buy-all-txt">
						<text class="txt">写材料</text>
						<text class="money">¥{{materialPrice/100}}</text>
					</view>
					<view class="buy-all-btn" @click="doBuy" data-type="MATERIAL">购买</view>
				</view>
				<view class="buy-desc-box">
					<view class="buy-desc-txt mt-10">通过平台自己搭建可运行软件后由平台自动生成相关鉴别材料,下载鉴别材料后可自行申报或找相关代理机构申报.</view>
					<view class="mt-10" style="font-size: 12px;">提供的服务</view>
					<view class="buy-desc-item mt-10">
						<view class="buy-desc-row">
							<image src="../../../static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
							<text class="txt">通过平台自己搭建可运行软件</text>
						</view>
						<view class="buy-desc-row">
							<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
							<text class="txt">平台自动撰写鉴别材料</text>
						</view>
					</view>
					<view class="buy-desc-item">
						<view class="buy-desc-row">
							<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
							<text class="txt">包补正材料撰写一直到下证</text>
						</view>
						<view class="buy-desc-row">
							<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
							<text class="txt">两次补正不通过平台退款</text>
						</view>
					</view>
					<view class="buy-desc-item">
						<view class="buy-desc-row">
							<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
							<text class="txt">包开发票</text>
						</view>
						<view class="buy-desc-row">
							<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
							<text class="txt">提供可运行软件云服务300天</text>
						</view>
					</view>
					<view class="buy-desc-item">
						<view class="buy-desc-row">
							<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
							<text class="txt">客服一对一服务</text>
						</view>
					</view>
					<view class="mt-20">
						<text>使用流程</text>
						<view style="display: flex;flex-direction: column;">
							<view class="buy-desc-row-no-margin mt-10">
								<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
								<text>按系统操作流程执行</text>
							</view>
							<view class="buy-desc-row-no-margin mt-10">
								<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
								<text>如需视频文件和安装包请在下证后购买下载</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 提示免费版 -->
		<view class="hint-box pd-20" bind:tap="copyLink">
			<view class="icon icon-computer-ind"></view>
			<view class="content">
				<text class="hint-content">免费试用请使用电脑端登录</text>
				<text class="hint-link">https://www.aimzhu.com</text>
			</view>
		</view>
	</view>
	<uni-popup type="message" ref="msg">
		<uni-popup-message :type="msgType" :message="msgTxt" :duration="2000"></uni-popup-message>
	</uni-popup>
</template>

<script>
	import ProApi from '@/common/js/net/projectApi.js'
	export default {
		data() {
			return {
				msgType: 'info',
				msgTxt: '',
				urgent: 0,
				projTypes: [], //全托管,写材料 type= ALL type =MATERIAL
				allPrice: 0,
				materialPrice: 0,
				isUrgent: false, //是否加急
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: '创建软著',
			})
			uni.setNavigationBarColor({
				frontColor: '#000000', // 必写项，字体颜色仅支持#ffffff和#000000
				backgroundColor: '#F0F0F0', // 传递的颜色值，仅支持十六进制颜色
				animation: { // 可选项
					duration: 500,
					timingFunc: 'easeIn'
				}
			})
			this.doGetPrice()
		},
		methods: {
			//是否加急
			doUrgent(e) {
				const _self = this
				_self.isUrgent = !_self.isUrgent
			},
			//获取单价
			doGetPrice() {
				uni.showLoading({
					title: '加载中...',
				})
				const _self = this
				ProApi.doGetPrice()
					.then(res => {
						uni.hideLoading()
						console.log(res)
						res.projTypes.forEach(el => {
							if (el.type == 'ALL') {
								_self.allPrice = el.price
							} else if (el.type == 'MATERIAL') {
								_self.materialPrice = el.price
							}
						});
						_self.urgent = res.additional.urgent //加急费用
					})
					.catch(err => {
						uni.hideLoading()
						_self.msgType = 'error'
						_self.msgTxt = '数据有误,请稍后重试'
						_self.$refs.msg.open()
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					})
			},
			//打开项目信息编辑页面
			doBuy(e) {
				//计算价格
				const _self = this
				var price = e.currentTarget.dataset.type == 'ALL' ? _self.allPrice : _self.materialPrice
				var type = e.currentTarget.dataset.type
				if (type == 'ALL' && _self.isUrgent) {
					price += _self.urgent
				}
				const urgent = _self.isUrgent ? 'URGENT' : ''
				uni.navigateTo({
					url: `/pages/copyright/createProjectInfo/createProjectInfo?type=${type}&price=${price}&isUrgent=${urgent}`
				})
			},
			//点击复制
			copyLink() {
				const _self = this
				uni.setClipboardData({
					data: 'https://www.aimzhu.com',
					success: () => {
						_self.msgTxt = '复制成功'
						_self.msgType = 'success'
						_self.$refs.msg.open()
					},
					fail: err => {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style>
	.buy-container {
		display: flex;
		flex-direction: column;
		padding: 30rpx;
	}

	.buy-title {
		height: 100rpx;
		background-color: blanchedalmond;
	}

	.buy-all-container {
		display: flex;
		flex-direction: column;
		border-radius: 10rpx;
	}

	.buy-all-box {
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		background-color: white;
		/* box-shadow: 0rpx 0rpx 10rpx 10rpx #e9e8e88f; */
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
	}

	.buy-all-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.buy-all-txt {
		font-size: 20px;
		color: black;
	}


	.buy-all-txt .money {
		margin-left: 20rpx;
		font-size: 16px;
		color: #532A00;
		font-weight: 500;
	}

	.buy-all-btn {
		padding: 5rpx 35rpx;
		border-radius: 10rpx;
		background-color: #FFA900;
		color: white;
		font-size: 16px;
	}

	.buy-all-btn:active {
		background-color: #FFA900C0;
		color: white;
	}

	.buy-desc-box {
		display: flex;
		flex-direction: column;
		font-size: 12px;
	}

	.buy-desc-txt {
		color: #3b3b3b;
	}

	.buy-desc-title {
		color: #3b3b3b;
	}

	.buy-desc-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.buy-desc-row {
		display: flex;
		flex-direction: row;
		flex: 1;
		align-items: center;
		justify-content: flex-start;
	}

	.buy-desc-row-no-margin {
		display: flex;
		flex-direction: row;
		flex: 1;
		align-items: center;
	}

	.buy-desc-column {
		display: flex;
		flex-direction: row;
		flex: 1;
		align-items: center;
	}

	.list {
		counter-reset: my-counter;
		padding: 0;
	}

	/* 每个列表项递增计数器 */
	.list-item {
		counter-increment: my-counter;
		display: flex;
		align-items: center;
		line-height: 18px;
		text-align: center;
	}

	/* 使用 ::before 伪元素显示计数器值并设置圆形背景 */
	.list-item::before {
		content: counter(my-counter);
		background-color: #F4CE98;
		color: black;
		border-radius: 50%;
		width: 18px;
		height: 18px;
		line-height: 18px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 10rpx;
	}

	.txt {
		line-height: 14px;
	}

	.buy-desc-row-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.box-bottom-options {
		justify-content: center;
		background-color: #FCF3E5;
		padding: 20rpx;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.box-bottom-options .txt {
		color: #532A00;
		padding-left: 10rpx;
		font-weight: 400;
		line-height: 24px;
	}

	.hint-box {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
		background-color: white;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
	}

	.hint-box .icon {
		width: 32px;
		height: 32px;
	}

	.hint-box .content {
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.hint-content {
		color: #532A00;
		font-size: 14px;
		font-weight: 500;
	}

	.hint-link {
		color: #0a86fa;
		text-align: center;
		font-size: 12px;
	}
</style>