<template>
	<view class="box">
		<u-popup v-model="show" mode="bottom" :closeable="true" @close="$emit('close')" close-icon-pos='top-right'
			:safe-area-inset-bottom="true" :mask-close-able="false" z-index="10078">
			<scroll-view scroll-y="true"
				:style="{height: `calc(100vh - 110rpx - env(safe-area-inset-bottom) - var(--status-bar-height) - ${navbarHeight}px)`}">
				<!-- 西药详情 -->
				<view class="box flex-col white">
					<view class="flex-row flex-jus-center">
						<d-text text="用法用量" className="fs-32 main-c m-t-3"></d-text>
					</view>
					<view class="flex-col m-t-32 p-32" v-if="type==1">
						<view class="flexBox">
							<view class="item">
								<view class="label">名称：</view>
								<view class="val">{{obj.drug_name}}</view>
							</view>

						</view>
						<view class="flexBox">
							<view class="item">
								<view class="label">规格：</view>
								<view class="val">{{obj.specification}}</view>
							</view>
							<view class="item">
								<view class="label">库存：</view>
								<view class="val">剩余{{obj.stock}}件</view>
							</view>
						</view>
						<view class="flexBox" v-if="see_rate==1">
							<view class="item">
								<view class="label">毛利率：</view>
								<view class="val">{{getRate()}}%</view>
							</view>
						</view>
						<view class="flexBox">
							<view class="item">
								<view class="label">厂家：</view>
								<view class="val">{{obj.source}}</view>
							</view>
						</view>
						<view class="flexBox">
							<view class="item">
								<view class="label">功能主治：</view>
								<view class="val">{{obj.function}}</view>
							</view>
						</view>
						<view class="m-t-24 flex-col bg p-col-08 iBox">
							<d-text text="用法用量（说明书）" className="fs-24 content-c m-l-16"></d-text>
							<d-text :text="obj.usage" className="fs-24 tips-c m-l-16"></d-text>
							<image src="../../../../static/image/i4.png" class="icon" mode="scaleToFill"
								@click="previewImage(obj.instruction)" />
						</view>
						<view class="flex-col flex-jus-sp m-t-32">
							<d-text text="用法用量" className="fs-3 main-c"></d-text>
							<d-text text="初始默认值为说明书用量，请根据患者实际情况调整剂量" className="fs-24 error-c m-t08"></d-text>

						</view>
						<view class="flex-row flex-jus-sp m-t-32">
							<d-text text="药品数量" className="fs-3 main-c"></d-text>
							<d-number-box v-model="obj.number" :min="1" :max="obj.stock">
								<view slot="minus" class="minus flex-row flex-jus-center flex-ali-center"
									:style="{backgroundColor:`rgba(249, 250, 251,${obj.number>1?1:0.6})`}">
									<u-icon name="minus" size="22" :color="obj.number>1?'#000':'#A7ABB0'"></u-icon>
								</view>

								<view slot="plus" class="plus flex-row flex-jus-center flex-ali-center"
									:style="{backgroundColor:`rgba(41,121,255,${obj.number>=obj.stock?0.6:1})`}">
									<u-icon name="plus" size="22" color="#fff"></u-icon>
								</view>
							</d-number-box>
						</view>
						<view class="bottom-border"></view>
						<view class="flex-col">
							<view class="flex-row flex-ali-center m-t-32">
								<text class="text">用法：</text>
								<view class="flex-row flex-ali-center">
									<view class="bg p-row-16">
										<u-input v-model="obj.usages['0']['name']" type="select"
											:select-open="key=='time'" @click="key='time';pickerShow=true"
											placeholder="请选择" />
									</view>
									<view class="bg m-l-32 p-row-16">
										<u-input v-model="obj.usages['1']['name']" type="select"
											:select-open="key=='usage'" @click="key='usage';pickerShow=true"
											placeholder="请选择" />
									</view>
								</view>
							</view>
							<view class="flex-row flex-ali-center m-t-32">
								<text class="text">每次：</text>
								<view class="flex-row flex-ali-center">
									<d-number-box v-model="obj.count" :min="1">
										<view slot="minus" class="minus flex-row flex-jus-center flex-ali-center"
											:style="{backgroundColor:`rgba(249, 250, 251,${obj.count>1?1:0.6})`}">
											<u-icon name="minus" size="22" :bold="true"
												:color="`rgba(41,121,255,${obj.count>1?1:0.6})`"></u-icon>
										</view>

										<view slot="plus" class="plus flex-row flex-jus-center flex-ali-center"
											:style="{backgroundColor:`rgba(249, 250, 251,${obj.count>=obj.stock?0.6:1})`}">
											<u-icon name="plus" size="22" :bold="true"
												:color="`rgba(41,121,255,${obj.count>=obj.stock?0.6:1})`"></u-icon>
										</view>
									</d-number-box>
									<view class="bg m-l-32 p-row-16">
										<u-input v-model="obj.describe['name']" type="select"
											:select-open="key=='describe'" @click="key='describe';pickerShow=true;"
											placeholder="请选择" />
									</view>
								</view>
							</view>
							<view class="flex-row flex-ali-center m-t-32">
								<text class="text">频率：</text>
								<view class="bg p-row-16">
									<u-input v-model="obj.frequency['name']" type="select"
										:select-open="key=='frequency'" @click="key='frequency';pickerShow=true;"
										placeholder="请选择" />
								</view>
							</view>
						</view>
					</view>
          服务包
					<view class="flex-col m-t-32 p-32" v-if="type==3">
						<view class="flexBox">
							<view class="item">
								<view class="label">名称：</view>
								<view class="val">{{obj.drug_name}}</view>
							</view>

						</view>
						<view class="flexBox">
							<view class="item">
								<view class="label">规格：</view>
								<view class="val">{{obj.specification}}</view>
							</view>
							<view class="item">
								<view class="label">库存：</view>
								<view class="val">剩余{{obj.stock}}件</view>
							</view>
						</view>
						<view class="flexBox" v-if="see_rate==1">
							<view class="item">
								<view class="label">毛利率：</view>
								<view class="val">{{getRate()}}%</view>
							</view>
						</view>
						<view class="flexBox">
							<view class="item">
								<view class="label">厂家：</view>
								<view class="val">{{obj.source}}</view>
							</view>
						</view>
						<view class="flexBox">
							<view class="item">
								<view class="label">功能主治：</view>
								<view class="val">{{obj.function}}</view>
							</view>
						</view>
						<view class="m-t-24 flex-col bg p-col-08 iBox">
							<d-text text="用法用量（说明书）" className="fs-24 content-c m-l-16"></d-text>
							<d-text :text="obj.usage" className="fs-24 tips-c m-l-16"></d-text>
							<image src="../../../../static/image/i4.png" class="icon" mode="scaleToFill"
								@click="previewImage(obj.instruction)" />
						</view>
						<view class="flex-col flex-jus-sp m-t-32">
							<d-text text="用法用量" className="fs-3 main-c"></d-text>
							<d-text text="初始默认值为说明书用量，请根据患者实际情况调整剂量" className="fs-24 error-c m-t08"></d-text>

						</view>
						<view class="flex-row flex-jus-sp m-t-32">
							<d-text text="商品数量" className="fs-3 main-c"></d-text>
							<d-number-box v-model="obj.number" :min="1" :max="1">
								<view slot="minus" class="minus flex-row flex-jus-center flex-ali-center"
									:style="{backgroundColor:`rgba(249, 250, 251,${obj.number>1?1:0.6})`}">
									<u-icon name="minus" size="22" :color="obj.number>1?'#000':'#A7ABB0'"></u-icon>
								</view>

								<view slot="plus" class="plus flex-row flex-jus-center flex-ali-center"
									:style="{backgroundColor:`rgba(41,121,255,${obj.number>=obj.stock?0.6:1})`}">
									<u-icon name="plus" size="22" color="#fff"></u-icon>
								</view>
							</d-number-box>
						</view>
						<view class="bottom-border"></view>
						<view class="flex-col">
						</view>
					</view>
					<!-- 中药 -->
					<view class="box flex-col white p-32" v-if="(type==2)&&is_next">
						<view class="grid-tem-col-2 rp bg p-16">
							<template v-for="item in obj">
								<view class="flex-row flex-jus-sp flex-ali-center" :key="item.id" v-if="item.checked">
									<d-text :text="item.drug_name" color="#31353D"></d-text>
									<d-text :text="item.grammage+'g'" color="#6C7380"></d-text>
								</view>
							</template>
						</view>
						<view class="flex-row m-t-32 flex-ali-center">
							<text class="text">调配：</text>
							<view class="flex-row flex-ali-center">
								<view class="subsection" v-if="show">
									<u-subsection :height="50" active-color="#6ACDBB" font-size="24" :list="recipes"
										:current="addRecipe.deploy||0" mode="subsection"
										@change="addRecipe.deploy=$event.index"></u-subsection>
								</view>
								<view class="m-l-32">
									<u-checkbox-group shape="circle" icon-size="28" size="36">
										<u-checkbox v-model="addRecipe['frying']" name="浓煎"
											@change="$set(addRecipe,'frying',$event.value)">浓煎</u-checkbox>
									</u-checkbox-group>
								</view>
							</view>
						</view>
						<view class="flex-row flex-ali-center m-t-32">
							<text class="text">剂数：</text>
							<view class="bg p-row-16 flex-1">
								<u-input v-model="addRecipe.dosage['name']" type="select" :select-open="key=='dosage'"
									placeholder="请选择" @click="key='dosage';pickerShow=true" />
							</view>
						</view>

						<view class="flex-row flex-ali-center m-t-32">
							<text class="text">用量：</text>
							<view class="bg p-row-16 flex-1">
								<u-input v-model="addRecipe.nums['name']" type="select" :select-open="key=='nums'"
									placeholder="请选择" @click="key='nums';pickerShow=true" />
							</view>
						</view>
						<view class="flex-row flex-ali-center m-t-32">
							<text class="text">用法：</text>
							<view class="bg p-row-16 flex-1">
								<u-input v-model="addRecipe.usage['name']" type="select" :select-open="key=='usage'"
									placeholder="请选择" @click="key='usage';pickerShow=true" />
							</view>
						</view>
						<view class="flex-row flex-ali-center m-t-32">
							<text class="text">服法：</text>
							<view class="bg p-row-16 flex-1">
								<u-input v-model="addRecipe.time['name']" type="select" :select-open="key=='time'"
									placeholder="请选择" @click="key='time';pickerShow=true" />
							</view>
						</view>
						<view class="flex-row flex-ali-center m-t-32">
							<text class="text">备注：</text>
							<view class="bg p-row-16 flex-1">
								<u-input v-model="addRecipe.remark" placeholder="请输入" />
							</view>
						</view>
					</view>


					<!-- 颗粒 -->
					<view class="p-row-52 flex-col" v-if="(type==2||type==4)&&!is_next">
						<view class="bottom-border p-col-32 flex-row flex-jus-sp flex-ali-center"
							v-for="(item,index) in obj" :key="index">
							<d-text :text="item.drug_name" className="fs-32 content-c"></d-text>
							<d-number-box v-model="item.grammage" :min='0'>
								<view slot="minus" class="minus flex-row flex-jus-center flex-ali-center"
									:style="{backgroundColor:`rgba(249, 250, 251,${item.grammage>0?1:0.6})`}">
									<u-icon name="minus" size="22" :color="item.grammage>0?'#000':'#A7ABB0'"></u-icon>
								</view>

								<view slot="plus" class="plus flex-row flex-jus-center flex-ali-center primary-c">
									<u-icon name="plus" size="22" color="#fff"></u-icon>
								</view>
							</d-number-box>
						</view>
					</view>


				</view>
			</scroll-view>
			<view class="add">
				<u-button :throttle-time="0" :custom-style="{ backgroundColor:'#6ACDBB',color:'#fff' }" shape="circle"
					@click="(type==2||type==4)&&!is_next?next():add()" :loading="loading">
					{{(type==2||type==4)&&!is_next?'下一步':'添加到处方'}}
				</u-button>
			</view>
		</u-popup>
		<u-picker cancel-color="#6ACDBB" confirm-text="确定" :safe-area-inset-bottom="true" v-model="pickerShow"
			@confirm="confirm" mode="selector" :default-selector="[0]" range-key="name" :range="range[key]"
			@cancel="key='';pickerShow=false" :mask-close-able="false" :z-index="10079"></u-picker>

	</view>
</template>

<script>
	import mixin from '../mixin/mixin.js';
	import {
		useTime,
		useType,
		useFre,
		westUnit,
		useNum,
		dosage,
		addOneChinese,
		addOneGranular
	} from '@/api/all.js'
	export default {
		name: 'add-setUsage',
		mixins: [mixin],
		props: {
			is_set: {
				type: Boolean,
				default: false
			},
			idx: {
				type: [Number, String],
				default: 0
			},
			info: {
				type: [Object, Array],
				default: () => {
					return {}
				}
			},
			type: {
				type: Number,
				default: 0
			},
			recipes: {
				type: [Array],
				default: () => {
					return [{
						id: 0,
						name: '煎煮'
					}, {
						id: 1,
						name: '外配'
					}]
				}
			},
			recipe: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				navbarHeight: 0,
				cm_id: [],
				is_next: false,
				pickerShow: false,
				obj: JSON.parse(JSON.stringify(this.info)),
				addRecipe: this.recipe,
				show: true,
				canvas: '',
				loading: false,
				key: '',
				range: {
					time: [],
					dosage: [],
					frequency: [],
					usage: [],
					describe: [],
					nums: []
				},
				see_rate: uni.getStorageSync('see_rate')
			}
		},
		created() {
			this.navbarHeight = this.$navbarHeight
			this.useTime()
			this.useType()
			if (this.type == 1) {
				this.useFre()
				this.westUnit()
			} else {
				this.useNum()
				this.dosage()
			}
		},
		computed: {

		},
		methods: {
			getRate() {
				return ((Number((this.obj.price - this.obj.buy_price) / this.obj.buy_price)).toFixed(2)) * 100
			},
			next() {
				this.cm_id = new Array(this.obj.length)
				let grammage = this.obj.reduce((total, item) => {
					total += item['grammage'];
					return total
				}, 0) || 0
				if (grammage <= 0) {
					this.$toast('请设置克数');
					return
				}
				let index = 0;
				this.loading = true
				for (let i = 0; i < this.obj.length; i++) {

					this.type == 2 && addOneChinese({
						drug_id: this.obj[i]['drug_id'],
						number: this.obj[i]['grammage'],
						store_id: uni.getStorageSync('store_id') || '11001'
					}).then(res => {
						if (res.errcode == 0) {
							this.cm_id[i] = res.data[0]
							index++;
							this.is_next = index >= this.obj.length
							this.loading = !this.is_next
						} else {
							this.loading = false
							this.$toast(res.msg);
						}
					})
					this.type == 3 && addOneGranular({
						drug_id: this.obj[i]['drug_id'],
						number: this.obj[i]['grammage'],
						store_id: uni.getStorageSync('store_id') || '11001'
					}).then(res => {
						console.log(res, 'addgramm');
						if (res.errcode == 0) {
							this.cm_id[i] = res.data[0]
							index++;
							this.is_next = index >= this.obj.length
							this.loading = !this.is_next
						} else {
							this.loading = false
							this.$toast(res.msg);
						}
					})
				}
			},
			dosage() {
				dosage({
					store_id: uni.getStorageSync('store_id') || '11001'
				}).then((res) => {
					if (res.errcode == 0) {
						this.range['dosage'] = res.data.map(item => {
							return {
								...item,
								name: item.num + ""
							}
						})
						for (var i = 0; i < this.range['dosage'].length; i++) {
							if (this.range['dosage'][i].id == this.addRecipe['dosage']) {
								this.addRecipe['dosage'] = this.range['dosage'][i]
							}
						}
					}
				})
			},
			useNum() {
				useNum({
					store_id: uni.getStorageSync('store_id') || '11001'
				}).then((res) => {
					if (res.errcode == 0) {
						this.range['nums'] = res.data;
						for (var i = 0; i < res.data.length; i++) {
							if (res.data[i].id == this.addRecipe['consumption']) {
								this.addRecipe['nums'] = res.data[i]
							}
						}
					}
				})
			},
			westUnit() {
				westUnit({
					store_id: uni.getStorageSync('store_id') || '11001'
				}).then((res) => {
					if (res.errcode == 0) {
						this.range['describe'] = res.data;
						for (var i = 0; i < res.data.length; i++) {
							if (res.data[i].id == this.obj['unit_id']) {
								this.obj['describe'] = res.data[i]
							}
						}
					}
				})
			},
			useTime() {
				useTime({
					store_id: uni.getStorageSync('store_id') || '11001'
				}).then((res) => {
					if (res.errcode == 0) {
						this.range['time'] = res.data
						for (var i = 0; i < res.data.length; i++) {
							if (this.type == 1) {
								if (res.data[i].id == this.obj['time_id']) {
									!this.obj.usages && (this.obj['usages'] = {})
									this.obj['usages'][0] = res.data[i]
								}
							} else {
								if (res.data[i].id == this.addRecipe['usage']) {
									this.addRecipe['usage'] = res.data[i]
								}
							}
						}
					}
				})
			},
			useType() {
				useType({
					store_id: uni.getStorageSync('store_id') || '11001'
				}).then((res) => {
					if (res.errcode == 0) {
						this.range['usage'] = res.data
						for (var i = 0; i < res.data.length; i++) {
							if (this.type == 1) {
								if (res.data[i].id == this.obj['type_id']) {
									!this.obj.usages && (this.obj['usages'] = {})
									this.obj['usages'][1] = res.data[i]
								}
							} else {
								if (res.data[i].id == this.addRecipe['fufa_id']) {
									this.addRecipe['time'] = res.data[i]
								}
							}
						}
					}
				})
			},
			useFre() {
				useFre({
					store_id: uni.getStorageSync('store_id') || '11001'
				}).then((res) => {
					if (res.errcode == 0) {
						this.range['frequency'] = res.data
						for (var i = 0; i < res.data.length; i++) {
							if (res.data[i].id == this.obj['frequency_id']) {
								this.obj['frequency'] = res.data[i]
							}
						}
					}
				})
			},
			confirm(e) {
				switch (this.type) {
					case 1:
						if (this.key == 'time' || this.key == 'usage') {
							let i = this.key == 'time' ? 0 : 1;
							!this.obj.usages && (this.obj['usages'] = {})
							this.obj.usages[i] = this.range[this.key][e[0]];
						} else {
							this.obj[this.key] = this.range[this.key][e[0]]
						}
						break;
					case 2:
						this.addRecipe[this.key] = this.range[this.key][e[0]]
						break;
					case 3:
						this.addRecipe[this.key] = this.range[this.key][e[0]]
						break;
				}
				this.key = '';
			},
			add() {
				let obj = this.obj;
				let addRecipe = this.addRecipe;
				let data = {}
        let instruction = '';
				switch (this.type) {
					case 1:
						if (!obj['usages'] || (obj['usages'] && !obj['usages'][0] || !obj['usages'][1])) {
							this.$toast('请设置用法');
							return
						}
						if (!obj['describe']) {
							this.$toast('请设置每次');
							return
						}
						if (!obj['frequency']) {
							this.$toast('请设置频率');
							return
						}
						instruction = obj.usages['0']['name'] + obj.usages['1']['name'] + '，' + obj['frequency'][
							'name'
						] + '，每次' + (obj['count'] || 1)
						instruction += obj['describe']['name']
						data = {
							store_id: uni.getStorageSync('store_id') || 11001,
							content: obj['id'],
							number: obj['number'] || 1,
							usage: instruction,
							instruction,
							time_id: obj.usages['0']['id'],
							type_id: obj.usages['1']['id'],
							grain_number: obj['count'] || 1,
							count: obj['count'] || 1,
							available_days: 5,
							f_id: obj['frequency']['id'],
							wu_id: obj['describe']['id']
						}
						this.is_set ? this.setDrug({
							...data,
							pId: obj.pId
						}, obj) : this.addDrug(data, obj)
						break;
					case 2:
						if (!addRecipe.dosage) {
							this.$toast('请设置剂数');
							return
						}
						if (!addRecipe.nums) {
							this.$toast('请设置用量');
							return
						}
						if (!addRecipe.usage) {
							this.$toast('请设置用法');
							return
						}
						if (!addRecipe.time) {
							this.$toast('请设置服法');
							return
						}
						if (!addRecipe.remark) {
							this.$toast('请输入备注');
							return
						}
						let gram = obj.reduce((g, item) => {
							g += item['grammage']
							return g
						}, 0)
						data = {
							store_id: uni.getStorageSync('store_id') || 11001,
							deployment: addRecipe.deploy ? 2 : 1,
							dosage: addRecipe.dosage['id'],
							consumption: addRecipe.nums['id'],
							usage: addRecipe.usage['id'],
							fufa_id: addRecipe.time['id'],
							remark: addRecipe.remark,
							is_deepfry: addRecipe.frying ? 1 : 0,
							cm_id: this.cm_id.join(),
							directions: addRecipe.deploy ? '外配' : '煎煮' + addRecipe.nums['name'] + '，共' + addRecipe
								.dosage['name'] + '剂' + Number(addRecipe.dosage['name']) * gram + '克，每剂' + obj.length +
								'味' + gram + '克'
						}
						this.is_set ? this.setDrug({
							...data,
							pId: addRecipe.pId
						}, obj) : this.addDrug(data, obj, this.idx)
						break;
          case 3:
            // instruction = obj.usages['0']['name'] + obj.usages['1']['name'] + '，' + obj['frequency'][
            //     'name'
            //     ] + '，每次' + (obj['count'] || 1)
            // instruction += obj['describe']['name']
            data = {
              store_id: uni.getStorageSync('store_id') || 11001,
              content: obj['id'],
              number: obj['number'] || 1,
              usage: instruction,
              instruction,
              time_id: obj.usages === undefined? '' : obj.usages['0']['id'],
              type_id: obj.usages === undefined? '' : obj.usages['1']['id'],
              grain_number: obj['count'] || 1,
              count: obj['count'] || 1,
              available_days: 5,
              f_id: obj['frequency'] !== undefined? obj['frequency']['id']: '',
              wu_id: obj['describe'] !== undefined? obj['describe']['id']: ''
            }
            // TODO 这里写加入逻辑
            this.is_set ? this.setDrug({
              ...data,
              pId: obj.pId
            }, obj) : this.addDrug(data, obj)
            break;
					case 4:
						if (!addRecipe.dosage) {
							this.$toast('请设置剂数');
							return
						}
						if (!addRecipe.nums) {
							this.$toast('请设置用量');
							return
						}
						if (!addRecipe.usage) {
							this.$toast('请设置用法');
							return
						}
						if (!addRecipe.time) {
							this.$toast('请设置服法');
							return
						}
						if (!addRecipe.remark) {
							this.$toast('请输入备注');
							return
						}
						let gram2 = obj.reduce((g, item) => {
							g += item['grammage']
							return g
						}, 0)
						data = {
							store_id: uni.getStorageSync('store_id') || 11001,
							deployment: addRecipe.deploy ? 2 : 1,
							dosage: addRecipe.dosage['id'],
							consumption: addRecipe.nums['id'],
							usage: addRecipe.usage['id'],
							fufa_id: addRecipe.time['id'],
							remark: addRecipe.remark,
							is_deepfry: addRecipe.frying ? 1 : 0,
							gm_id: this.cm_id.join(),
							directions: addRecipe.deploy ? '外配' : '煎煮' + addRecipe.nums['name'] + '，共' + addRecipe
								.dosage['name'] + '剂' + Number(addRecipe.dosage['name']) * gram2 + '克，每剂' + obj
								.length + '味' + gram2 + '克'
						}
						this.is_set ? this.setDrug({
							...data,
							pId: addRecipe.pId
						}, obj) : this.addDrug(data, obj, this.idx)
						break;

				}
			},

			// 西药规格
			// 说明书
			previewImage(url) {
				// console.log(url,'aaaaaaaaaaaaa');
				let img=url.split(',')
				uni.previewImage({
					indicator: "none",
					current: img,
					urls: img,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		height: 100vh;
		width: 100vw;
		overflow: scroll;
		padding-bottom: 100rpx;
		padding-top: 40rpx;
	}

	.rp {
		grid-column-gap: 64rpx;
		grid-row-gap: 16rpx;
	}

	.add {
		position: absolute;
		width: 100vw;
		box-sizing: border-box;
		bottom: 0;
		left: 0;
		background-color: #fff;
		height: 110rpx;
		padding: 0 32rpx;
	}

	.minus {
		width: 64rpx;
		height: 64rpx;
		background-color: #F9FAFB;
		border-top-left-radius: 8rpx;
		border-bottom-left-radius: 8rpx;
	}

	.plus {
		width: 64rpx;
		height: 64rpx;
		background-color: #2979FF;
		border-top-right-radius: 8rpx;
		border-bottom-right-radius: 8rpx;
	}

	.flexBox {
		display: flex;
		align-items: center;
		font-size: 28rpx !important;
		flex-wrap: wrap;

		.item {
			display: flex;
			align-items: flex-start;
			margin-right: 100rpx;
			margin-bottom: 16rpx;
		}

		.label {
			color: rgba(0, 0, 0, 0.45)
		}

		.val {
			flex: 1;
			color: rgba(0, 0, 0, 0.85)
		}
	}

	.iBox {
		position: relative;
		padding-right: 100rpx;

		.icon {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			right: 40rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
</style>
