<template>
<div class='page-home'>
  <div class="back-box">
    <van-icon class="back-icon" @click="goBack" size=".6rem" name="arrow-left" color="#fff" />
    <span>积分操作记录</span>
  </div>

  <div class="btn-box">
    <button class="btn-tab" @click="dealType('type01')" :class="cardType==='type01'?'btn-tab-active':''">赠券库存</button>
    <button class="btn-tab" @click="dealType('type02')" :class="cardType==='type02'?'btn-tab-active':''">注券记录</button>
  </div>

  <div class="header-wrap" v-if="cardType==='type02'">
    <div class="header-box">
      <div class="text-left" @click="showPicker('startTime')">
        <span>开始日期</span>
        <span>{{startTime}}</span>
      </div>
      <p class="text-center">至</p>
      <div class="text-right" @click="showPicker('endTime')">
        <span>结束日期</span>
        <span>{{endTime}}</span>
      </div>
      <button class="search-btn" @click="doSearch">查询</button>
    </div>
  </div>


  

  <van-list
    v-if="cardType==='type01'"
    style="margin-bottom:2rem;height:calc(100vh - 7rem);overflow-y:auto;"
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="loadMore"
  >
    <div class="item-record" v-for="(item,index) in recordList01" :key="index">
      <div class="item-detail">
        <div class="item-left">
          <span>{{item.title}}</span>
          <span v-if="item.validStartDate">有效期：{{dealTime(item.validStartDate)}}至{{dealTime(item.validEndDate)}}</span>
          <span v-if="!item.validStartDate">{{'有效期：自领取后'+ item.validDays+'日内有效'}}</span>
        </div>
        <div class="item-right">
          <span>库存：{{item.merchantRemain}}</span>
          <span v-if="item.status == 1">已作废</span>
        </div>
      </div>
    </div>

  </van-list>

  <van-list
    v-if="cardType==='type02'"
    style="margin-bottom:2rem;height:calc(100vh - 8.69rem);overflow-y:auto;"
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="loadMore"
  >
    <div class="item-record02" v-for="(item,index) in recordList02" :key="index">
      <p class="item-time02">{{dealTime(item.createDate)}}</p>
      <div class="item-detail02">
        <div class="item-left02">
          <span>{{item.title}}</span>
          <span>{{item.userName}}</span>
          <span>操作人：{{item.operator}}</span>
        </div>
        <div class="item-right02">
          <span>用户手机：{{item.phone}}</span>
          <span></span>
          <span>注券时间：{{dealTime(item.createDate)}}</span>
        </div>
      </div>
    </div>

  </van-list>

  <div class="picker-bg" v-if="isShowPicker">
    <van-datetime-picker
      @confirm="changeTime"
      @cancel="isShowPicker=false"
      v-model="currentDate"
      type="date"
      title="选择年月日"
      :min-date="minDate"
      :max-date="maxDate"
    />
  </div>

</div>
</template>

<script type="text/babel">
import {formatDate} from '@/filters'
// 组件
export default {
  name: 'page-index',
  components: {

  },
  data() {
    return {
      isShowPicker: false,
      minDate: new Date(1990, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      startTime: formatDate(new Date(),'yyyy-MM-dd'),
      endTime: formatDate(new Date(),'yyyy-MM-dd'),
      timeType: 'startTime',

      pageNum: 1,
      recordList01: [],
      recordList02: [],
      loading: false,
      finished: false,
      cardType: 'type01',

    };
  },
  mounted() {
    this.wxMerchantcouponSend()

  },
  methods: {
    dealType (str) {
      console.log(str)
      this.cardType = str
      this.doSearch()
    },
    doSearch () {
      this.pageNum = 1
      this.recordList01 = []
      this.recordList02 = []
      this.wxMerchantcouponSend()
    },
    loadMore () {
      this.pageNum += 1
      this.wxMerchantcouponSend()
      
    },
    dealTime (time) {
      return formatDate(new Date(time), 'yyyy-MM-dd');
    },
    showPicker (str) {
      this.isShowPicker = true;
      this.timeType = str;
      this.currentDate = new Date(this[str])
    },
    changeTime (val) {
      this[this.timeType] = formatDate(new Date(val),'yyyy-MM-dd');
      this.isShowPicker = false;
    },
    /**
     * 检查用户是否有权限修改收款账户
     */
    wxMerchantcouponSend() {
      this.loading = true
      let url = ''
      let params = {}
      if (this.cardType === 'type01') {
        url = 'wxMerchantcouponSend'
        params = {
          pageNum: this.pageNum,
          pageSize: 10,
          sendType: 7,
          expired:'',
          status:'',
        }
      } else {
        url = 'wxMerchantcouponStory'
        params = {
          pageNum: this.pageNum,
          pageSize: 10,
          channelType:7,
          beginDate: this.startTime ,
          endDate: this.endTime,
        }
      }
      this.$http[url]({
        method: 'get',
        params: params
      }).then(res => {
        if (res.code === 200) {
          this.loading = false
          this.finished = res.data.list.length === 0
          if (this.cardType === 'type01') {
            this.recordList01 = this.recordList01.concat(res.data.list)
          } else {
            this.recordList02 = this.recordList02.concat(res.data.list)
          }
          
        }
      })
    },
    goBack() {
      this.$router.go(-1)
    }

    
  }
}
</script>

<style lang="less" rel="stylesheet/less" >
.floatR {
  float: right;
}
@font-face {
  font-family: 'iconfont';  /* project id 1353693 */
  src: url('//at.alicdn.com/t/font_1353693_617eu8di04k.eot');
  src: url('//at.alicdn.com/t/font_1353693_617eu8di04k.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1353693_617eu8di04k.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1353693_617eu8di04k.woff') format('woff'),
  url('//at.alicdn.com/t/font_1353693_617eu8di04k.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1353693_617eu8di04k.svg#iconfont') format('svg');
}

.page-home {
  background: #f8f8fa;
  .back-box {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 1.3rem;
    line-height: 1.3rem;
    background: #52A0FD;
    color: #fff;
    font-size: @fontSize16;
    .back-icon {
      float: left;
      margin: .4rem 0 0 .1rem;
    }
  }
}
.header-wrap {
  width: 100%;
  height: 4rem;
  position: relative;
  top: -1rem;

  .header-bg {
    width: 100%;
    height: 4rem;
    
  }
  
  .header-box {
    position: absolute;
    left: 3.5%;
    top: 1.4rem;
    width: 93%;
    height: 3rem;
    background: url('../../assets/images/reviveimg.png') no-repeat;
    background-size: 100%;
    border-radius: .2rem;
    box-shadow: 2px 6px .3rem rgba(0,0,0,.15);
    overflow: hidden;


    .header-logo {
      float: left;
      width: 1.7rem;
      height: 1.7rem;
      margin: .7rem .5rem 0 .5rem;
    }
    .header-name-box {
      float: left;
      width: 5.5rem;
      margin-top: .7rem;

      .header-title {
        width: 100%;
        height: .75rem;
        line-height: .75rem;
        color: #333;
        font-size: @fontSize16;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        &:nth-of-type(2) {
          color: #999;
        }
      }
    }
    .header-detail {
      float: right;
      width: .7rem;
      height: .7rem;
      margin-top: 1.2rem;
      margin-right: .3rem;
    }
  }
}


.text-left,.text-right {
  float: left;
  width: 4.4rem;
  height: 2rem;
  font-size: @fontSize16;
  span {
    display: block;
    margin-top: .3rem;
    &:nth-of-type(1) {
      color: #888;
    }
  }
}
.text-center {
  float: left;
  width: .5rem;
  height: 2rem;
  line-height: 2rem;
}
.search-btn {
  width: 100%;
  float: left;
  height:1rem;
  background: #51a0fc;
  color: #fff;
  
}


.picker-bg {
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,.2);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  /deep/ .van-picker {
    width: 100%;
    position:absolute!important;
    bottom: 0;
    left: 0;
  }
}



.item-record {
  width: 100%;
  font-size: @fontSize14;

  .item-time {
    width: 100%;
    height: .8rem;
    line-height: .8rem;
    color: #888;
    text-align: left;
    padding-left: .4rem;
  }
  .item-detail {
    margin: .35rem .4rem;
    padding: 0 .4rem;
    height: 2rem;
    border-radius: .1rem;
    background: rgba(0,0,0,0.08);
    .item-left,.item-right {
      float: left;
      span {
        display: block;
        margin-top: .4rem;
        font-size: @fontSize16;
        text-align: left;
        &:nth-of-type(1) {
          max-width: 6rem;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        &:nth-of-type(2) {
          margin-top: .2rem;
          color: #888;
        }
      }
    }
    .item-right {
      float: right;
      span {
        text-align: right;
        &:nth-of-type(2) {
          font-size: @fontSize14;
          color: red;
        }
      }
    }
  }
  


  
}






.item-record02 {
  width: 100%;
  font-size: @fontSize14;

  .item-time02 {
    width: 100%;
    height: .8rem;
    line-height: .8rem;
    color: #888;
    text-align: left;
    padding-left: .4rem;
  }
  .item-detail02 {
    padding: 0 .4rem;
    width: 100%;
    height: 2.2rem;
    background: #fff;
    .item-left02,.item-right02 {
      float: left;
      span {
        display: block;
        margin-top: .3rem;
        font-size: @fontSize14;
        text-align: left;
        &:nth-of-type(1) {
          max-width: 5rem;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        &:nth-of-type(2) {
          min-height: .4rem;
          margin-top: .2rem;
          color: #888;
        }
        &:nth-of-type(3) {
          margin-top: .2rem;
          color: #888;
        }
      }
    }
    .item-right02 {
      float: right;
      span {
        text-align: right;
        &:nth-of-type(1) {
          max-width: 5rem;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        &:nth-of-type(2) {
          min-height: .4rem;
          margin-top: .2rem;
          color: #888;
        }
        &:nth-of-type(3) {
          margin-top: .2rem;
          color: #888;
        }
      }
    }
  }
  


  
}

.btn-box {
  width: 100%;
  margin-top: 1.7rem;
  overflow: hidden;
  .btn-tab {
    float: left;
    width: 3.4rem;
    height: 1rem;
    border-radius: .1rem ;
    background: #fff;
    color: #333;
    margin-left: 1.6rem;
    &:last-child {
      margin-left:0;
    }
  }
  .btn-tab-active {
    background: #51a0fc;
    color: #fff;
  }
}




</style>
