<template>
	<view :class="[AppTheme]" class="all_box">
		<view class="content_detail">
			<view class="detail_title">基本信息</view>
			<view class="detail_text">
				<view class="detail_ipt">
					<text class="text" style="color: darkgray;font-size: 24rpx;">此图为列表商品图，尺寸建议:300*300</text>
					<view class="detail_logo" v-if="logo">
						<image class="img" :src="form.logo" mode="" @click="uploadlogo(1)"></image>
					</view>
					<view v-if="!logo" class="choose_img">
						<view class="icon_plus" @click="uploadlogo(1)">
							<u-icon name="plus-circle" size="20" label='添加' labelPos="bottom" labelSize="10px"></u-icon>
						</view>
					</view>
				</view>
			</view>

			<view class="bor_solp"></view>
			<view class="detail_text">
				<view style="width: 22%;">商品名称</view>
				<u--input border="none" v-model="form.name" placeholder="请输入名称"></u--input>
			</view>
			<view class="bor_solp"></view>
			<view class="detail_text" @click="shopcates">
				<view style="width: 25%;">商品分类</view>
				<u-icon name="arrow-right" size="20" :label='label' labelPos='left'></u-icon>
			</view>
			<view class="bor_solp"></view>
			<view class="detail_text">
				<view style="width: 20%;">副标题</view>
				<u--input border="none" v-model="form.title" placeholder="请输入标题"></u--input>
			</view>
			<view class="bor_solp"></view>
			<view class="detail_text">
				<view style="width: 20%;">单位</view>
				<u--input border="none" v-model="form.unit" placeholder="请输入单位(件)"></u--input>
			</view>
			<view class="bor_solp"></view>
			<view class="detail_text">
				<view class="detail_ipt">
					<text class="text" style="margin-bottom: 10rpx;">标签</text>
					<view style="margin-top: 20rpx;">
						<u-checkbox-group v-model="form.lid" @change="checkboxChange">
							<u-checkbox v-for="(item, index) in columns" :key="index" :label="item.label"
								:name="item.id" shape='circle'>
							</u-checkbox>
						</u-checkbox-group>
					</view>

				</view>
			</view>
		</view>
		<view class="content_detail">
			<view class="detail_title">规格 价格及库存</view>
			<view class="detail_text">
				<view style="width: 20%;">单价</view>
				<u--input border="none" type="digit" v-model="form.price" placeholder="请输入单价(元)"></u--input>
			</view>
			<view class="bor_solp"></view>
			<view class="detail_text">
				<view style="width: 20%;">原价</view>
				<u--input border="none" type="digit" v-model="form.oprice" placeholder="请输入原价(元)"></u--input>
			</view>
			<view class="bor_solp"></view>
			<view class="detail_text">
				<view style="width: 20%;">库存</view>
				<u--input border="none" type="digit" v-model="form.num" placeholder="请输入库存"></u--input>
			</view>
			<view class="bor_solp"></view>
			<view class="detail_text">
				开启SKU管理
				<view>
					<u-switch v-model="form.issku==1" @change="change1" :activeColor="primary" size='20'></u-switch>
				</view>
			</view>
		</view>
		<view class="content_detail">
			<view class="detail_title">运费 销量 积分及抽佣</view>
			<view class="detail_text">
				运费
				<view>
					<u-switch v-model="form.ismy==1" @change="change2" :activeColor="primary" size='20'></u-switch>
				</view>
			</view>
			<view v-if="form.ismy==1">
				<view class="bor_solp"></view>
				<view class="detail_text">
					<view style="width: 20%;">运费</view>
					<u--input border="none" type="digit" v-model="form.postage" placeholder="请输入运费(元)"></u--input>
				</view>
			</view>
			<view class="bor_solp"></view>
			<view class="detail_text">
				自定义销量
				<view>
					<u-switch v-model="form.issells==1" @change="change3" :activeColor="primary" size='20'></u-switch>
				</view>
			</view>
			<view v-if="form.issells==1">
				<view class="bor_solp"></view>
				<view class="detail_text">
					<view style="width: 27%;">自定义销量</view>
					<u--input border="none" type="digit" v-model="form.sells" placeholder="请输入自定义销量"></u--input>
				</view>
			</view>
			<view class="bor_solp"></view>
			<view class="detail_text">
				<view style="width: 25%;">赠送积分</view>
				<u--input border="none" type="digit" v-model="form.score" placeholder="请输入赠送积分"></u--input>
			</view>
			<view class="bor_solp"></view>
			<view class="detail_text">
				开启佣金比例
				<view>
					<u-switch v-model="fxopen" @change="change4" :activeColor="primary" size='20'></u-switch>
				</view>
			</view>
			<view v-if="fxopen">
				<view class="bor_solp"></view>
				<view class="detail_text">
					<view style="width: 32%;">一级佣金比例</view>
					<u--input border="none" type="digit" v-model="form.fx1rate" placeholder="请输入一级佣金比例,例10%"></u--input>
				</view>
				<view class="bor_solp"></view>
				<view class="detail_text">
					<view style="width: 32%;">二级佣金比例</view>
					<u--input border="none" type="digit" v-model="form.fx2rate" placeholder="请输入二级佣金比例,例5%"></u--input>
				</view>
			</view>
		</view>
		<view class="content_detail">
			<view class="detail_title">商品详情图</view>
			<view class="detail_text">
				<view class="detail_ipt">
					<text class="text" style="color: darkgray;font-size: 24rpx;">此图为商品详情页主图（轮播图），尺寸建议640*640</text>
					<view class="content_detail_img">
						<view v-if="detailimg.length!=0" class="detail_img" v-for="(item,index) in detailimg"
							:key="index" @click="preview(item,index)">
							<image class="image" :src="item" mode=""></image>
							<u-icon @click="deleteimg(index)" class="delete_img" name="close-circle" color="#fff"
								size="20">
							</u-icon>
						</view>
						<view class="choose_img">
							<view class="icon_plus" @click="uploadlogo(2)">
								<u-icon name="plus-circle" size="20" label='添加' labelPos="bottom" labelSize="10px">
								</u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content_detail">
			<view class="detail_title">商品描述</view>
			<view class="detail_text">
				<u--textarea v-model="form.summary" confirmType='done' placeholder="商品描述"></u--textarea>
			</view>
		</view>
		<view class="content_detail">
			<view class="detail_title">商品详情
				<span v-if="havecontext" @click="pshow=true"
					style="float: right;color: #168eea;font-size: 28rpx;">编辑</span>
			</view>
			<view @click="pshow=true" class="detail_text" style="padding: 0;width: 100%;">
				<view style="padding-left: 10rpx;padding-right: 10rpx;">
					<u-parse v-if="content" :content="content" :lazy-load="true" :show-with-animation="true"></u-parse>
					<view v-else style="color: #bebebe;padding: 20rpx;">
						点击请输入商品详情
					</view>
				</view>

			</view>
		</view>

		<view class="submit bg-linear-gradient" @click="submit">保存</view>
		<u-picker :show="show" ref="uPicker" :loading="loading" :columns="columnslist" :columnData="columnData"
			@confirm="confirm" @cancel='cancel' keyName="name" @change="changeHandler"></u-picker>
		<u-popup :show="pshow" @close="close" @open="open">
			<jinEdit placeholder="请输入商品详情" @editOk="editOk" height="96vh" :html="content"
				:uploadFileUrl="uploadFileUrl">
			</jinEdit>
		</u-popup>
	</view>
</template>

<script>
	import mineApi from "@/api/mine/index.js"
	import loginApi from "../../../api/login/login.js"
	import jinEdit from '@/pagesC/components/jin-edit/jin-edit.vue';
	import {
		pathToBase64
	} from "@/js/pathto64.js"

	export default {
		components: {
			jinEdit
		},
		data() {
			return {
			    
				primary: this.$theme.primary,
				settingFile: getApp().globalData.siteinfo,
				logo: '', //农场展示的logo
				detailimg: [], //农场描述附加图
				//表单数据
				form: {
					name: '',
					title: '',
					unit: '',
					price: '',
					num: '',
					oprice: '',
					postage: '',
					sells: '',
					score: '',
					fx1rate: '',
					fx2rate: '',
					cid2: '',
					lid: [],
					issku: 0,
					ismy: 0,
					issells: 0,
					logo: "", //农场logo的base64格式
					detailimg: [],
					summary: '',
					content: ''
				},
				content: '',
				show: false,
				loading: false,
				issku: false,
				value1: '',
				value2: '',
				shopcate: '',
				shopbio: '',
				farm_id: '',
				columns: [],
				columnslist: [],
				columnData: [],
				ismy: false,
				issells: false,
				fxopen: false,
				label: '商品分类',
				pshow: false,
				havecontext: '',
				uploadFileUrl: ''

			}
		},
		onLoad(options) {
			this.farm_id = options.id
			this.getstatus()
		},
		methods: {
			// 点击发布
			editOk(res) {
				let that = this;
				that.pshow = false;
				if (res.html != '<p><br></p>') {
					that.content = res.html.replace(/\<img src="/gi,
						`<img style='width:97vw;display:block' src="`);
					that.form.content = res.html.replace(that.settingFile.root_rich_img, '');
					that.havecontext = '编辑'
				} else {
					that.form.content = ''
				}

			},
			close(e) {
				this.pshow = false;
			},
			open(e) {

			},
			onEditorReady() {
				// #ifdef MP-BAIDU
				this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
				// #endif

				// #ifdef APP-PLUS || H5 ||MP-WEIXIN
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
				// #endif
			},
			undo() {
				this.editorCtx.undo()
			},
			change4(e) {
				if (e === true) {
					this.form.fxopen = 1
				} else {
					this.form.fxopen = 0
					this.form.fx1rate = ''
					this.form.fx2rate = ''
				}
			},
			change3(e) {
				if (e === true) {
					this.form.issells = 1
				} else {
					this.form.issells = 0
					this.form.sells = ''
				}
			},
			change2(e) {
				if (e === true) {
					this.form.ismy = 1
				} else {
					this.form.ismy = 0
					this.form.postage = ''
				}
			},
			change1(e) {
				if (e === true) {
					this.form.issku = 1
				} else {
					this.form.issku = 0
				}
			},
			checkboxChange(e) {

			},
			shopcates() {
				this.show = true;
			},
			confirm(e) {
				console.log('e', e)
				this.show = false;
				if (e.value.length >= 1 && e.value[1] != undefined) {
					this.label = e.value[1].name
					this.form.cid2 = e.value[1].id
				} else {
					this.label = e.value[0].name
					this.form.cid2 = e.value[0].id
				}
			},
			cancel() {
				this.show = false;
			},
			deleteimg(idx) { //图片删除
				this.detailimg.splice(idx, 1)
				this.form.detailimg.splice(idx, 1)
			},
			changeHandler(e) {
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					this.loading = true
					// 模拟网络请求
					uni.$u.sleep(100).then(() => {
						if (this.columnData.length >= index + 1) {
							picker.setColumnValues(1, this.columnData[index])
						} else {
							picker.setColumnValues(1, [])
						}
						this.loading = false
					})
				}
			},
			getstatus() {
				mineApi.getcatelist({
						id: this.farm_id
					})
					.then(res => {
						if (res.status == 1) {
							this.columns = res.data.data
							this.columnslist = res.data.columnslist
							this.columnData = res.data.columnData;
						}
					})
			},
			agrees() {
				this.value = !this.value
			},

			//提交资料
			submit() {
				if (this.form.name == '') {
					this.$api.msg('请填写农场名称')
					return
				}
				if (this.form.title == '') {
					this.$api.msg('请填写标题')
					return
				}
				if (this.form.unit == '') {
					this.$api.msg('请填写单位')
					return
				}
				if (this.form.price == '') {
					this.$api.msg('请填写价格')
					return
				}
				if (this.form.oprice == '') {
					this.$api.msg('请填写原价')
					return
				}
				if (this.form.num == '') {
					this.$api.msg('请填写库存')
					return
				}
				if (this.form.lid == '') {
					this.$api.msg('请选择标签')
					return
				}
				if (this.form.summary == '') {
					this.$api.msg('请填写商品简介')
					return
				}
				if (this.form.content == '') {
					this.$api.msg('请填写商品详情')
					return
				}
				if (this.form.logo == '') {
					this.$api.msg('请填上传商品图')
					return
				}
				if (this.form.cid2 == '') {
					this.$api.msg('请填选择分类')
					return
				}

				let that = this
				let data = {
					name: that.form.name,
					title: that.form.title,
					unit: that.form.unit,
					price: that.form.price,
					num: that.form.num,
					oprice: that.form.oprice,
					postage: that.form.postage,
					sells: that.form.sells,
					score: that.form.score,
					fx1rate: that.form.fx1rate,
					fx2rate: that.form.fx2rate,
					cid2: that.form.cid2,
					lid: that.form.lid,
					issku: that.form.issku,
					ismy: that.form.ismy,
					issells: that.form.issells,
					logo: that.form.logo, //农场logo的base64格式
					detailimg: that.form.detailimg,
					summary: that.form.summary,
					content: that.form.content,
					farm_id: that.farm_id
				}
				mineApi.addgoods(data)
					.then(res => {
						if (res.status === 1) {

							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 1000
							})
							setTimeout(() => {
								uni.redirectTo({
									url: `/pagesC/pages/merchantdetails/shoplist?id=` + this.farm_id
								})
							}, 600)

						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
					})
					.catch(error => {
						console.log(error, 'error')
					})
			},
			preview(url, idx) { //预览图片

				uni.previewImage({
					current: idx,
					urls: this.detailimg,
					success: function(res) {
						console.log(res, '预览')
					},
					fail: function(res) {
						console.log(res, '00000')
					}
				})
			},
			//上传Logo和农场描述附加图
			uploadlogo(num) {
				let that = this
				// #ifdef MP
				if (num == 1) {
					uni.chooseImage({
						count: 1,
						success: function(res) {
							that.logo = res.tempFilePaths[0]
							uni.getFileSystemManager().readFile({
								filePath: res.tempFilePaths[0],
								encoding: 'base64',
								success: function(ress) {
									//返回不带data:image/jpeg;base64,'头的base64格式
									that.form.logo = 'data:image/jpeg;base64,' + ress.data;
								}
							})
						},
						fail: function(res) {
							console.log(res)
						}
					})
				} else {
					uni.chooseImage({
						count: 6,
						success: function(res) {
							res.tempFilePaths.forEach(ele => {
								that.detailimg.push(ele)
								uni.getFileSystemManager().readFile({
									filePath: ele,
									encoding: 'base64',
									success: function(ress) {
										//返回不带data:image/jpeg;base64,'头的base64格式
										let imageurl = 'data:image/jpeg;base64,' + ress
											.data;
										that.form.detailimg.push(imageurl)
									}
								})
							})
						}
					})
				}
				// #endif

				// #ifdef APP||H5
				if (num == 1) {
					uni.chooseImage({
						count: 6, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						success: function(res) {
							that.logo = res.tempFilePaths[0]
							console.log(res, "选择的图片")
							pathToBase64(res.tempFilePaths[0]).then(base64 => {
								console.log(base64, "base64")
								that.form.logo = base64;
							})
						}
					})
				} else {
					uni.chooseImage({
						count: 6,
						success: function(res) {
							res.tempFilePaths.forEach(ele => {
								that.detailimg.push(ele)
								pathToBase64(res.tempFilePaths[0]).then(base64 => {
									console.log(base64, "base64")
									that.form.detailimg.push(base64)
								})
							})
						}
					})
				}
				// #endif
			},
			//打开地图
			map() {
				let that = this
				// #ifdef MP-WEIXIN || APP-PLUS
				that.$until.chooseLocation(function(res) {
					that.form.address = res.address + res.name
					that.form.site = res.address
				});
				// #endif
			},
			// 获取验证码
			getCode() {
				let that = this
				if (that.loginphone !== null && that.loginphone !== undefined && that.loginphone.length === 11) {
					var myreg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
					if (myreg.test(that.loginphone)) {
						uni.showLoading({
							title: '正在获取验证码'
						})
						setTimeout(() => {
							uni.hideLoading()
							//获取验证码
							let params = {
								mobile: that.loginphone
							}
							loginApi.sendvecode(params).then(res => {
								if (parseInt(res.status) === 1) {
									uni.showToast({
										icon: 'none',
										title: '验证码已发送'
									})
									that.ifsend = false
								} else {
									uni.showToast({
										icon: 'none',
										title: res.msg
									})
								}
							})
						}, 1000)
						let num = 60
						that.timeer = setInterval(function() {
							if (num > 0) {
								that.codemess = num + 's后重新获取'
								num = num - 1
							} else {
								clearInterval(that.timeer)
								that.ifsend = true
								that.codemess = '重新获取验证码'
							}
						}, 1000)
					} else {
						uni.showToast({
							icon: 'none',
							title: '请输入有效的手机号'
						})
						return;
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请输入有效的手机号'
					})
				}
			},

			register() {
				let that = this
				if (that.loginphone !== null && that.loginphone !== undefined && that.loginphone.length === 11) {
					var myreg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
					if (myreg.test(that.loginphone)) {
						if (that.verificationcode !== null && that.verificationcode !== undefined && that.verificationcode
							.length > 0) {
							if (that.loginpassword !== null && that.loginpassword !== undefined && that.loginpassword
								.length > 0) {
								let params = {
									mobile: that.loginphone,
									code: that.verificationcode,
									password: that.loginpassword,
									id: that.reason.farm_id,
								}
								mineApi.reset_pwd(params).then(res => {
									if (parseInt(res.status) === 1) {
										uni.showToast({
											icon: 'none',
											title: '修改成功'
										})
										this.show = false

									} else {
										uni.showToast({
											icon: 'none',
											title: '修改失败' + res.msg
										})
										this.show = false
									}
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: '请输入正确的密码'
								})
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: '请输入正确的验证码'
							})
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: '请输入正确的手机号'
						})
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.all_box {
		background-color: #ffffff;

		.step_bar {
			padding: 50rpx;
			padding-bottom: 80rpx;
			color: #fff;
		}

		.reason {
			background-color: #f97c00;
			color: #fff;
			line-height: 50rpx;
			padding: 0 20rpx;

			.reason_text {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}


		.content_detail {
			padding: 0 0 25rpx 0;


			.detail_title {
				padding: 0 25rpx;
				font-size: 28rpx;
				background-color: #eae8e9;
				line-height: 60rpx;

			}

			.bor_solp {
				background-color: #999;
				height: 1rpx;
				width: 100%;
				transform: scaleY(0.3);
				margin: 10rpx 0;
			}

			.detail_text {
				color: #8f8f8f;
				font-size: 28rpx;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				padding: 10rpx 30rpx;
				align-items: center;

				.input {
					width: 100%;
					padding-left: 10rpx;
					height: 80rpx;
					border-radius: 5rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					border: 1rpx solid #eae8e9;
				}

				.detail_ipt {
					// border: 1rpx solid #eae8e9;
					padding: 0 5rpx;
					width: 100%;

					.text {
						margin-bottom: 20rpx;
					}

					.detail_logo {
						margin-top: 20rpx;

						.img {
							width: 160rpx;
							height: 160rpx;
						}
					}

					.choose_img {
						display: flex;
						align-items: center;
						margin-top: 20rpx;
						width: 200rpx;
						height: 200rpx;
						// text-align: center;
						overflow: hidden;
						border: 1rpx solid #eae8e9;
						background-color: #eae8e9;
						border-radius: 10rpx;

						.icon_plus {
							margin-left: 75rpx;

						}
					}
				}

				.detail_ipt1 {
					border: 1rpx solid #eae8e9;
					padding: 15rpx;
					height: 70rpx;
				}

				.icon {
					position: absolute;
					top: 10rpx;
					right: 20rpx;
					z-index: 10;
				}
			}

			.detail_text_address {
				width: 100%;
				margin-top: 20rpx;
				height: 80rpx;
				border-radius: 5rpx;
				border: 1rpx solid #eae8e9;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.input {
					padding-left: 10rpx;
					width: 92%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.icon {}
			}

			.content_detail_img {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;

				.detail_img {
					position: relative;
					margin-top: 20rpx;
					width: 200rpx;
					height: 200rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border: 1rpx solid #eae8e9;
					margin-right: 20rpx;

					.image {
						width: 220rpx;
						height: 200rpx;
					}

					.delete_img {
						position: absolute;
						top: 0rpx;
						right: 0rpx;
					}
				}
			}


		}

		.agree_terms {
			display: flex;
			justify-content: center;
			align-items: center;

			.agree_dot {
				margin-right: 10rpx;
			}

			text {
				color: #2375f4;
			}
		}

		.submit {
			font-size: 30rpx;
			color: #ffffff;
			padding: 25rpx 0;
			border-radius: 35rpx;
			text-align: center;
			width: 90%;
			margin: 20rpx auto;
			margin-bottom: 40rpx;
		}

		// }

		.under_review {
			margin-top: 100rpx;
			text-align: center;

			image {
				width: 150rpx;
				height: 150rpx;
			}

			.text {
				margin-top: 20rpx;
			}
		}
	}

	.loginstatus {
		.gologin {
			// float: right;
			margin-left: 60vw;
			color: #4271a1;
			margin-bottom: 4vh;
		}

		.sign_in_title {
			padding: 40rpx 10% 0 10%;
			width: 80%;
			color: #000000;
			font-size: 32rpx;
			font-weight: 600;
			text-align: center;
		}

		.login_infon {
			padding: 20rpx 10%;
			width: 80%;

			.inputline {
				display: flex;
				margin: 20rpx 0;

				.btn {
					margin-top: 13rpx;
					margin-bottom: 5vh;
					position: absolute;
					margin-left: 55vw;
					padding: 0 10rpx;
				}
			}

			.form_input {
				border-bottom: 1px solid #c0c4cc;
				margin-top: 5%;
			}
		}

		.consent_agreement {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 80%;
			padding: 0 10%;

			.agreement_details {
				margin-left: 15rpx;
				color: #999;
				font-size: 24rpx;

				.agreement_details_text {
					color: #3C9CFF;
				}
			}
		}

		.login_button {
			margin: 25rpx 10% 25rpx 10%;
			padding: 24rpx 0;
			width: 80%;
			text-align: center;
			color: #FFFFFF;
			font-size: 32rpx;
			border-radius: 50rpx;
		}
	}

	.agreement_content {
		margin: 0 15rpx;
		height: 100vh;

		.agreement_content_title {
			padding: 20rpx 0 25rpx 0;
			font-size: 36rpx;
			color: #000000;
			font-weight: 700;
			width: 100%;
			text-align: center;
			position: relative;

			.closepop_boton {
				position: absolute;
				right: 15rpx;
				top: 50%;
				transform: translate(0, -50%);
			}
		}

		.ementconte_content {
			width: 100%;
		}
	}

	::v-deep .u-radio-group--row[data-v-97ce24d6] {
		justify-content: space-between;
	}

	.u-checkbox-group--row[data-v-2ef8bac9] {
		justify-content: space-between;
	}
</style>
