<template>
	<view class="page-wrap">
		<!-- 搜索 -->
		<view class="page-header" id="bundle-item-header">
			<u-row gutter="16" justify="space-between">
				<u-col :span="isGobleSearch ? 9 : 12">
					<u-search placeholder="请输入关键字" v-model="queryWord" @focus="isGobleSearch=true" @custom="searchData" @search="searchData" :action-style="{'color': '#fff', 'font-size': '24rpx', 'background-color': '#ff4546', 'border-radius': '6rpx', 'padding': '6rpx 15rpx'}"></u-search>
				</u-col>
				<u-col span="3" v-show="isGobleSearch">
					<view class="close-con">
						<text class="close-search" @click="isGobleSearch=false">关闭搜索</text>
					</view>
				</u-col>
			</u-row>
		</view> 
		<view class="category-nav-wrap">
			<scroll-view class="nav-left" scroll-y :style="'height:'+screenHeight+'px'" v-show="!isGobleSearch">
				<view :class="['nav-left-item', nowInd == index ? 'active' : '' ] " v-for="(item, index) in typeList" :name="item.code" :key="item.id" @click="changeNav(item,index)">
					<text class="nav-left-item-name">{{item.dispName}}</text>
				</view>
			</scroll-view>
			<scroll-view class="nav-right" scroll-y :style="{'height': (screenHeight - 20)+'px', 'width': isGobleSearch ? '100%': '70%'}">
				<view class="nav-right-item" v-for="(item, index) in packageListData" :key="index" v-if="packageListData.length>0" >
				   <text  class="item-name">{{item.name}}</text>
				   <view class="item-f-con">
				   	  <text style="color: red;">￥{{item.price}}</text>
					  <view class="handle-btns">
						<u-button class="item-btn" shape="circle" size="mini" @click="intoDetail(item.id)">查详情</u-button>
					  	<u-button class="item-btn buy-btn" type="primary" shape="circle" size="mini" hover-class="none" :custom-style="customBtnStyle" @click="buyBundle(item)">下 单</u-button>
					  </view>
				   </view>
				</view>
				<u-empty v-if="packageListData.length==0" style="height: auto;padding-top: 10vh;" :text="noDataText" mode="data"></u-empty>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	import { getLookUpDatas } from '@/api/data'
	import { getBundleList } from '@/api/customerBundle'
	export default{
		name: 'chooseBundle',
		data(){
			return{
				noDataText: '数据加载中，请稍后...',
				typeList: [],
				screenHeight: '',  //  屏幕可见高度
				packageListData: [],  //  二级 数据
				nowInd: 0,  //  当前选中导航下标
				queryWord: '',
				isGobleSearch: false, // 是否全局搜索
				clsId: '',
				customBtnStyle: {  //  自定义按钮样式
					borderColor: '#ff4546',
					backgroundColor: '#ff4546',
					color: '#fff'
				},
			}
		},
		methods: {
			// 获取套餐分类
			getBundleType(){
				getLookUpDatas({type:'BUNDLE_TYPE'}).then(res=>{
					if (res.status == 200) {
						this.typeList = res.data
						this.typeList.unshift({dispName:'全部',code: '',id: 0})
					}else{
						this.typeList = []
					}
				})
			},
			// 初始化数据
			initData (){
				const _this = this
				uni.showLoading({ title: '加载中...' })
				getBundleList({
					queryWord: this.queryWord,
					clsId: this.clsId
				}).then(res => {
					uni.hideLoading()
					if (res.status == 200) {
						_this.packageListData = res.data
						_this.noDataText = '暂无数据'
					} else {
						_this.packageListData = []
						_this.noDataText = res.message ? res.message : '网络似乎出错了，请稍后再试'
					}
				})
			},
			// 对比已选择项目
			hasChecked (row){
			  let b = this.packageListData
			  let has = b.findIndex(item => {
			    if (item.customerBundleId){
			      return false
			    }
			    return item.itemId && item.itemId == row.id
			  })
			  return has >= 0
			},
			//  切换一级菜单更改二级菜单数据
			changeNav(item,ind){
				this.nowInd = ind
				this.clsId = item.code
				this.initData()
			},
			//  下单
			buyBundle(item){
				uni.navigateTo({
					url: '/pages/workOrder/sellOrder/buyBundle?bundleId='+item.id+'&totalAmount='+item.price
				})
			},
			// 搜索,默认当前分类下得全部
			searchData (){
				if(this.isGobleSearch && this.queryWord == ''){
					this.packageListData = []
					return
				}
				this.clsId = ''
				this.nowInd = 0
				this.initData()
				// 隐藏键盘
				uni.hideKeyboard()
			},
			// 进入套餐详情
			intoDetail (id){
				uni.navigateTo({
					url: `/pages/workOrder/sellOrder/bundleDetail?id=${id}`
				})
			},
			//  设置滚动区域高度
			setScreenHeight() {
				const _this = this;
				setTimeout(() => {
					uni.getSystemInfo({
						success: res => {
							console.log(res)
							const query = uni.createSelectorQuery().in(this);
							query.select('#bundle-item-header').boundingClientRect(data => {
								console.log(data)
								//  设置滚动区域高度
								// app中无法获取windowTop，故用80替代
								_this.screenHeight = res.screenHeight - 70 - data.height - 45;
							}).exec();
						}
					});
				}, 100);
			}
		},
		mounted() {
			this.setScreenHeight()
		},
		onLoad() {
			this.getBundleType()
			this.initData()
		},
		watch: {
			// 全局搜索
			isGobleSearch(val) {
				if (val) {
					this.packageListData = [];
				} else {
					this.queryWord = '';
					this.initData();
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-wrap{
		width: 100%;
		height: 100vh;
		.page-header{
			padding: 20upx 30upx;
			border-bottom: 1upx solid #f2f2f2;
			background: #FFFFFF;
			.close-con{
				text-align: right;
				.close-search{
					display: inline-block;
					color: #515a6e;
					border: 2upx dashed #dcdee2;
					border-radius: 6upx;
					padding: 12upx 15upx;
					font-size: 24upx;
				}
			}
		}
		.category-nav-wrap{
			display: flex;
			justify-content: space-between;
			width: 100%;
			.nav-left{
				width: 30%;
				height: 100vh;
				border-right: 1upx solid #f2f2f2;
				background-color: #fff;
				.nav-left-item{
					color: #303133;
					border-right: 2upx solid #fff;
					padding: 24upx 20upx;
					background-color: #fff;
					position: relative;
				}
				.nav-left-item.active{
					color: #ff9900;
					background: #fdf6ec;
				}
				.nav-left-item.active:after{
					content: '';
					display: block;
					width: 2px;
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0;
					background: #fcbd71;
				}
			}
			.nav-right{
				height: 100vh;
				padding: 20upx;
				box-sizing: border-box;
				.nav-right-item{
					padding: 20upx 30upx;
					border: 1upx solid #f2f2f2;
					background: #FFFFFF;
					margin: 6px 0;
					border-radius: 10px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.item-name{
						font-size: 28upx;
						margin-bottom: 20upx;
					}
					.item-f-con{
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
					.item-btn{
						display: inline-block;
						margin-left: 20upx;
						width: 112upx;
					}
					.item-btn.btn-unselected{
						background-color: #2db7f5!important;;
						border-color: #2db7f5!important;;
					}
					.item-btn.btn-selected{
						background-color: #19be6b!important;;
						border-color: #19be6b!important;
					}
				}
			}
		}
	}
</style>
