/**
* @Author wangliang
* @date 20220726
*/
<template>
  <div>
    <div class="rarle">
      <!--上部分-->
      <div style="width:100%;height: calc(35vh);background: linear-gradient(90deg, #76befa 0%, #3672f1 99%);">
        <tatle-bar :tatle="titleName" :tatleflag="titleflag" >
          <div class="jfNumber">2134</div>
        </tatle-bar>
      </div>

      <!--下部分-->
      <div style="width: 100%;height: calc(65vh);background-color: #ebeef5;">

        <div class="tab" style="border-radius: 10px;">
          <van-tabs v-model:active="active" line-width="70px" line-height="2px" color="#007bff" style="margin-top: 10px;">
            <van-tab title="积分收支明细" >
              <van-divider style="background-color: #c6c8ca;margin-top: 0px;height: 0.5px" />
              <!--按钮部分-->
<!--                <van-row>-->
<!--                  <van-col span="24">-->
<!--                    <van-row>-->
<!--                       <van-col  v-for="(item , index) in btn" :key="index" span="5"  :class="item.flage ? 'van-color-blow':'van-color-graw' " @click="all(index)">{{ item.text }}</van-col>-->
<!--                    </van-row>-->
<!--                  </van-col>-->
<!--                </van-row>-->
              <van-row>
                <van-col  v-for="(item , index) in btn" :key="index" span="5"  :class="item.flage ? 'van-color-blow':'van-color-graw' " @click="all(index)" style="margin-left: 10px;border-radius: 5px;margin-top: -10px">{{ item.text }}</van-col>
              </van-row>
              <van-row class="ms-style" >
                <van-col span="8" style="width: 90%;background-color: #ffffff;text-align: revert;margin-left: 14px;margin-top: 20px">本月获取积分<span style="color: #c69500">{{num}}</span> 已消耗3400</van-col>
              </van-row>
              <div style="width: 100%;height: 100%;">
                <van-row v-if="showNow">
                  <van-col span="4" style="margin-top: 10px;font-size: smaller;margin-left: -22px;">存款积分奖励</van-col>
                  <van-col span="10" offset="4" style="margin-top: 10px;font-size: smaller;margin-left: 88px;color: #c69500">
                    {{numA}}</van-col>
                </van-row>

                <van-row v-if="showNow">
                  <van-col span="4" style="margin-top: 8px;font-size: smaller;margin-left: -2px">2022-07-24 15:38</van-col>
                </van-row>
                <div v-if="showNow" style="width: 100%;height:1px;border: 1px solid #f5f2f0;"></div>
                <van-row v-if="showPast">
                  <van-col span="4" style="margin-top: 10px;font-size: smaller;margin-left: -34px;">过期积分</van-col>
                  <van-col span="10" offset="4" style="margin-top: 10px;font-size: smaller;margin-left: 100px;color: #171614">
                    {{numB}}</van-col>
                </van-row>

                <van-row v-if="showPast">
                  <van-col span="4" style="margin-top: 8px;font-size: smaller;margin-left: -2px">2022-07-24 15:38</van-col>
                </van-row>
              </div>
              <div v-if="showPast" style="width: 100%;height:1px;border: 1px solid #f5f2f0;"></div>
            </van-tab>

            <van-tab title="积分兑换记录">
              <van-divider style="background-color: #c6c8ca;margin-top: 0px;height: 0.5px"/>
              <div style="text-align: left;margin-left: 10px;font-size: small;">
                本月
              </div>
              <div class="littleCard d-flex mb-3" v-for="(item,index) in daijinquan" @click="changePage">
                <div class="p-2">
                  <img :src="require('@/assets/images/daijinquan.png')" style="width: 90px;height: 90px;" />
                </div>
                <div class="p-2 wordposition">
                  <div class="d-flex flex-column" style="margin-top: 6px;">
                    <div class="p-2 "><span style="color: #212529;font-weight: bolder;">200元利息代金券</span></div>
                    <div class="p-2 ">
                      <div><span style="color: #606266;font-size: smaller;position: absolute;margin-top: 0px;">价格:  20000</span></div>
                      <div><span style="color: #606266;font-size: smaller;position: absolute;margin-top: 16px;">时间: 20220725 11:28:32 兑换</span></div>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
          </van-tabs>

        </div>
      </div>
    </div>

  </div>
</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
@Component({
  name: "ExchangeRecord",
})
export default class ExchangeRecord extends Vue {
  showNow=true;
  showPast=true;
  active="";
  num=3842;
  numA="+3200";
  numB="-2000";
  titleName="积分收支明细";
  titleflag= true;
  daijinquan=[{},{},{}];
  all(params:number){
    if(params ==0){//点击全部
      this.btn[0].flage=true;
      this.btn[1].flage=false;
      this.btn[2].flage=false;
      this.showNow=true;
      this.showPast=true;
      //todo
    } else if(params ==1){//点击全部
      this.btn[0].flage=false;
      this.btn[1].flage=true;
      this.btn[2].flage=false;
      this.showPast=false;
      this.showNow=true;
      //todo
    }if(params ==2){//点击全部
      this.btn[0].flage=false;
      this.btn[1].flage=false;
      this.btn[2].flage=true;
      this.showNow=false;
      this.showPast=true;
      //todo
    }
  }
  btn:any=[
    {text:'全部',flage:true},
    {text:'已获取',flage:false},
    {text:'已消耗',flage:false},
  ];
  changePage() {
    this.$router.push({
      name: "ExchangeDetail",
    });
  }
}
</script>

<style scoped lang="scss">
.body{
  width: 96%;
  background-color: #02a7f0;
  border-radius: 6px;
  margin-left: 2%;
  z-index: 10;
}
.jfNumber{
  font-size: 24px;
  color: #ffffff;
  font-weight: 900;
  margin-left: 2%;
  margin-top: 18%;
}
.tab{
  position: fixed;
  top: 24vh;
  left: auto;
  left: 2%;
  width: 96%;
  height: 74%;
  margin: 0px auto;
  text-align: center;
  background-color: #ffffff;

}
.van-col--l {
  margin-top: 10px;
  background-color: #1989fa;
  border-radius: 5px;
  margin-left: 5px;
  border: 1px solid;
}
.van-col--b {
  margin-top: 10px;
  background-color: #ffffff;
  border-radius: 5px;
  margin-left: 5px;
  border: 1px solid;
}
.ms-style{
  width: 90%;
  text-align: initial;
  background-color: #ffffff;
}
.van-col--4 {
  width: 40%;
}
.littleCard {
  background-color: #f5f7fa;
  width: 94%;
  margin-left: 3%;
  height: fit-content;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgb(221 221 221);
  margin-top: 10px;
}
.wordposition {
  text-align: left;
  margin-left: -16px;
}
.van-color-blow{
  text-align: center;font-size: 12px;border: 1px solid;background-color: #02a7f0;width: 50px;
}
.van-color-graw{
  text-align: center;font-size: 12px;border: 1px solid;background-color: #ffffff;width: 50px;
}
</style>