<template>
  <div class="index-contain">
    <section>
      <div class="clique-logo">
        <img src="../../assets/images/logo.png" alt="logo" />
      </div>
    </section>
    <section>
      <div class="clique-qrcode">
        <svg id="barcode"></svg>
        <p class="font-13 color-232326">{{ userData.phoneNumber }}</p>
      </div>
    </section>
    <section>
      <div class="clique-menu flex">
        <div class="flex-1 flex flex-column clique-menu-cell" @click="changeRoute('point')">
          <p class="color-232326 font-20 font-w-500">{{ userData.accumulatPoints }}</p>
          <p class="color-848689 font-14 m-t-6">可用积分</p>
        </div>
        <div class="flex-1 flex flex-column clique-menu-cell border-left-1" @click="changeRoute('records')">
          <p class="color-232326 font-20 font-w-500">{{ userData.orderCount }}</p>
          <p class="color-848689 font-14 m-t-6">消费记录</p>
        </div>
        <div class="flex-1 flex flex-column clique-menu-cell border-left-1" @click="changeRoute('cards')">
          <p class="color-232326 font-20"><i class="font-20 font_family icon-qiaquan-"></i></p>
          <p class="color-848689 font-14 m-t-6">卡券</p>
        </div>
        <div class="flex-1 flex flex-column clique-menu-cell border-left-1" @click="toPointMall">
          <p class="color-232326 font-20"><i class="font-20 font_family icon-jifenshangcheng-"></i></p>
          <p class="color-848689 font-14 m-t-6">积分商城</p>
        </div>
      </div>
    </section>
    <section>
      <div class="clique-swiper">
        <van-swipe class="goods-swipe" :autoplay="3000"  indicator-color="#232326">
          <van-swipe-item v-for="(thumb, index) in banners.thumb" :key="thumb+index">
            <img :src="thumb" alt="img" style="width: 100%;"/>
          </van-swipe-item>
        </van-swipe>
      </div>
    </section>
    <section>
      <div class="clique-brand">
        <template v-for="(item,index) in brandList">
          <div
            :class="['clique-brand-logo', 'border-box',!userData.cardFlag? (index%2 == 0?'b-l-1 half':' half') : (index%3 == 0?'b-l-1':'')]"
            :key="index+item.src">
            <a class="clique-brand-logo_a" @click="showDialog(item)">
              <img :src="item.src" alt="logo" />
            </a>
          </div>
        </template>
      </div>
    </section>
    <p class="font-12 color-848689 p-tips border-box"><a href="" class="font-12 color-848689 ">让每个人尽享时尚圈的乐趣~</a></p>
    <div class="qrcode-dialog_confirm" id="dialog" v-if="qrcodeVisable">
      <div class="qrcode-mask" @click="closeDialog"></div>
      <div class="qrcode-dialog" :style="{'top': $store.state.bodyH/2 + 'px'}">
          <span class="qrcode-dialog-close" @click="closeDialog"><van-icon name="cross" /></span>
          <div class="qrcode-dialog_hd">
            <img :src="dialogData.logo" alt="log0"/>
          </div>
          <div class="qrcode-dialog_bd">
            <div class="qrcode-outer border-box"><img :src="dialogData.qrcode" alt="qrcode"/></div>
            <p class="font-12 color-666 text-center triangle-p"><i class="triangle-up"></i></p>
            <p class="font-12 color-666 text-center">长 按 二 维 码 关 注 我 们</p>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swipe, SwipeItem, Icon } from 'vant';
import JsBarcode from 'jsbarcode';
import publicMethod from '@/assets/js/public.js';
import { getIndexData } from '@/api/index.js';

export default {
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Icon.name]: Icon
  },

  data() {
    return {
      userData: {
        cardNum: '122223334444f', // 集团卡号
        phoneNumber: '18790876890', // 手机号码
        accumulatPoints: '0', // 可用积分
        orderCount: 0, // 订单数量
        memberId: '', // 会员id
        cardFlag: false, // 是否有集团卡
      },
      banners: {
        title: 'test',
        price: 2680,
        express: '免运费',
        remain: 19,
        thumb: [
          require('../../assets/images/banner.png'),
          require('../../assets/images/banner.png')
        ]
      },

      brandList: [
        {
          src: require('../../assets/images/logo01.png'),
          imgSrc: require('../../assets/images/logo01_248_124.png'),
          qrcode: require('../../assets/images/001.png'),
        },
        {
          src: require('../../assets/images/logo02.png'),
          imgSrc: require('../../assets/images/logo02_248_124.png'),
          qrcode: require('../../assets/images/002.png'),
        },
        {
          src: require('../../assets/images/logo03.png'),
          imgSrc: require('../../assets/images/logo03_248_124.png'),
          qrcode: require('../../assets/images/003.png'),
        },
        {
          src: require('../../assets/images/logo04.png'),
          imgSrc: require('../../assets/images/logo04_248_124.png'),
          qrcode: require('../../assets/images/004.png'),
        },
        {
          src: require('../../assets/images/logo05.png'),
          imgSrc: require('../../assets/images/logo05_248_124.png'),
          qrcode: require('../../assets/images/005.png'),
        },
        {
          src: require('../../assets/images/logo06.png'),
          qrcode: '',
        }
      ],
      qrcodeVisable: false,
      dialogData: {
        logo: require('../../assets/images/logo01_248_124.png'),
        qrcode: require('../../assets/images/001.png')
      }
    };
  },

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

    /**
     * 跳转第三方积分商城
     */
    toPointMall() {
      // const that = this;
    },

    /**
     * 显示公众号二维码弹窗
     */
    showDialog(item) {
      const that = this;
      if (!item.qrcode) {
        return;
      }
      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();
    that.barcode('123456789766');
  }
};
</script>

<style lang="less">
@import url(../../assets/css/index.css);
.index-contain {
  position: relative;
}

/* 弹窗 */
.qrcode-dialog_confirm {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.qrcode-dialog {
  position: relative;
  padding: 30px 0;
  min-height: 270px;

  .qrcode-dialog-close {
    position: absolute;
    top: 18px;
    right: 14px;
    display: block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    .van-icon-cross {
      font-size: 14px;
      color: #848689;
    }
    // -webkit-transform: rotate(45deg);
    // -moz-transform: rotate(45deg);
    // transform: rotate(45deg);
  }

  .qrcode-dialog_hd {
    width: 100%;
    text-align: center;
    img {
      width: 124px;
    }
  }

  .qrcode-dialog_bd {
    width: 160px;
    margin: 0 auto;
    .qrcode-outer {
      position: relative;
      width: 150px;
      height: 160px;
      margin: 0 auto;
      margin-left: -3px;
      border-bottom: 10px solid rgba(0,0,0,0.15);
      border-left: 10px solid rgba(0,0,0,0.15);
      &::before {
        content: '';
        position: absolute;
        left: -11px;
        top: -1px;
        width: 11px;
        height: 11px;
        background: #FAFAFC;
      }
      img {
        display: inline-block;
        vertical-align: bottom;
        width: 150px;
      }
    }

    p {
      position: relative;

      &.triangle-p {
        width: 100%;
        height: 22px;
        // padding-top: 8px;
        i {
          top: 40%
        }
      }
    }
  }
}
</style>
