<template>
    <view>
        <view class="statistics yellow-bg uni-list-cell-pd" style="color: #fff">共18张券被领取，合计金额100.00元，其中已使用16张</view>


        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    所有类型
                </view>
                <view class="uni-list-cell-db">
                    <picker @change="bindPickerChange($event,array)" :value="index" :range="array" :range-key="'text'">
                        <view class="uni-input">{{array[index].text}}</view>
                    </picker>
                </view>
            </view>
        </view>

        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    所有状态
                </view>
                <view class="uni-list-cell-db">
                    <picker @change="bindPickerChangeWay($event,arrayWay)" :value="indexWay" :range="arrayWay"
                            :range-key="'text'">
                        <view class="uni-input">{{arrayWay[indexWay].text}}</view>
                    </picker>
                </view>
            </view>
        </view>


        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    开始时间
                </view>
                <view class="uni-list-cell-db">
                    <picker mode="date" :value="beginTime" :start="startDate" :end="endDate"
                            @change="bindStartDateChange">
                        <view class="uni-input">{{beginTime}}</view>
                    </picker>
                </view>
            </view>
        </view>

        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    结束时间
                </view>
                <view class="uni-list-cell-db">
                    <picker mode="date" :value="endTime" :start="startDate" :end="endDate" @change="bindEndDateChange">
                        <view class="uni-input">{{endTime}}</view>
                    </picker>
                </view>
            </view>
        </view>

        <view v-if="dataList.length>0">
            <view v-for="(i, index) in dataList" :key="i.id">
                <!--<uni-section :title="i.cardRuleName+'('+i.cardType|cardTypeFormate+')'" type="line">-->
                <uni-section :title="`${i.cardRuleName}   (${$common.cardTypeFormat(i.cardType)})`" type="line">
                    <uni-list>
                        <uni-list-item>
                            <template v-slot:body>
                                <view class="slot-box uni-con-width">
                                    <view class="uni-flex uni-space-between ">
                                        <view class="color-blue">
                                            {{i.cardNo}}
                                        </view>
                                        <view class="color-blue">
                                            {{i.carNumber}}
                                        </view>
                                    </view>
                                    <view class="uni-flex uni-space-between" style="padding: 10px 0">
                                        <view>
                                            <text class="color-blue paddingRight">领取时间</text>
                                            <uni-dateformat :date="i.issuedEffDate" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
                                        </view>
                                        <view class="color-green" v-if="i.isUesed=='1'">
                                            已使用
                                        </view>
                                        <view class="color-blue" v-else>
                                            未使用
                                        </view>
                                    </view>
                                    <view class="uni-flex uni-space-between">
                                        <view>
                                            <text class="color-red paddingRight">使用时间</text>
                                            <uni-dateformat v-if="i.isUesed=='1'" :date="i.usedDate" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
                                            <uni-dateformat v-else :date="i.exp_data" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
                                        </view>
                                        <view class="color-green">
                                            {{i.fullCutValue}}元/张
                                        </view>
                                    </view>
                                </view>
                            </template>
                        </uni-list-item>
                    </uni-list>
                </uni-section>
            </view>
            <uni-load-more :status="status" />
        </view>





        <!--<uni-section title="8折（折扣券）" type="line">-->
            <!--<uni-list>-->
                <!--<uni-list-item>-->
                    <!--<template v-slot:body>-->
                        <!--<view class="slot-box uni-con-width">-->
                            <!--<view class="uni-flex uni-space-between ">-->
                                <!--<view class="color-blue">-->
                                    <!--JE000100011-->
                                <!--</view>-->
                                <!--<view class="color-blue">-->
                                    <!--京A123456-->
                                <!--</view>-->
                            <!--</view>-->
                            <!--<view class="uni-flex uni-space-between" style="padding: 10px 0">-->
                                <!--<view>-->
                                    <!--<text class="color-blue paddingRight">领取时间</text>-->
                                    <!--2020-11-01 01:01:01-->
                                <!--</view>-->
                                <!--<view class="color-green">-->
                                    <!--已使用-->
                                <!--</view>-->
                            <!--</view>-->
                            <!--<view class="uni-flex uni-space-between">-->
                                <!--<view>-->
                                    <!--<text class="color-red paddingRight">使用时间</text>-->
                                    <!--2020-11-01 01:01:01-->
                                <!--</view>-->
                                <!--<view class="color-green">-->
                                    <!--5元/张-->
                                <!--</view>-->
                            <!--</view>-->
                        <!--</view>-->
                    <!--</template>-->
                <!--</uni-list-item>-->
            <!--</uni-list>-->
        <!--</uni-section>-->


        <!--<uni-section title="8折（折扣券）" type="line">-->
            <!--<uni-list>-->
                <!--<uni-list-item>-->
                    <!--<template v-slot:body>-->
                        <!--<view class="slot-box uni-con-width">-->
                            <!--<view class="uni-flex uni-space-between ">-->
                                <!--<view class="color-blue">-->
                                    <!--JE000100011-->
                                <!--</view>-->
                                <!--<view class="color-blue">-->
                                    <!--京A123456-->
                                <!--</view>-->
                            <!--</view>-->
                            <!--<view class="uni-flex uni-space-between" style="padding: 10px 0">-->
                                <!--<view>-->
                                    <!--<text class="color-blue paddingRight">领取时间</text>-->
                                    <!--2020-11-01 01:01:01-->
                                <!--</view>-->
                                <!--<view class="color-red">-->
                                    <!--已失效-->
                                <!--</view>-->
                            <!--</view>-->
                            <!--<view class="uni-flex uni-space-between">-->
                                <!--<view>-->
                                    <!--<text class="color-red paddingRight">失效时间</text>-->
                                    <!--2020-11-01 01:01:01-->
                                <!--</view>-->
                                <!--<view class="color-green">-->
                                    <!--5元/张-->
                                <!--</view>-->
                            <!--</view>-->
                        <!--</view>-->
                    <!--</template>-->
                <!--</uni-list-item>-->
            <!--</uni-list>-->
        <!--</uni-section>-->

        <!--<uni-section title="8折（折扣券）" type="line">-->
            <!--<uni-list>-->
                <!--<uni-list-item>-->
                    <!--<template v-slot:body>-->
                        <!--<view class="slot-box uni-con-width">-->
                            <!--<view class="uni-flex uni-space-between ">-->
                                <!--<view class="color-blue">-->
                                    <!--JE000100011-->
                                <!--</view>-->
                                <!--<view class="color-blue">-->
                                    <!--京A123456-->
                                <!--</view>-->
                            <!--</view>-->
                            <!--<view class="uni-flex uni-space-between" style="padding: 10px 0">-->
                                <!--<view>-->
                                    <!--<text class="color-blue paddingRight">领取时间</text>-->
                                    <!--2020-11-01 01:01:01-->
                                <!--</view>-->
                                <!--<view class="color-blue">-->
                                    <!--未使用-->
                                <!--</view>-->
                            <!--</view>-->
                            <!--<view class="uni-flex uni-space-between">-->
                                <!--<view>-->
                                    <!--<text class="color-green paddingRight">有效截止</text>-->
                                    <!--2020-11-01 01:01:01-->
                                <!--</view>-->
                                <!--<view class="color-green">-->
                                    <!--5元/张-->
                                <!--</view>-->
                            <!--</view>-->
                        <!--</view>-->
                    <!--</template>-->
                <!--</uni-list-item>-->
            <!--</uni-list>-->
        <!--</uni-section>-->
    </view>
</template>

<script>
export default {
  data() {
    const currentDate = this.getDate({
      format: true
    })
    return {
      title: 'picker',
      array: [
        {text: '单次券', id: 1},
        {text: '时长券', id: 2},
        {text: '满减券', id: 3},
        {text: '金额券', id: 4},
        {text: '包天券', id: 5},
      ],
      arrayWay: [
        {text: '已使用/绑定', id: 1},
        {text: '未使用', id: 0},
      ],
      index: 0,
      indexWay: 0,
      cardType: '1', //卡券类型 ：1-单次券，2-时长券，3-满减券，4-金额券，5-包天券
      isUesed: '1',  //1:已使用/绑定 0:未使用
      beginTime: currentDate,
      endTime: currentDate,
      pageNum: '1',//当前页
      pageSize: '10',//每页条数
      totalPages:'1', // 总条数
      // isLoadAll: false,
      // reload: false,
      status: 'no-more',
      dataList: [],
    }
  },
  onLoad(params) {
    wx.showShareMenu({
      withShareTicket: true
    })
    this.fetchData()
  },
  onShow() {
    var me = this;
  },
  // 下拉刷新触发
  onPullDownRefresh(val) {
    console.log('下拉刷新触发')
    this.pageNum = 1
    this.pageSize = this.pageSize
    this.totalPages = 1
    this.dataList = []
    this.fetchData()
  },
  // 上拉加载触发
  onReachBottom() {
    console.log('上拉加载触发')
    this.fetchData(); // 每次滑动请求接口，实现上拉加载更多数据


  },
  computed: {
    startDate() {
      return this.getDate('start');
    },
    endDate() {
      return this.getDate('end');
    }
  },
  methods: {
    fetchData: function () {
      console.log(this.totalPages)
      console.log(this.dataList.length)
      if (this.totalPages == this.dataList.length) {
        this.status = 'no-more'
        console.log('111')
        return
      } else {
        this.pageNum++;
      }
      let that = this
      that.status = 'loading'
      let paramsData = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        beginTime: this.beginTime+' 00:00:00',
        endTime: this.endTime+' 23:59:59',
        cardType: this.cardType.toString(), //卡券类型 ：1-单次券，2-时长券，3-满减券，4-金额券，5-包天券
        isUesed: this.isUesed.toString(),  //1:已使用/绑定 0:未使用
      }
      // 首页信息获取 接口
      that.$myRequest({
        url: that.$common.couponIssuedParkPage,
        method: 'POST',
        data: that.$common.requestSign(paramsData)
      }).then(res => {
        // const resDataArray = that.dataList.concat(res.data.dataList);
        if(res.data.pageTotals<10){
          this.status = 'no-more'
        }else{
          this.status = 'more'
        }
        that.totalPages = res.data.pageTotals;
        that.dataList = that.dataList.concat(res.data.dataList)
        console.log(that.dataList.length)
      })
    },
    bindPickerChange: function (e, storage) {
      console.log('picker发送选择改变，携带值为', e.detail.value)
      this.index = e.detail.value
      this.cardType = storage[this.index].id
      this.couponIssuedParkPage()
    },
    bindPickerChangeWay: function (e, storage) {
      console.log(storage)
      this.indexWay = e.detail.value
      this.isUesed = storage[this.indexWay].id
      this.couponIssuedParkPage()
    },
    bindStartDateChange: function (e) {
      console.log(e.detail.value)
      this.beginTime = e.detail.value
      this.couponIssuedParkPage()
    },
    bindEndDateChange: function (e) {
      this.endTime = e.detail.value
      this.couponIssuedParkPage()
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9 ? month : '0' + month;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    },
  }
}
</script>

<style lang="scss" scoped>
    .rechargeWrap {
        position: relative;
        .rechargeArrow {
            position: absolute;
            right: 10px;
            top: 30px;
            font-size: 20px;
            color: #999;
        }
    }

    .recordCon {
        padding-right: 35px;
        color: #999;
        display: flex;
        justify-content: space-between;
    }

    .paddingRight {
        padding-right: 20px;
    }
</style>
