<template>
	<view class="safe-area-inset-bottom">
		<u-navbar class="navbar" :is-back="true" title="处方详情" :custom-back="customBack" title-color="#000">
		</u-navbar>
		<!-- <view class="navbar" :style="{ height: statusBarHeight+navbarHeight + 'px' }" :is-back="true">
			<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="text-align-cen" :style="{ height:navbarHeight + 'px' ,lineHeight: navbarHeight + 'px'}">
				处方详情
			</view>
		</view> -->
		<view class="tabs flex p-32 flex-ali-center flex-jus-sp" style="overflow-x: auto">
			<u-button :throttle-time="0" :plain="true" :type="tabsActive==index?'success':'default'"
				v-for="(item,index) in tabs" :key="item.name" :custom-style="tabsBtnStyle" @click="swt(index)"
				:hairline="true" :hoverStayTime="0" :style="{
				display:(index==0&&identity==2)||(identity==1)?'block':'none',
				marginLeft: '10rpx',
			}">
				{{item.name}}
			</u-button>
		</view>

		<!-- 临床诊断 -->
		<view class="top white p-32 flex-col">
			<view class="top_title flex-row flex-ali-center">
				<image :src="require('@/static/image/js.png')" class="size-32"></image>
				<d-text text="诊断" className="light-c fs-32 m-l-16"></d-text>
			</view>
			<view class="m-t-16 flex flex-wrap">
				<view class="m-r-2 m-t-16" v-for="(item,i) in diagnoses" :key="item.id">
					<u-tag shape="circle" :text="item.name" bg-color="#6ACDBB" color="#fff" close-color="#fff"
						:closeable="true" @close="operate('delete',i)" />
				</view>
			</view>
			<view class="m-t-24">
				<u-input disabled placeholder="请输入疾病" :custom-style="illnessStyle" @click="openIllSearch" />
				<!-- <u-input v-model="illness" placeholder="请输入疾病" :custom-style="illnessStyle" @input="getIllness" /> -->
			</view>
		</view>

    <!-- :style="[scrollStyle]"-->
		<view :style="[scrollStyle]">
			<!-- 西药 -->
			<view class="m-t-2 b-r-8 white p-32 flex-col" v-if="tabsActive==0">
				<view class="flex-row flex-jus-sp flex-ali-center">
					<d-text text="R：" className="main-c fs-4" :bold="true"></d-text>
					<view class="flex-row m-l-163" style="height: 50rpx;">
						<u-button v-if="!is_common" :throttle-time="0" shape="circle" size="mini"
							:custom-style="{backgroundColor: 'transparent !important',border:'1px solid #6ACDBB',color:'#6ACDBB'}"
							plain @click="$go('common?type='+(parseInt(tabsActive)+1))" :ripple="true">常用方
						</u-button>
						<view class="m-l-16">
							<u-button :throttle-time="0" shape="circle" size="mini"
								:custom-style="{ backgroundColor:'#6ACDBB',color:'#fff' }" @click="$go('add?type=1')">
								添加商品
							</u-button>
						</view>
					</view>
				</view>
				<view class="bottom-border p-col-32" v-for="(item,index) in wests" :key="item.id">
					<view class="flex-row flex-jus-sp flex-ali-center">
						<d-text :text="`${index+1}、${item.drug_name}`" className="fs-3 content-c"></d-text>
						<d-text :text="`￥${parseFloat(item.price).toFixed(2)}`" className="error-c fs-3"></d-text>
					</view>
					<view class="flex-row flex-ali-center flex-jus-sp m-t-16">
						<view class="flex-row flex-ali-center m-t-16">
							<d-text text="规格：" color="#6C7380"></d-text>
							<d-text :text="item.specification" color="#6C7380"></d-text>
						</view>
						<view class="flex-row flex-ali-center m-t-16">
							<d-text :text="item.number+'盒'" color="#6C7380"></d-text>
						</view>
					</view>
					<view class="flex-row flex-ali-center">
						<d-text text="用法：" color="#6C7380"></d-text>
						<d-text :text="item.usage" color="#6C7380"></d-text>
					</view>
					<view class="m-t-24 flex-row flex-jus-sa btnBox">
						<view @click="changeInfo(item)" class="btn left">调整用量</view>
						<view class="btn right" @click="removeDrug(index)">删除</view>
					</view>
				</view>
				<view class="m-t-32 flex-col" v-if="wests.length>0">
					<view class="flex-jus-sp flex-row flex-ali-center">
						<d-text text="医嘱" color="#6C7380"></d-text>
						<d-text @click="showComment = true; selectComment = []" text="常用医嘱" color="#6ACDBB"></d-text>
					</view>
					<u-input v-model="entrust" placeholder="请输入" :custom-style="entrustStyle" />
				</view>
				<view class="flex-row flex-jus-center" v-if="wests.length==0">
					<d-empty @click="$go('add?type=1')"></d-empty>
				</view>
			</view>
			<!-- 中药 -->
			<block v-if="tabsActive==1">
				<view class="white b-r-8 p-32 p-b-0 m-t-2" v-for="(item,i) in chineses" :key="item.id">
					<view class="flex-row flex-jus-sp flex-ali-center">
						<view class="flex-row flex-ali-end ">
							<d-text text="R" className="main-c fs-4" :bold="true"></d-text>
							<d-text text="：" className="main-c fs-4" :bold="true"></d-text>
						</view>
						<view class="flex-row" style="height: 50rpx;">
							<u-button v-if="!is_common" :throttle-time="0" shape="circle" size="mini"
								:custom-style="{backgroundColor: 'transparent !important',border:'1px solid #6ACDBB',color:'#6ACDBB'}"
								plain @click="$go('common?type='+(parseInt(tabsActive)+1))" :ripple="true">常用方
							</u-button>
							<view class="m-l-16">
								<u-button :throttle-time="0" :custom-style="{ backgroundColor:'#6ACDBB',color:'#fff' }"
									shape="circle" size="mini" @click="goEdit">
									添加商品
								</u-button>
							</view>
						</view>
					</view>
					<view class="p-col-32" v-if="mInfo.length>0">
						<view class="label">药材：</view>
						<view class="mBox">
							<view class="grid-tem-col-2 rp">
								<view class="" v-for="(it) in mInfo" :key="it.id">
									<view class="flex-row flex-jus-sp flex-ali-center m-t-12 delBox">
										<d-text :text="it.drug_name||it.name" className="fs-3 content-c"></d-text>
										<!-- <d-text :text="it.number+'g'" className="fs-3 tips-c"></d-text> -->
										<d-text :text="String(it.number)+(it.unit?it.unit.name:'g')"
											className="fs-3 tips-c"></d-text>
									</view>
									<view class="label fz24" v-if="it.order!=0">
										{{ useWay[it.order]}}
									</view>
								</view>
							</view>
						</view>
						<view class="tips">{{mParms.directions}}</view>
						<view class="m-t-24 flex-row flex-jus-sa btnBox">
							<view @click="goEdit" class="btn left">调整用量</view>
							<view class="btn right" @click="removeDrug2">删除</view>
						</view>
					</view>
					<view class="flex-row flex-jus-center" v-else>
						<d-empty @click="$go(`addType2?type=2&index=${i}`)"></d-empty>
					</view>
				</view>
				<view class="flex-col b-r-8 white p-32">
					<view class="flex-jus-sp flex-row flex-ali-center">
						<d-text text="医嘱" color="#6C7380"></d-text>
						<d-text @click="showComment = true; selectComment = []" text="常用医嘱" color="#6ACDBB"></d-text>
					</view>
					<u-input v-model="entrust" placeholder="请输入" :custom-style="entrustStyle" />
				</view>
			</block>
			<!-- 产品服务包 -->
			<view class="m-t-2 b-r-8 white p-32 flex-col" v-if="tabsActive==2">
        <view class="flex-row flex-jus-sp flex-ali-center">
          <d-text text="R：" className="main-c fs-4" :bold="true"></d-text>
          <view class="flex-row m-l-163" style="height: 50rpx;">
            <view class="m-l-16">
              <u-button :throttle-time="0" :custom-style="{ backgroundColor:'#6ACDBB',color:'#fff' }"
                        shape="circle" size="mini"
                        @click="$go(`addProductServicePackage?type=${parseInt(tabsActive)+1}}`)">
                添加产品服务包
              </u-button>
            </view>
          </view>
        </view>
        <view class="bottom-border p-col-32" v-for="(item,index) in servicePackage" :key="item.id">
          <view class="flex-row flex-jus-sp flex-ali-center">
            <d-text :text="`${index+1}、${item.drug_name}`" className="fs-3 content-c"></d-text>
            <d-text :text="`￥${parseFloat(item.price).toFixed(2)}`" className="error-c fs-3"></d-text>
          </view>
          <view class="flex-row flex-ali-center flex-jus-sp m-t-16">
            <view class="flex-row flex-ali-center m-t-16">
              <d-text text="规格：" color="#6C7380"></d-text>
              <d-text :text="item.specification" color="#6C7380"></d-text>
            </view>
            <view class="flex-row flex-ali-center m-t-16">
              <d-text :text="item.number+'周期'" color="#6C7380"></d-text>
            </view>
          </view>
          <view class="m-t-24 flex-row flex-jus-sa btnBox">
            <view class="btn right" @click="removeDrug(index)">删除</view>
          </view>
        </view>
        <view class="m-t-32 flex-col" v-if="servicePackage.length>0">
          <view class="flex-jus-sp flex-row flex-ali-center">
            <d-text text="医嘱" color="#6C7380"></d-text>
            <d-text @click="showComment = true; selectComment = []" text="常用医嘱" color="#6ACDBB"></d-text>
          </view>
          <u-input v-model="entrust" placeholder="请输入" :custom-style="entrustStyle" />
        </view>
        <view class="flex-row flex-jus-center" v-if="servicePackage.length==0">
          <d-empty @click="$go('addProductServicePackage?type=${parseInt(tabsActive)+1}&index=${i}&recipe=${JSON.stringify(item.obj)}')"></d-empty>
        </view>

			</view>
			<view v-if="tabsActive==3">
				<view class="white b-r-8 p-32 m-t-2 m-l-163" v-for="(item,i) in granular" :key="item.id">
					<view class="flex-row flex-jus-sp flex-ali-center">
						<view class="flex-row flex-ali-end ">
							<d-text text="R" className="main-c fs-4" :bold="true"></d-text>
							<!-- <d-text :text="i+1" className="main-c" :bold="true"></d-text> -->
							<d-text text="：" className="main-c fs-4" :bold="true"></d-text>
						</view>
						<view class="flex-row" style="height: 50rpx;">
							<view class="m-l-16">
								<u-button :throttle-time="0" :custom-style="{ backgroundColor:'#6ACDBB',color:'#fff' }"
									shape="circle" size="mini"
									@click="$go(`addType2?type=${parseInt(tabsActive)+1}&index=${i}&recipe=${JSON.stringify(item.obj)}`)">
									添加商品
								</u-button>
							</view>
						</view>
					</view>
					<view class="p-col-32" v-if="mInfoG.length>0">
						<view class="label">药材：</view>
						<view class="mBox">
							<view class="grid-tem-col-2 rp">
								<view v-for="(it) in mInfoG" :key="it.id">
									<view class="flex-row flex-jus-sp flex-ali-center m-t-12 delBox">
										<d-text :text="it.drug_name||it.name" className="fs-3 content-c"></d-text>
										<d-text :text="String(it.number)+(it.unit?it.unit.name:'g')"
											className="fs-3 tips-c"></d-text>
									</view>
									<view class="label fz24" v-if="it.order!=0">
										{{ useWay[it.order]}}
									</view>
								</view>
							</view>
						</view>
						<view class="tips">{{mParmsG.directions}}</view>
						<view class="m-t-24 flex-row flex-jus-sa btnBox">
							<view @click="goEdit" class="btn left">调整用量</view>
							<view class="btn right" @click="removeDrug2">删除</view>
						</view>
					</view>
					<view class="flex-row flex-jus-center" v-else>
						<d-empty @click="$go(`addProductServicePackage?type=2&index=${i}`)"></d-empty>
					</view>
				</view>

				<!-- <view class="flex-col b-r-8 white p-32">
					<d-text text="医嘱" color="#6C7380"></d-text>
					<u-input v-model="entrust" placeholder="请输入" :custom-style="entrustStyle" />
				</view> -->
				<view class="flex-col b-r-8 white p-32">
					<view class="flex-jus-sp flex-row flex-ali-center">
						<d-text text="医嘱" color="#6C7380"></d-text>
						<d-text @click="showComment = true; selectComment = []" text="常用医嘱" color="#6ACDBB"></d-text>
					</view>
					<u-input v-model="entrust" placeholder="请输入" :custom-style="entrustStyle" />
				</view>
			</view>
			<view class="flex-row p-2 flex-jus-end">
				<view class="flex-row flex-ali-center" style="margin-right: 20rpx">
					<text>诊疗费：</text>
					<u-input v-model="treatement_price" placeholder="请输入" :custom-style="entrustStyle2" style="width: 200rpx" />
				</view>
				<view class="flex-row flex-ali-center">
					<text className="m-r-16 tips-c" style="margin-right: 30rpx;"
						v-if="see_rate==1">毛利率{{getSum>0? ((((getSum-getBuysum)/getSum).toFixed(4)) *100).toFixed(2) :'0'}}%</text>
					<template v-if="tabsActive != 0 && mParms && mParms.process_rule_price">
						<d-text text="加工费：" className="m-r-16 tips-c"></d-text>
						<d-text :text="`￥${mParms.process_rule_price}`" class="m-r-16" color="#F44336" :bold="true"></d-text>
					</template>
					<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="ac">请确认患者已在实体医院就诊，并有明确诊断</view>
		</view>

		<!-- 按钮 -->
		<view class="bottom flex-jus-sp flex-ali-center">
			<view v-if="!is_common && tabsActive !== 2 && tabsActive !== 3" @click="add(1)" class="btnText">另存常用方</view>
			<!-- <d-text text="请确认患者已在实体医院就诊,并有明确诊断" className="tips-c fs-24"></d-text> -->
			<u-button :throttle-time="0" @click="add(0)" shape="circle"
				:custom-style="{backgroundColor:buttonLodging?'#A5DCD2':'#6ACDBB',color:'#fff',heigth:'86rpx', width: (is_common || tabsActive === 2 || tabsActive === 3) ? '686rpx' : '448rpx'}"
				:disabled="buttonLodging">{{is_common?'保存常用方':'发送处方'}}
			</u-button>
		</view>


		<!-- <diagnose v-model="is_diagnose" :height="height" :list="getDiagnoseList" @add="operate('add',$event)">
		</diagnose> -->
		<add-set-usage :info="info" :is_set="is_set" @set="is_set=false;show=false;info=[];setObj()"
			@add="show=false;info=[];recipe={};getDrug()" @close="show=false" @ :type="tabsActive+1" v-if="show">
		</add-set-usage>
		<u-modal v-model="isModal" :show-cancel-button="true" title="保存常用方" @confirm="confirm" @cancel="isModal=false">
			<view class="slot-content" style="padding: 20rpx;">
				<u-input v-model="prescriptionName" placeholder="请输入处方名称" type="text" :border="true" />
			</view>
		</u-modal>


		<!-- 临床诊断 -->
		<view v-if="searchIll" class="modal">
			<view class="m-t-24 plr20">
				<u-input placeholder="请输入疾病" v-model="illness" :custom-style="illnessStyle" @input="getIllness" />
				<!-- <u-input disabled v-model="illness" placeholder="请输入疾病" :custom-style="illnessStyle"  /> -->
			</view>
			<view class="listBox" v-if="illness && getDiagnoseList.length">
				<!-- :list="getDiagnoseList" @add="operate('add',$event)" -->
				<view class="flex-row flex-jus-sp flex-ali-center listItem" v-for="item in getDiagnoseList"
					:key="item.id">
					<!-- v-if="!item.is_add" -->
					<view @click="operate('add', item)">
						<image src="../../../static/image/i.png" class="icon" mode="scaleToFill" />
						<text>{{item.name}}</text>
					</view>
					<u-icon name="plus" size="32" color="#6ACDBB" @click="addCom(item)">
					</u-icon>
					<!-- <d-text text="已添加" v-else></d-text> -->
				</view>
			</view>
			<view class="listBox" v-if="illness && !getDiagnoseList.length && flag">
				<text>暂无相关诊断</text>
			</view>
			<view class="listBox" v-else-if="comDiagnoseList.length">
				<view class="flex-row flex-jus-sp flex-ali-center">
					<view class="fz28 color3">常用诊断</view>
					<view v-if="comDiagnoseList.length > 3 && !isOpen" @click="isOpen = true" class="colorB fz28">展开
					</view>
					<view v-if="comDiagnoseList.length > 3 && isOpen" @click="isOpen = false" class="colorB fz28">收起
					</view>
				</view>
				<view class="flex-row flex-jus-sp flex-ali-center listItem" v-for="item in getComDiagnoseList"
					:key="item.id">
					<view @click="operate('add', {
						id: item.disease_id,
						is_add: true,
						name: item.disease.name
					})">
						<image src="../../../static/image/i3.png" class="icon" mode="scaleToFill" />
						<text>{{item.disease.name}}</text>
					</view>
					<image src="../../../static/image/del2.png" class="icon-del" mode="scaleToFill"
						@click="handleDel(item.id)" />
				</view>
			</view>
			<view class="btnBox2">
				<u-button shape="circle"
					:custom-style="{backgroundColor:'#6ACDBB',color:'#fff',heigth:'86rpx',width:'646rpx'}"
					@click="searchIll = false" :throttle-time="0">返回</u-button>
			</view>
		</view>
		<!--  -->
		<view v-if="showComment" class="commentModal">
			<view class="mask"></view>
			<view class="main">
				<view class="mainTop">
					<view @click="showComment = false" class="l">取消</view>
					<view class="c">选择常用医嘱</view>
					<view @click="confirmComment" class="r">保存</view>
				</view>
				<view class="body">
					<view class="item" @click="handleSelect(item.id)" :class="{act: selectComment.includes(item.id)}"
						v-for="item in commentList" :key="item.id">
						{{item.content}}
					</view>
          <view style="width: 150rpx;margin: 10rpx auto;">
            大家常用
          </view>
					<view class="item" @click="allHandleSelect(item.id)" :class="{act: allSelectComment.includes(item.id)}"
						v-for="item in commonListAll" :key="item.id">
						{{item.content}}
					</view>
				</view>
			</view>
		</view>
		<!--  -->
	</view>
</template>

<script>
	import mixin from './mixin/mixin.js';
	import diagnose from './components/diagnose.vue'
	import addSetUsage from './components/add-setUsage.vue'
	import {
		addPrescription,
		addPrescriptionWest,
		drugCheck,
		searchDisease,
		saveChinCommon,
		saveWestCommon,
		saveGranularCommon,
		addGranularPrescription,
		prescriptionSend,
		addDiseaseCommon,
		getDiseaseCommon,
		delDiseaseCommon,
		getUseWay,
		getDiagnoseCommonList
	} from '@/api/all.js'
  import {addServicePackagePrescription} from "../../../api/servicePackage";
  import {doctorOrderCommonList} from "@/api/doctorOrder";
	export default {
		components: {
			diagnose,
			addSetUsage
		},
		mixins: [mixin],
		data() {
			return {
				treatement_price: '',
				commentList: [],
        commonListAll: [],
				selectComment: [],
        allSelectComment: [],
				showComment: false,
				buttonLodging: false,
				see_rate: uni.getStorageSync('see_rate'),
				isOpen: false, // 是否展开常用诊断
				comDiagnoseList: [],
				searchIll: false,
				edit: false,
				prescriptionName: null,
				isModal: false,
				loading: false,
				is_common: false,
				is_set: false,
				recipe: {},
				show: false,
				info: [],
				diagnoseList: [],
				diagnoses: [],
				is_diagnose: false,
				illness: '',
				illnessStyle: {
					fontSize: '28rpx',
					backgroundColor: '#F3F4F5',
					borderRadius: '66rpx',
					height: '66rpx',
					padding: '8rpx 32rpx'
				},
				entrust: '',
				entrustStyle: {
					fontSize: '30rpx',
					backgroundColor: '#F3F4F5',
					height: '74rpx',
					padding: '16rpx',
					borderRadius: '8rpx',
					marginTop: '16rpx'
				},
				entrustStyle2: {
					fontSize: '30rpx',
					backgroundColor: '#F3F4F5',
					height: '52rpx',
					padding: '0 16rpx',
					borderRadius: '8rpx',
				},
				height: 94,
				keyboardHeight: 0,
				// tabs: [{
				// 		name: '西（中成）药'
				// 	},
				// 	{
				// 		name: '中药饮片'
				// 	},
				// 	{
				// 		name: '保健食品'
				// 	},
				// ],
				tabs: [{
						name: '西药'
					},
					{
						name: '中药饮片'
					},
          {
            name: '产品服务包'
          },
					// {
					// 	name: '保健食品'
					// },
				],
				tabsActive: 0,
				tabsBtnStyle: {
					padding: '8rpx  16px',
					height: '58rpx',
					fontSize: '30rpx',
					width: '212rpx'
				},
				upId: null,
				identity: uni.getStorageSync('role'),
				order_id: '',
				addType: 1,
				mInfo: [], // 中药 药方商品
				mParms: {}, // 中药 药方信息
				mInfoG: [], // 颗粒药方商品
				servicePackage: [], // 颗粒药方商品
				mParmsG: {}, // 颗粒药方信息
				cr_ids: '', // 中药 颗粒药方id
				isOther: false,
				register_id: "", // 挂号id
				useWay: [],
				flag: false,
				// navbarHeight: this.$navbarHeight,
				// statusBarHeight: this.$statusBarHeight,
			};
		},
		computed: {
			getBuysum() {
				let buy_price = 0;
				let arr = [];
				let buy_total = 0;
				this.tabsActive === 0 && (arr = this.wests)
				this.tabsActive === 1 && (arr = this.mInfo)
        this.tabsActive === 2 && (arr = this.servicePackage)
				this.tabsActive === 3 && (arr = this.mInfoG)

				if (this.tabsActive === 1 || this.tabsActive === 2) {
					const dosage = this.tabsActive === 1 ? (this.mParms ? this.mParms.dosage || 0 : 0) : (this.mParmsG ?
						this.mParmsG.dosage || 0 : 0)
					buy_price = arr.reduce((total, item) => {
						buy_total += Number(item.buy_price * dosage * item.number)
						return buy_total
					}, 0);
					buy_price > 0 ? buy_price.toFixed(4) : buy_price
				} else {
					buy_price = arr.reduce((total, item) => {
						if (this.tabsActive === 0 && item.buy_price) {
							buy_total += Number((item.buy_price || item.buy_price) * item.number)
						} else {

							if (item.item.length > 0) {
								let sum = item.item.reduce((to, item) => {
									to = to ? Number(this.accAdd(this.Mul(Number(item.buy_price), item
											.grammage),
										Number(to))) : Number(this.Mul(Number(item.buy_price), item
										.grammage));
									return to
								}, 0);
								buy_total = buy_total ? this.accAdd(Number(sum), Number(buy_total)) : Number(sum);
							}
						}
						return buy_total
					}, 0);
					buy_price = buy_price > 0 ? buy_price.toFixed(2) : buy_price
				}


				return buy_price
			},
			getSum() {
				let price = 0;
				let arr = [];
				this.tabsActive == 0 && (arr = this.wests)
				this.tabsActive == 1 && (arr = this.mInfo)
				this.tabsActive == 2 && (arr = this.servicePackage)
				this.tabsActive == 3 && (arr = this.mInfoG)

				if (this.tabsActive == 1 || this.tabsActive == 3) {
					const dosage = this.tabsActive == 1 ? (this.mParms ? this.mParms.dosage || 0 : 0) : (this.mParmsG ?
						this.mParmsG.dosage || 0 : 0)
					price = arr.reduce((total, item) => {
						total += Number(item.price * dosage * item.number)
						return total
					}, 0);
					price = price > 0 ? price.toFixed(4) : price
					// price = price.toFixed(3)
				} else {
					price = arr.reduce((total, item) => {
						if ((this.tabsActive == 0 || this.tabsActive == 2) && item.price) {
							total += Number((item.price || item.price) * item.number)
						} else {

							if (item.item?.length > 0) {
								let sum = item.item.reduce((to, item) => {
									to = to ? Number(this.accAdd(this.Mul(Number(item.price), item
											.grammage),
										Number(to))) : Number(this.Mul(Number(item.price), item
										.grammage));
									return to
								}, 0);
								total = total ? this.accAdd(Number(sum), Number(total)) : Number(sum);
							}
						}
						return total
					}, 0);
					// price = price.toFixed(2)
					price = price > 0 ? price.toFixed(2) : price
				}

				return price
			},
			scrollStyle() {
				let style = {}
				// style.height = `calc(95vh - env(safe-area-inset-bottom) - 450rpx - ${this.height}rpx)`
				style.height = `100%`
				style.minHeight = `80vh`
        style.marginBottom = `200rpx`
				return style
			},
			// 常用诊断
			getComDiagnoseList() {
				const list = this.isOpen ? this.comDiagnoseList : this.comDiagnoseList.filter((item, index) => index < 3)
				return list
			},
			getDiagnoseList() {
				return this.diagnoseList.map((item) => {
					let id = item['id']
					return {
						...item,
						is_add: this.diagnoses.findIndex((item) => item['id'] == id) >= 0 ? true : false
					}
				})
			},
			is_add() {
				return (this.tabsActive == 0 && this.wests.length == 0) || ((this.tabsActive == 1) && (this.mInfo.length ==
					0)) || ((this.tabsActive == 2) && (this.mInfoG.length == 0) && (this.buttonLodging === true))
			}
		},
		beforeDestroy() {
			if (this.is_common) {
				uni.removeStorageSync('add');
			}
			this.removeDrug()
		},
		onShow() {
			if (uni.getStorageSync('mInfo')) {
				const mInfo = JSON.parse(uni.getStorageSync('mInfo'))
				const mParms = JSON.parse(uni.getStorageSync('mParms'))
				const cr_ids = uni.getStorageSync('cr_ids')
				uni.removeStorageSync('mInfo')
				uni.removeStorageSync('mParms')
				uni.removeStorageSync('cr_ids')
				if (this.tabsActive == 2) {
					this.mInfoG = mInfo
					this.mParmsG = mParms
					this.cr_ids = cr_ids
				} else {
					this.mInfo = mInfo
					this.mParms = mParms
					this.cr_ids = cr_ids
				}
			}
			if (uni.getStorageSync('clinical_diagnose')) {
				this.diagnoses = []
				let diagnoses = uni.getStorageSync('clinical_diagnose').split(',');
				for (let i = 0; i < diagnoses.length; i++) {
					this.diagnoses.push({
						name: diagnoses[i]
					})
				}
				uni.removeStorageSync('clinical_diagnose')
			}
			if (uni.getStorageSync('doctor_order')) {
				this.entrust = uni.getStorageSync('doctor_order')
				uni.removeStorageSync('doctor_order')
			}
			this.getDrug();
			this.getDiagnoseCommonList()
			this.$nextTick(() => {
				this.getH()
			})
		},
		onLoad(op) {
			this.register_id = op.r_id
			this.addType = op.addType
			let userInfo = uni.getStorageSync("userInfo");
			this.mobile = userInfo.mobile;
			this.upId = op.id
			this.order_id = op.id
			// this.removeDrug()
			// 监听键盘高度变化,获取键盘高度
			uni.onKeyboardHeightChange((obj) => {
				this.keyboardHeight = obj.height;
			})
			this.tabsActive = op['type'] || 0
			this.is_common = uni.getStorageSync('add');
			!this.is_common && uni.removeStorageSync('add');

			getUseWay({
				store_id: uni.getStorageSync('store_id') || 11001,
			}).then((res) => {
				if (res.errcode == 0) {
					const useWay = ["无", ...(res.data.map(it => it.name))]
					uni.setStorageSync('useWay', JSON.stringify(useWay))
					this.useWay = useWay
				}
			})

			this.getDiseaseCommon()
		},
		methods: {
      /**
       * 添加医嘱
       */
			confirmComment() {
        let that = this;
				let txt = this.entrust ? this.entrust + '，' : ''
        // 收藏的医嘱
				this.selectComment.forEach(id => {
          let t = that.commentList.find(row => row.id === id).content + '，'
					txt += t
				})
        // 公共医嘱
				this.allSelectComment.forEach(id => {
          let t = that.commonListAll.find(row => row.id === id).content + '，'
          txt += t
				})
        txt = txt.replace(/，，/g, '，')
        txt = txt.replace(/，$/g, '')
				this.entrust = txt
				this.showComment = false
				this.selectComment = []
				this.allSelectComment = []
			},
      /**
       * 自己添加的医嘱选择
       * @param id
       */
			handleSelect(id) {
        const index = this.selectComment.findIndex(item => item === id)
        if (index < 0) {
          this.selectComment.push(id)
        } else {
          this.selectComment.splice(index, 1)
        }
			},
      /**
       * 通用医嘱选择
       * @param id
       */
			allHandleSelect(id) {
        const index = this.allSelectComment.findIndex(item => item === id)
        if (index < 0) {
          this.allSelectComment.push(id)
        } else {
          this.allSelectComment.splice(index, 1)
        }
			},
			getDiagnoseCommonList() {
				getDiagnoseCommonList({store_id: uni.getStorageSync('store_id') || 11001})
					.then((res) => {
						if (res.errcode === 0) {
							this.commentList = res.data;
						} else {
							this.$toast(res.msg);
						}
					})
					.finally(() => {
						uni.hideLoading();
						this.loading2 = false;
					});


        doctorOrderCommonList({store_id: uni.getStorageSync('store_id') || 11001,})
            .then((res) => {
              if (res.code === 0) {
                this.commonListAll = res.result;
              } else {
                this.$toast(res.msg);
              }
            })
			},
			customBack() {
				if (this.searchIll) {
					this.searchIll = false
				} else {
					uni.navigateBack({
						delta: 1
					})
				}
			},
			goEdit() {
				if (this.tabsActive == 2) {
					if (this.mInfoG.length) {
						// 颗粒
						uni.setStorageSync('mInfo', JSON.stringify(this.mInfoG))
						uni.setStorageSync('mParms', JSON.stringify(this.mParmsG))
						uni.setStorageSync('cr_ids', this.cr_ids)
					}
					uni.navigateTo({
						url: '/subPackages/sub_workbench/workbench_recipe/addType2?type=3&index=0'
					})
				} else {
					// 中药
					if (this.mInfo.length) {
						uni.setStorageSync('mInfo', JSON.stringify(this.mInfo))
						uni.setStorageSync('mParms', JSON.stringify(this.mParms))
						uni.setStorageSync('cr_ids', this.cr_ids)
					}
					uni.navigateTo({
						url: '/subPackages/sub_workbench/workbench_recipe/addType2?type=2&index=0'
					})
				}

			},
			// 西药调整用量
			changeInfo(item) {
				this.show = true
				this.info = JSON.parse(JSON.stringify(item))
				this.is_set = true
			},
			// 删除药品
			removeDrug2() {
				uni.showModal({
					title: '删除药品',
					content: '是否要删除？',
					showCancel: true,
					success: ({
						confirm,
						cancel
					}) => {
						if (confirm) {
							this.mParms = {}
							this.mInfo = []
							this.cr_ids = ''
						}
					}
				})
			},
			setObj() {
				let wests = uni.getStorageSync(uni.getStorageSync('add') ? 'addWests' : 'wests') || []
				let chineses = uni.getStorageSync(uni.getStorageSync('add') ? 'addChineses' : 'chineses') || [{
					item: [],
					obj: {}
				}]

				let granular = uni.getStorageSync(uni.getStorageSync('add') ? 'addGranular' : 'granular') || [{
					item: [],
					obj: {}
				}]

				let servicePackage = uni.getStorageSync(uni.getStorageSync('add') ? 'addServicePackage' : 'servicePackage') || []

				this.$set(this, 'wests', JSON.parse(JSON.stringify(wests)))
				this.$set(this, 'chineses', chineses)
				this.$set(this, 'granular', granular)
				this.$set(this, 'servicePackage', JSON.parse(JSON.stringify(servicePackage)))

			},
			Mul(arg1, arg2) {
				var m = 0,
					s1 = arg1.toString(),
					s2 = arg2.toString();
				try {
					m += s1.split('.')[1].length;
				} catch (e) {}
				try {
					m += s2.split('.')[1].length;
				} catch (e) {}
				return (Number(s1.replace('.', '')) * Number(s2.replace('.', ''))) / Math.pow(10, m);
			},
			// 发送处方
			async add(type) {
        let that = this;
        if (this.buttonLodging === true) {
          this.$toast('正在处理中，请勿重复提交');
          return;
        }
        this.buttonLodging = true;
				let res = {}
				let list = this.tabsActive == 0 ? this.wests : this.tabsActive == 1 ? this.chineses: this.tabsActive == 2? this.servicePackage : this.granular
				let ids = list.reduce((total, item) => {
					if (this.tabsActive == 0 || this.tabsActive == 2) {
						total.push(item['pId']);
					} else {
						item['obj'] && item['obj']['pId'] && total.push(item['obj']['pId']);
					}
					return total
				}, []).join()
				if (this.tabsActive != 0 && this.tabsActive != 2) {
					ids = this.cr_ids
				}
				const clinical_diagnose = this.diagnoses.reduce((total, item) => {
					total.push(item['name']);
					return total
				}, []).join()

				if (!clinical_diagnose && !this.is_common && !type) {
					this.$toast('请添加诊断')
          that.buttonLodging = false
					return
				}
				if (!ids) {
					this.$toast('请添加商品')
          that.buttonLodging = false
					return
				}
				if (!this.entrust && !this.is_common && !type) {
					this.$toast('请输入医嘱')
          that.buttonLodging = false
					return
				}

				if (this.is_common || type) {
					this.isModal = true
					if (type) {
						// 另存常用方
						this.isOther = true
            that.buttonLodging = false
					}
					return;
					// 发送处方
				} else if (type == 0) {

					try {
						let res = {}
						let list = this.tabsActive == 0 ? this.wests : this.tabsActive == 1 ? this.chineses : this.tabsActive == 2? this.servicePackage : this
							.granular
						let ids = list.reduce((total, item) => {
							if (this.tabsActive == 0 || this.tabsActive === 2) {
								total.push(item['pId']);
							} else {
								item['obj'] && item['obj']['pId'] && total.push(item['obj']['pId']);
							}
							return total
						}, []).join()
						if (this.tabsActive != 0 && this.tabsActive != 2) {
							ids = this.cr_ids
						}
						let checkRes = {
							data: {
								is_exist: 0
							}
						}
						if (this.tabsActive == 1) {
							checkRes = await drugCheck({
								store_id: uni.getStorageSync('store_id') || 11001,
								cr_ids: this.cr_ids
							})
						}
						// 如果是发中药处方 检测一下相冲有毒限制
						if (this.tabsActive == 1 && checkRes.data.is_exist) {
							uni.showModal({
								title: '处方药品提示',
								content: '检测到该处方内具有药物相冲或毒性药材使用数量超标，是否继续开方并在处方上二次签名？',
								showCancel: true,
								cancelText: "调整药品",
								confirmText: "继续开方",
								confirmColor: '#6ACDBB',
								success: async ({ confirm, cancel }) => {
									if (confirm) {
										const clinical_diagnose = this.diagnoses.reduce((total, item) => {
											total.push(item['name']);
											return total
										}, []).join()
										const data = {
											store_id: uni.getStorageSync('store_id') || 11001,
											clinical_diagnose,
											up_id: this.upId,
											doctor_order: this.entrust,
											category: 1,
											order_id: this.order_id,
											register_id: this.register_id,
											treatement_price: this.treatement_price || 0,
											doctor_second_sign: 1
										}
										data[`${this.tabsActive==0?'wr_ids':'cr_ids'}`] = ids
										this.loading = true
										// 中药添加
										res = await addPrescription({
											...data,
											cr_ids: this.cr_ids
										})

										this.loading = false
										if (res.errcode == 0) {
											uni.showToast({
												title: '发送成功',
												icon: 'success',
												mask: true
											})

											setTimeout(() => {
												uni.navigateBack({
													delta: 2
												})
											}, 2000)
											this.prescription_id = res.data.id
										} else {
											this.$toast(res.msg)
										}
									}
								}
							})
						} else {
							const clinical_diagnose = this.diagnoses.reduce((total, item) => {
								total.push(item['name']);
								return total
							}, []).join()
							const data = {
								store_id: uni.getStorageSync('store_id') || 11001,
								clinical_diagnose,
								up_id: this.upId,
								doctor_order: this.entrust,
								category: 1,
								order_id: this.order_id,
								register_id: this.register_id,
								treatement_price: this.treatement_price || 0
							}
							if (this.tabsActive == 1 || this.tabsActive == 3) {
								data['gr_ids'] = ids
							} else {
								data[`${(this.tabsActive==0 || this.tabsActive==2)?'wr_ids':'cr_ids'}`] = ids
							}
							this.loading = true

							// 西药添加
							this.tabsActive == 0 && (res = await addPrescriptionWest(data))
							// 中药添加
							this.tabsActive == 1 && (res = await addPrescription({
								...data,
								cr_ids: this.cr_ids
							}))
							// 服务包添加
							this.tabsActive == 2 && (res = await addServicePackagePrescription({
								...data,
								cr_ids: this.cr_ids
							}))
							// 颗粒添加
							this.tabsActive == 3 && (res = await addGranularPrescription({
								...data,
								cr_ids: this.cr_ids
							}))


							if (res.errcode == 0) {
								uni.showToast({
									title: '发送成功',
									icon: 'success',
									mask: true
								})

                uni.navigateBack({
                  delta: 2
                })

								this.prescription_id = res.data.id

							} else {
								this.$toast(res.msg)
							}
						}
					} catch (error) {
						this.$toast(res.msg)
					}
				}

			},
			accAdd(arg1, arg2) {
				var r1, r2, m, c;
				try {
					r1 = arg1.toString().split('.')[1].length;
				} catch (e) {
					r1 = 0;
				}
				try {
					r2 = arg2.toString().split('.')[1].length;
				} catch (e) {
					r2 = 0;
				}
				c = Math.abs(r1 - r2);
				m = Math.pow(10, Math.max(r1, r2));
				if (c > 0) {
					var cm = Math.pow(10, c);
					if (r1 > r2) {
						arg1 = Number(arg1.toString().replace('.', ''));
						arg2 = Number(arg2.toString().replace('.', '')) * cm;
					} else {
						arg1 = Number(arg1.toString().replace('.', '')) * cm;
						arg2 = Number(arg2.toString().replace('.', ''));
					}
				} else {
					arg1 = Number(arg1.toString().replace('.', ''));
					arg2 = Number(arg2.toString().replace('.', ''));
				}
				return (arg1 + arg2) / m;
			},

			// 保存常用方
			async confirm() {
				let res = {}
				let list = this.tabsActive == 0 ? this.wests : this.tabsActive == 1 ? this.chineses : this.tabsActive == 2? this.servicePackage :  this.granular
				let ids = list.reduce((total, item) => {
					if (this.tabsActive == 0) {
						total.push(item['pId']);
					} else {
						item['obj'] && item['obj']['pId'] && total.push(item['obj']['pId']);
					}
					return total
				}, []).join()
				if (this.tabsActive != 0) {
					ids = this.cr_ids
				}
				const clinical_diagnose = this.diagnoses.reduce((total, item) => {
					total.push(item['name']);
					return total
				}, []).join()
				// if (!clinical_diagnose) {
				// 	this.$toast('请添加诊断')
				// 	return
				// }
				if (!ids) {
					this.$toast('请添加商品')
					return
				}
				// if (!this.entrust) {
				// 	this.$toast('请输入医嘱')
				// 	return
				// }
				if (!this.prescriptionName) {
					this.$toast('请输入处方名称')
					return
				}
				const data = {
					name: this.prescriptionName,
					clinical_diagnose,
					doctor_order: this.entrust,
					store_id: uni.getStorageSync('store_id') || 11001,
					up_id: this.upId,
					category: 1,
				}
				if (this.tabsActive == 2 || this.tabsActive == 3) {
					data['gr_ids'] = ids
				} else {
					data[`${this.tabsActive==0?'wr_ids':'cr_ids'}`] = ids
				}
				if (this.loading) {
					return
				}
				this.loading = true


				// 西药添加
				this.tabsActive == 0 && (res = await saveWestCommon(data))
				// 中药添加
				this.tabsActive == 1 && (res = await saveChinCommon(data))
				// 颗粒添加
				this.tabsActive == 2 && (res = await saveGranularCommon(data))



				this.loading = false
				if (res.errcode == 0) {
					uni.showToast({
						title: '保存成功',
						icon: 'success',
						mask: true
					})
					if (this.isOther) {
						// 另存常用方
						this.isOther = false
						return
					}
					uni.$emit('prescription', res.data)
					!this.is_common && uni.setStorageSync('prescription', res.data)
					uni.removeStorageSync('add');
					this.$go(1, 4)
					this.is_common = false
					uni.hideLoading()
				} else {
					this.$toast(res.msg)
				}
			},


			// async affirm() {
			// 	try {
			// 		let res = {}
			// 		let list = this.tabsActive == 0 ? this.wests : this.tabsActive == 1 ? this.chineses : this.granular
			// 		const ids = list.reduce((total, item) => {
			// 			if (this.tabsActive == 0) {
			// 				total.push(item['pId']);
			// 			} else {
			// 				item['obj'] && item['obj']['pId'] && total.push(item['obj']['pId']);
			// 			}
			// 			return total
			// 		}, []).join()
			// 		const clinical_diagnose = this.diagnoses.reduce((total, item) => {
			// 			total.push(item['name']);
			// 			return total
			// 		}, []).join()
			// 		const data = {
			// 			store_id: uni.getStorageSync('store_id') || 11001,
			// 			clinical_diagnose,
			// 			up_id: this.upId,
			// 			doctor_order: this.entrust,
			// 			category: 1,
			// 			order_id: this.order_id
			// 		}
			// 		if (this.tabsActive == 2) {
			// 			data['gr_ids'] = ids
			// 		} else {
			// 			data[`${this.tabsActive==0?'wr_ids':'cr_ids'}`] = ids
			// 		}
			// 		this.loading = true
			// 		// 西药添加
			// 		this.tabsActive == 0 && (res = await addPrescriptionWest(data))
			// 		// 中药添加
			// 		this.tabsActive == 1 && (res = await addPrescription(data))
			// 		// 颗粒添加
			// 		this.tabsActive == 2 && (res = await addGranularPrescription(data))


			// 		this.loading = false
			// 		if (res.errcode == 0) {
			// 			this.uniqueIdList = [res.data.syncResult.uniqueId]
			// 			this.prescription_id = res.data.id
			// 			this.signShow = false
			// 		} else {
			// 			this.$toast(res.msg)
			// 		}
			// 	} catch (error) {
			// 	}
			// },

			swt(index) {
				this.tabsActive = index
			},
			// 获取临床诊断模块高度
			getH() {
				let query = uni.createSelectorQuery();
				query.select('.top').boundingClientRect(res => {
					this.height = res.height;
				}).exec();
			},
			// 临床诊断
			getIllness() {
				if (!this.illness) {
					this.is_diagnose = false
					this.diagnoseList = []
					this.getDiseaseCommon()
					return
				}
				this.illness && uni.showLoading({
					title: '搜索中...'
				})
				this.illness && uni.$u.debounce(this.searchDisease, 1000)
				this.is_diagnose = this.illness ? true : false;
			},
			searchDisease() {
				searchDisease({
					name: this.illness,
					store_id: uni.getStorageSync('store_id') || '11001'
				}).then((res) => {
					if (res.errcode == 0) {
						this.diagnoseList = res.data.list
						uni.hideLoading()
						setTimeout(() => {
							this.flag = true
						}, 900)
					} else {
						this.$toast(res.msg)
						this.flag = false
					}
				})
				this.flag = false
			},
			// 诊断
			openIllSearch() {
				this.getDiseaseCommon()
				this.searchIll = true
				this.flag = false
			},
			handleDel(id) {
				uni.showModal({
					title: '提示信息',
					content: '是否删除',
					showCancel: true,
					success: ({
						confirm,
						cancel
					}) => {
						if (confirm) {
							delDiseaseCommon({
								id,
								store_id: uni.getStorageSync('store_id') || '11001'
							}).then(res => {
								uni.showToast({
									title: '删除成功',
									icon: 'success',
									mask: true
								})
								this.getDiseaseCommon()
							})
						}
					}
				})

			},
			// 诊断
			getDiseaseCommon() {
				this.flag = false
				getDiseaseCommon({
					store_id: uni.getStorageSync('store_id') || '11001'
				}).then(res => {
					this.comDiagnoseList = res.data
				})
			},
			addCom(item) {
				this.flag = false
				// 添加常用诊断
				addDiseaseCommon({
					disease_id: item.id,
					store_id: uni.getStorageSync('store_id') || '11001'
				}).then(res => {
					if (res.errcode == 0) {
						uni.showToast({
							title: '已添加常用诊断',
							icon: 'success',
							mask: true
						})
					} else {
						this.$toast(res.msg)
					}
				})
			},
			operate(type, val) {
				switch (type) {
					case 'add':
						this.illness = ''
						this.is_diagnose = false;
						this.searchIll = false
						if (this.diagnoses.findIndex(item => item.id == val.id) > -1) {
							return
						}
						this.diagnoses.push(val);
						break;
					case 'delete':
						this.diagnoses.splice(val, 1);
						break;
				}
			},
		}
	}
</script>
<style>
	page {
		background-color: #F9FAFB;
	}
</style>
<style lang="scss" scoped>
	// .navbar {
	// 	width: 100vw;
	// 	position: fixed;
	// 	left: 0;
	// 	top: 0;
	// 	font-size: 34rpx;
	// 	font-family: PingFang SC-Medium, PingFang SC;
	// 	font-weight: 500;
	// 	color: #000;
	// 	z-index: 99999;
	// }

	.navbar {
		z-index: 99999999;
	}

	.bottom {
		position: fixed;
		left: 0;
		bottom: env(safe-area-inset-bottom);
		padding: 12rpx 32rpx;
		width: 100vw;
		height: 160rpx;
		background: #FFF;
		border-top: 2rpx solid #6ACDBB;
		z-index: 1;

		::v-deep button {
			z-index: 999;
			background: #6ACDBB;
			color: #FFFFFF;
		}
	}

	.m-l-16 {
		::v-deep button {
			z-index: 999;
			background: #6ACDBB;
			color: #FFFFFF;
		}
	}

	.m-l-163 {
		::v-deep button {
			z-index: 999;
			background: #D6F6F0;
			color: #6ACDBB;
		}
	}

	.rp {
		grid-column-gap: 80rpx;
		grid-row-gap: 32rpx;
	}

	.add {
		border: 1px dotted #6ACDBB;
		height: 86rpx;
	}

	.tabs {
		height: 122rpx;
		width: 100vw;

	}

	/deep/ .u-size-default {
		font-weight: bold !important;
		font-size: 15px !important;
	}

	/deep/ .icon__icon {
		font-size: 15px !important;
	}

	.ac {
		text-align: center;
		font-size: 28rpx;
		color: #999;
		margin-top: 20rpx;
	}

	.modal {
		position: fixed;
		top: 11%;
		right: 0;
		bottom: 0;
		left: 0;
		background: #F8F8FB;
		z-index: 999;
		padding-bottom: 80rpx;
		overflow: auto;

		.btnBox2 {
			position: fixed;
			bottom: env(safe-area-inset-bottom);
			left: 0;
			right: 0;
		}

		.plr20 {
			padding: 0 24rpx;
		}

		.listBox {
			padding: 40rpx;
			background: #fff;
			margin-top: 32rpx;
			padding-top: 20rpx;
		}

		.colorB {
			color: #6ACDBB;
		}

		.fz28 {
			font-size: 28rpx;
			margin: 12rpx 0;
		}

		.listItem {
			border-bottom: 1rpx solid rgba(0, 0, 0, .1);
			padding: 24rpx 0;

			>view {
				display: flex;
				align-items: center;
				color: rgba(102, 102, 102, 1) !important;
				font-size: 28rpx;

				text {
					flex: 1;
				}
			}

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 12rpx;
			}

			.icon-del {
				width: 26rpx;
				height: 26rpx;
				vertical-align: middle;
			}
		}


	}

	.listItem:last-child {
		border: 0;
		padding-bottom: 6rpx;
	}

	.tips {
		margin: 24rpx 0;
		color: #999;
		font-size: 24rpx;
	}

	.p-b-0 {
		padding-bottom: 0;
	}

	.btnBox {
		border: 1rpx solid rgba(242, 242, 242, 1);

		.btn {
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 28rpx;
			flex: 1;
		}

		.left {
			border-right: 1rpx solid rgba(242, 242, 242, 1);
			color: #2979FF;
		}

		.right {
			color: #F44336;
		}
	}

	.delBox {
		position: relative;

		.delIcon {
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			right: -16rpx;
			top: -15rpx;
		}
	}

	.top {
		position: relative;
		width: 100vw;
		min-height: 222rpx;
		z-index: 999;
	}

	.bottom {
		position: fixed;
		left: 0;
		bottom: env(safe-area-inset-bottom);
		padding: 12rpx 32rpx;
		width: 100vw;
		height: 100rpx;
		background: #FFF;
		border-top: 2rpx solid #F2F3F5;
		z-index: 1;
		display: flex;

		.btnText {
			color: #6ACDBB;
			font-size: 32rpx;
			padding: 0 36rpx;
			font-weight: 500;
		}
	}

	.rp {
		grid-column-gap: 80rpx;
		grid-row-gap: 32rpx;
	}

	.add {
		border: 1px dotted #6ACDBB;
		height: 86rpx;
	}

	.tabs {
		height: 122rpx;
		width: 100vw;

	}

	/deep/ .u-size-default {
		font-weight: bold !important;
		font-size: 15px !important;
	}

	/deep/ .icon__icon {
		font-size: 15px !important;
	}

	.label {
		color: #999;
		font-size: 28rpx;
	}

	.mBox {
		padding: 24rpx;
		background: #FAFAFA;
		margin-top: 18rpx;
	}

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

	.commentModal {
		position: fixed;
		z-index: 3333;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;

		.mask {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, .6);
		}

		.main {
			position: absolute;
			left: 0;
			bottom: 0;
			min-height: 50%;
			max-height: 80%;
			box-sizing: border-box;
			padding: 20rpx;
			padding-top: 0;
			background: #fff;
			z-index: 3;
			display: flex;
			width: 100%;
			flex-direction: column;

			.mainTop {
				display: flex;
				justify-content: space-between;
				align-content: center;
				padding: 0 16rpx;
				height: 128rpx;

				.l {
					font-size: 28rpx;
					color: #666666;
					line-height: 128rpx;
				}

				.c {
					font-weight: bold;
					font-size: 32rpx;
					color: #000;
					line-height: 128rpx;
				}

				.r {
					font-size: 28rpx;
					color: #6ACDBB;
					font-weight: bold;
					line-height: 128rpx;
				}
			}

			.body {
				flex: 1;
				overflow: auto;
				margin-left: -20rpx;

				.item {
					display: inline-block;
					margin-left: 20rpx;
					margin-bottom: 30rpx;
					padding: 0 30rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 8rpx;
					border: 1rpx solid #D8D8D8;
					font-size: 28rpx;
					color: #666;

					&.act {
						color: #fff;
						background: #6ACDBB;
						border: 1rpx solid #6ACDBB;
					}
				}
			}
		}
	}
</style>
