<template>
	<view class="page-container">
		<swiper indicator-dots style="height: 120rpx;" autoplay indicator-active-color="#fff">
			<swiper-item>
				<image :src="globalData.locImg+'/banner_1.png'" style="width: 100vw;height: 120rpx;"></image>
			</swiper-item>
			<swiper-item>
				<image :src="globalData.locImg+'/banner_2.png'" style="width: 100vw;height: 120rpx;"></image>
			</swiper-item>
		</swiper>
		<!-- 全托管 -->
		<view class="container-box">
			<view class="title-box">
				<view class="title-content">
					<text class="title-txt mr-10">全托管</text>
					<rich-text
						:nodes="moneyTxt(10,14,allPrice/100)+'-'+moneyTxt(10,14,(allPrice+urgent)/100)"></rich-text>
				</view>
				<text class="btn" @click="doBuy" data-type="ALL">购买</text>
			</view>
			<text class="desc">从下单到取证,仅需提供基本信息,我们为您提供一站式管家服务.</text>
			<text class="desc-title">提供的服务</text>
			<view class="item">
				<view class="row-item">
					<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon">
					</image>
					<text>包可运行软件开发与搭建</text>
				</view>
				<view class="row-item">
					<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon">
					</image>
					<text>包鉴别材料撰写</text>
				</view>
			</view>
			<view class="item">
				<view class="row-item">
					<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon"></image>
					<text class="txt">包代办,包下证,包开发票提</text>
				</view>
				<view class="row-item">
					<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon"></image>
					<text class="txt">供可运行软件安装包</text>
				</view>
			</view>
			<view class="item">
				<view class="row-item">
					<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon"></image>
					<text class="txt">提供可运行软件云服务900天</text>
				</view>
				<view class="row-item">
					<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon"></image>
					<text class="txt">提供可运行软件演示视频</text>
				</view>
			</view>
			<view class="item">
				<view class="row-item">
					<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon"></image>
					<text class="txt">客服一对一服务</text>
				</view>
			</view>
			<view class="desc-title">使用流程</view>
			<view class="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 class="container-box">
			<view class="title-box">
				<view class="title-content">
					<text class="title-txt mr-10">写材料</text>
					<rich-text :nodes="moneyTxt(10,14,materialPrice/100)"></rich-text>
				</view>
				<view class="btn" @click="doBuy" data-type="MATERIAL">购买</view>
			</view>
			<text class="desc">通过平台自己搭建可运行软件后由平台自动生成相关鉴别材料,下载鉴别材料后可自行申报或找相关代理机构申报.</text>
			<text class="desc-title">提供的服务</text>
			<view class="item">
				<view class="row-item">
					<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon">
					</image>
					<text>通过平台自己搭建可运行软件</text>
				</view>
				<view class="row-item">
					<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon">
					</image>
					<text>平台自动撰写鉴别材料</text>
				</view>
			</view>
			<view class="item">
				<view class="row-item">
					<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon"></image>
					<text class="txt">包补正材料撰写一直到下证</text>
				</view>
				<view class="row-item">
					<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon"></image>
					<text class="txt">两次补正不通过平台退款</text>
				</view>
			</view>
			<view class="item">
				<view class="row-item">
					<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon"></image>
					<text class="txt">包开发票</text>
				</view>
				<view class="row-item">
					<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon"></image>
					<text class="txt">提供可运行软件云服务300天</text>
				</view>
			</view>
			<view class="item">
				<view class="row-item">
					<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon"></image>
					<text class="txt">客服一对一服务</text>
				</view>
			</view>
			<text class="desc-title">使用流程</text>
			<view class="item-column">
				<view class="row-item">
					<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon"></image>
					<text>按系统操作流程执行</text>
				</view>
				<view class="row-item">
					<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon"></image>
					<text>如需视频文件和安装包请在下证后购买下载</text>
				</view>
			</view>
		</view>
		<view class="container-box-row" bind:tap="copyLink">
			<view class="icon-computer-ind size-64"></view>
			<view class="free-content">
				<text>免费试用请使用电脑端登录</text>
				<text class="hint-link">{{globalData.appUrl}}</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'
	import {
		inject
	} from 'vue'
	import {
		moneyTxt
	} from '@/common/js/conver.js'
	export default {
		setup() {
			const globalData = inject('globalData')
			console.log(globalData)
			return {
				globalData
			}
		},
		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: {
			moneyTxt,
			//是否加急
			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 lang="scss" scoped>
	.container-box {
		display: flex;
		flex-direction: column;
		background-color: $white-color;
		border-radius: 15rpx;
		margin-top: 20rpx;
		padding: 30rpx 30rpx;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
	}

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

	.free-content {
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
		margin-left: 20rpx;
	}

	.hint-link {
		color: $text-blue-color;
		text-align: center;
		font-size: 24rpx;
	}

	.title-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.title-content {
		display: flex;
		flex-direction: row;
		color: $text-brown-color;
		align-items: center;
		font-weight: 500;
	}

	.title-txt {
		font-size: 36rpx;
		font-weight: 500;
	}

	.btn {
		font-size: 28rpx;
		background-color: $primary-color;
		color: $white-color;
		text-align: center;
		line-height: 32rpx;
		height: 32rpx;
		padding: 8rpx 25rpx;
		border-radius: 10rpx;
	}

	.btn:active {
		background-color: $primary-color-active;
	}

	.desc {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: $text-gray-desc-color;
	}

	.desc-title {
		font-size: 28rpx;
		margin-top: 10rpx;
		color: $text-color;
	}

	.item {
		display: flex;
		flex-direction: row;
		margin-top: 10rpx;
		color: $text-gray-desc-color;
	}

	.item-column {
		display: flex;
		flex-direction: column;
		margin-top: 10rpx;
		color: $text-gray-desc-color;
	}

	.row-item {
		display: flex;
		flex-direction: row;
		font-size: 20rpx;
		color: $text-color;
		align-items: center;
		flex: 1;
	}

	.check-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.list {
		counter-reset: my-counter;
		padding: 0;
		display: flex;
		flex-direction: row;
		font-size: 20rpx;
		margin-top: 10rpx;
		color: $text-gray-desc-color;
	}

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

	.list-item:nth-of-type(n+2) {
		margin-left: 20rpx;
	}

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