<template>
	<view class="container-box">
		<navigation-bar-vue title="通告券" style="width: 100%;" background-color="#ffffff"
			title-color="#000000"></navigation-bar-vue>
		<view class="content">
			<!-- 操作按钮 -->
			<view class="dl-opt-box">
				<view class="dl-menu-box" v-for="(item,index) in menus">
					<view @click="itemClick(index,item)" class="dl-menu"
						:class="index==menuIndex?'dl-menu click':'dl-menu'">{{item}}</view>
				</view>
			</view>
			<view style="width: 100%;" v-if="0==menuIndex">
				<view class="coupon-list-box">
					<view class="top-text">剩余<text>{{ coupon }}</text>张</view>
					<view :class="['coupon-item-box',index==couponIndex?'click':'']" v-for="(item,index) in dataList"
						@click="chooseCoupon(index)">
						<view class="left-dom">
							<image src="@/static/mine/coupon/coupon.png" mode="aspectFit"></image>
							<uni-icons type="closeempty" color="#FC1F3E" size="14"></uni-icons>
							<view style="margin-left: 15rpx;">{{item.couponNum}}张</view>
						</view>
						<view class="right-dom">
							<text>¥</text>{{item.price}}
						</view>
					</view>
					<view class="button-dom" @click="toOrder()">购买</view>
				</view>
				<view class="item-field" style="align-items: center;">
					<view class="my-suggest-dom" @click="viewRichText()">
						<text>查看《通告券购买协议》</text>
					</view>
				</view>
			</view>
			<view style="width: 100%;" v-if="1==menuIndex">
				<view class="buy-list-box">
					<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="onReachBottomCus"
						refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
						<view class="item-box" v-for="(item,index) in byList">
							<view class="top-title-box">
								<view class="order-no">订单编号：{{item.orderNo}}</view>
								<view :class="['order-status',item.isPay==1?'payed':'no-pay']">{{item.isPay==1?'已支付':'未支付'}}
								</view>
							</view>
							<view class="detail-item">
								<view class="left-dom">通告券</view>
								<view class="right-dom">*{{item.goodsNum}} 张</view>
							</view>
							<view class="detail-item" style="border-bottom:1rpx solid #F4F4F4;padding-bottom: 25rpx;">
								<view class="left-dom">金额</view>
								<view class="right-dom">{{item.goodsPrice}} 元</view>
							</view>
							<view class="bottom-item">
								下单时间：{{item.createTime}}
							</view>
						</view>
						<view style="text-align: center" v-if="byList.length==0">
							<image class="" src="@/static/images/nothing.png"></image>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navigationBarVue from '@/components/navigation/navigationBar.vue';
  import {initCouponList} from '@/api/business/base.js'
  import {saveOrder,getOrderList} from '@/api/business/member.js'
	import {toast} from '@/utils/common.js'
  import constant from '@/utils/constant';
  import {getJSONData} from '@/utils/auth.js'
	export default {
		components: {
			navigationBarVue
		},
		data() {
			return {
				globalConfig: getApp().globalData.config,
				menus: ['通告券', '购买记录'],
				menuIndex: 0,
        coupon:0,
				//选中的通告券下标
				couponIndex: 0,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
          orderType:'02',
          userId:null,
				},
				total: 0,
				//下来刷新状态
				isTriggered: false,
				dataList: [],
				//购买记录
				byList: []
			}
		},
		onLoad(option) {
			this.menuIndex = option.index
      this.coupon = option.coupon
        this.initCoupon();
        this.initOrder()
		},
		methods: {
			/**
			 * 菜单点击
			 * @param {Object} index
			 * @param {Object} item
			 */
			itemClick(index, item) {
				this.menuIndex = index

			},

      /**查询卡券*/
      initCoupon(){
        this.dataList = []
        initCouponList().then(res=>{
          this.dataList = res.data
        })
      },

      /**初始化订单数据*/
      initOrder(){
        this.queryParams.userId = getJSONData(constant.userInfo).userId
        getOrderList(this.queryParams).then(res=>{
          this.isTriggered = false
          if (res.code == 200) {
            if (this.queryParams.pageNum == 1) {
              this.byList = res.data.records
            } else {
              this.byList = this.byList.concat(res.data.records)
            }
            this.total = res.data.total
          }
        })
      },

      /**生成订单*/
      toOrder(){
        let data = {
          userType:'01',
          orderType:'02',
          goodsId:this.dataList[this.couponIndex].id,
          goodsNum:this.dataList[this.couponIndex].couponNum,
          goodsPrice:this.dataList[this.couponIndex].price,
          goodsCycle:'04'
        }
        saveOrder(data).then(res => {
          if (res.code == 200) {
            uni.showToast({
              icon: 'success',
              duration: 2000,
              title: '保存成功'
            });
            uni.navigateBack()
          }
        }).catch((e) => {
          uni.showToast({
            icon: 'error',
            duration: 2000,
            title: e
          });
        })
      },

			/**
			 * 选中的优惠券
			 * @param {Object} index
			 */
			chooseCoupon(index) {
				this.couponIndex = index
			},

			viewRichText() {
				this.$tab.navigateTo(
					`/pages/common/richview/index?title=${this.globalConfig.appInfo.agreements[6].title}&code=${this.globalConfig.appInfo.agreements[6].code}`
				)
			},



			/**
			 * 上滑加载数据
			 */
			onReachBottomCus() {
				//判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
				if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) {
					toast("没有更多数据了")
					return
				}
				//页码+1,调用获取数据的方法获取第二页数据
				this.queryParams.pageNum++
        this.initOrder()
			},
			/**
			 * 下拉刷新数据
			 */
			onRefresherrefresh() {
				this.isTriggered = true
				this.queryParams.pageNum = 1
				this.total = 0
        this.initOrder()
			},
		}
	}
</script>

<style lang="scss">
	.container-box {
		padding-top: calc(90rpx + var(--status-bar-height));
		border-top: 1rpx solid #F4F4F4;
		background-color: white;
		width: 100%;
		color: #363636;
		font-size: 30rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: self-start;
		justify-content: center;
		position: relative;

		.content {
			border-top: 1rpx solid #F4F4F4;
			height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 95rpx);
			overflow-y: scroll;
			width: 100%;
			background-color: #F2F2F2;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: self-start;
			justify-content: start;
			position: relative;

			.dl-opt-box {
				background-color: white;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.dl-menu-box {
					color: #929292;
					display: flex;
					flex: 1;
					align-items: center;
					justify-content: center;
					width: 100%;
					padding-top: 20rpx;

					.dl-menu {
						width: 120rpx;
						font-size: 30rpx;
						margin: 0 20rpx;
						padding-bottom: 15rpx;
						text-align: center;
					}

					.click {
						color: #FF434E;
						font-weight: bold;
						border-bottom: 2px solid #FF434E;
					}
				}

				.seting {
					font-size: 30rpx;
					width: 180rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
				}
			}

			.buy-list-box {
				height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 174rpx);
				width: 100%;
				padding: 20rpx 30rpx 0 30rpx;
				background-color: #F2F2F2;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: self-start;
				justify-content: start;
				position: relative;

				.item-box {
					margin-bottom: 20rpx;
					background-color: white;
					border-radius: 15rpx;
					padding: 25rpx;
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: self-start;
					justify-content: start;

					.top-title-box {
						padding-top: 10rpx;
						padding-bottom: 20rpx;
						margin-bottom: 15rpx;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: start;
						border-bottom: 1rpx solid #F4F4F4;

						.order-no {
							flex: 1;
							font-weight: bold;
							display: flex;
							align-items: center;
							justify-content: start;
						}

						.order-status {
							font-size: 27rpx;
							padding: 5rpx 15rpx;
							border-radius: 25rpx;
							color: white;
						}

						.no-pay {
							background-color: #929292;
						}

						.payed {
							background-color: #FC1F3E;
						}
					}

					.detail-item {
						width: 100%;
						padding: 10rpx 0;
						display: flex;
						align-items: center;
						justify-content: start;

						.left-dom {
							display: flex;
							align-items: center;
							justify-content: start;
							width: 200rpx;
						}

						.right-dom {
							display: flex;
							align-items: center;
							justify-content: flex-end;
							flex: 1;
						}
					}

					.bottom-item {
						padding-top: 15rpx;
						font-size: 26rpx;
						color: #929292;
					}
				}
			}

			.coupon-list-box {
				margin-top: 20rpx;
				background-color: white;
				border-radius: 20rpx;
				padding: 30rpx 20rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
				width: calc(100% - 60rpx);
				flex-direction: column;
				display: flex;
				align-items: self-start;
				justify-content: center;

				.top-text {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					padding-bottom: 30rpx;

					text {
						color: #FB2B43;
						padding: 0 10rpx;
					}
				}

				.coupon-item-box {
					width: 100%;
					padding: 30rpx 40rpx 30rpx 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 20rpx;
					background-color: #FFE9EC;
					border: 2rpx solid #FFE9EC;
					border-radius: 15rpx;
					color: #FC1F3E;

					.left-dom {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: flex-start;


						image {
							width: 60rpx;
							height: 60rpx;
							margin-right: 15rpx;
						}

					}

					.right-dom {
						width: 200rpx;
						display: flex;
						align-items: baseline;
						justify-content: flex-end;
						font-weight: bold;
						font-size: 36rpx;

						text {
							font-weight: normal;
							margin-right: 8rpx;
							font-size: 18rpx;
						}
					}
				}

				.click {
					border: 2rpx solid #FC1F3E !important;
				}

				.button-dom {
					margin-top: 30rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 20rpx 0;
					background-image: linear-gradient(to right, #F9605A, #FB2B43);
					color: white;
					border-radius: 40rpx;
					font-size: 33rpx;
				}
			}

			.item-field {
				color: #929292;
				width: 100%;
				display: flex;
				align-items: self-start;
				justify-content: center;

				.my-suggest-dom {
					margin: 0 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>