<template>
  <div class="goods" style="height: 100%">
    <!-- 主体 -->
    <div class="goods-container">
      <div class="goods-red-bg" />
      <div class="goods-group-buy-head-content">
        <div class="goods-group-buy-head-content-desc">新人拼团，今日疯抢中</div>
        <div class="goods-group-buy-head-content-swipe">
          <swipe-customer-info v-model="showInfo" direction="right" />
        </div>
      </div>
      <div class="goods-product-info">
        <div class="goods-product-info-img">
          <span class="goods-product-info-tag">3人团</span>
          <cr-image width="108px" :src="imgList[0]" />
        </div>
        <div class="goods-product-info-desc">
          <div class="goods-product-info-desc-part1">
            <div class="goods-product-info-desc-title">
              {{ detailInfo.goodsName }}
            </div>
            <div class="goods-product-info-desc-progress">
              <cr-progress
                class="group-item-progress"
                stroke-width="5"
                color="#EC1500"
                track-color="#F7F8F9"
                :show-pivot="false"
                :percentage="50"
              />
            </div>
            <div class="goods-product-info-desc-num">已拼3999团</div>
          </div>
          <div class="goods-product-info-desc-price">
            <div class="goods-product-info-desc-price-group">
              成团价 ¥<span class="actualPrice">{{ detailInfo.activityPrice }}</span>
            </div>
            <div class="goods-product-info-desc-price-market">售价¥{{ detailInfo.price }}</div>
          </div>
        </div>
      </div>
      <div class="goods-group-info">
        <div class="goods-group-info-status">
          <cr-image width="80" src="../../assets/images/success.png" />
        </div>
        <avatorGroup />
        <group-desc-info :show-button-group="true" @changeButtonVisible="changeButtonVisible" />
        <successInfo />
        <cr-divider
          hairline
          :style="{
            borderColor: '#ECECEC'
          }"
        />
        <rules />
      </div>
      <span v-if="detailImgList.length" id="goodDetail" class="goods-divider">宝贝详情</span>
      <div class="goods-detail-imgs">
        <cr-image
          v-for="(item, index) in detailImgList"
          :key="index"
          lazy-load
          width=""
          height=""
          style="width: 100%; height: auto; display: block"
          :src="item"
        />
      </div>
    </div>
    <bottom-nav v-if="showButtonNav" type="shoppingCar" :disabled="false" @buy="goVccOrDetail" />
  </div>
</template>
<script>
import goods from '@/api/groupBuy';
import bottomNav from './components/bottomNav';
import swipeCustomerInfo from '@/components/swipeCustomerInfo';
import avatorGroup from '@/components/avatorGroup';
import successInfo from '@/components/groupBuySuccessInfo';
import rules from '@/components/rules';
import groupDescInfo from './components/groupDescInfo';
export default {
  // eslint-disable-next-line vue/name-property-casing
  name: 'goodDetail',
  components: {
    bottomNav,
    swipeCustomerInfo,
    avatorGroup,
    successInfo,
    rules,
    groupDescInfo
  },
  data() {
    return {
      endTime: 1631203200000,
      showInfo: false,
      // 以下是原有的data
      detailParam: {
        skuNo: '',
        receiverId: '',
        count: 1
      },
      detailInfo: {},
      imgList: [],
      detailImgList: [], // 商品详情图像展示
      hasLogin: false,
      name: {},
      showButtonNav: false // 是否显示底部按钮
    };
  },
  created() {
    this.hasLogin = window.localStorage.getItem('vccToken') != 'null' ? true : false;
    this.detailParam = { ...this.$route.query };
    this.name = this.$route.params;
    this.imgList = [this.name.goodsimg];
    this.init(this.detailParam);
  },
  mounted() {
    // todo 曝光埋点
    setTimeout(() => {
      this.showInfo = true;
    }, 3000);
    setTimeout(() => {
      this.showInfo = false;
    }, 5000);
  },
  methods: {
    changeButtonVisible(res) {
      this.showButtonNav = res;
    },
    // ka渠道逻辑
    goVccOrDetail() {
      if (!this.hasLogin) {
        this.$router.push({ name: 'login' });
        return;
      }
    },
    async init(detailParam) {
      const [res] = await goods.detailInfo(detailParam);
      this.imgList = res.imageUrl || [];
      this.detailInfo = res;
      try {
        const detailImages = await goods.getDetailPic(this.detailInfo.contentDetailUrl);
        // const imgReg = new RegExp('(?<=src=").[^"]*', 'g');
        // this.detailImgList = (detailImages || '').match(imgReg);
        let imgReg = /<img.*?(?:>|\/>)/gi;
        // eslint-disable-next-line no-useless-escape
        let srcReg = /src=[\'"]?([^\'"]*)[\'"]?/i;
        let arr = (detailImages || '').match(imgReg);
        let srcArr = [];
        for (let i = 0; i < arr.length; i++) {
          let src = arr[i].match(srcReg)[1].replace('http://', 'https://');
          srcArr.push(src);
        }
        this.detailImgList = srcArr;
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>
<style lang="less" src="./smallPic.less" scoped></style>
