<template>
	<view class="wrap">
		<view v-if="length == 0">
			<view class="image">
				<image src="https://wx.fujinyangche.com/nvrnetwork/images/my_serve.png"></image>
			</view>
			<view class="title">您还未创建服务项目，去添加您的服务项目</view>
			<navigator open-type="redirect" hover-class="none" url="" class="add_btn"> <text class="iconfont nav_ul_add"></text>添加服务项目</navigator>
		</view>
		<view class="serve_list" v-else>
			<view class="serve_list_header">
				<scroll-view scroll-x>
					<view   :class="['header_item', active === index?'active':'']" 
							v-for="item,index in header" 
							:key="index" 
							@tap="changeActive(item,index)">{{item.pServiceName}}
						<view class="line"></view>
					</view>
				</scroll-view>
			</view>
			<view class="serve_list_content">
				<view class="item" v-for="item,index in contentArr" :key="index">
					<view class="serve_list_content_item clear" >
						<view class="serve_list_content_item_lf"><image :src="url + item.faceImg" mode="widthFix"></image></view>
						<view class="serve_list_content_item_middle">
							<view class="middle_title">{{item.name}}</view>
							<view class="middle_price">
								<view class="price_now">¥ {{item.disPrice}}</view>
								<view class="price_old">¥ {{item.price}}</view>
							</view>
							<view class="middle_bom clear">
								<view class="middle_time">服务单位：{{item.serviceTime}}</view>
								<view class="write" @tap="write(item)">编辑</view>
								<view class="delete" @tap="del(item)">删除</view>
							</view>
						</view>
					</view>
					<view class="back"></view>
				</view>  
			</view>
			<view class="footer">
				<view class="submit1" @tap="toIndex">返回首页</view>
				<view class="submit" @tap="add">继续添加</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "../../../../../../api.js";
	let app = getApp();
	export default {
		data() {
			return {
				url:app.globalData.url,
				length:0,//服务项目长度
				header:[],//头部导航
				active:0,//导航栏默认选中
				contentArr:[],//服务项目
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			//加载数据
			getData(){
				let data = {
					token:app.globalData.token
				}
				api.getUserStoreMyServe(data).then((res)=>{
					console.log(res);
					if(res.data.data == null){
						this.length = 0;
					}else{
						let contentArr = res.data.data.contentArr;
						contentArr.map(function (item,index,contentArr) {
						  if(contentArr[index].disPrice == null){
							contentArr[index].disPrice = contentArr[index].price   //当没有优惠价时，等于原价
						  }
						})
						this.length = contentArr.length;
						this.contentArr = contentArr;
						this.header = res.data.data.titleArr;
					}
				})
			},
			//导航栏点击切换
			changeActive(item,index){
				this.active = index;
				let data = {
					storeId: item.storeId,
					pName:item.pServiceName
				}
				api.getUserStoreServeItem(data).then((res)=>{
					console.log(res);
					let contentArr = res.data.data;
					contentArr.map(function (item,index,contentArr) {
					  if(contentArr[index].disPrice == null){
						contentArr[index].disPrice = contentArr[index].price   //当没有优惠价时，等于原价
					  }
					})
					this.contentArr = contentArr;
				})
			},
			//删除服务项目
			del(item){
				let data = {
					id:item.id
				}
				uni.showModal({
					title:'删除',
					content:"确定删除此项目?",
					success:(res) =>{
						if(res.confirm){
							api.delUserMyServe(data).then((res)=>{
								console.log(res);
								if(res.data.is){
									uni.showToast({
										title:res.data.msg,
										icon:"none",
										duration:2000
									})
									this.getData();
								}else{
									uni.showToast({
										title:res.data.msg,
										icon:"none",
										duration:2000
									})
								}
							})
						}
					}
				})
			},
			//返回首页
			toIndex(){
				uni.reLaunch({
					url:"../../../serviceView/serviceView"
				})
			}
		}
	}
</script>

<style>
	page{
	  width:100%;
	  height:100%;
	}
	.image{
	  width:260rpx;
	  height:214rpx;
	  margin:214rpx auto 0;
	}
	.image image{
	  display: block;
	  width:100%;
	  height:100%;
	}
	.title{
	  font-size: 28rpx;
	  color:#666666;
	  text-align: center;
	  margin-top:30rpx;
	}
	.add_btn{
	  width:320rpx;
	  height:80rpx;
	  background:rgba(231,120,23,1);
	  border-radius:6rpx;
	  text-align: center;
	  line-height: 80rpx;
	  font-size: 30rpx;
	  color:#ffffff;
	  margin:50rpx auto 0;
	}
	.nav_ul_add{
	  font-size: 26rpx;
	  margin-right: 4rpx;
	}
	.serve_list_header{
	  height:88rpx;
	  line-height: 88rpx;
	  border-top:1px solid #f2f2f2;
	  border-bottom:1px solid #f2f2f2;
	  box-sizing: border-box;
	  padding-left: 30rpx;
	  white-space: nowrap;
	}
	.header_item{
	  font-size: 30rpx;
	  color:#222222;
	  margin-right: 50rpx;
	  position: relative;
	  display: inline-block;
	}
	.line{
	  width:38rpx;
	  height:4rpx;
	  background:linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
	  position: absolute;
	  bottom:0rpx;
	  left:50%;
	  transform: translateX(-50%);
	  display: none;
	}
	.active{
	  font-size:34rpx;
	  font-weight:600;
	  background:linear-gradient(270deg, rgba(254,107,21,1) 0%, rgba(254,163,48,1) 100%);
	  -webkit-background-clip:text;
	  -webkit-text-fill-color:transparent;
	}
	.active .line{
	  display: block;
	}
	.serve_list_content{
	  width:100%;
	  overflow: hidden;
	}
	.serve_list_content_item{
	  width:100%;
	  padding:0 30rpx 30rpx;
	  box-sizing: border-box;
	}
	.serve_list_content_item_lf{
	  width:170rpx;
	  height:100rpx;
	  border-radius: 6rpx;
	  float:left;
	  margin-top:38rpx;
	  position: relative;
	  overflow: hidden;
	}
	.serve_list_content_item_lf image{
	  display: block;
	  width:100%;
	  height:100%;
	  border-radius: 6rpx;
	  position: absolute;
	  top:50%;
	  left:50%;
	  transform: translate(-50%,-50%)
	}
	.serve_list_content_item_middle{
	  width:calc(100% - 188rpx);
	  float:left;
	  margin-left: 18rpx;
	  margin-top:34rpx;
	  overflow: hidden;
	}
	.middle_title{
	  font-size: 28rpx;
	  color:#222222;
	  margin-top:4rpx;
	}
	.price_now{
	  display: inline-block;
	  font-size: 26rpx;
	  color:#E11521;
	}
	.price_old{
	  font-size: 20rpx;
	  color:#999999;
	  display: inline-block;
	  margin-left: 20rpx;
	  text-decoration: line-through;
	}
	.middle_bom{
	  margin-top:12rpx;
	}
	.middle_time{
	  font-size: 24rpx;
	  color:#999999;
	  margin-top:4rpx;
	  float:left;
	}
	.write{
	  width:96rpx;
	  height:44rpx;
	  background:linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
	  border-radius:2rpx;
	  text-align: center;
	  line-height: 44rpx;
	  font-size: 22rpx;
	  color:#ffffff;
	  float:right;
	}
	.delete{
	  float:right;
	  width:96rpx;
	  height:44rpx;
	  border-radius:2rpx;
	  border:1px solid rgba(231,120,23,1);
	  text-align: center;
	  line-height: 44rpx;
	  font-size: 22rpx;
	  color:#E77817;
	  box-sizing: border-box;
	  margin-right: 20rpx;
	}
	.masking{
	  width:100%;
	  height:100%;
	  background:rgba(0,0,0,0.5);
	  position: absolute;
	  top:0;
	  left:0;
	  z-index:100;
	  display: none;
	}
	.showMask{
	  display: block;
	}
	.delete_wrap{
	  width:600rpx;
	  height:260rpx;
	  background:rgba(255,255,255,1);
	  border-radius:10rpx;
	  position: absolute;
	  top:50%;
	  left:50%;
	  transform: translate(-50%,-50%);
	}
	.wrap_top{
	  font-size: 32rpx;
	  color:#000000;
	  font-weight: bold;
	  text-align: center;
	  height:152rpx;
	  line-height: 152rpx;
	  border-bottom:1px solid #F2F2F2;
	  box-sizing: border-box;
	}
	.wrap_bom_lf{
	  width:50%;
	  border-right: 1px solid #f2f2f2;
	  box-sizing: border-box;
	  font-size: 32rpx;
	  color:#222222;
	  font-weight: bold;
	  text-align: center;
	  line-height: 106rpx;
	  display: inline-block;
	}
	.confirm{
	  width:50%;
	  display: inline-block;
	  text-align: center;
	  line-height: 106rpx;
	  font-size: 32rpx;
	  color:#E77817;
	  font-weight: bold;
	}
	.footer{
	  width:100%;
	  height:100rpx;
	  padding:0 30rpx;
	  box-sizing: border-box;
	  display: flex;
	  background:rgba(255,255,255,1);
	  box-shadow:0px 4rpx 8rpx 0px rgba(0,0,0,0.5);
	  position: fixed;
	  bottom:0;
	  left:0;
	  z-index:100;
	}
	.submit{
	  flex:1;
	  height:80rpx;
	  background:linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
	  border-radius:16rpx;
	  text-align: center;
	  font-size: 32rpx;
	  color:#ffffff;
	  line-height: 80rpx;
	  margin-top:10rpx;
	}
	.submit1{
	  flex:1;
	  height:80rpx;
	  border:1px solid rgba(254,163,48,1);
	  border-radius:16rpx;
	  text-align: center;
	  font-size: 32rpx;
	  background:linear-gradient(270deg, rgba(254,107,21,1) 0%, rgba(254,163,48,1) 100%);
	  -webkit-background-clip:text;
	  -webkit-text-fill-color:transparent;
	  margin-top:10rpx;
	  margin-right: 20rpx;
	  line-height: 80rpx;
	  box-sizing: border-box;
	}
</style>
