<template>
	<view class="box">
		<u-button class="onCreateBox" shape="circle" :ripple="true" @click="onCreateBtnClick" :plain="false">还未创建分站</u-button>
		<u-swiper :list="list" :effect3d="true" :border-radius="10" :effect3d-previous-margin="120" bgColor="transparent"></u-swiper>
		<view class="titletip">
			<view class="line line-l"></view>
			<view>普通版权益</view>
			<view class="line line-r"></view>
		</view>
		<u-card :border="false" class="card">
			<template v-slot:body>
				<view v-for="(item, index) in listJurisdiction" :key="index">
					<list-item>
						<template v-slot:left>
							<view>{{item.title}}</view>
						</template>
						<template v-slot:right>
							<image :src="item.iconCheck ? checkBoxImg[0] : checkBoxImg[1]" style="width: 30rpx; height: 30rpx;"></image>
						</template>
					</list-item>
				</view>
			</template>
		</u-card>
		<u-button class="confim" @click="confim" shape="circle" :ripple="true" :plain="false">立即建站</u-button>
		<csub-address-select :show.sync="addressShow"></csub-address-select>
	</view>
</template>

<script>
	import listItem from '../../components/listitem/listItem.vue'
	import csubAddressSelect from '../../components/select/buttomDialog/csubAddressSelect.vue'
	export default {
		name: 'createBefore',
		components: {
			listItem,
			csubAddressSelect
		},
		data () {
			return {
				addressShow: false,
				list: [
					{
						image: '../../static/img/fz_ptb/fz_ptb.png',
						title: ''
					}
				],
				checkBoxImg: ['../../static/img/fz_icon_xz/fz_icon_xz.png', '../../static/img/fz_icon_gb/fz_icon_gb.png'],
				listJurisdiction: [
					{
						title: '专属社区平台',
						iconCheck: true,
					},
					{
						title: '在线支付接口',
						iconCheck: false,
					},
					{
						title: '管理网站用户',
						iconCheck: false,
					},
					{
						title: '赚取用户提成',
						iconCheck: false,
					},
					{
						title: '自定义网站名称',
						iconCheck: false,
					},
					{
						title: '专属网站域名',
						iconCheck: false,
					},
					{
						title: '专属管理后台',
						iconCheck: false,
					},
					{
						title: '专享低价货源',
						iconCheck: false,
					},
					{
						title: '设置商品价格',
						iconCheck: false,
					},
					{
						title: '搭建下级分站',
						iconCheck: false,
					},
					{
						title: '赚取下级分站提成',
						iconCheck: false,
					},
					{
						title: '域名支持WWW访问',
						iconCheck: false,
					},
				]
			}
		},
		methods: {
			onCreateBtnClick () {
				
			},
			confim () {
				this.addressShow = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding-top: 20rpx
	}
	.onCreateBox {
		margin: 0 100rpx 40rpx 100rpx;
		height: 60rpx;
		background: #6C6269;
		font-size: 24rpx;
		color: #FEE4C5;
		&::after {
			border: none;
		}
	}
	.titletip {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #FEE4C5;
		& .line {
			width: 170rpx;
			height: 12rpx;
			background: linear-gradient(90deg, rgba(238, 238, 238, 0) 0%, #897D82 100%);
			border-radius: 100rpx;
			&.line-l {
				margin-right: 24rpx;
			}
			&.line-r {
				background: linear-gradient(270deg, rgba(238, 238, 238, 0) 0%, #897D82 100%);
				margin-left: 24rpx;
			}
		}
	}
	.card {
		background-color: #2B3062;
		color: #FFFFFF;
		& /deep/ .item-box {
			padding: 7rpx;
		}
		& /deep/ .u-card__body {
			color: #FFFFFF;
		}
		& /deep/ .u-card__head{
			display: none;
		}
	}
	.confim {
		margin: 30rpx 45rpx 37rpx 45rpx;
		height: 90rpx;
		background: linear-gradient(270deg, #F4D8AB 0%, #EF6F5F 0%, #CD9C78 100%, #FB2636 100%);
		border-radius: 45rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		&::after {
			border: none;
		}
	}
</style>
