<template>
	<view class="content">
		<u-navbar back-text="货架设置" :border-bottom="false" :background="{backgroundColor: $config('primaryColor')}"
			back-icon-color="#fff" :back-text-style="{ color: '#fff' }">
			<view slot='right' style="padding: 0 30upx;color: #ffffff;" @click="toPlRacking" v-if="shelfPlaceList">
				<u-icon name="piliangshangjia" custom-prefix="iscm-icon"></u-icon>
				<text style="margin-left: 6rpx;">批量上架</text>
				<u-badge v-if="showDot" :is-dot="true" size="mini" type="error"></u-badge>
			</view>
		</u-navbar>
		<view class="body-content flex flex_column">
			<view class="card-box" v-if="detailData">
				<view class="card-row flex align_center justify_between">
					<view class="label">货架名称：</view>
					<view class="text flex align_center justify_end" @click="editShelf">
						<text>{{detailData.shelfName}}</text>
						<u-icon name="arrow-right" color="#969da3" size="28"></u-icon>
					</view>
				</view>
				<view class="card-row flex align_center justify_between">
					<view class="label">关联客户：</view>
					<view class="text flex align_center justify_end" @click="customeSet">
						<text>{{ (detailData&&detailData.customerEntity&&detailData.customerEntity.customerName) || '--' }}</text>
						<u-icon name="arrow-right" color="#969da3" size="28"></u-icon>
					</view>
				</view>
				<view class="card-row align_center flex justify_between">
					<view class="label" @click="showTip(0)">价格权限设置 <u-icon color="#ffaa00"
							name="question-circle"></u-icon>：</view>
					<view class="text flex align_center justify_end" @click="openSetPriceShow" v-if="$hasPermissions('B_shelfSet_mobile_priceSetting')">
						<view style="flex-grow: 1;">
							<view>货架产品：<text style="width: 80%;flex: 1;">{{showPriceStr.length ? showPriceStr.join("/") : '--'}}</text></view>
							<view>非货架产品：<text style="width: 80%;flex: 1;">{{showNonPriceStr.length ? showNonPriceStr.join("/") : '--'}}</text></view>
						</view>
						<u-icon name="arrow-right" color="#969da3" size="28"></u-icon>
					</view>
					<view class="text flex align_center justify_end" v-else>
						<view style="flex-grow: 1;">
							<view>货架产品：<text style="width: 80%;flex: 1;">{{showPriceStr.length ? showPriceStr.join("/") : '--'}}</text></view>
							<view>非货架产品：<text style="width: 80%;flex: 1;">{{showNonPriceStr.length ? showNonPriceStr.join("/") : '--'}}</text></view>
						</view>
					</view>
				</view>
				<view class="card-row align_center flex justify_between" v-if="showMore">
					<view class="label">货架状态：</view>
					<view v-if="$hasPermissions('B_shelfSet_mobile_enable')" class="text flex align_center justify_end" @click="showEnableShelf=true">
						<text v-if="detailData">{{detailData.state == 'ENABLE'?'启用':'停用'}}</text>
						<u-icon name="arrow-right" color="#969da3" size="28"></u-icon>
					</view>
					<view v-else>{{detailData?detailData.state == 'ENABLE'?'启用':'停用':'--'}}</view>
				</view>
				<view class="card-row align_center flex justify_between" v-if="showMore&&$hasPermissions('B_shelfSet_mobile_logout')">
					<view class="label">货架注销：</view>
					<view class="text">
						<u-button type="primary" size="mini" @click="showCancelShelf=true">注销</u-button>
					</view>
				</view>
				<!-- <view class="card-row align_center flex justify_between" v-if="showMore">
					<view class="label" @click="showTip(1)">是否设置完成<u-icon color="#ffaa00"
							name="question-circle"></u-icon>： </view>
					<view class="text"><u-switch :size="40" v-model="switchVal"
							@change="switchChange"></u-switch></view>
				</view> -->
				<view class="moreSeting" @click="showMore=!showMore">
					<text>{{!showMore?'更多设置':'收起'}}</text> <u-icon :name="showMore?'arrow-up':'arrow-down'"></u-icon>
				</view>
			</view>
			<!-- 货位信息 -->
			<view class="shelfPlace" :style="{height: scrollH+'px'}" v-if="shelfPlaceList">
				<view class="flex align_center shelfPlaceHead">
					<view class="lt"><text>□</text>表示没有绑定产品</view>
					<view class="search-btn flex align_center" @click="toSearchHw">
						<view><u-icon name="search"></u-icon><text>按产品搜索</text></view>
						<u-icon name="scan"></u-icon>
					</view>
				</view>
				<view class="flex shelfTabs">
					<view class="leftTabs">
						<view v-for="item in placeTab" :key="item" :class="curTab==item?'active':''"
							@click="tabChange(item)">{{item}}层</view>
					</view>
					<view class="rightCons flex flex_column">
						<view class="hwList flex_1">
							<text @click="editHw(item)" v-for="item in shelfPlaceList[curTab]"
								:key="item.shelfPlaceCode"
								:class="item.shelfProductApiEntity && item.shelfProductApiEntity.productSn?'':'red'">
								{{item.shelfPlaceCode}}
							</text>
							<text class="add" @click="addHw('add',1)"><u-icon name="plus"></u-icon></text>
						</view>
						<view class="hwAction flex justify_between">
							<u-button shape="circle" @click="tapPopup(1)" size="medium">打印贴签</u-button>
							<u-button class="newbtn" @click="tapPopup(2)" type='primary' shape="circle"
								size="medium">快速补货</u-button>
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;" v-else>
				<view class="nodata" v-if="!loading">
					<view>
						<u-image :src="`../../static/${$config('themePath')}/def_no_data@3x.png`" width="180"
							height="180" border-radius="10"></u-image>
					</view>
					<view>暂无货位信息，请点击</view>
					<view class="flex">
						<view>
							<text @click="toPlRacking">批量上架</text>
							<u-badge :offset="[-6,-10]" v-if="showDot" :is-dot="true" size="mini"
								type="error"></u-badge>
						</view>
						<view>
							<text></text>或
							<text @click="toImportTpl">导入模板</text>
						</view>
					</view>
				</view>
				<view class="nodata" v-else>
					<u-loadmore :load-text="$config('loadText')" status="loading" />
				</view>
			</view>
		</view>
		<!-- 设置价格显示弹框 -->
		<u-modal v-model="updateShowPrice" :show-cancel-button="true" title="价格权限设置" @confirm="savePriceSet">
			<view class="slot-content" style="padding: 1rem 1rem 1.5rem;text-align: center;">
				<view style="color: #999;font-size: 0.8rem;margin: 0.5rem;">提示：不勾选则不显示价格</view>
				<view style="text-align: left;font-size: 0.9rem;padding-left: 1rem;">货架产品：</view>
				<u-checkbox-group @change="priceSetChange">
					<u-checkbox v-for="item in showPrice" :key="item.paramCode" v-model="item.checked"
						:name="item.paramCode">{{item.text}}</u-checkbox>
				</u-checkbox-group>
				<view style="text-align: left;font-size: 0.9rem;padding-left: 1rem;margin-top: 0.5rem;">非货架产品：</view>
				<u-checkbox-group @change="nonPriceSetChange">
					<u-checkbox v-for="item in showNonPrice" :key="item.paramCode" v-model="item.checked"
						:name="item.paramCode">{{item.text}}</u-checkbox>
				</u-checkbox-group>
			</view>
		</u-modal>
		<!-- 启用禁用货架 -->
		<u-modal v-model="showEnableShelf" :show-cancel-button="true" title="货架状态" @confirm="enbaleShelf">
			<view class="slot-content" style="padding: 1rem 1rem 1.5rem;text-align: center;">
				<u-radio-group v-model="shelfStatus">
					<u-radio name="ENABLE">启用</u-radio>
					<u-radio name="DISABLED">停用</u-radio>
				</u-radio-group>
			</view>
		</u-modal>
		<!-- 注销货架 -->
		<u-popup v-model="showCancelShelf" mode="center" border-radius="14" length="80%">
			<view style="padding: 1rem;text-align: center;font-size: 1rem;">是否注销该数字货架？</view>
			<view class="slot-content" style="padding: 0 1rem 1rem;text-align: center;">
				 点击确定，该数字货架就不可做任何操作，用户不可登陆。
			</view>
			<view class="flex align_center justify_between" style="text-align: center;font-size: 1rem;">
				<view @click="cancelShelf" style="border: 1px solid #eee;border-right:0;border-bottom:0;width: 50%;padding: 0.6rem 0;color: dodgerblue;">确定</view>
				<view @click="showCancelShelf=false" style="border: 1px solid #eee;border-bottom:0;width: 50%;padding: 0.6rem 0;">取消</view>
			</view>
		</u-popup>
		<!-- 导入模板 -->
		<u-popup v-model="showImportTpl" mode="center" border-radius="14" length="80%">
			<view style="padding: 1rem;text-align: center;font-size: 1rem;">请选择货架模板</view>
			<scroll-view 
			scroll-y 
			class="slot-content" 
			style="padding: 0 1rem 1rem;text-align: center;height: 30vh;">
				<u-radio-group v-model="templateSn" :wrap="true">
					<u-radio 
						v-for="(item, index) in templateList" :key="item.id" 
						:name="item.templateSn"
					>
						{{item.templateName}}
					</u-radio>
				</u-radio-group>
			</scroll-view>
			<view class="flex align_center justify_between" style="text-align: center;font-size: 1rem;">
				<view @click="toImportTplOk" style="border: 1px solid #eee;border-right:0;border-bottom:0;width: 50%;padding: 0.6rem 0;color: dodgerblue;">确定</view>
				<view @click="toImportTpCancel" style="border: 1px solid #eee;border-bottom:0;width: 50%;padding: 0.6rem 0;">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		shelfDetail,
		shelfSave,
		modifFinishFlag,
		getProductPlace,
		getShelfPriceShow,
		updateShelfPriceShow,
		shelfModifState,
		shelfTemplateList,
		importShelfTemplate
	} from '@/api/shelf'
	import {
		shelfCartNotEmpty
	} from '@/api/shelfCart'
	import {
		createShelfReplenishBill
	} from '@/api/shelfReplenish'
	export default {
		components: {},
		data() {
			return {
				loading: false,
				shelfSn: null,
				detailData: null,
				switchVal: false,
				showMenus: false,
				scrollH: 400,
				showImportTpl: false,
				templateSn: null,
				templateList: [],
				popData: [{
					title: '快速补货',
					val: '0'
				}, {
					title: '打印贴签',
					val: '1'
				}],
				pleft: 0,
				ptop: 0,
				shelfPlaceList: null,
				placeTab: [],
				curTab: '',
				isLoad: false,
				webView: null,
				showDot: false,
				showPrice: [],
				showNonPrice:[],
				showPriceStr: [],
				showNonPriceStr:[],
				updateShowPrice: false,
				showPriceBak: [],
				showMore: false,
				showEnableShelf: false,
				shelfStatus: undefined,
				showCancelShelf: false
			}
		},
		watch: {
			showMore(a, b) {
				this.getScrollHeight(a)
			},
		},
		onLoad(option) {
			this.shelfSn = option.shelfSn
			// 获取货架详情
			this.getShelfDetal()
			// 获取货物
			this.getShelfPlace()
			this.isLoad = true
			// this.webView = this.$mp.page.$getAppWebview(); 
			uni.$on("editCustome", (data) => {
				this.isLoad = true
				this.saveShelf(data, 0)
			})
			uni.$on("editShelfName", (data) => {
				this.isLoad = true
				this.saveShelf(data, 1)
			})

			// const win = uni.getWindowInfo()
			// this.pleft = Math.floor(win.windowWidth * 0.3)
			// this.ptop = Math.floor(win.windowHeight - 70)
			this.getScrollHeight(this.showMore)
			console.log(this.shelfSn)
		},
		onUnload() {
			uni.$off("editCustome")
			uni.$off("editShelfName")
		},
		onShow() {
			if (!this.isLoad) {
				this.updateHw()
			}
		},
		methods: {
			getScrollHeight(a) {
				const sys = uni.getSystemInfoSync()
				const h = a ? 290 : 250
				if (sys.platform == 'android') {
					this.scrollH = sys.windowHeight - h
				} else {
					if (sys.safeArea.top) {
						this.scrollH = sys.windowHeight - h + sys.statusBarHeight - 34
					} else {
						this.scrollH = sys.windowHeight - h - 14
					}
				}
			},
			// 刷新货位
			updateHw() {
				this.placeTab = []
				this.shelfPlaceList = null
				this.getShelfPlace(true)
			},
			// 导入模板弹框
			toImportTpl(){
				if(this.templateList.length == 0){
					uni.showLoading({
						mask: true,
						title: '加载中...'
					})
					shelfTemplateList({pageNo:1,pageSize:100}).then(res=>{
						this.templateList = res.data&&res.data.list||[]
						if(this.templateList.length){
							this.showImportTpl = true
							uni.hideLoading()
						}else{
							this.toashMsg(res.message)
						}
					})
				}else{
					this.showImportTpl = true
				}
			},
			// 导入模板弹框确定
			toImportTplOk(){
				if(this.templateSn){
					uni.showLoading({
						mask: true,
						title: '导入模板弹...'
					})
					importShelfTemplate({ shelfSn: this.shelfSn, templateSn: this.templateSn }).then(res => {
					  if (res.status == 200) {
					    this.toashMsg(res.message)
						this.toImportTpCancel()
					    this.getShelfDetal()
						this.updateHw()
					  }
					  uni.hideLoading()
					})
				}else{
					this.toashMsg('请选择模板')
				}
			},
			// 关闭模板导入
			toImportTpCancel(){
				this.showImportTpl = false
				this.templateSn = null
			},
			// 批量上架
			toPlRacking() {
				const url = this.showDot ? '/pages/batchShelves/cartList' : '/pages/batchShelves/index'
				uni.navigateTo({
					url: url + "?shelfSn=" + this.shelfSn + '&shelfName=' + this.detailData.shelfName +
						'&customerSn=' + this.detailData.customerSn
				})
			},
			// 更多操作
			tapPopup(e) {
				// 打印贴签
				if (e == 1) {
					if (this.hasNoBindPro()) {
						uni.navigateTo({
							url: "/pages/latePlay/chooseProduct?shelfSn=" + this.shelfSn + '&shelfName=' + this
								.detailData.shelfName
						})
					} else {
						uni.showModal({
							showCancel: false,
							confirmText: "好的",
							title: "提示",
							content: "所有货位都没有绑定产品，无法打印贴签！"
						})
					}
				}
				// 快速补货
				if (e == 2) {
					createShelfReplenishBill({
						shelfSn: this.shelfSn,
						enableFlag: 1
					}).then(res => {
						console.log(res.data)
						if (res.data && res.data.length) {
							const params = Object.assign(this.detailData, {
								list: res.data
							})
							this.$store.state.vuex_tempData = params
							uni.navigateTo({
								url: "/pages/shelfSetting/quickReplenish"
							})
						} else {
							uni.showModal({
								showCancel: false,
								confirmText: "好的",
								title: "提示",
								content: "没有需要补货的产品"
							})
						}
					})
				}
			},
			showTip(type) {
				uni.showModal({
					showCancel: false,
					confirmText: "好的",
					title: "提示",
					content: type ? "只有当数字货架的“是否设置完成”为“是”，系统才会自动对该货架生成补货单，修理厂才能正常下单。" :
						"不勾选则不显示价格，结算价：即易码通进货价"
				})
			},
			// 注销货架
			cancelShelf(){
				 const params = {
				   shelfSn: this.shelfSn,
				   state: 'WRITE_OFF'
				 }
				 shelfModifState(params).then(res => {
					 if(res.status == 200){
						 this.toashMsg(res.message)
						 this.showCancelShelf = false
						 if(res.status == 200){
							 uni.navigateBack()
						 }
					 }
				 })
			},
			// 启用禁用货架
			enbaleShelf(){
				 const params = {
				   shelfSn: this.shelfSn,
				   state: this.shelfStatus
				 }
				 shelfModifState(params).then(res => {
					 this.toashMsg(res.message)
					 this.showEnableShelf = false
					 if(res.status == 200){
						 this.getShelfDetal()
					 }
				 })
			},
			// 设置完成是否
			switchChange(v) {
				const params = {
					shelfSn: this.shelfSn,
					finishFlag: v ? '1' : '0'
				}
				modifFinishFlag(params).then(res => {
					if (res.status == 200) {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			// 关联客户
			customeSet() {
				uni.navigateTo({
					url: "/pages/sales/chooseCustomer?backPage=shelfEdit&shelfName=" + this.detailData.shelfName
				})
			},
			// 修改货架名称
			editShelf() {
				uni.navigateTo({
					url: "/pages/shelfSetting/editShelf?shelfName=" + this.detailData.shelfName
				})
			},
			// 是否没有绑定任何产品
			hasNoBindPro() {
				let noBindPro = null;
				for (let i = 0; i < this.placeTab.length; i++) {
					noBindPro = this.shelfPlaceList[this.placeTab[i]].find(item => item.shelfProductApiEntity && item
						.shelfProductApiEntity.productSn);
					if (!!noBindPro) {
						break
					}
				}
				return !!noBindPro
			},
			// 按照产品搜索货位
			toSearchHw() {
				if (this.hasNoBindPro()) {
					uni.navigateTo({
						url: "/pages/shelfSetting/searchShelfHw?shelfName=" + this.detailData.shelfName +
							"&shelfSn=" + this.shelfSn
					})
				} else {
					uni.showModal({
						showCancel: false,
						confirmText: "好的",
						title: "提示",
						content: "所有货位都没有绑定产品，无法搜索！"
					})
				}
			},
			// 编辑货位
			editHw(item) {
				const hasProduct = item.shelfProductApiEntity && item.shelfProductApiEntity.productSn
				const type = hasProduct ? 'edit' : 'bind'
				const params = Object.assign(this.detailData, item)
				this.$store.state.vuex_tempData = params
				uni.navigateTo({
					url: "/pages/shelfSetting/editShelfHw?type=" + type
				})
			},
			// 新增货位
			addHw(type, flag) {
				let shelfPlaceCode = ''
				if (type == 'edit') {
					shelfPlaceCode = flag
				}
				if (type == 'add' && flag == 1) {
					const row = this.shelfPlaceList[this.curTab]
					const num = row[row.length - 1].shelfPlaceCode.replace(this.curTab, '')
					const nextNum = Number(num) + 1
					shelfPlaceCode = this.curTab + (nextNum < 10 ? '0' : '') + nextNum
				}
				const params = {
					customerSn: this.detailData.customerSn,
					shelfSn: this.detailData.shelfSn,
					id: this.detailData.id
				}
				uni.navigateTo({
					url: "/pages/shelfSetting/addShelfHw?detailData=" + encodeURIComponent(JSON.stringify(
						params)) + "&type=" + type + "&shelfPlaceCode=" + shelfPlaceCode
				})
			},
			// 保存数字货架基本信息
			saveShelf(data, type) {
				const params = {
					shelfSn: this.shelfSn
				}
				if (type == 1) {
					params.customerSn = this.detailData.customerSn
					params.shelfName = data.shelfName
				} else {
					params.customerSn = data.customerSn
				}
				shelfSave(params).then(res => {
					if (res.status == 200) {
						this.toashMsg(res.message)
						this.getShelfDetal()
					}
				})
			},
			// 获取价格显示设置
			getShelfPriceShow() {
				getShelfPriceShow({
					shelfSn: this.shelfSn
				}).then(res => {
					if (res.status == 200) {
						const ret = res.data && res.data
						this.showPriceBak = ret
						console.log(ret)
						this.formatPriceShow()
					}
				})
			},
			// 格式化价格显示
			checkPrice(item){
				if(item.paramCode.indexOf("non_")>=0){
					this.showNonPrice.push({
						paramCode: item.paramCode,
						paramValue: item.paramValue,
						text: item.paramCode == 'non_shelf_price_show' ? '车主价' : '结算价',
						checked: item.paramValue == 1
					})
				}else{
					this.showPrice.push({
						paramCode: item.paramCode,
						paramValue: item.paramValue,
						text: item.paramCode == 'shelf_price_show' ? '车主价' : '结算价',
						checked: item.paramValue == 1
					})
				}
			},
			formatPriceShow(){
				this.showPrice = []
				this.showPriceStr = []
				this.showNonPrice = []
				this.showNonPriceStr = []
				const a = this.showPriceBak.filter(item => item.paramCode.indexOf('shelf_price_show')>=0)
				const b = this.showPriceBak.filter(item => item.paramCode.indexOf('shelf_cost_show')>=0)
				a.map(item => {
					if (item.paramCode == 'shelf_price_show' && item.paramValue == 1) {
						this.showPriceStr.push("车主价")
					}
					if (item.paramCode == 'non_shelf_price_show' && item.paramValue == 1) {
						this.showNonPriceStr.push("车主价")
					}
					this.checkPrice(item)
				})
				b.map(item => {
					if (item.paramCode == 'shelf_cost_show' && item.paramValue == 1) {
						this.showPriceStr.push("结算价")
					}
					if (item.paramCode == 'non_shelf_cost_show' && item.paramValue == 1) {
						this.showNonPriceStr.push("结算价")
					}
					this.checkPrice(item)
				})
			},
			openSetPriceShow(){
				this.formatPriceShow()
				this.updateShowPrice = true
			},
			// 选择价格显示
			priceSetChange(e) {
				console.log(e)
				this.showPrice.map(item => {
					item.paramValue = e.includes(item.paramCode) ? 1 : 0
				})
			},
			nonPriceSetChange(e){
				this.showNonPrice.map(item => {
					item.paramValue = e.includes(item.paramCode) ? 1 : 0
				})
			},
			// 价格显示保存
			savePriceSet() {
				uni.showLoading({
					mask: true,
					title: '正在保存价格设置...'
				})
				// 更新价格显示
				updateShelfPriceShow({
					shelfSn: this.shelfSn,
					paramValue: [...this.showPrice,...this.showNonPrice]
				}).then(res => {
					if (res.status == 200) {
						this.getShelfPriceShow()
						this.toashMsg(res.message)
					}
					uni.hideLoading()
				})
			},
			getShelfDetal() {
				shelfDetail({
					sn: this.shelfSn
				}).then(res => {
					if (res.status == 200) {
						this.detailData = res.data
						this.switchVal = res.data.finishFlag == 1
						this.shelfStatus = res.data.state
						// 价格设置
						this.getShelfPriceShow()
					} else {
						this.detailData = null
					}
				})
			},
			getShelfPlace(flag) {
				this.loading = true
				getProductPlace({
					shelfSn: this.shelfSn
				}).then(res => {
					if (res.status == 200 && res.data) {
						this.shelfPlaceList = res.data
						// 获取层
						for (let a in res.data) {
							this.placeTab.push(a)
						}
						// 排序
						this.placeTab.sort(function(a, b) {
							return (a + '').localeCompare(b + '');
						});
						console.log(this.placeTab)
						if (!flag || !this.curTab) {
							this.curTab = this.placeTab[0]
						}
						if (this.placeTab.length == 0) {
							this.shelfPlaceList = null
						}
					} else {
						this.shelfPlaceList = null
						this.placeTab = []
					}
					// 是否有已录入的产品
					this.getHasCartNotEmpty()
					this.isLoad = false
					this.loading = false
				})
			},
			tabChange(item) {
				this.curTab = item
			},
			getHasCartNotEmpty() {
				shelfCartNotEmpty({
					shelfSn: this.shelfSn
				}).then(res => {
					this.showDot = res.data == 1
				})
			}
		}
	}
</script>

<style lang="less">
	.content {
		width: 100%;

		.nodata {
			padding: 100rpx 50rpx;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			>view {
				position: relative;
				padding: 10upx 0;

				text {
					color: #00aaff;
					margin-left: 10rpx;
				}
			}
		}

		.body-content {
			width: 100%;
		}

		.card-box {
			background-color: #fff;
			border-radius: 0.5rem;
			box-shadow: 0.1rem 0.2rem 0.3rem #eee;
			padding: 0 1rem;
			margin: 0.5rem;

			.card-row {
				border-bottom: 1rpx solid #eee;
				padding: 10rpx 0;
				min-height: 80rpx;

				&:last-child {
					border-bottom: 0;
				}
				.label{
					min-width: 30%;
				}
				.text {
					color: #666;
					flex-grow: 1;
					text-align: right;
				}
			}

			.moreSeting {
				text-align: center;
				color: #999;
				padding: 20upx;

				>text {
					margin-right: 10rpx;
				}
			}
		}

		.shelfPlace {
			height: calc(100% - 300rpx);

			.shelfPlaceHead {
				padding: 0.2rem 0.5rem 0.5rem;
				justify-content: space-between;

				.lt {
					font-size: 0.9rem;
					color: #999;

					text {
						color: #ff5500;
						font-size: 1rem;
					}
				}

				.search-btn {
					border: 1rpx solid #eee;
					border-radius: 50rpx;
					width: 50%;
					justify-content: space-between;
					padding: 0.3rem 0.5rem;
					color: #999;
					background-color: #fff;
					font-size: 0.9rem;

					&:active {
						opacity: 0.6;
					}
				}
			}

			.shelfTabs {
				height: calc(100% - 85rpx);

				.leftTabs {
					width: 20%;
					overflow: auto;

					>view {
						padding: 0.8rem 0.5rem;
						border-left: 0.2rem solid #f8f8f8;
						text-align: center;
					}

					.active {
						border-color: rgb(47, 126, 209);
						background-color: #fff;
					}
				}

				.rightCons {
					width: 80%;
					background-color: #fff;
					position: relative;

					.hwList {
						overflow: auto;
						padding: 0.5rem;
						padding-bottom: 105rpx;

						>text {
							border: 1rpx solid #eee;
							padding: 0.2rem 0.8rem;
							border-radius: 0.3rem;
							margin: 0.5rem 2%;
							float: left;
							text-align: center;
						}

						.red {
							border-color: #ff5500;
						}

						.add {
							border-style: dashed;
							border-color: #999;
							color: #999;
						}
					}

					.hwAction {
						padding: 0.5rem;
						position: fixed;
						bottom: 0;
						right: 0;
						width: 80%;
						background-color: #fff;

						button {
							width: 240rpx;
						}

						.newbtn {
							background-color: rgb(51, 95, 182);
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>