<template>
	<view class="productBigBox">
		<!--开票列表-->
		<view class="billing-argument" v-for="(item,index) in tableDate" :key="index" @click="tableDateCheckFun(index)">
			<view class="argument-name">{{item.name}}</view>
			<view class="argument-list">游玩时间：{{item.timer}}</view>
			<view class="argument-list">购买数量：{{item.buyNum}}</view>
			<view class="argument-list">订单金额：{{item.money}}</view>
			<view class="argument-check" :class="item.checkType==true?'argument-checkAct':''">
				<checkbox class="round" style="transform: scale(0.7)" :checked="item.checkType" shape="circle"></checkbox>
			</view>
		</view>
		<!--开票列表--无参数-->
		<view class="billing-noArgument" v-if="tableDate.length==0">
			<image class="noArgument-img" src="/pages/my/static/electronicInvoice/noneMessage.png"></image>
			<view class="noArgument-message">未查询到开票信息</view>
			<view class="noArgument-text">您输入的订单号 / 手机号无对应待开票订单。请重新核对</view>
		</view>
		<!--开票按钮-->
		<view class="billing-invoice">
			<image class="invoice-img" src="/pages/my/static/electronicInvoice/invoiceBtn.png"></image>
			<view class="invoice-text">开票记录</view>
		</view>
		<!--脚部-->
		<view class="billing-bottom">
			<view class="bottom-check" :class="allChecked==true?'bottom-checkAct':''" @click="checkboxAllFun()">
				<checkbox class="round" style="transform: scale(0.72)" :checked="allChecked" shape="circle"></checkbox>
				<view class="bottom-allName">全部</view>
			</view>
			<view class="bottom-orderBox">
				<view class="orderBox-money"><text>¥</text>30.00</view>
				<view class="orderBox-num">共2个订单</view>
			</view>
			<view class="bottom-btn">去开票</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      tableDate:[
        {
          name:'长江索道 (索道南站单程)',
          timer:'2025-02-20',
          buyNum:'1',
          money:'20.00',
          checkType:false,
        },
        {
          name:'长江索道 (索道南站单程)',
          timer:'2025-02-21',
          buyNum:'2',
          money:'21.00',
          checkType:true,
        },
        {
          name:'长江索道 (索道南站单程)',
          timer:'2025-02-22',
          buyNum:'3',
          money:'22.00',
          checkType:false,
        }
      ],//列表内容
      pageIndex:1,//当前页
      pageTotal:0,//总条数
      allChecked:true,//全选
    }
  },
  onLoad(option) {
			
  },
  methods: {
    getData(){//列表加载
      console.log('加载了')
    },
    checkboxAllFun(){//脚部全部点击事件
      if(this.allChecked == true){
        this.allChecked = false
      }else{
        this.allChecked = true
      }
    },
    tableDateCheckFun(index){//表格列表 点击事件
      if(this.tableDate[index].checkType==true){
        this.tableDate[index].checkType = false
      }else{
        this.tableDate[index].checkType = true
      }
    },
  },
  onReachBottom(){//上拉加载
    this.pageIndex++
    this.getData()
  },
}
</script>

<style scoped="scoped" lang="scss">
.productBigBox{
	background: #F7F8FA;
	min-height: 100vh;
	position: relative;
	padding:20rpx 0 128rpx 0;
}
.billing-argument{
	width: 710rpx;
	height: 270rpx;
	background: #FFFFFF;
	border-radius: 8rpx;
	margin: 0 auto 20rpx auto;
	padding: 28rpx 36rpx 20rpx 36rpx;
	position: relative;
	.argument-name{
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
		line-height: 44rpx;
		margin-bottom: 10rpx;
	}
	.argument-list{
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		line-height: 56rpx;
	}
	.argument-check{
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		top: 120rpx;
		right: 36rpx;
		::v-deep .wx-checkbox-input,
		::v-deep .uni-checkbox-input{
			box-sizing: border-box;
			margin: 0;
		}
	}
	.argument-checkAct{
		::v-deep .wx-checkbox-input,
		::v-deep .uni-checkbox-input{
			background-color: #FE6600 !important;
			border-color: #FE6600 !important;
			color: #ffffff !important;
		}
	}
}
.billing-noArgument{
	width: 600rpx;
	margin: auto;
	position: fixed;
	top: 240rpx;
	left: 0;
	right: 0;
	.noArgument-img{
		display: block;
		width: 342rpx;
		height: 242rpx;
		margin: 0 auto;
	}
	.noArgument-message{
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
		line-height: 44rpx;
		text-align: center;
		margin-bottom: 16rpx;
	}
	.noArgument-text{
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		line-height: 40rpx;
		text-align: center;
	}
}
.billing-invoice{
	width: 132rpx;
	height: 132rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(207,207,207,0.5);
	border-radius: 16rpx;
	position: fixed;
	right: 40rpx;
	bottom: 200rpx;
	z-index: 20;
	.invoice-img{
		display: block;
		width: 48rpx;
		height: 48rpx;
		margin: 24rpx auto 12rpx auto;
	}
	.invoice-text{
		width: 100%;
		font-weight: 500;
		font-size: 24rpx;
		color: #333333;
		line-height: 24rpx;
		text-align: center;
	}
}
.billing-bottom{
	width: 750rpx;
	height: 128rpx;
	display: flex;
	justify-content: space-between;
	background: #FFFFFF;
	border-top: solid 2px #DCDFE6;
	padding: 18rpx 24rpx 0 24rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 20;
	.bottom-check{
		display: flex;
		::v-deep .wx-checkbox-input,
		::v-deep .uni-checkbox-input{
			box-sizing: border-box;
			margin: 22rpx 0 0 0;
		}
		.bottom-allName{
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 88rpx;
			margin: 0 0 0 20rpx;
		}
	}
	.bottom-checkAct{
		::v-deep .wx-checkbox-input,
		::v-deep .uni-checkbox-input{
			background-color: #FE6600 !important;
			border-color: #FE6600 !important;
			color: #ffffff !important;
		}
	}
	.bottom-orderBox{
		.orderBox-money{
			font-weight: 600;
			font-size: 44rpx;
			color: #333333;
			line-height: 34rpx;
			text{
				font-weight: 400;
				font-size: 24rpx;
			}
		}
		.orderBox-num{
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			line-height: 34rpx;
		}
	}
	.bottom-btn{
		width: 240rpx;
		height: 88rpx;
		background: #FE6600;
		border-radius: 44rpx;
		margin-top: 2rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
	}
}
</style>
