<!--
 * @Author: lvy lvy
 * @Date: 2023-05-11 00:31:45
 * @LastEditors: lvy lvy
 * @LastEditTime: 2023-06-02 19:05:46
 * @FilePath: /redmall-uniapp/pages/user/Fruit/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<style scoped>
.item {
  overflow: hidden;
  margin-bottom: 10px;
  position: relative;
  color: #333;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
}

.box {
  background: #fff;
  border-radius: 5px;
}

.item .dot-left,
.item .dot-right {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f5f5f5;
  position: absolute;
  z-index: 999;
}

.item .dot-left {
  bottom: -6px;
  left: -6px;
}

.item .fruit_status {
  position: absolute;
  top: 30rpx;
  right: 120rpx;
  color: #dd0d1f;
}

.item .dot-right {
  bottom: -6px;
  right: -6px;
}

.item .page-group {
  position: absolute;
  top: 10px;
  left: -2px;
  width: 100%;
  max-width: 120px;
}

.item .page-group .fold-page {
  display: block;
  width: 2px;
  height: 5px;
  background: #db0113;
  transform: skewY(-40deg);
  position: absolute;
  top: -10px;
  left: 0;
  z-index: 0;
}

.justify-between {
  justify-content: space-between;
}

.item .page-group .page {
  position: absolute;
  z-index: 1;
  display: block;
  width: 106rpx;
  top: -10px;
  height: 48rpx;

  padding: 0px;
  height: 20px;
  background: linear-gradient(135deg, #E76B5A 0%, #D64439 100%);
  border-radius: 16rpx 0rpx 30rpx 0rpx;
  color: #fff;
  text-align: center;
  font-size: 12px;
  overflow: hidden;
}

.item .content {
  width: 100%;
  height: 140px;
  background: linear-gradient(135deg, #F7978A 0%, #F05549 100%);

  border-bottom: 1px dotted #f5f5f5;
  position: relative;
  z-index: 2;
  color: #fff;
}

.item .footer {
  color: #333;
  font-size: 12px;
  padding: 5px 15px 10px 15px;
}

.footer-label {
  line-height: 24px;
}

.content-title {
  font-size: 48upx;
  font-weight: 600;
  padding-top: 85upx;
  padding-left: 45upx;
}

.content-button {
  font-size: 26upx;
  font-weight: 600;
  margin-top: 105upx;
  margin-right: 45upx;
  width: 140rpx;
  height: 56rpx;
  text-align: center;
  line-height: 56rpx;
  color: #F05549;
  font-size: 28upx;
  background: linear-gradient(90deg, #FFD5D1 0%, #FFFFFF 100%);
  border-radius: 40upx;
}

.content-button button {
  width: 140rpx;
  height: 56rpx;
  font-size: 28upx;
  background: linear-gradient(90deg, #FFD5D1 0%, #FFFFFF 100%);
  border-radius: 276rpx 276rpx 276rpx 276rpx;
}

.item .ribbon {
  width: 80px;
  height: 20px;
  background: #dd0d1f;
  position: absolute;
  right: -20px;
  top: 10px;
  transform: rotateZ(45deg);
  text-align: center;
  color: #fff;
  font-size: 12px;
}

.item .ribbon-success {
  position: absolute;
  right: 20px;
  top: 10px;
  text-align: center;
  color: #fff;
  font-size: 12px;

}

.item .ribbon-success image {
  width: 120upx;
  height: 120upx;
}

.ribbon-warning {
  width: 80px;
  height: 20px;
  background: #de8e16;
  position: absolute;
  right: -20px;
  top: 10px;
  transform: rotateZ(45deg);
  text-align: center;
  color: #fff;
  font-size: 12px;
}

.page {
  padding: 25upx;
}

.bg {
  background-size: 100% 100%
}

.gary {
  filter: grayscale(1);
}
.item {
	padding: 20rpx;
	line-height: 60rpx;
}
.status-picker {
	padding: 20rpx 40rpx;
}
</style>
<template>
  <view style="background: #f5f5f6;width: 100%;">

    <!-- <u-action-sheet :show="showCount" :actions="actions" title="请选择性别" description="如果选择保密会报错" @close="showCount = false"
      @select="countSelect">
    </u-action-sheet> -->
    <u-modal duration="100" @cancel="show = false" width="640rpx" confirmColor="#576B95" cancelColor="#000000"
      :closeOnClickOverlay="true" :showCancelButton="true" confirmText='确定' :show="show">

    </u-modal>
    <v-tabs :tabs="tabsList" lineHeight="6rpx" activeColor="#FA5151" lineColor="#FA5151" :bold="true" :scroll="false"
      fontSize="30rpx" v-model="current" @change="tabsChange"></v-tabs>
	<view class="status-picker bg-w flex flex-space-between" @click="showPicker= true">
		<view class="flex">
			<view class="flex">
				领取状态：
				<span class="color-b6" v-if="statusIndex == null">请选择领取状态</span>
				<span class="color-bule" style="color: #2979ff;" v-if="statusIndex >= 0">{{ columns[0][statusIndex]}}</span>
			</view>
			<u-icon
				name="arrow-right"
			></u-icon>
		</view>
		<view >
			合计：<span v-if="dataList.length" style="color: #2979ff;">
				{{dataList[0]['amountSum'] || 0}}
			</span>
			<span v-else>0</span>
		</view>
	</view>
	<u-picker @confirm="handlerConfirm" @close="showPicker = false" @cancel="showPicker = false" :show="showPicker" :columns="columns"></u-picker>
    <scroll-view scroll-y="true" :style="{height: contentHeight + 'px'}"  @scrolltolower="loadMore">
      <view class="page" v-if="dataList.length">
        <view class="item bg-w" :class="item.status != 0 ? 'gary' : ''" v-for="(item, index ) in dataList" :key="index">
			<view class="flex flex-align-center flex-space-between">
				日期
				<span>{{ item.permissibleDate }}</span>
			</view>
			<view class="flex flex-align-center flex-space-between">
				领取状态
				<view>
					<text v-if="item.status == 0">未领取</text>
					<text v-if="item.status == 1">已领取</text>
				</view>
			</view>
			<view class="flex flex-align-center flex-space-between">
				金额
				<view>
					{{ item.amount }}
				</view>
			</view>
			<view v-if="tabsIndex == 0" class="flex flex-align-center flex-space-between">
				购买日期
				<view>
					{{ item.orderTime }}
				</view>
			</view>
			<view v-else class="flex flex-align-center flex-space-between">
				购买人
				<view>
					{{ item.contributeName }}
				</view>
			</view>
		</view>
      </view>
	  <view v-else class="flex flex-center" :style="{height: contentHeight + 'px'}">
	  		  暂无记录
	  </view>
    </scroll-view>
  </view>
</template>
<script>
import {
  getFruitUnclaimedOrder
} from '@/api/system/user.js'
import url from '@/common/http/url';
export default {
  data () {
    return {
      current: 0,
      onPageReset: true,
      showAdress: false,
      model: {
        addressId: null,
        count: 0,
        payPassword: '',
      },
      rules: {
        addressId: {
          type: 'string',
          required: true,
          message: '请选择收货地址',
          trigger: ['blur', 'change']
        },
        count: {
          type: 'string',
          required: true,
          message: '请选择领取数量',
          trigger: ['blur', 'change']
        },
        payPassword: {
          type: 'string',
          required: true,
          message: '请填写输入密码',
          trigger: ['blur', 'change']
        },
      },
      fruitLenght: 0,
      fruitId: null,
      isaddressStatus: false,
      addressList: [],
      show: false,
      dataList: [],
      tabsIndex: 0,
      query: {
        type: 1
      },
      tabsList: ['个人奖励', '推荐奖励'],
      item: {},
	  columns: [
		  ['全部','未领取', '已领取']
	  ],
	  statusIndex: 0,
	  showPicker: false,
	  page: {
		  num: 1,
		  size: 10
	  },
	  isLoad: false,
	  contentHeight: 0,
	  dpi: uni.getStorageSync('dpi'),
	  sysTem: uni.getStorageSync('system')
    }
  },
  mounted () {
    this.onPageReset = false
	console.log('8888888', this.sysTem)
	this.contentHeight = this.sysTem.windowHeight - this.sysTem.statusBarHeight -256/this.dpi
	console.log('ttttt', this.contentHeight)
	this.downCallback()
  },
  methods: {
    handlerConfirm (e) {
		console.log(e)
		this.statusIndex = e.indexs[0]
		this.showPicker = false
		this.dataList = [];
		this.page.num = 1;
		this.isLoad = false;
		this.upCallback(this.page)
    },
    handlerExpress (item) {
      this.$navigateTo(`/pages/order/express/express?com=${item.companyCode}&num=${item.orderNumber}&name=${item.companyName}&phone=${item.deliveryPhone}`)
    },
    addressSelect (e) {
      console.log(e, '123')
      this.showAdress = false
	
    },
    async openModel (e) {
      uni.navigateTo({
        url: `/pages/user/Fruit/form?id=${e.id}`
      });
    },
    handlerTabsClick (e) {
      this.tabsIndex = e.index
	  this.statusIndex = 0;
	  this.isLoad = false;
    },
    downCallback () {
		console.log('222')
		this.isLoad = false;
		this.page = {
				  num: 1,
				  size: 10
		}
		this.upCallback(this.page)
    },
    tabsChange (e) {
      console.log('e', e)
      this.tabsIndex = e;
	  this.statusIndex = 0;
	  this.isLoad = false
	  this.page = {
		  num: 1,
		  size: 10
	  }
      this.upCallback(this.page)
    },
	loadMore () {
		console.log('222', this.isLoad)
		if (this.isLoad) return;
		this.page.num++;
		this.upCallback();
	},
    upCallback (page) {
      console.log(page, 'page')
      let params = {}
      params.pageNum = this.page.num // 页码, 默认从1开始
      params.pageSize = this.page.size // 页长, 默认每页10条
      params.drawType = this.tabsIndex + 1 // 类型
	  params.status = this.statusIndex == 0 ? '': this.statusIndex - 1
      this.$http("GET", url.fruit.getFruitAwardList, params).then(res => {
        let curPageData = res.data.records;
		if (res.data.records.length < 10) this.isLoad = true;
		curPageData.forEach((item) => {
			if (item.permissibleDate) item.permissibleDate = item.permissibleDate.split(' ')[0].replace(/-/g, '/')
			if (item.orderTime) item.orderTime = item.orderTime.split(' ')[0].replace(/-/g, '/')
		})
        console.log(curPageData, 'this.dataList')
        let curPageLen = curPageData.length;
        let totalPage = res.total
        let totalSize = res.total;
        if (this.page.num == 1) this.dataList = []; //如果是第一页需手动置空列表

        this.dataList = this.dataList.concat(curPageData); //追加新数据

      })
    },
  }
}
</script>
