<template>
  <div class="point-mall-contain">
    <section>
      <div class="point-mall-swiper">
        <van-swipe class="goods-swipe" :autoplay="3000"  indicator-color="#ffffff">
          <van-swipe-item v-for="(item, index) in banners" :key="'banner'+index">
            <img :src="item.banner" alt="img" style="width: 100%;" @click="toUrl(item.url)"/>
          </van-swipe-item>
        </van-swipe>
      </div>
    </section>
    <section>
      <div class="point-mall-member border-box">
        <div class="point-mall-member_header">
          <div class="flex flex-space-between">
            <div class="point-member-header_left flex flex-align-center flex-pack-center">
              <div class="flex">
                <div class="point-member-photo border-box">
                  <img :src="userData.imageUrl" alt="" />
                </div>
                <div class="point-member-info flex flex-column flex-space-between p-l-12">
                  <p class="color-fff flex-1 flex flex-align-center">
                    <span class="font-18">Hi </span><span class="font-12 p-l-6 member-name-limit" :alt="userData.memberName"> {{userData.memberName}}</span><span class="font-13 color-000 memeber-level">{{userData.gradeName}}</span>
                  </p>
                  <p class="color-fff font-12 flex-1 flex flex-align-center">可用积分：{{userData.credits}}</p>
                </div>
              </div>
            </div>
            <div class="point-member-header_right">
              <div :class="['point-member-sign border-box flex flex-column flex-align-center flex-pack-center', userData.signFlag ? 'has-sign' : '']" @click="toSign">
                <transition-group name="slide-up-fade">
                  <template v-if="!userData.signFlag">
                    <p class="font-12 color-cdb794 " key="1">签到</p>
                    <p class="font-16 color-cdb794 " key="12">+10 <i class="font_family icon-jifen font-10 color-cdb794"></i></p>
                  </template>
                </transition-group>
                <template v-if="userData.signFlag && userData.flagFade">
                  <p :class="['font-12 color-c6c6c6', !userData.signFlag ? 'scale-0' : 'scale-1']">今日</p>
                  <p :class="['font-12 color-c6c6c6', !userData.signFlag ? 'scale-0' : 'scale-1']">已签</p>
                </template>
              </div>
            </div>
          </div>
        </div>
        <div class="point-mall-member_bottom">
          <ul class="flex">
            <li class="flex-1" @click="toPointPrize">
              <p class="color-cabaa0 font-20 text-center"><i class="font-36 font_family icon-jifenchoujiang"></i></p>
              <p class="color-efeeea font-12 m-t-13 text-center">积分抽奖</p>
            </li>
            <li class="flex-1" @click="toPointRecord">
              <p class="color-cabaa0 font-20 text-center"><i class="font-36 font_family icon-wenhualipin"></i></p>
              <p class="color-efeeea font-12 m-t-13 text-center">兑换记录</p>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <div class="point-mall-body border-box">
      <section>
        <div class="point-mall-card border-box">
          <div class="point-mall-common_header border-box">
            <div class="point-common-header_wrap border-box">
              <p class="common-mall-h2">卡券兑换</p>
              <p class="common-mall-h3">领券立减 购物直降更优惠</p>
            </div>
          </div>
          <div class="point-mall-brand border-box">
            <ul>
              <template v-for="(item, index) in brandsData">
                <li :key="index" :class="[activeBrand == item ? 'li-active': '']" @click="selectBrand(item, index)">
                  {{item}}
                </li>
              </template>
            </ul>
          </div>
          <div class="point-mall-card_body border-box">
            <ul>
              <template v-for="(item, index) in cardsData">
                <li :key="index" class="border-box" @click="toDetail(item)">
                  <div class="point-card-cell border-box">
                    <div class="point-card-cell_header border-box">
                      <div class="point-card-condition flex flex-space-between">
                        <div class="point-card-condition_brand"><img :src="item.cardBrand" alt=""/></div>
                        <div class="point-card-condition_text font-10 color-000">{{item.threshold == '0' || item.threshold == '' ? '' : `满${item.threshold}使用` }}</div>
                      </div>
                      <div class="point-card-price">
                        <span class="font-12">￥</span><span class="font-24">{{item.couponValue}}</span><span class="absolute-card-type">{{item.couponType == 10 ? '兑换券' : '抵金券'}}</span>
                      </div>
                    </div>
                    <div class="point-card-cell_footer border-box">
                      <span v-if="item.paymentMethod == '10'">{{item.defaultConsumptionIntegral}}积分兑换</span>
                      <span v-if="item.paymentMethod == '20'">{{item.defaultConsumptionIntegral}}积分+{{item.defaultConsumptionMoney}}元兑换</span>
                      <span v-if="item.paymentMethod == '30'">{{item.defaultConsumptionMoney}}元兑换</span>
                    </div>
                  </div>
                  <div class="card-no-condition" v-if="item.threshold == '' || item.threshold == '0'">无门槛</div>
                </li>
              </template>
            </ul>
          </div>
        </div>
      </section>
      <section>
        <div class="point-mall-ads" @click="toUrl(adsData.url)">
          <img :src="adsData.src" alt="" style="width: 100%;"/>
        </div>
      </section>
      <section>
        <div class="point-mall-goods border-box">
          <div class="point-mall-common_header border-box">
            <div class="point-common-header_wrap border-box">
              <p class="common-mall-h2">限定周边</p>
              <p class="common-mall-h3">限定周边 限量抢兑</p>
            </div>
          </div>
          <div class="point-mall-goods_body border-box">
            <div class="point-mall-goods_list">
              <van-list
                v-if="!!goodsData.length"
                v-model="loading"
                :finished="finished"
                finished-text=" "
                class="van-clearfix"
                @load="onLoad">
                <ul class="point-goods-list_ul">
                  <template v-for="(item, index) in goodsData">
                    <li :key="index" class="point-goods-list_li border-box" @click="toDetail(item)">
                      <div class="point-mall-goods_cell border-box">
                        <p class="font-12 color-757575 border-dashed">{{item.exchangeLimit == '0' || item.exchangeLimit == '' ? '不限兑' : `每人限兑：${item.exchangeLimit}件` }}</p>
                        <p class="font-12 color-757575 p-t-2">剩余{{item.stock}}件</p>
                        <div class="m-t-6 m-b-6"><img class="goods-pic" :src="item.thumbnail" alt=""/></div>
                        <p class="font-10 color-b3b3b3 good-title-hidden">{{item.goodsTitle}}</p>
                        <p class="font-11 color-c9b799">
                          <span v-if="item.paymentMethod == '10'" class="point-border">积分{{item.defaultConsumptionIntegra}}</span>
                          <span v-if="item.paymentMethod == '20'" class="point-border">积分{{item.defaultConsumptionIntegral}}+￥{{item.defaultConsumptionMoney}}</span>
                          <span v-if="item.paymentMethod == '30'" class="point-border">￥{{item.defaultConsumptionMoney}}</span>
                        </p>
                        <p class="font-11 color-757575"><span>吊牌价</span><span class="line-through">￥{{item.marketPrice}}</span></p>
                      </div>
                    </li>
                  </template>
                </ul>
              </van-list>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>
<script>
import { Swipe, SwipeItem, Icon, List, Toast } from 'vant'; //Toast
// import publicMethod from '@/assets/js/public.js';
import { getUserData, getSignData, postTokenData, getBrandData, getCardData, getGoodsData } from '@/api/pointMall.js';

export default {
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Icon.name]: Icon,
    [List.name]: List
  },
  data() {
    return {
      banners: [
        {
          banner: require('../../assets/images/point-mall/banner-leding.jpg'),
          url: ''
        },
        {
          banner: require('../../assets/images/point-mall/banner-men.jpg'),
          url: ''
        },
        {
          banner: require('../../assets/images/point-mall/banner-women.jpg'),
          url: ''
        },
        {
          banner: require('../../assets/images/point-mall/banner-child.jpg'),
          url: ''
        },
        {
          banner: require('../../assets/images/point-mall/banner-mg.jpg'),
          url: ''
        },
      ],
      loading: false,
      finished: false,
      token: '',
      userData: {
        memberName: '', // 会员姓名
        gradeName: '', // 会员等级
        imageUrl: '',
        credits: '0', // 可用积分
        memberId: '', // 会员id
        signFlag: true,
        flagFade: true,
        cardFlag: false, // 是否有集团卡
        enterpriseId: '', // 企业 id
        appkey: '', // 获取 token 用
        activityUrl: '' // 积分抽奖地址
      },
      activeBrand: '女装',
      brandsData: ['女装','男装','乐町','MG','童装'],
      logoList: [
        {
          brandName: '女装',
          logo: require('../../assets/images/logo01_248_124.png')
        },
        {
          brandName: '男装',
          logo: require('../../assets/images/logo02_248_124copy.png')
        },
        {
          brandName: '乐町',
          logo: require('../../assets/images/logo03_248_124.png')
        },
        {
          brandName: 'MG',
          logo: require('../../assets/images/logo04_248_124.png')
        },
        {
          brandName: '童装',
          logo: require('../../assets/images/logo05_248_124.png')
        }
      ],
      cardsData: [
       /*  {
          cardId: '1',
          couponType: '代金券',
          cardBrand: require('../../assets/images/logo02_248_124copy.png'),
          couponValue: '20',
          defaultConsumptionIntegral: '2000',
          threshold: '',
          url: ''
        } */
      ],
      adsData: {
        src: require('../../assets/images/point-mall/ads.jpg'),
        url: ''
      },
      goodsData: [
        /* {
          exchangeLimit: 1,
          stock: 4,
          goodsTitle: '太平鸟青年卫衣',
          thumbnail: 'https://pic01-10001430.image.myqcloud.com/ab89aa0c-7cd6-43bf-8fa1-ede0a0970549',
          defaultConsumptionIntegra: '12345',
          marketPrice: '656',
          url: ''
        } */
      ],
      currentPage: 1,
      pageSize: 6,
      totalCount: 0,
      totalPage: 0
    };
  },

  methods: {
    changeRoute(path) {
      this.$router.push(path);
    },

    /**
     * 切换品牌
     */
    selectBrand(item, index) {
      this.activeBrand = item;
      this.getCardsData(index);
    },

    /**
     * 签到
     */
    toSign() {
      const that = this;
      if (that.userData.signFlag) {
        return false;
      }
      that.postSign();
    },

    /**
     * post 签到
     */
    async postSign() {
      const that = this;
      let param = {
        // memberId: 'ff80808163a6ab7a0163a6abd0710000',
        // enterpriseId: 'ff808081593917d90159398ec6340012'
      }
      let resData = await getSignData(param);
      if (resData.errorCode == 0) {
        that.getMemberData();
        that.userData.signFlag = true;
        const fadeTime = setTimeout(() => {
          that.userData.flagFade = true;
          clearTimeout(fadeTime);
        }, 400);
      }else {
        Toast(resData.message);
      }
    },

    /**
     * 跳转积分抽奖
     */
    toPointPrize() {
      const that = this;
      window.location.href = `${that.userData.activityUrl}&memberId=${that.userData.memberId}&credits=${that.userData.credits}&appkey=${that.userData.appkey}`;
    },
    /**
     * 跳转兑换记录
     */
    toPointRecord() {
      const that = this;
      window.location.href = `https://center.yueshiwl.com/#/myOrder?memberId=${that.userData.memberId}&credits=${that.userData.credits}&appkey=${that.userData.appkey}`;
    },

    /**
     * banner 跳转
     */
    toUrl(url) {
      // let that = this;
      if (url) {
        window.location.href = url;
      }
    },

    /**
     * 跳转卡券详情页
     */
    toDetail(item) {
      const that = this;
      window.location.href = `${item.url}&memberId=${that.userData.memberId}&credits=${that.userData.credits}&appkey=${that.userData.appkey}`;
    },

    /**
     * sleep
     */
    wait(ms) {
      return new Promise(r => setTimeout(r, ms));
    },

    async onLoad() {
      const that = this;
      // 异步更新数据
      /* eslint-disable */
      console.log('load:')
      await that.wait(1000);
      if (that.goodsData.length >= that.totalCount) {
        // 加载状态结束
        that.loading = false;
        that.finished = true;
        return false;
      }
      that.currentPage = that.currentPage + 1;
      await that.getData();

      // 加载状态结束
      that.loading = false;
      // 数据全部加载完成
      if (that.goodsData.length >= that.totalCount) {
        that.finished = true;
      }
    },

    /**
     * 获取 card
     */
    async getCardsData(brandIndex) {
      const that = this;
      let param = {
        token: that.token,
        brand: that.brandsData[brandIndex]
      }
      let logoIndex = '';
      that.logoList.forEach((ele, index) => {
        if (ele.brandName == that.brandsData[brandIndex]) {
          logoIndex = index;
        }
      })
      let resData = await getCardData(param);
      if (resData.errorCode == 0) {
        if (resData.data.length) {
          resData.data.forEach(ele => {
            ele.cardBrand = that.logoList[logoIndex].logo;
          })
        }
        that.cardsData = resData.data;
      }else {
        Toast(resData.errorMessage);
      }
    },

    /**
     * 获取 goods
     */
    async getData() {
      const that = this;
      let param = {
        token: that.token,
        page: that.currentPage,
        rows: that.pageSize
      }
      let resData = await getGoodsData(param);
      if (resData.errorCode == 0) {
        if (resData.data.goodsResponses.length) {
          resData.data.goodsResponses.forEach(ele => {
            that.goodsData.push(ele)
          })
          that.totalCount = resData.data.total;
        }
      }else {
        Toast(resData.errorMessage);
      }
    },
    /**
     * 获取 brand
     */
    async getBrand() {
      const that = this;
      let param = {
        token: that.token
      }
      let resData = await getBrandData(param);
      if (resData.errorCode == 0) {
        let brandList = [];
        if (resData.data.length) {
          resData.data.forEach(ele => {
            if (ele != '') {
              brandList.push(ele);
            }
          })
        }
        that.brandsData = brandList || [];
        that.activeBrand = that.brandsData[0];
      }else {
        Toast(resData.errorMessage);
      }
    },
    /**
     * 获取 token
     */
    async getToken() {
      const that = this;
      let param = {
        uid: that.userData.memberId,
        credits: that.userData.credits,
        yushiappKey: that.userData.appkey
      }
      let resData = await postTokenData(param);
      if (resData.errorCode == 0) {
        that.token = resData.data.userToken;
        that.$nextTick(() => {
          that.getCardsData(0);
          that.getData();
        })
      }else {
        Toast(resData.errorMessage);
      }
    },

    /**
     * 获取用户数据
     */
    async getMemberData(flag) {
      const that = this;
      let param = {
        // memberId: 'ff80808163a6ab7a0163a6abd0710000',
        // enterpriseId: 'ff808081593917d90159398ec6340012'
      }
      let resData = await getUserData(param);
      if (resData.errorCode == 0) {
        resData.result.flagFade = resData.result.signFlag == 1 ? true : false;
        that.userData = resData.result;
        if (flag) {
          return false; // 签到后不在去获取token
        }
        await that.getToken();
      }else {
        Toast(resData.message);
      }
    },

    /**
     * 设置memberId
     */
    setMemberId() {
      let that = this;
      that.$store.dispatch('modifyMemberId','444')
    }
  },
  mounted() {
    let that = this;
    that.getMemberData();
    that.userData.memberId = that.$route.query.memberId;
  }
};
</script>

<style lang="less">
.point-mall-contain {
  position: relative;

  .point-mall-swiper {
    position: relative;
    font-size: 0;
  }

  .point-mall-member {
    position: relative;
    padding: 30px 20px 27px 20px;
    background: #000;

    .color-cabaa0 {
      color: #CABAA0
    }
    .color-efeeea {
      color: #EFEEEA;
    }
    .color-cdb794 {
      color: #cdb794;
    }
    .color-c6c6c6 {
      color: #c6c6c6;
    }
    .scale-0 {
      transition: all .3s ease;
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
    }
    .scale-1 {
      transition: all .3s ease;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }
    .point-mall-member_header {
      width: 100%;
      margin-bottom: 36px;
      .point-member-header_left {
        .member-name-limit {
          max-width: 86px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis
        }
        .point-member-photo {
          width: 60px;
          height: 60px;
          box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.2);
          border: 2px solid rgba(255,255,255,1);
          border-radius: 30px;
          img {
            width: 100%;
            border-radius: 50%;
          }
        }
        .memeber-level {
          margin-left: 12px;
          padding: 2px 7px;
          background: #CABAA0;
          border-radius:4px;
        }
      }
      .point-member-header_right {
        .slide-up-fade-enter-active {
          transition: all .2s ease;
        }
        .slide-up-fade-leave-active {
          transition: all .4s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }
        .slide-up-fade-leave-to {
          transform: translateY(-110px);
          opacity: 0;
        }
        .point-member-sign {
          width: 80px;
          height: 80px;
          border-radius: 40px;
          border: 2px solid #CABAA0;
          text-align: center;
          &.has-sign {
            border-color: #C6C6C6;
          }
        }
      }
    }
  }
  .point-mall-body {
    position: relative;
    width: 100%;
    background: #f8f7f7;
    .point-mall-common_header {
      width: 100%;
      padding: 0 10px;
      margin-bottom: 7px;
      .point-common-header_wrap {
        width: 100%;
        padding: 7px 8px 9px 8px;
        border-top: 1px dashed #252525;
        border-bottom: 1px dashed #252525;
        .common-mall-h2 {
          font-size: 16px;
          color: #000;
          font-weight: 500;
        }
        .common-mall-h3 {
          font-size: 12px;
          color: #000;
        }
      }
    }
  }
  .point-mall-card {
    position: relative;
    padding: 25px 0;
    .point-mall-brand {
      width: 100%;
      padding: 0 15px;
      margin-bottom: 10px;
      overflow: auto;
      white-space: nowrap;
      ul {
        width: 100%;
        font-size: 0;
        li {
          display: inline-block;
          width: 19%;
          height: 30px;
          line-height: 30px;
          text-align: center;
          color: #000;
          font-size: 12px;
          background:rgba(210,210,210,1);
          &.li-active {
            background:rgba(222,211,193,1);
          }
          &+li {
            margin-left: 1%;
          }
        }
      }
    }
    .point-mall-card_body {
      position: relative;
      width: 100%;
      padding: 0 15px;
      ul {
        width: 100%;
        overflow: hidden;
        li {
          position: relative;
          float: left;
          // display: inline-block;
          width: 48%;
          height: 92px;
          margin-bottom: 5px;
          overflow: hidden;
          &::before {
            content: '';
            position: absolute;
            left: -6px;
            top: 55px;
            width: 12px;
            height: 12px;
            border-radius: 6px;
            border: 1px solid #AAA99F;
            background: #F8F7F7;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            z-index: 2;
          }
          &::after {
            content: '';
            position: absolute;
            right: -6px;
            top: 55px;
            width: 12px;
            height: 12px;
            border-radius: 6px;
            border: 1px solid #AAA99F;
            background: #F8F7F7;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            z-index: 2;
          }
          &:nth-child(2n) {
            margin-left: 4%;
          }
          .card-no-condition {
            position: absolute;
            right: -16px;
            top: -4px;
            width: 51px;
            height: 26px;
            padding-top: 11px;
            font-size: 10px;
            color:#fff;
            text-align: center;
            background: #D25064;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            z-index: 2;
          }
          .point-card-cell {
            position: relative;
            width: 100%;
            border: 1px solid rgba(170,169,159,1);
            overflow: hidden;
            .point-card-cell_header {
              position: relative;
              // height: 61px;
              padding: 5px 15px 7.5px 10px;
              border-bottom: 1px dashed #DCD7D1;
              .point-card-condition {
                height: 28px;
                .point-card-condition_brand {
                  -webkit-transform: translate(-10px, -5px);
                  -moz-transform: translate(-10px, -5px);
                  -ms-transform: translate(-10px, -5px);
                  transform: translate(-10px, -5px);
                  img {
                    height: 28px;
                  }
                }
              }
              .point-card-price {
                position: relative;
                text-align: center;
                color: #000;
                height: 20px;
                line-height: 20px;
                span {
                  display: inline-block;
                  vertical-align: bottom;
                  &.font-12 {
                    line-height: 15px;
                  }
                  &.font-24 {
                    height: 20px;
                    line-height: 20px;
                  }
                }
                .absolute-card-type {
                  position: absolute;
                  right: 0;
                  bottom: -2px;
                  font-size: 10px;
                  color: #000;
                }
              }
            }
            .point-card-cell_footer {
              position: relative;
              width: 100%;
              padding: 0 10px;
              height: 27px;
              line-height: 27px;
              font-size: 10px;
              color: #AA9868;
            }
          }
        }
      }
    }
  }
  .point-mall-ads {
    position: relative;
    width: 100%;
  }
  .point-mall-goods {
    position: relative;
    padding: 25px 0;
    .line-through {
      text-decoration: line-through;
    }
    .point-mall-goods_body {
      position: relative;
      width: 100%;
      padding: 25px 25px 0 25px;
      .point-mall-goods_list {
        position: relative;
        width: 100%;
        .point-goods-list_ul {
          position: relative;
          width: 100%;
          overflow: hidden;
          li {
            float: left;
            width: 49%;
            padding: 0 15px;
            margin-bottom: 22px;
            background: #fff;
            &:nth-child(2n) {
              margin-left: 2%;
            }
            .point-mall-goods_cell {
              text-align: center;
              padding: 3px 0;
              .good-title-hidden {
                width: 100%;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .point-border {
                display: inline-block;
                width: 81px;
                height: 18px;
                line-height: 18px;
                margin: 4px 0;
                border-radius: 6px;
                opacity: 0.72;
                border: 1px solid rgba(201,183,153,1);
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
            }
            .goods-pic {
              width: 100%;
            }
            .border-dashed {
              height: 21px;
              line-height: 21px;
              font-weight: 500;
              border-bottom: 1px dashed #ADADAD;
            }
            .color-757575 {
              color:#757575;
            }
            .color-b3b3b3 {
              color: #B3B3B3;
            }
            .color-c9b799 {
              color: #c9b799;
            }
          }
        }
      }
    }
  }
}
</style>
