<template>
	<view class="safe-area-inset-bottom gray">
		<view class="search">
			<u-search :height="66" :inputStyle="{height:'66rpx'}" @custom="keyword=''" :show-action="false"
				:placeholder="!currentId?'请输入你想要的商品':'请继续增加你的商品'" v-model="keyword" @input="getDrugList"></u-search>
		</view>
		<scroll-view scroll-y="true" style="height: calc(100vh - env(safe-area-inset-bottom) - 98rpx - 40px);">
			<block>
				<template v-if="step == 1">
					<view v-for="(item, i) in list[0]" :key="item.id"
						class="white flex-row flex-jus-sp white p-32 flex-ali-center" style="width: 100vw;">
						<view class="flex-col flex-1">
							<view class="flex-row flex-jus-sp flex-ali-center">
								<d-text :text="item.drug_name||item.name" className="color0 bold fz28"></d-text>
								<text v-if="see_rate==1" style="font-weight: 400;">{{getRate(item)}}%</text>
								<view class="flex-row flex-ali-end flexAgCen" v-if="item.price">
									<block>
										<d-text :text="item.price" className="fs-3 error-c" :bold="true"></d-text>
										<!-- <d-text class="fz24 color9" :text="item.buy_price"></d-text> -->
										<d-text class="fz24 color9" :text="'/'+item.unit.name"></d-text>
									</block>
									<view v-if="mInfo.findIndex(row => item.id == row.id) > -1"
										@click="handleEdit(item, 1)" class="btn ml64">
										编辑药品
									</view>
									<view v-else @click="handleAdd(item)" class="btn ml64">
										添加商品
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				<view class="step2 white" v-else-if="step == 2">
					<view class="flex-row flex-jus-sp flex-ali-center">
						<d-text :text="currentInfo.drug_name||currentInfo.name" className="color0 bold fz28"></d-text>
						<view class="inputBox">
							<d-text text="剂量：" className="fs-3 color9"></d-text>
							<u-input placeholder=" " v-model="currentInfo.number" @input="changeNum" :clearable="false"
								type="number" />
							<d-text :text="currentInfo.unit.name" className="fs-3 color9"></d-text>
						</view>
						<d-text :text="currentInfo.priceNum?'¥' + currentInfo.priceNum:'¥' + currentInfo.price" className="fs-3 error-c" :bold="true"></d-text>
					</view>
					<view class="bottom2 flex-row flex-jus-sp flex-ali-center">
						<picker v-model="currentInfo.order" @change="changeOrder" :range="useWay">
							<view class="order">
								{{ currentInfo.order==0?'煎法': useWay[currentInfo.order]}}
								<!-- <view class="cir"></view> -->
							</view>
						</picker>
						<view class="flex-row flex-jus-sp flex-ali-center">
							<view @click="handleDel(currentInfo)" class="btn del">
								删除
							</view>
							<view @click="handleSave(currentInfo)" class="btn save">
								确认
							</view>
						</view>
					</view>
				</view>
				<view class="step3 white" v-else-if="step == 3">
					<view class="info mb50">
						<view class="mItem" v-for="(item, index) in mInfo" :key="index">
							<view class="top">
								<d-text :text="item.drug_name||item.name" className="color0 bold fz28"></d-text>
								<view class="mlr32 flex-row">
									<d-text :text="item.number" className="content-c fs-3"></d-text>
									<!-- <d-text text=" g" className="color6 fs-3"></d-text> -->
									<d-text :text="''+(item.unit)?item.unit.name:''" className="color6 fs-3"></d-text>
								</view>
								<view @click="handleEdit(item)" class="btnText">编辑</view>
							</view>
							<view class="flex-row flex-jus-sp flex-ali-center">
								<d-text className="content-c fz24 color" :text="'￥'+([item.number]*[item.price]).toFixed(4)"></d-text>
								<d-text v-if="item.order != 0" :text="useWay[item.order]" className="content-c fz24"></d-text>
							</view>
						</view>
					</view>
					<view class="row">
						<d-text text="用 量：" className="color9 fs-3"></d-text>
						<u-number-box v-model="mParms.dosage"></u-number-box>
						<d-text text="天" className="color9 fs-3 ml16"></d-text>
						<u-input disabled class="input" placeholder="剂数" v-model="mParms.dosage" :clearable="false"
							type="number" />
						<d-text text="剂" className="color9 fs-3"></d-text>
					</view>
					<view class="row">
						<d-text text="频 次：" className="color9 fs-3"></d-text>
						<u-number-box v-model="mParms.consumption"></u-number-box>
						<d-text text="次/天" className="color9 fs-3 ml16"></d-text>
					</view>
					<view class="row">
						<u-radio-group v-model="mParms.process_rule_type" size="44rpx" active-color="#6ACDBB">
							<u-radio :name="0" label-size="30rpx">
								自调剂
							</u-radio>
							<u-radio :name="1" label-size="30rpx">
								委托调剂
							</u-radio>
						</u-radio-group>

						</view>
						<view v-if="mParms.process_rule_type === 0">
							<view class="row">
								<d-text text="包法：" className="color9 fs-3"></d-text>
								<picker v-model="mParms.process_rule_id1" @change="changePackageMethod" range-key="name" :range="package_method">
									<view class="order">
										{{ mParms.process_rule_id1 !== '' ? getPackageMethodName() : '选择包法' }}
									</view>
								</picker>
							</view>
						</view>
						<view v-if="mParms.process_rule_type === 1">
							<view class="row">
								<d-text text="委托调剂：" className="color9 fs-3"></d-text>
								<picker v-model="mParms.process_rule_id1" @change="changeRuleId1" range-key="name" :range="ruleList">
									<view class="order">
										{{ mParms.process_rule_id1 !== '' ? ruleList[mParms.process_rule_id1].name : '选择剂型' }}
									</view>
								</picker>
								<d-text className="m-r-16"></d-text>
								<picker v-model="mParms.process_rule_id" @change="changeRuleId" range-key="name" :range="ruleSecList">
									<view class="order">
										{{ mParms.process_rule_id !== '' ? ruleSecList[mParms.process_rule_id].name : '选择规格' }}
									</view>
								</picker>
							</view>
							<view class="row">
								<d-text text="备注：" className="color9 fs-3"></d-text>
								<picker v-model="mParms.process_rule_note" @change="changeRuleNote" range-key="note" :range="ruleRemarkList">
									<view class="order">
										{{ mParms.process_rule_note !== '' ? ruleRemarkList[mParms.process_rule_note].note : '请选择备注' }}
									</view>
								</picker>
							</view>
						</view>
					<view class="flex-row p-2 flex-jus-end">
						<d-text v-if="getProcessPrice" text="加工费:" className="m-r-16 tips-c"></d-text><d-text v-if="getProcessPrice" className="m-r-16" :text="`￥${getProcessPrice}`" color="#F44336" :bold="true"></d-text>
						<d-text text="商品计费:" className="m-r-16 tips-c"></d-text><d-text :text="`￥${getSum}`" color="#F44336" :bold="true"></d-text>
					</view>
				</view>
				<!-- <view class="bottom flex-row flex-jus-sp flex-ali-center" style="border-bottom: 2rpx solid #F2F3F5;">
					<d-text :text="`已选（${getSelect}）`" className="fs-32 content-c" @click="affirmShow=true"></d-text>
					<u-button :throttle-time="0" type="primary" :custom-style="{heigth:'86rpx',width:'478rpx'}"
						shape="circle" @click="show=true;info=getList;" :disabled="!getSelect">
						下一步
					</u-button>
				</view> -->
				<view v-if="step == 3" class="bottom flex-row flex-jus-sp flex-ali-center"
					style="border-bottom: 2rpx solid #F2F3F5;">
					<u-button :throttle-time="0"
						:custom-style="{heigth:'86rpx', width: '100%',backgroundColor:'#6ACDBB',color:'#fff' }"
						shape="circle" @click="handleSubmit">
						提交处方
					</u-button>
				</view>
			</block>
			<view class="flex-row flex-jus-center box"
				v-if="step == 1 && !loading&&((type==2||type==3)&&list[0].length==0||type==1&&setList.length==0)">
				<d-empty :text="keyword?'换个名称试试':current==1?'去收藏药品吧！':'暂无药品'" mode="search"></d-empty>
			</view>
		</scroll-view>
		<add-set-usage :info="info" @close="show=false"
			@add="index!=-1&&$set(list,index,$event);index=-1;show=false;type==1?drugList(current):$go(1, 4);recipe={}"
			:type="type" v-if="type>0&&show" :idx='idx' :recipe="recipe" :is_set="recipe['pId']?true:false">
		</add-set-usage>
		<u-popup v-model="affirmShow" mode="bottom" :closeable="true" @close="$emit('close')" close-icon-pos='top-right'
			:safe-area-inset-bottom="true" :mask-close-able="false">
			<view class="flex-row flex-jus-center flex-ali-center m-t-3">
				<d-text text="已选择" className="fs-32 tips-c"></d-text>
			</view>
			<view class="m-t-4 p-row-52 flex-col">
				<view class="bottom-border p-col-32 flex-row flex-jus-sp flex-ali-center"
					v-for="(item,index) in getList" :key="index">
					<d-text :text="item.drug_name" className="fs-32 content-c"></d-text>
					<d-text text="移除" className="fs-32 primary-c" @click="setChecked(item.id)"></d-text>
				</view>
			</view>
			<view class="m-t-4 m-b-16">
				<u-button :throttle-time="0"
					:custom-style="{heigth:'86rpx',width:'646rpx',backgroundColor:'#6ACDBB',color:'#fff' }"
					shape="circle" @click="affirmShow=false" :disabled="!getSelect">
					确定
				</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import mixin from './mixin/mixin.js';
	import addSetUsage from './components/add-setUsage.vue'
	import {
		chineseList,
		chineseCommon,
		granularList,
		addOneChinese,
		addRecipe,
		addOneGranular,
		addGranularRecipe,
		getUseWay,
		getRuleList,
		getRuleReark
	} from '@/api/all.js'
	export default {
		components: {
			addSetUsage
		},
		mixins: [mixin],
		data() {
			return {
				isFresh: false,
				ruleRemarkList: [],
				ruleList: [],
        package_method: [
            {
              id: 1,
              name: '味包'
            },
            {
              id: 2,
              name: '剂包'
            },
        ],
				ruleSecList: [],
				priceChines: '',
				mParms: {
					consumption: 2,
					volume: 50,
					dosage: 1,
					is_deepfry: 1,
					deployment:2,
					process_rule_id1: '',
					process_rule_id: '',
					process_rule_note: ''
				}, // 存储用量 频次 剂数
				mInfo: [], // 存储药品信息
				currentId: '', // 当前正在操作的药品id
				currentInfo: {}, // 当前正在操作的药品信息
				step: 1, // 1选择商品 2添加了商品 单独设置这个商品的信息 3展示选择好的商品列表
				from: 1, // 处理这条数据是从step1还是step2
				loading: true,
				recipe: {},
				affirmShow: false,
				index: -1,
				info: {},
				show: false,
				tabs: [{
					id: 0,
					name: '全部药品'
				}, {
					id: 1,
					name: '我的常用药'
				}],
				list: {
					0: [],
					1: [],
				},
				keyword: '',
				current: 0,
				type: 0,
				searchList: {
					0: [],
					1: [],
				},
				idx: 0,
				useWay: [],
				see_rate:uni.getStorageSync('see_rate'),
        packageMethodSelect: ''
			}
		},
		computed: {
			getSum() {
				let prices = 0;
				let arr = this.mInfo
				let nub=this.mParms.dosage

				if (arr) {
					prices = arr.reduce((total, item) => {
						total += Number(item.price * item.number)
						return total
					}, 0);
					prices = prices > 0 ? (prices*nub).toFixed(4) : prices
				}
				console.log(3333333)
				return prices
			},
			getProcessPrice() {
				const { process_rule_id, process_rule_type } = this.mParms
				console.log(process_rule_type, 'process_rule_type')
				if (process_rule_id && process_rule_type == 1) {
					const current = this.ruleSecList[process_rule_id]
					if (current.calc_method == 1) {
						const m = current.price
						this.mParms.process_rule_price = m
						return m
					}
					if (current.calc_method == 2 ) {
						const m = (current.price * this.mParms.dosage).toFixed(4)
						this.mParms.process_rule_price = m
						return m
					}
					if (current.calc_method == 3) {
						let g = 0
						this.mInfo.forEach(row => {
							g+= Number(row.number)
						})
						const m = (current.price * g * this.mParms.dosage).toFixed(4)
						this.mParms.process_rule_price = m
						return m
					}
				} else {
					this.mParms.process_rule_price = 0
					return 0
				}
			},
			setList() {
				this.getDrug();
				let list = this.list[this.current].length > 0 ? this.list[this.current] : [];
				let arr = [];
				this.type == 2 && (arr = this.chineses)
				this.type == 3 && (arr = this.granular)
				// console.log(arr,'this.granular')
				list = list.map((item) => {
					let it = arr.find(it => it['id'] == item.id) || {}
					const obj = {
						...item,
						...it,
						is_add: it['id'] ? true : false,
						stock: item['stock'] - (it['number'] || 0)
					}
					return obj
				});
				return list
			},
			getList() {
				return this.list[this.current].filter(item => item.checked).map(item => {
					return {
						...item,
						grammage: item.grammage || 0
					}
				})
			},
			getSelect() {
				return this.list[this.current].filter(item => item.checked).length
			}
		},
		async onLoad(op) {
			// console.log(op['current'], '22')
			this.current = op['current'] || 0;
			this.type = op['type'] || 0;
			this.idx = op['index'] || 0;
			this.recipe = op['recipe'] ? JSON.parse(op['recipe']) : {}
			// uni.showLoading({
			// 	title: '加载中...'
			// })
			// this.drugList();
			this.getDrug();
			const res = await getRuleList({
				pid: 0,
				store_id: uni.getStorageSync('store_id') || 11001,
			})
			this.ruleList = res.data
			const mInfo = uni.getStorageSync('mInfo')
			if (mInfo) {
				this.mInfo = JSON.parse(mInfo)
				this.mParms = JSON.parse(uni.getStorageSync('mParms'))
				this.step = 3
				if(this.mParms.process_rule_type) {
					await this.getRuleList(this.ruleList[this.mParms.process_rule_id1].id)
					const res = await getRuleReark({
						rule_id: this.ruleSecList[this.mParms.process_rule_id].id,
						store_id: uni.getStorageSync('store_id') || 11001,
					})
					this.ruleRemarkList = res.data
				}
			}
			this.useWay = JSON.parse(uni.getStorageSync('useWay'))

		},
		methods: {
			async getRuleList(pid = 0) {
				const res = await getRuleList({
					pid,
					store_id: uni.getStorageSync('store_id') || 11001,
				})
				if (pid) {
					this.ruleSecList = res.data
				} else {
					this.ruleList = res.data
				}
				this.isFresh = !this.isFresh
			},
			async changeRuleId(e) {
				console.log(this.ruleSecList[e.detail.value], 'this.ruleSecList[e.detail.value]')
				this.mParms = {
					...this.mParms,
					process_rule_id: e.detail.value
				}
				const res = await getRuleReark({
					rule_id: this.ruleSecList[e.detail.value].id,
					store_id: uni.getStorageSync('store_id') || 11001,
				})
				this.ruleRemarkList = res.data
				this.isFresh = !this.isFresh
			},
			changeRuleId1(e) {
				this.mParms = {
					...this.mParms,
					process_rule_id: '',
					process_rule_note: '',
					process_rule_id1: e.detail.value
				}
				this.getRuleList(this.ruleList[e.detail.value].id)
			},
      getPackageMethodName() {
        if (this.mParms.process_rule_id1) {
          return this.package_method.find(item => item.id == this.mParms.process_rule_id1).name
        }
      },
			changePackageMethod(e) {
        this.mParms.process_rule_id1 = this.package_method[e.detail.value].id
        this.packageMethodSelect = e.detail.value
			},
			changeRuleNote(e) {
				this.mParms = {
					...this.mParms,
					process_rule_note: e.detail.value
				}
			},
			getRate(item) {
				return (((Number((item.price - item.buy_price) / item.price)).toFixed(4)) * 100).toFixed(2)
			},
			handleEdit(info, type) {
				if (type) {
					const item = this.mInfo.find(row => row.id === info.id)
					this.currentId = item.id
					this.currentInfo = item
				} else {
					this.currentId = info.id
					this.currentInfo = info
				}
				this.step = 2
				this.from = 3
			},
			handleSubmit() {
				const {
					mInfo,
					mParms
				} = this
				// console.log(mInfo, 'mInfo')
				const cm_id = mInfo.map(item => item.cm_id)
				if (!mParms.dosage) {
					return this.$toast('请输入剂数')
				}
				if (!mParms.consumption) {
					return this.$toast('请输入频次')
				}
				if (mParms.process_rule_type == 1) {
					if (mParms.process_rule_id === '') {
						return this.$toast('请选择委托调剂信息')
					}
					if (mParms.process_rule_note === '') {
						return this.$toast('请选择委托调剂备注')
					}
				} else {
          if (mParms.process_rule_id1 === '') {
            return this.$toast('请选择包法')
          }
        }
				// if (!mParms.deployment) {
				// 	uni.showModal({
				// 		title: '提示信息',
				// 		content: '您还没有选择代煎或浓煎，暂时无法提交处方单。',
				// 		showCancel: false
				// 	})
				// 	return
				// }

				// volume
				// if (!mParms.volume ||mParms.volume>280||mParms.volume<50 ) {
				// 	uni.showModal({
				// 		title: '提示信息',
				// 		content: '浓煎为50~280ml，暂时无法提交处方单。',
				// 		showCancel: false
				// 	})
				// 	return
				// }
				// 中药
				const api = this.type == 3 ? addGranularRecipe : addRecipe
				let gram = mInfo.reduce((g, item) => {
					g += Number(item.number)
					return g
				}, 0)
				mParms.directions = (mParms.process_rule_type ? '代煎' : '外配') + '，共' + mParms
					.dosage + '剂' + '，每剂' + mInfo.length + '味'
				api({
					...mParms,
					process_rule_id: mParms.process_rule_type == 0 ? 0 : this.ruleSecList[mParms.process_rule_id].id,
					process_rule_note: mParms.process_rule_note ? this.ruleRemarkList[mParms.process_rule_note].note: '',
					cm_id: String(cm_id),
					gm_id: String(cm_id),
					store_id: uni.getStorageSync('store_id') || 11001,
				}).then(res => {
					if (res.errcode == 0) {
						// 缓存信息在本地
						uni.setStorageSync('mInfo', JSON.stringify(mInfo))
						uni.setStorageSync('mParms', JSON.stringify(mParms))
						uni.setStorageSync('cr_ids', res.data[0])
						uni.navigateBack({
							delta: 1
						})
					} else {
						this.$toast(res.msg);
					}
				})
			},
			changeOrder(e) {
				const order = e.detail.value
				this.currentInfo = {
					...this.currentInfo,
					order
				}

				this.priceChines = this.currentInfo.price
			},
			handleDel() {
				uni.showModal({
					title: '提示信息',
					content: '是否删除',
					showCancel: true,
					success: ({
						confirm,
						cancel
					}) => {
						if (confirm) {
							this.keyword = ''
							this.list[0] = []
							this.mInfo = this.mInfo.filter(item => item.id != this.currentId)
							if (this.from == 3 && this.mInfo.length) {
								this.step = 3
							} else {
								this.step = 1
							}
						}
					}
				})
			},
			handleSave() {
				const {
					currentInfo
				} = this
				if (!currentInfo.number) {
					uni.showToast({
						title: '请输入剂量',
						icon: 'none',
						mask: true
					})
					return
				}
				// platform_id platform_store_id
				// 中药添加
				const api = this.type == 3 ? addOneGranular : addOneChinese
				api({
					drug_id: this.currentId,
					number: this.currentInfo.number,
					order: Number(this.currentInfo.order),
					store_id: uni.getStorageSync('store_id') || 11001,
				}).then(res => {
					if (res.errcode == 0) {
						this.currentInfo = {
							...this.currentInfo,
							cm_id: res.data[0]
						}
						this.keyword = ''
						this.list[this.current] = []
						this.step = 3
						this.mInfo = this.mInfo.map(item => {
							console.log(item, this.currentInfo, 'dd')
							if (item.id == this.currentInfo.id) {
								return {
									...item,
									...this.currentInfo
								}
							} else {
								return item
							}
						})
					} else {
						this.loading = false
						this.$toast(res.msg);
					}
				})
			},
			// price: this.currentInfo.number ? this.currentInfo.price * this.currentInfo.number : this.currentInfo.price
			changeNum() {
				this.currentInfo = {
					...this.currentInfo,
					priceNum: this.currentInfo.number ? (Number(this.currentInfo.price) * Number(this
						.currentInfo.number)).toFixed(4) : Number(this.currentInfo.price)
				}

				// this.priceChines = this.currentInfo.number > 1 ? (Number(this.currentInfo.price) * Number(this.currentInfo.number)).toFixed(2) : Number(this.currentInfo.price)
			},
			// 添加一个药品
			handleAdd(item) {
				console.log(item, 'add');
				this.step = 2
				this.currentId = item.id
				this.currentInfo = {
					...item,
					order: 0,
					unit:item.unit,
					price: item.price,
					number:''
				}
				this.mInfo.push(item)

				this.priceChines = ''
			},
			changeCheckbox(e, cur) {
				this.list[cur] = this.list[cur].map(item => {
					if (item.id === e.id) {
						return {
							...item,
							checked: !item.checked
						}
					}
					return item
				})
			},
			previewImage(url) {
				uni.previewImage({
					indicator: "none",
					current: url,
					urls: [url],
				});
			},
			setChecked(id) {
				this.list[this.current] = this.list[this.current].map(item => {
					if (item.id == id) {
						item.checked = !item.checked
					}
					return item
				})
			},
			getDrugList() {
				if (!this.keyword) {
					this.list[0] = []
					if (this.mInfo.length) {
						this.step = 3
					}
					return
				}
				uni.showLoading({
					title: '搜索中...'
				})
				this.from = this.step
				if (this.step == 3) {
					this.list[0] = []
				}
				this.step = 1
				this.loading = true
				uni.$u.debounce(this.drugList, 1000);
			},
			// 药品列表
			async drugList(current = 0) {
				this.list[this.current] = []
				let res = {}
				if (current == 0) {
					// 中药列表
					this.type == 2 && (res = await chineseList({
						name: this.keyword,
						store_id: uni.getStorageSync('store_id') || 11001,
					}))
					// 颗粒配方列表
					this.type == 3 && (res = await granularList({
						name: this.keyword,
						store_id: uni.getStorageSync('store_id') || 11001,
					}))
					// console.log(res,'0000')
				} else {
					// 常用药-中药
					this.type == 2 && (res = await chineseCommon({
						store_id: uni.getStorageSync('store_id') || 11001,
					}))
				}
				if (res.errcode == 0) {
					if (this.type == 2) {
						this.list[this.current] = res.data
						for (var i = 0; i < this.list[this.current].length; i++) {
							let id = this.list[this.current][i]['id']
							let chinese = this.chineses[this.idx]['item'].find(it => it['id'] == id) || {}
							if (id == chinese['id']) {
								this.list[this.current][i] = chinese
							}
						}
					}
					if (this.type == 3) {
						this.list[this.current] = res.data
						for (var i = 0; i < this.list[this.current].length; i++) {
							let id = this.list[this.current][i]['id']
							let granular = this.granular[this.idx]['item'].find(it => it['id'] == id) || {}
							if (id == granular['id']) {
								this.list[this.current][i] = granular
							}
						}
					}

					if (this.type == 1) {
						let collect = Array.isArray(res.data) ? res.data : res.data.collect || res.data.collected;
						collect = (collect || []).map(item => {
							return {
								...item,
								is_collect: true
							}
						})
						let no_collect = res.data.no_collect || []
						let uncollect = res.data.uncollect || []
						uncollect = [...uncollect, ...no_collect].map(item => {
							return {
								...item,
								is_collect: false
							}
						})
						this.list[this.current] = collect.concat(this.current == 0 ? uncollect : [])
					}
					this.$nextTick(() => {
						this.loading = false
						uni.hideLoading()
					})
				} else {
					this.loading = false
					this.$toast(res.msg)
				}
			},
			clickHandler(type, data, number) {
				let item = JSON.parse(JSON.stringify(data));
				item['number'] = number || item['number']
				if (type === 'minus' && item['number'] == 1) {
					uni.showModal({
						title: '提示',
						content: '是否确认从处方中删除该药品',
						success: (res) => {
							if (res.confirm) {
								item['number']--;
								this.$set(item, 'number', item['number'])
							}
						}
					});
					this.$set(item, 'number', item['number'])
					return
				}
				item['number'] != 0 && type === 'minus' && item['number']--;
				item['number'] < item.stock && type === 'plus' && item['number']++
				this.setDrug(item);
			}
		}
	}
</script>
<style lang="scss" scoped>
	.gray {
		background: #f8f8f8;
	}

	.badge-button {
		padding: 4rpx 6rpx;
		background-color: $u-type-error;
		color: #fff;
		border-radius: 10rpx;
		font-size: 22rpx;
		line-height: 1;
	}

	.fz30 {
		font-size: 30rpx !important;
	}

	.fz24 {
		font-size: 24rpx !important;
	}

	.color0 {
		color: #000 !important;
	}

	.bold {
		font-weight: bold !important;
	}

	.ml16 {
		margin-left: 16px;
	}

	.mb50 {
		margin-bottom: 50rpx;
	}

	.step3 {
		padding: 36rpx 40rpx;
		padding-bottom: 1rpx;

		.info {
			background: #FAFAFA;
			padding: 24rpx;
			padding-bottom: 1px;
			display: flex;
			align-items: flex-start;
			flex-wrap: wrap;

			.mItem {
				margin-right: 36rpx;
				margin-bottom: 20rpx;

				.top {
					display: flex;
					align-items: center;
				}
			}
		}

		.row {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;

			.input {
				width: 70rpx;
				flex: none;
				background-color: transparent;
				text-align: center !important;

				input {
					text-align: center !important;
				}
			}
		}
	}

	.btnText {
		color: #6ACDBB;
		font-size: 28rpx;
	}

	.mlr32 {
		padding: 0 32rpx;
	}

	.inputBox {
		display: flex;
		align-items: center;
		width: 210rpx;

		&.inputBox2 {
			width: auto;
		}
		&.inputBox3 {
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}

		/deep/ .u-input__input {
			min-height: auto !important;
		}

		/deep/ .u-input {
			flex: auto;
			width: 90rpx;
			/* height: 50rpx;
			min-height: 50rpx; */
			border-bottom: 1rpx solid #eee;

			.uni-input-input {
				text-align: center;
				font-size: 32rpx;
			}
		}
	}

	.step2 {
		padding: 36rpx 40rpx;

		.order {
			width: 120rpx;
			height: 56rpx;
			line-height: 56rpx;
			background: #F9FAFB;
			text-align: center;
			border-radius: 12rpx;
			flex: 1;

			.cir {
				border: 13rpx solid transparent;
				border-top: 13rpx solid #ccc;
				margin-left: 12rpx;
			}
		}

		.bottom2 {
			margin-top: 20rpx;
		}

		.del {
			border: 2rpx solid rgba(0, 0, 0, .2);
			color: #999;
			background: transparent;
			margin-right: 40rpx;
		}

	}

	.btn {
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		padding: 0 40rpx;
		background: #6ACDBB;
		border: 2rpx solid #6ACDBB;
		border-radius: 34rpx;
		color: #fff;
		font-weight: bold;
		font-size: 28rpx;
	}

	.ml64 {
		margin-left: 64rpx;
	}

	.fz24 {
		font-size: 24rpx;
	}

	.color9 {
		color: #999;
	}

	.flexAgCen {
		display: flex;
		align-items: center;
	}
</style>
<style lang="scss">
	.search {
		padding: 16rpx 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;
	}

	.input {
		width: 122rpx;
		height: 64rpx;
		background-color: #F3F4F5;
	}

	.color0 {
		color: #000 !important;
	}

	.color {
		color: #FC3636 !important;
	}

	.bold {
		font-weight: bold !important;
	}

	.fz28 {
		font-size: 28rpx !important;
	}

	.bottom {
		position: fixed;
		width: 100vw;
		box-sizing: border-box;
		bottom: env(safe-area-inset-bottom);
		left: 0;
		background-color: #fff;
		padding: 12rpx 32rpx;

		/deep/ u-button {
			width: 100%;
		}
	}

	.text {
		width: 122rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #A7ABB0;
		text-align-last: justify;
	}
</style>
