<template>
  <div class="main">
    <div class="banner">
      <!-- <div class="user_name">
        <img src="../assets/images/MCenter/user.png" alt />
        <div>微信昵称</div>
      </div>-->
      <div class="yz" v-show="show?false:true">
        <img src="../assets/images/MCenter/yz.png" alt />
        <p>完成会员验证，获取更多会员权利</p>
        <div class="mc_btn" @click="yz()">会员验证</div>
      </div>
      <div class="content" v-show="show">
        <div class="cont_bg"></div>
        <div class="jxw" id="jxw">
          <ul class="qplist" style="height:3rem" ref="qplist">
            <li
              v-for="(item,index) in TEstData1"
              :key="index"
              @click="qbclick(index,item.value,item)"
              v-text="item.value"
              v-if="item.increase && index < 5 && !item.isDraw"
              :data-id="index"
            ></li>
          </ul>
          <!-- <div class="num_jf" @click="have()" v-text="num_jf" v-if="num_jf!=0"></div> -->
          <!-- <canvas id="myCanvas"  style="border: 1px solid red">当前浏览器不支持canvas</canvas> -->
          <div class="box"></div>
          <div class="jj">
            <div :class="{'action':isaction}"></div>
            <span class="jifen">{{all_num}}</span>
          </div>
        </div>
        <span class="rule" @click="jumpmemberjf">积分规则</span>
        <!-- <router-link to="/memberjf" class="rule">积分规则</router-link> -->
      </div>
      <div class="user_name" v-if="!isbd">
        <img :src="usermessage.headimgurl" />

        <div class="ellips">{{usermessage.nickname}}</div>
      </div>
    </div>

    <div id="section-2" style="position: relative;
    z-index: 2">
      <div class="tab">
        <ul>
          <li @click="jumdingdan">
            <img src="../assets/images/MCenter/wl.png" alt />
            <span>订单物流</span>
          </li>
          <li @click="jumpjkda">
            <img src="../assets/images/MCenter/jk.png" alt />
            <span>健康档案</span>
          </li>
          <li @click="jumpinorder">
            <img src="../assets/images/MCenter/jf.png" alt />
            <span>积分订单</span>
          </li>
          <li @click="jumpshdz">
            <img src="../assets/images/MCenter/sh.png" alt />
            <span>收货地址</span>
          </li>
        </ul>
        <div class="doctor" v-show="show"></div>
      </div>
      <div class="yhq">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了~~" @load="onLoad">
          <ul>
            <li v-for="(item,index) in  list" :key="index" @click="jumpToProductDetail(index)">
              <img v-lazy="item.pics[0].picUrl" show-loading />
              <!-- <img :src="item.pics[0]== undefined ?'//image.360lj.com/nopic.gif':item.pics[0].picUrl"/> -->
              <h2 class="ellips2">{{item.ProductName}}</h2>

              <div v-if="item.productLevel.length == 0">
                <p
                  :style="{'color':'red',' text-decoration':'line-through'}"
                >{{item.MarketIng}}积分+{{item.MarketPrice|fixed}}元</p>
              </div>
              <div v-if="item.productLevel.length > 0">
                <p
                  style="color:red;text-decoration:none"
                >{{item.productLevel[0].marketIng}}积分+{{item.productLevel[0].marketPrice | fixed}}元</p>
                <p
                  style="color:#999999;text-decoration:line-through"
                >{{item.MarketIng}}积分+{{item.MarketPrice|fixed}}元</p>
              </div>
            </li>
          </ul>
        </van-list>

        <!-- <li v-for="(item,index) in  shopData" :key="index" @click="jumpToProductDetail(index)">
            <img :src="item.pics[0]== undefined ?'//image.360lj.com/nopic.gif':item.pics[0].picUrl" />
            <h2>{{item.ProductName}}</h2>
            <div>
              <p style=" color:#f63a00;" v-show="show">
                {{item.productLevel.marketIng?item.productLevel.marketIng:""}}积分
                +
                {{item.productLevel.marketPrice?item.productLevel.marketPrice:""}}元
              </p>
              <p
                :style="{'color':(show?'#999999':'red'),' text-decoration':(show?'none':'line-through')}"
              >{{item.MarketIng}}积分+{{item.MarketPrice}}元</p>
            </div>
        </li>-->
      </div>
    </div>
    <!-- <div class="warn_text">没有更多了~~~</div> -->
  </div>
</template>
<script>
import $ from "jquery";

export default {
  name: "MCenter",
  data() {
    return {
      id: "", //商品id
      isVip: false,
      show: false,
      all_num: 0,
      // now_allnum: 0,
      lasttotal: sessionStorage.getItem("lasttotal"),
      pageIndex: 1,
      pageSize: 10,
      list: [],
      productLevelData: {},
      loading: false,
      finished: false,
      usermessage: {
        headimgurl: ""
      },
      pageData: {
        page: 1,
        size: 10
      },
      onceClick: false,
      isaction: false,
      clicknum: 0, //点击数量
      isbd: sessionStorage.getItem("userDate") == null, //正确是没绑定
      sessionjfnumber: [], //点击后session里的积分数值
      TEstData: [
        // {
        //     increase:true,
        //     value:10,
        // },
        // {
        //     increase:false,
        //     value:20,
        // },
        // {
        //     increase:true,
        //     value:30,
        // },
        // {
        //     increase:true,
        //     value:40,
        // },
        // {
        //     increase:true,
        //     value:50,
        // },
        // {
        //     increase:false,
        //     value:0,
        // },
        // {
        //     increase:false,
        //     value:0,
        // },
        // {
        //     increase:true,
        //     value:0,
        // },
        // {
        //     increase:true,
        //     value:0,
        // },
      ], //昨天积分数据列表
      TEstData1: [], //用来展示的积分数据列表
      TEstData2: [] //点击过的数组
    };
  },
  created() {
    // this.GetIntegralListByUser();
    // this.point();
    this.getWXUser();
    this.isbinding();
    // this.point();
    // this.getWXUser()
    // this.TestFun();
    // this.point();
  },
  filters: {
    fixed: function(value) {
      return (value / 100).toFixed(2);
    }
  },

  methods: {
    //获取用户信息
    getWXUser() {
      this.$http.wxuser().then(res => {
        if (res.data.success) {
          this.usermessage = res.data.data;

          this.all_num = res.data.data.point;
          sessionStorage.setItem("userphone", res.data.data.secretPhone);

          this.point();
        }
      });
    },
    //获取昨天游戏积分
    point() {
      // 获取本地积分数据
      let pointList = JSON.parse(localStorage.getItem("pointList"));
      var time = new Date().getDate();
      if (pointList) {
        // 比较时间
        if (time == pointList.time) {
          // 积分数据
          this.TEstData = pointList.list;

          // var jfobj = JSON.parse(sessionStorage.getItem("jflast"));
          // if (jfobj) {
          //   this.TEstData = this.myFilter(jfobj, this.TEstData);
          // }
          this.TEstData1 = this.TEstData.filter(a => a.increase);
          //  console.log(jflastObj);
          // console.log(this.myFilter(jflastObj, this.TEstData));
          this.Totalscore();
        } else {
          // 需要重新请求积分接口
          this.getPoint();
        }

        return;
      }
      this.getPoint();
    },

    //获取新的积分
    getPoint() {
      this.$http.GetIntegraYesterdayList().then(res => {
        // console.log(res);
        // 积分数据
        // console.log(res.data.data);
        this.TEstData = res.data.data.map(v => {
          v.isDraw = false; //是否领取
          return v;
        });
        debugger;
        // 将积分存在本地
        localStorage.setItem(
          "pointList",
          JSON.stringify({
            list: this.TEstData, //积分数据
            time: new Date().getDate() //当前日期
          })
        );

        // let arr = [];
        // for (let i in jflastObj) {
        //   arr.push(jflastObj[i]);
        // }

        // var jfobj = JSON.parse(sessionStorage.getItem("jflast"));
        // if (jfobj) {
        //   this.TEstData = this.myFilter(jfobj, this.TEstData);
        // }
        this.TEstData1 = this.TEstData.filter(a => a.increase);
        //  console.log(jflastObj);
        // console.log(this.myFilter(jflastObj, this.TEstData));
        this.Totalscore();
      });
    },
    // 模拟积分数据 Start
    // TestFun() {
    //       console.log(this.TEstData);

    // },
    //计算总积分
    Totalscore() {
      // var jfnumber = JSON.parse(sessionStorage.getItem("jfnumber"));
      // if (jfnumber) {
      //   var lastjf = 0;
      //   for (var i = 0; i < this.TEstData.length; i++) {
      //     if (this.TEstData[i].increase) {
      //       lastjf += this.TEstData[i].value;
      //     } else {
      //       lastjf -= this.TEstData[i].value;
      //     }
      //   }

      //   this.all_num += lastjf;
      // } else {
      //   //昨天积分
      //   var lastjf = 0;
      //   for (var i = 0; i < this.TEstData.length; i++) {
      //     if (this.TEstData[i].increase) {
      //       lastjf += this.TEstData[i].value;
      //     } else {
      //       lastjf -= this.TEstData[i].value;
      //     }
      //   }
      //   this.all_num -= lastjf;
      // }
      var lastjf = 0;
      var localjf = 0;
      let pointList = JSON.parse(localStorage.getItem("pointList"));

      for (var i = 0; i < this.TEstData.length; i++) {
        if (this.TEstData[i].increase) {
          lastjf += this.TEstData[i].value;
        } else {
          lastjf -= this.TEstData[i].value;
        }
      }
    if(pointList){
      for (var i = 0; i < pointList.list.length; i++) {
          if (pointList.list[i].isDraw) {
            localjf += pointList.list[i].value;
          }
        }
               
    }
      this.all_num =  this.all_num -lastjf + localjf;
    },
    // 模拟积分数据 End
    onLoad() {
      // this.reload()
      if (this.finished) return;
      this.GetIntegralListByUser();
    },
    //去掉重复
    myFilter(arraySmall, arrayBig) {
      var result = [];
      for (var i = 0; i < arrayBig.length; i++) {
        if (arraySmall.indexOf(arrayBig[i].id) === -1) {
          result.push(arrayBig[i]);
        }
      }
      return result;
    },
    //点击泡泡 更新积分
    qbclick(index, point, item) {
      if (this.onceClick) return;
      this.onceClick = true;

      // 将是否领取变为true
      // item.isDraw = true;

      this.TEstData2.push(item.id);
      this.sessionjfnumber.push(item.value);
      sessionStorage.setItem("jflast", JSON.stringify(this.TEstData2));
      sessionStorage.setItem("jfnumber", JSON.stringify(this.sessionjfnumber));
      var that = this;
      // this.TEstData1[index].increase = false;
      // that.unbind("click")
      // var userpoint = [].push({this.TEstData1[index]})
      // sessionStorage.setItem("userPoint")

      $(".qplist>li[data-id=" + index + "]").animate(
        {
          width: 0,
          height: 0,
          top: "3rem",
          opacity: 0,
          marginLeft: 0
        },
        1000,
        function() {
          that.isaction = true;
          that.all_num += point;
          // var arr = [];
          // if (that.clicknum == that.TEstData.length) {
          //   return;
          // }
          // if (that.clicknum == 5 || that.clicknum % 5 == 0) {
          $(".qplist>li").removeAttr("style");
          // arr = that.TEstData.slice(that.clicknum, that.clicknum + 5);
          // that.TEstData[index].increase = false;
          // that.TEstData1.splice(index,1);

          that.$set(that.TEstData1, index, {
            value: that.TEstData1[index].value,
            increase: false
          });

          var a = that.TEstData1.filter(a => a.increase); //过滤出数据为true的数据
          // if(a.length < 5){
          //   for(var i = 0;i<5-a.length;i++){
          //     a.push({value:0,increase:false,isTest:true});
          //   }
          // }
          var b = that.TEstData1.filter(a => !a.increase); //过滤出数据为false的数据

          that.TEstData1 = a.concat(b);
          // that.TEstData1 = that.TEstData1.sort(a=>a.increase);
          // that.TEstData1= Object.assign({}, that.TEstData1[index], {increase:false})
          // for (var i = 0; i < that.TEstData1.length; i++) {
          //   that.$set(that.TEstData1, i, arr[i]);
          // }
          // }
        }
      );
      // that.clicknum++; //点击次数
      setTimeout(() => {
        item.isDraw = true;
        localStorage.setItem(
          "pointList",
          JSON.stringify({
            list: this.TEstData, //积分数据
            time: new Date().getDate() //当前日期
          })
        );
      }, 1000);
      setTimeout(_ => {
        this.onceClick = false;
      }, 2000);
      setTimeout(() => {
        that.isaction = false;
      }, 2000);
      // $(this).unbind("click");
    },
    //跳转健康档案
    jumpjkda(index) {
      if (this.isbd) {
        this.isbdfunction();
      } else {
        this.$toast("功能正在开发中，敬请期待！");
      }
    },
    //跳转收货地址
    jumpshdz(index) {
      if (this.isbd) {
        this.isbdfunction();
      } else {
        this.$toast("功能正在开发中，敬请期待！");
      }
    },
    //跳转商品详情
    jumpToProductDetail(index) {
      this.$router.push({
        path: "/shopDetails",
        query: { ...this.list[index] }
      });
    },
    //跳转物流
    jumdingdan() {
      if (this.isbd) {
        this.isbdfunction();
      } else {
        this.$router.push({ path: "/IntegralOrdercopyJF" });
      }
    },
    //跳转积分订单
    jumpinorder() {
      if (this.isbd) {
        this.isbdfunction();
      } else {
        this.$router.push({ path: "/IntegralOrder" });
      }
    },
    //跳转积分规则
    jumpmemberjf() {
      this.$router.push({ path: "/memberjf", query: { point: this.all_num } });
    },
    //会员验证
    yz() {
      // $(".yz").hide();
      // $(".content").show();
      // this.show = true;
      this.$router.push({ path: "/binding" });
    },
    //判断是否绑定手机
    isbinding() {
      var status = sessionStorage.getItem("userDate");
      if (status) {
        $(".yz").hide();
        $(".content").show();
        this.show = true;
      }
    },
    //判断会员等级
    isvipleave() {
      if (this.list[0].productLevel.length == 0) {
        isVip = true;
      }
    },
    // 获取会员积分商品
    GetIntegralListByUser() {
      var obj = this.pageData;
      this.$http.GetIntegralListByUser(obj).then(res => {
        if (res.data.success) {
          this.loading = false;
          this.list = this.list.concat(res.data.data.content);
          // console.log(this.list.concat(res.data.data.content));
          //判断会员等级
          // this.isvipleave()
          //全部加载完成
          if (this.list.length == res.data.data.totalElements) {
            this.finished = true;
          }
          this.pageData.page++;
        } else {
          this.$toast(res.data.msg);
        }
      });
    },

    //判断是否绑定手机
    isbdfunction() {
      this.$dialog
        .confirm({
          message: "请先绑定手机号"
        })
        .then(() => {
          this.$router.push({
            path: "/binding"
          });
        })
        .catch(() => {});
    }
  },
  mounted() {
    // this.getWXUser();
    // this.Totalscore();
  },
  watch: {},
  // 离开页面再设置一次积分数据
  beforeDestroy() {
    localStorage.setItem(
      "pointList",
      JSON.stringify({
        list: this.TEstData, //积分数据
        time: new Date().getDate() //当前日期
      })
    );
  }
};
</script>
<style lang="less">
body {
  background-color: #f3f3f3;
}
.cont_bg {
  width: 100%;
  height: 11.8rem;
  margin: 0 auto;
  background: url(../assets/images/MCenter/banner.png) no-repeat center/100%;
  position: absolute;
  top: 0;
  left: 0;
}
.banner {
  position: relative;
  .user_name {
    position: absolute;
    top: 0.2rem;
    left: 0;
    font-size: 0.3rem;
    width: 2.5rem;
    border-radius: 0 0.5rem 0.5rem 0;
    color: #fff;
    height: 0.78rem;
    line-height: 0.68rem;
    text-align: center;
    background-image: linear-gradient(to right, #74aaff, #78adff);
    box-shadow: 0.1rem 0.1rem 0.1rem #00000026;
    display: flex;
    flex-flow: row nowrap;
    justify-items: center;
    align-items: center;
    padding-right: 0.1rem;
    img {
      display: inline-block;
      height: 0.6rem;
      width: 0.6rem;
      object-fit: contain;
      margin: 0 0.1rem;
      border-radius: 50%;
    }
  }
  .yz {
    width: 100%;
    height: 5.6rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    img {
      width: 2.6rem;
      height: 2.6rem;
      object-fit: contain;
      margin-top: 0.8rem;
    }
    .mc_btn {
      height: 0.6rem;
      width: 2rem;
      margin: 0 auto;
      line-height: 0.6rem;
      text-align: center;
      border-radius: 0.5rem;
      color: #fff;
      background-image: linear-gradient(to right, #4598ff, #70afff);
      font-size: 0.3rem;
      margin-bottom: 0.2rem;
    }
  }
  .content {
    width: 100%;
    height: 6.4rem;
    margin: 0 auto;
    // background: url(../assets/images/MCenter/banner.png) no-repeat center/100%;
    .num_jf {
      // position: absolute;
      // top: 0;
      // left: 50%;
      // margin-left: -0.27rem;
      // width: 0.53rem;
      // height: 0.98rem;
      // text-align: center;
      // line-height: 2.5rem;
      // font-size: 0.3rem;
      // color: #fff;
      // background: url(../assets/images/MCenter/pao.png) no-repeat center/100%;
      // animation: move 1s infinite ease-in alternate;
    }
    @keyframes move {
      to {
        top: 0.5rem;
      }
      form {
        top: 1rem;
      }
    }
    .rule {
      background-color: #fff;
      padding: 0.05rem 0.2rem;
      color: #1ccfc9;
      font-size: 0.3rem;
      text-align: center;
      border-radius: 0.35rem;
      position: absolute;
      right: 0.2rem;
      bottom: 0rem;
      box-shadow: 0 0.1rem 0.1rem #00000029;
    }
    .jxw {
      width: 100%;
      margin: 0 auto;
      height: 100%;
      position: relative;
      top: 1.6rem;
      .qplist {
        li {
          width: 0.53rem;
          height: 0.98rem;
          text-align: center;
          line-height: 2.5rem;
          font-size: 0.3rem;
          color: #fff;
          background: url(../assets/images/MCenter/pao.png) no-repeat
            center/100%;
        }
        li[data-id="0"] {
          position: absolute;
          top: 0;
          left: 50%;
          margin-left: -0.27rem;
        }
        li[data-id="1"] {
          position: absolute;
          top: 0.5rem;
          left: 50%;
          margin-left: -1.47rem;
        }
        li[data-id="2"] {
          position: absolute;
          top: 0.5rem;
          left: 50%;
          margin-left: 0.97rem;
        }
        li[data-id="3"] {
          position: absolute;
          top: 0;
          left: 50%;
          margin-left: -2.47rem;
        }
        li[data-id="4"] {
          position: absolute;
          top: 0;
          left: 50%;
          margin-left: 1.9rem;
        }
      }
      .box {
        position: absolute;
        width: 4.8rem;
        height: 3.57rem;
        left: 50%;
        margin-left: -2.4rem;
        bottom: -0.3rem;
        background: url(../assets/images/MCenter/box.png) no-repeat center/100%;
      }
      .jj {
        position: absolute;
        width: 1.92rem;
        height: 1.89rem;
        left: 50%;
        margin-left: -0.96rem;
        bottom: 2.2rem;
        // background: url(../assets/images/MCenter/jxw.png) no-repeat center/100%;
        text-align: center;
        > div {
          width: 1.92rem;
          height: 1.89rem;
          background: url(../assets/images/MCenter/jxw.png) no-repeat
            center/100%;
        }
        .action {
          animation: actmove 1s ease;
          animation-iteration-count: 1;
        }
        @keyframes actmove {
          0% {
            -webkit-transform: scale(1, 1);
          }

          35% {
            -webkit-transform: scale(1.17, 1.17);
          }

          70% {
            -webkit-transform: scale(1.2, 1.2);
          }

          100% {
            -webkit-transform: scale(1.3, 1.3);
          }
          20% {
            transform: rotate(15deg);
          }

          40% {
            transform: rotate(-10deg);
          }

          60% {
            transform: rotate(5deg);
          }

          80% {
            transform: rotate(-5deg);
          }

          100% {
            transform: rotate(0);
          }
        }
        .jifen {
          background-color: #fff;
          padding: 0.02rem 0.2rem;
          color: #1ccfc9;
          font-size: 0.3rem;
          text-align: center;
          border-radius: 0.2rem;
        }
      }
    }
  }
}
.doctor {
  position: absolute;
  top: -1rem;
  left: 1.4rem;
  width: 0.75rem;
  height: 1.58rem;
  background: url(../assets/images/MCenter/doctor.png) no-repeat center/100%;
}
.tab {
  // position: absolute;
  // top:6rem;
  // left: 50%;
  //  margin-left: -3.41rem;
  width: 6.82rem;
  padding: 0.3rem 0;
  border-radius: 0.15rem;
  background-color: #fff;
  box-shadow: 0rem 0rem 0.45rem #529fff40;
  margin: 0.3rem auto;
  ul {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    li {
      width: 24%;
      height: 80%;
      font-size: 0.26rem;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
      img {
        width: 0.96rem;
        height: 0.96rem;
        object-fit: contain;
        margin: 0 auto;
      }
    }
  }
}
.yhq {
  width: 6.82rem;
  margin: 0 auto;
  // position: relative;
  // top: 2.5rem;
  // left: 50%;
  // margin-left: -3.41rem;
  // &:after {
  //   content: "没有更多了~~";
  //   display: block;
  //   width: 100%;
  //   height: 1rem;
  //   line-height: 1rem;
  //   color: #999999;
  //   text-align: center;
  //   font-size: 0.3rem;
  // }
  ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    a {
      display: block;
      width: 100%;
      height: 100%;
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;
    }
    li {
      width: 48%;
      height: 4.3rem;
      background-color: #fff;
      border-radius: 0.2rem;
      padding: 0.2rem;
      text-align: center;
      margin-bottom: 0.25rem;
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;
      img {
        width: 100%;
        height: 2.38rem;
        object-fit: contain;
      }
      h2 {
        font-size: 0.25rem;
        font-weight: bold;
        max-height: 1.5rem;
        // margin: .2rem 0 .5rem;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
      }
      p {
        font-size: 0.26rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.warn_text {
  height: 1rem;
  line-height: 1rem;
  color: #999999;
  text-align: center;
  font-size: 0.3rem;
}
</style>
