<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.memberPhoto" 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"> {{userData.memberName}}</span><span class="font-13 color-000 memeber-level">{{userData.memberLevel}}</span>
                  </p>
                  <p class="color-fff font-12 flex-1 flex flex-align-center">可用积分：{{userData.accumulatPoints}}</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">
                <p class="font-20 color-fff">签到</p>
                <p class="font-10 color-fff m-t-4">积分+ 5</p>
              </div>
            </div>
          </div>
        </div>
        <div class="point-mall-member_bottom">
          <ul class="flex">
            <li class="flex-1">
              <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">
              <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">
            <ul>
              <template v-for="(item, index) in brandsData">
                <li :key="index" :class="[activeBrand == item.brandId ? 'li-active': '']" @click="selectBrand(item)">
                  {{item.brandName}}
                </li>
              </template>
            </ul>
          </div>
          <div class="point-mall-card_body">
            <ul>
              <template v-for="(item, index) in cardsData">
                <li :key="index">
                  <div class="point-card-cell">
                    <div class="point-card-cell_header"></div>
                    <div class="point-card-footer"></div>
                  </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">
              <ul class="point-goods-list_ul">
                <template v-for="(item, index) in goodsData">
                  <li :key="index" class="point-goods-list_li border-box">
                    <div class="point-mall-goods_cell">
                      <p class="font-12 color-757575 border-dashed">每人限兑：{{item.limit || 1}}件</p>
                      <p class="font-12 color-757575">剩余{{item.stock}}件</p>
                      <div class="m-t-6 m-b-6"><img class="goods-pic" :src="item.goodsPic" alt=""/></div>
                      <p class="font-10 color-b3b3b3">{{item.goodsName}}</p>
                      <p class="font-11 color-c9b799"><span class="point-border">积分{{item.point}}</span></p>
                      <p class="font-11 color-757575"><span>吊牌价</span><span class="line-through">￥{{item.price}}</span></p>
                    </div>
                  </li>
                </template>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>
<script>
import { Swipe, SwipeItem, Icon } from 'vant'; //Toast
import JsBarcode from 'jsbarcode';
import publicMethod from '@/assets/js/public.js';
import { getIndexData, getIndexUrl } from '@/api/index.js';

export default {
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Icon.name]: Icon
  },
  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: ''
        },
      ],
      userData: {
        memberName: '123456', // 会员姓名
        memberLevel: '普通会员', // 会员等级
        memberPhoto: 'http://thirdwx.qlogo.cn/mmopen/ajNVdqHZLLBCWOULJiaicfLVK026pjYsmEFFw6qF1SaCG77ib0HQqt3ZibOhLsFTlA5DpNLGq2V8ylsj0BrxXRhnRg/0',
        accumulatPoints: '0', // 可用积分
        memberId: '', // 会员id
        cardFlag: false, // 是否有集团卡
        enterpriseId: '' // 企业 id
      },
      activeBrand: 1,
      brandsData: [
        {
          brandId: '1',
          brandName: '女装'
        },
        {
          brandId: '2',
          brandName: '男装'
        },
        {
          brandId: '3',
          brandName: '乐町'
        },
        {
          brandId: '4',
          brandName: 'MG'
        },
        {
          brandId: '5',
          brandName: '童装'
        }
      ],
      cardsData: [

      ],
      adsData: {
        src: require('../../assets/images/point-mall/ads.jpg'),
        url: ''
      },
      goodsData: [
        {
          limit: 1,
          stock: 4,
          goodsName: '太平鸟青年卫衣',
          goodsPic: 'https://pic01-10001430.image.myqcloud.com/ab89aa0c-7cd6-43bf-8fa1-ede0a0970549',
          point: '12345',
          price: '656'
        },{
          limit: 1,
          stock: 4,
          goodsName: '太平鸟青年卫衣',
          goodsPic: 'https://pic01-10001430.image.myqcloud.com/ab89aa0c-7cd6-43bf-8fa1-ede0a0970549',
          point: '12345',
          price: '656'
        },{
          limit: 1,
          stock: 4,
          goodsName: '太平鸟青年卫衣',
          goodsPic: 'https://pic01-10001430.image.myqcloud.com/ab89aa0c-7cd6-43bf-8fa1-ede0a0970549',
          point: '12345',
          price: '656'
        }
      ]
    };
  },

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

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

    /**
     * 跳转第三方积分商城
     */
    async toPointMall() {
      // let that = this;
      /*20190626 Toast('敬请期待');
      return false; */
      let resData = await getIndexUrl();
      if (resData.errorCode == 0 && !!resData.result.url) {
        window.location.href = resData.result.url;
      }
    },

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

    /**
     * 显示公众号二维码弹窗
     */
    showDialog(item) {
      let that = this;
      if (!item.qrcode) {
        return;
      }
      if (item.enterpriseId == that.userData.enterpriseId) {
        // 如果是乐町，跳转 EZR 会员中心（H5）
        if (item.enterpriseId == 'ff8080816709b3a3016715fd29e21852') {
          window.open('https://m.ezrpro.cn/home/139')
        }
        // 男装是跳转至互道的会员中心
        if (item.enterpriseId == 'ff8080816709b37401671b05c040215a') {
          window.open('https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf5123c7dcd0c3b73&redirect_uri=http%3A%2F%2Ftest-auth.nexttao.com%2Fw_server%2Fredirect_tenant.html%3Fpage%3Dhttps%3A%2F%2Fpb-demo-member-web.nexttao.com%2Findex.html%26component_appid%3Dwxed2cf9dfac8d1dbd%26shop_id%3D1677&response_type=code&scope=snsapi_base&state=authorize&component_appid=wxed2cf9dfac8d1dbd#wechat_redirect')
        }

        // MG 是显示小程序码
        if (item.enterpriseId == 'ff80808166d50d470167068380025146') {
          that.dialogData = {
            logo: item.imgSrc,
            qrcode: require('../../assets/images/mg.png')
          }
          that.qrcodeVisable = true;
          document.body.style.overflow = 'hidden';
          document.body.classList.add("fixed");
        }

        // 童装
        if (item.enterpriseId == 'ff8080816709b30d01671b0876b01eb9') {
          return false;
        }
        // 女装
        if (item.enterpriseId == 'ff8080816709b37401671a727e9c5a26') {
          return false;
        }

        return false;
      } else {
        that.dialogData = {
          logo: item.imgSrc,
          qrcode: item.qrcode
        }
        that.qrcodeVisable = true;
        document.body.style.overflow = 'hidden';
        document.body.classList.add("fixed");
      }
    },

    /**
     * 关闭二维码弹窗
     */
    closeDialog() {
      const that = this;
      that.qrcodeVisable = false;
      document.body.style.overflow = 'unset';
      document.body.classList.remove("fixed");
      document.body.removeAttribute("class");
    },

    /**
     * 生成条形码
     */
    barcode(code) {
      JsBarcode("#barcode", code, {
        format: 'CODE128',
        displayValue: false,
        background: "#ffffff",
        height: '60'
      })
    },

    /**
     * 获取数据
     */
    async getData() {
      const that = this;
      let param = {
        // memberId: 'ff80808163a6ab7a0163a6abd0710000',
        // enterpriseId: 'ff808081593917d90159398ec6340012'
      }
      let resData = await getIndexData(param);
      if (resData.errorCode == 0) {
        resData.result.accumulatPoints = String(resData.result.accumulatPoints).length < 4?  resData.result.accumulatPoints: publicMethod.toThousands(resData.result.accumulatPoints);
        that.userData = resData.result;
        that.barcode(that.userData.cardNum);
      }
    },

    /**
     * 设置memberId
     */
    setMemberId() {
      let that = this;
      that.$store.dispatch('modifyMemberId','444')
    }
  },
  mounted() {
    let that = this;
    // that.getData();
  }
};
</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;
    }
    .point-mall-member_header {
      width: 100%;
      margin-bottom: 36px;
      .point-member-header_left {

        .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 {
        .point-member-sign {
          width: 80px;
          height: 80px;
          border-radius: 40px;
          border: 2px solid #CABAA0;
          text-align: center;
        }
      }
    }
  }
  .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 {
      padding-left: 15px;
      overflow: auto;
      white-space: nowrap;
      ul {
        font-size: 0;
        li {
          display: inline-block;
          width: 72px;
          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: 3px;
          }
        }
      }
    }
  }
  .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;

              .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);
              }
            }
            .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>
