<template>
	<view>
    <z-paging ref="paging" v-model="orderList" @query="queryList" :default-page-size="pageSize"
              show-refresher-when-reload :hide-empty-view="true">
		<view class="cu-bar fixed padding flex align-center" :style="[{height:CustomBar + 'rpx'}]" style="background-color: #EDEDED ;">
			<view class="action" @tap="backPage" >
				<text class="cuIcon-close" style="color: #666666;"></text>
			</view>
			<view class="content" style="font-weight: bold;">
				订单记录
			</view>
			<view  class="cuIcon-more" style="font-size: 40rpx;">
			</view> 
		</view>
		<view class="flex-direction padding " style="background-color: #F6F6F6;margin-top: 100rpx;">
			<view class="flex align-center justify-between">
				<view class="flex" @click="showTimeBottom">
					<view class="">
						{{year1+"."+month1+"."+day1+"-"+year2+"."+month2+"."+day2}}
					</view>
					<view class="">
						<image src="../../static/order/expanded_down_2x.png" mode="" style="height: 20rpx;width: 20rpx; margin-left: 20rpx;"></image>
					</view>
				</view> 
				
				<view class="flex" @click="serviceListShow=true">
					<view class="">
            {{ nowCategoryName }}
					</view>
					<view class="">
						<image src="../../static/order/expanded_down_2x.png" mode="" style="height: 20rpx;width: 20rpx; margin-left: 20rpx;"></image>
					</view>
				</view>
				
			</view>
			<view class="flex " style="padding: 50rpx;border-radius: 20rpx;background-color:#FFFFFF ;margin-top: 30rpx;">
			   <view class="flex-direction align-center" style="flex: 1;display: flex;">
          <view class="outline_data">
            {{ nowWeekDate.orderNum }}
          </view>
				  <view class="outline_describe " style="">
				  	订单数
				  </view>
			   </view>
			   <view class="flex-direction align-center" style="flex: 1;display: flex;">
			   	  <view class="outline_data">
              {{ nowWeekDate.totalAmount }}
			   	  </view>
			      <view class="outline_describe" style="">
			   				  	订单金额
			      </view>
			   </view>
			   <view class="flex-direction align-center" style="flex: 1;display: flex;">
			   	  <view class="outline_data">
              {{ nowWeekDate.orderTimeSum }}
			   	  </view>
			      <view class="outline_describe" style="">
			   				  	服务工时
			      </view>
         </view>
		    </view>
		    <view class="flex-direction padding" style="overflow: hidden;border-radius: 20rpx;margin-top: 15rpx;background-color: #FFFFFF;" v-for="(item,index) in orderList" :key="index">
				
				<view class="padding" style="background-color: #FAFAFA;border-radius: 20rpx;">
					<text class="wb_hide_2">
						{{item.name}}
					</text>
				</view> 
				
				<view class="flex align-center padding justify-between" style="border-bottom: #EEEEEE  1rpx solid;">
					<view class="flex align-center">
						<view class="" style="color: #999999;font-size: 26rpx;">
							服务时间
						</view>
						<view class="flex align-center" style="margin-left: 20rpx;">
							<view class="" >
                {{ item.appointmentStartTime | dataFormat }}
							</view>
							<view class="" style="color: #3B94E7;font-size: 28rpx;margin-left: 10rpx;">
                {{ item.appointmentStartTime | timeFormat }}
							</view>
						</view>
					</view>
					<view class="" style="color: #111111;font-size: 28rpx;">
            {{ item.goodsCounts }}{{ item.unit }}
					</view>
				</view>
				
				<view class="flex align-center padding justify-between" style="border-bottom: #EEEEEE  1rpx solid;">
					<view class="flex align-center">
						<view class="" style="color: #999999;font-size: 26rpx;">
							服务类别
						</view>
						<view class="flex align-center" style="margin-left: 20rpx;">
              {{ item.categoryName }}
						</view>
					</view>
					<view class="" style="color: #FF1414;font-size: 28rpx;">
            ¥ {{ item.totalAmount }}
					</view>
				</view>
				<view class="flex align-center padding justify-between" style="border-bottom: #EEEEEE  1rpx solid;" v-if="(item.orderState == '003' || item.orderState == '004' || item.orderState == '007'
                     || item.orderState == '005' || item.orderState == '006') && (item.addCounts != undefined && item.addCounts != null && item.addCounts != '' && item.addCounts>0)">
					<view class="flex align-center">
						<view class="" style="color: #999999;font-size: 26rpx;">
							追加数量
						</view>
						<view class="flex align-center" style="margin-left: 20rpx;">
              {{ item.addCounts }}{{ item.unit }}
						</view>
					</view>
					<view class="" style="color: #FF1414;font-size: 28rpx;">
            ¥ {{ item.addAmount }}
					</view>
				</view>
          <view  v-if="( item.orderState == '005' || item.orderState == '006') " style="padding:20px 10px 0 0;overflow:hidden;font-size: 12px;float:right;color:#FC6035; ">
            <image src="../../static/order/tuikuan.png" mode="" style="float:left;width: 36rpx;height: 36rpx;margin-bottom: 30rpx;margin-right: 5px;"></image>已退款</view>
          <view v-if="!( item.orderState == '005' || item.orderState == '006') "  style="overflow: hidden;text-align: center; vertical-align: middle;line-height: 50px;">
            <view  style="width: 50%;float:left;font-size: 14px;background: white;height: 55px;">订单总金额
              <text style="font-size: 14px;padding-left:15px;color:#FF1414;font-weight:bold; line-height: 17px;"> ¥ {{ item.totalAmount }}</text></view>
            <view class="rightHr"></view>
            <view style="width: 49%;float:left;background: white;height: 55px;">总服务数量 <text style="font-size: 14px;padding-left:15px;font-weight:bold; line-height: 17px;">{{ Number(item.addCounts) + Number(item.goodsCounts) }}小时</text></view>
          </view>
			</view>
		</view> 
		<!-- 选择时间段 -->
		<u-popup v-model="timeListShow" mode="bottom" border-radius="20">
			
			<view class="flex-direction">
				
				<view class="padding" style="border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;border-bottom: #EEEEEE 1rpx solid;">
					<view class="flex align-center justify-between">
						<view class="">选择时间段</view>
						<view class="" style="color: #FC6035;font-size: 34rpx;" @click="confirm">
							确定 
						</view>
					</view>
				</view>
				<view class="flex align-center justify-around ">
					<view class="padding" style="color: #FC6035;border-bottom: #FC6035 1rpx solid;" @click="timeStatus=0" :style= "{color:(timeStatus==1?'#333333':'#FC6035'),borderBottom:(timeStatus==1?'#CCC 1rpx solid':'#FC6035 1rpx solid')}">
						{{temp_year1 + "年" + temp_month1+"月"+temp_day1+"日"}}
					</view>
					<view class="" style="font-weight: bold;font-size: 32rpx;margin-top: 30rpx;">
							至
					</view>
					<view class="padding" style="color: #333333 ; border-bottom: #CCCCCC 1rpx solid;" @click="timeStatus=1" :style="{color:(timeStatus==1?'#FC6035':'#333333'),borderBottom:(timeStatus==0?'#CCC 1rpx solid':'#FC6035 1rpx solid')}">
						{{temp_year2 + "年" + temp_month2+"月"+temp_day2+"日"}}
					</view>
				</view>
				
				<view class="padding" >
					<u-picker mode="time" v-model="tempTimeShow" :params="timeparams" @confirm="printLog"></u-picker>
				</view>
				
			</view>
			
		</u-popup>
		<!-- 选择服务类型 -->
		<u-popup v-model="serviceListShow" mode="bottom" border-radius="20">
			<view class="flex-direction" style="border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
				<view class="padding" style="border-bottom: #EEEEEE 1rpx solid;">
					<view class="flex align-center justify-between">
						<view class="" style="	font-weight: bold;font-size: 34rpx;">选择服务类型</view>
						<view class="" style="font-size: 34rpx;" @click="serviceListShow = false,changeType()">
							确定 
						</view>
					</view>
				</view>
				
				<view class="u-menu-wrap" style="height: 50vh;">
					<view class="" style="background-color: #F6F6F6;">
						<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
							<view v-for="(item,index) in categoryList" :key="index" class="u-tab-item" :class="[current==index ? 'u-tab-item-active' : 'u-tab-item-inactive']"
							 :data-current="index" @tap.stop="swichMenu(index),setColor(0,item.categoryId,item.categoryName)">
								<text class="u-line-1" >{{item.categoryName}}</text>
							</view>
						</scroll-view>
					</view>
					<block v-for="(item,index) in categoryList" :key="index">
						<scroll-view scroll-y class="" v-if="current==index">
								<view class="class-item">
									<view class="item-container"> 
										<view class="thumb-box " v-for="(item1, index1) in item.childrenCategory" :key="index1">
											<view class="flex align-center" @click="setColor(index1,item1.categoryId,item1.categoryName)">
												<view class="" style="flex: 1;"></view>
												<view class="item-menu-name" style="flex: 3; display: flex;margin-bottom: 30rpx;" :class="[currentCateGood==index1 ?'good_style' : '']">{{item1.categoryName}}</view>
												<view class="" style="flex: 1;" v-if="index1==currentCateGood">
													<image src="../../static/order/yes_2x.png" mode="" style="width: 36rpx;height: 36rpx;margin-bottom: 30rpx;"></image>
												</view>
												<view class="" style="flex: 1;width: 36rpx;height: 36rpx;" v-else>
												</view>
											</view>
										</view>
									</view>
								</view>
						</scroll-view>
					</block>
				</view>
			</view>
		</u-popup>
    </z-paging>
	</view> 
</template>

<script>
	export default {
    filters: {
      dataFormat(time) {
        if (time == null || time == undefined || time == '') {
          return '';
        }
        return time.substring(0, 10).replaceAll('-', '月').replace('月', '年') + '日';
      },
      timeFormat(time) {
        if (time == null || time == undefined || time == '') {
          return '';
        }
        return time.substring(time.length, time.length - 5);
      },
    },
		data() {
			return {
        pageSize:20,
        nowWeekDate: {},
        serverId:'',
				///0代表此时拨动时间，改变左边的值；1反之
				timeStatus:0,
				///年1
				year1 :"2022",
				///月1
				month1:"01",
				///日1
				day1  :"01",
				
				///年2
				year2 :"2022",
				///月2
				month2:"01",
				///日2
				day2  :"01",
				
				///以下是弹框中的数据
				///年1
				temp_year1 :"2022",
				///月1
				temp_month1:"01",
				///日1
				temp_day1  :"01",
				
				///年2
				temp_year2 :"2022",
				///月2
				temp_month2:"01",
				///日2
				temp_day2  :"01",
				
				///
				currentCateGood:0,
        nowCategoryId:0,
        nowCategoryName: "全部服务",

        // 预设当前项的值
				current: 0,
				///距离顶部长度
				scrollTop:0,
				///服务列表
				categoryList:[

				],
				///临时时间，可以存储左边，也可以存储右边
				tempTimeShow:"",
				///左侧时间
				timeShowLeft : "",
				///右侧时间
				timeShowRight: "",
				///是否弹出选择时间列表
				timeListShow : false,
				///是否弹出服务类型
				serviceListShow : false,
				///订单列表 
				orderList :[],
				///轮播时间列表
				selectTimeList:[],
				///
				value1: Number(new Date()),
				timeparams: {
									year: true,
									month: true,
									day: true,
									// hour: false,
									// minute: false,
									// second: false
								},
			}
		},
		computed:{
			style() {
				var CustomBar= this.CustomBar;
			}
		},
		onLoad() {
      var that = this;
      that.serverId = uni.getStorageSync('userInfo').serverId;
      if (that.serverId == undefined || that.serverId == null || that.serverId == '') {
        uni.reLaunch({
          url: '../login/indexChoice'
        })
      }
      that.initData();

		},
		methods: {
      backPage(){
        uni.redirectTo({
          url: '../index/index'
        });
      },
      changeType(){
        this.$refs.paging.reload()
        this.getOrderNumDate();
      },
      initData(){
        var that = this;
        that.$u.api.categoriesList({bizType: "1"}).then(res => {
          if (res.code === 200) {
            that.categoryList = res.data;
            that.getOrderNumDate();
          }
        });

      },
      getOrderNumDate(){
        var that = this;
        var startTime =new Date(this.year1+"."+this.month1+"."+this.day1);
        var endTime = new Date(this.year2+"."+this.month2+"."+this.day2);
        var param ={
          serverId: that.serverId,
          startTime:startTime,
          endTime:endTime}
        if(this.nowCategoryId != 0){
          param.categoryId = this.nowCategoryId;
        }
        that.$u.api.getOrderNumDate(param).then(res => {
          if (res.code === 200) {
            that.nowWeekDate = res.data;
          }
        });
      },
      ///展示bottom块
			showTimeBottom(){
				this.timeListShow = true;
			},
			///确定
			confirm(){
			this.timeListShow = false;
			this.year1 = this.temp_year1;
			this.month1 = this.temp_month1;
			this.day1 = this.temp_day1;
			this.year2 = this.temp_year2;
			this.month2 = this.temp_month2;
			this.day2 = this.temp_day2;
        this.$refs.paging.reload()
        this.getOrderNumDate();

			},
			printLog(e){
			if(this.timeStatus == 0){
				console.log(e);
				this.temp_year1 = e.year;
				this.temp_month1 = e.month;
				this.temp_day1 = e.day;
				console.log("====1",this.temp_year1);
				console.log("====1",this.temp_month1);
				console.log("====1",this.temp_day1);
			}
			else{
				console.log(e);
				this.temp_year2 = e.year;
				this.temp_month2 = e.month;
				this.temp_day2 = e.day;
				console.log("====2",this.temp_year2);
				console.log("====2",this.temp_month2);
				console.log("====2",this.temp_day2);
			}
				
			},
			
			///设置字体颜色和背景颜色
			setColor(index1,value,name){
				this.currentCateGood = index1;
				this.nowCategoryId = value;
				this.nowCategoryName = name;
			},
			
			// 点击左边的栏目切换
			async swichMenu(index) {
				this.currentCateGood=0;
				if(index == this.current) return ;
				this.current = index;
				// 如果为0，意味着尚未初始化
				if(this.menuHeight == 0 || this.menuItemHeight == 0) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
					await this.getElRect('u-tab-item', 'menuItemHeight');
				}
				// 将菜单菜单活动item垂直居中
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
			},
			
			// 获取一个目标元素的高度
				getElRect(elClass, dataVal) {
					new Promise((resolve, reject) => {
						const query = uni.createSelectorQuery().in(this);
						query.select('.' + elClass).fields({size: true},res => {
							// 如果节点尚未生成，res值为null，循环调用执行
							if(!res) {
								setTimeout(() => {
									this.getElRect(elClass);
								}, 10);
								return ;
							}
							this[dataVal] = res.height;
						}).exec();
					})
			},
			
			///获取相应时间
			getSelectTimeList(){
				this.selectTimeList = [
				];
			},
			
			///选择时间段，获取相应时间段的订单
			closeSelectTime() {
			        this.timeListShow = false
			        console.log('close');
			      },
      queryList(pageNo, pageSize) {
        var that = this;
        that.serverId = uni.getStorageSync('userInfo').serverId;
        if (that.serverId == undefined || that.serverId == null || that.serverId == '') {
          uni.reLaunch({
            url: '../login/indexChoice'
          })
        }
        var startTime =this.year1+"."+this.month1+"."+this.day1;
        var endTime = this.year2+"."+this.month2+"."+this.day2;
        let params = {
          pageNum: pageNo,
          pageSize: pageSize,
          orderState: this.currentTab,
          serverId: that.serverId,
          startTime:startTime,
          endTime:endTime
        };
        if(this.nowCategoryId != 0){
          params.categoryId = this.nowCategoryId;
        }
        this.$u.api.getOrderList(params).then(res => {
          if (res.code === 200) {
            this.total = res.total;
            this.$refs.paging.complete(res.rows);
          } else {
            // this.$refs.paging.complete(false);
          }
        });
      },
			///获取订单信息
			getOrderList(){

				this.orderList = [
					{serviceDate:"2022年02月15日",
					 serviceTime: "09:00",
					 serviceTimeLength:3.5 ,
					 serviceType:"001",
					 serviceAdd:2.5,
					 serviceCost:300,
					 serviceAddCost:90,
					 serviceTheme:"服务服务服务哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"},
					 {serviceDate:"2022年02月15日",
					  serviceTime: "09:00",
					  serviceTimeLength:3.5 ,
					  serviceCost:300,
					  serviceAddCost:90,
					  serviceType:"002",
					  serviceAdd:0,
					  serviceTheme:"服务服务服务哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"}
				];
			}
		}
	} 
</script>

<style>
.good_style{
	color: #FC6035;
}
.page-view {
		padding: 16rpx;
	}	
.u-tab-item-active {
		position: relative;
		color: #FC6035;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}
.u-tab-item-inactive {
		position: relative;
		color: #666666;
		font-size: 30rpx;
		font-weight: 600;
	}	
	.u-tab-item-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid $u-type-primary;
		height: 32rpx;
		left: 0;
		top: 39rpx;
	}	
	.class-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
	}
	
	.item-title {
		font-size: 26rpx;
		color: $u-main-color;
		font-weight: bold;
	}
	
	.item-menu-name {
		font-weight: bold;
		font-size: 28rpx;
		color: $u-main-color;
	}
	
	
	.thumb-box {
		display: flex;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}	

.u-tab-item {
		height: 110rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		/* color: #444; */
		font-weight: 400;
		line-height: 1;
}
.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}		
.u-tab-view {
		width: 200rpx;
		height: 100%;
}
.outline_data{
		color: #000000;
		font-weight: bold;
		font-size: 34rpx;
		
}
.outline_describe{
	color: #999;
	font-size: 26rpx;
	margin-top: 30rpx;
}
.wb_hide_2{
	  display: -webkit-box;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  word-wrap: break-word;
	  white-space: normal !important;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;
	}
.rightHr{
  margin-top: 15px;
  float: left;
  overflow: hidden;
  height: 20px;
  width: 1px;
  background-color: #CCCCCC;
}
</style>
