<template>
  <BasePage>
    <div class="goodsdetails">
      <div class="t">
        <img :src="$file(data.img)" alt="">
      </div>

      <div class="container">
        <div class="goodsshow">
          <div class="t">
            <div class="tit">
              {{ data.name }}
            </div>
            <div class="desc" v-if="data.description">
              {{ data.description }}
            </div>
          </div>

          <div class="price_box">
            <div class="price">
              ¥{{ data.saleprice?.toFixed(2) }}
            </div>
            <div class="oprice">
              ¥{{ data.originalprice?.toFixed(2) }}
            </div>
            <div class="sales r">
              已售{{ data.salenums }}
            </div>
          </div>

          <div class="deduct_box">
            <div class="point">
              <img src="/img/de-i1.png" alt="">
              积分抵￥{{ data.deductjifen?.toFixed(2) || '0.00' }}
            </div>

            <div class="vip">
              <img src="/img/de-i2.png" alt="">
              会员卡额度抵￥{{ data.deducthuiyuanka?.toFixed(2) || '0.00' }}
            </div>
          </div>

          <hr>

          <div class="gt">
            <div>
              <img src="/img/gt-i1.png" alt="">
              正品保障
            </div>
            <div>
              <img src="/img/gt-i1.png" alt="">
              快速发货
            </div>
            <div>
              <img src="/img/gt-i1.png" alt="">
              售后无忧
            </div>
          </div>
        </div>

        <div class="spec_box" @click="showSpecs = true">
          <img src="/img/spec.png" alt="">
          <span>{{ selectedSku }}</span>
          <van-icon class="r" name="arrow"></van-icon>
        </div>

        <div class="prodetail">
          <div class="tit">
            <img src="/img/pro.png" alt="">
            <span>产品详情</span>
          </div>
          <div class="vhtml" v-html="data.contents"></div>
        </div>
      </div>

      <van-action-bar safe-area-inset-bottom placeholder>
        <van-action-bar-icon icon="/img/vb-home.png" text="首页" @click="$navigate('Home')" />
        <van-action-bar-icon icon="/img/vb-service.png" text="客服" @click="$goService()" />
        <van-action-bar-icon icon="/img/vb-share.png" text="分享" @click="beforeShare" />
        <van-action-bar-button color="#ca2904" type="danger" text="立即购买" @click="showSpecs = true" />
      </van-action-bar>

      <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />

      <van-popup v-model:show="showSpecs" position="bottom" closeable round>
        <div class="showspec">
          <div class="goods">
            <img :src="$file(tempSku.img || data.img)" alt="">
            <div>
              <div class="s_price">¥{{ (tempSku.saleprice * tempSku.Qty).toFixed(2) }}</div>
              <div class="s_stock">剩余：{{ tempSku.saleleft }}</div>
              <div class="s_spec">已选：{{ tempSku.skuname }}</div>
            </div>
          </div>

          <div class="spec_box" v-for="spec in specSelect">
            <span class="title">
              {{ spec.name }}
            </span>

            <div class="speccc">
              <div v-for="child in spec.children" class="spec_de"
                :class="selectedSpecs[spec.name] === child.name ? 'active' : 'inactive'"
                @click="selectSpec(spec.name, child.name)">
                {{ child.name }}
              </div>
            </div>
          </div>

          <div class="buynums box">
            <span class="title">
              购买数量
            </span>

            <van-stepper class="r" integer v-model="tempSku.Qty" min="1" max="99" theme="round" button-size="22"
              disable-input />

          </div>

          <van-action-bar safe-area-inset-bottom placeholder>
            <van-action-bar-button color="#ca2904" type="danger" text="立即购买" @click="submit" />
          </van-action-bar>
        </div>
      </van-popup>

      <van-popup v-model:show="show" class="shareimgbox" style="max-width: 80vw;">
        <div class="share_box" id="bsCard">
          <div class="share_userinfo">
            <img :src="$file($userInfo.userimg)" alt="">
            <div class="name"><span>{{ $userInfo.nickname }}友情推荐</span></div>
          </div>

          <div class="goods_info">
            <img class="goods_img" :src="$file(data.img)" alt="">
            <div class="goods_name">{{ data.name }}</div>
          </div>

          <div class="price">
            <div class="goods_price">¥{{ data.saleprice?.toFixed(2) || '0.00' }}</div>
            <div class="o_price">¥{{ data.originalprice?.toFixed(2) || '0.00' }}</div>
          </div>

          <div class="bottom_box">
            <div class="qrcode">
              <vue-qr :margin="0" :text="shareLink" backgroundColor="#ffffff00" colorLight="rgb(255,255,255)"></vue-qr>
              长按扫码购买

            </div>
            <img class="logo" src="/img/logo.png" alt="">
          </div>
        </div>
        <div class="share_result" v-if="ShareImg">
          <img :src="ShareImg" alt="分享海报">
        </div>
      </van-popup>


    </div>

  </BasePage>

</template>

<script>

import { toDataURL } from '@/utils/html2image.js'

export default {
  name: 'GoodsDetail',
  emits: ['updateShare'],
  mounted() {
    this.init();
  },
  data() {
    return {
      data: {},
      specSelect: [],
      show: false,
      specCombinations: [],
      tempSku: {},
      showSpecs: false,
      selectedSku: '请选择规格分类',
      selectedSpecs: {},
      showShare: false,
      options: [
        { name: '分享海报', icon: '/img/share.png' },
      ],
      shareLink: '',
      ShareImg: '',
      loading: false,
      transparent: 'rgba(0,0,0,0)',
      shareBoxHidden: false
    }
  },
  methods: {
    init() {
      this.$get(`/v1/client/EProsClient/${this.$route.query.id}`).then(res => {
        this.data = res.data;
        this.specSelect = this.data.specSelect || [];
        this.specCombinations = this.data.specCombinations || [];
        const recommend = localStorage.getItem('member_username') || '';
        this.shareLink = `${location.origin}/#/GoodsDetail?id=${this.data.id}${recommend ? '&RecommendCode=' + recommend : ''}`;
        this.$emit('updateShare', { title: this.data.name, imageUrl: this.data.img, link: this.shareLink });
        this.initDefaultSku();
      });
    },
    initDefaultSku() {
      const mainSku = this.specCombinations.find(s => s.ismain) || this.specCombinations[0];
      if (mainSku) {
        this.tempSku = { ...mainSku, Qty: 1 };
        this.selectedSku = "已选:" + mainSku.skuname;
        // 根据skuname设置默认选中规格
        this.specSelect.forEach(spec => {
          const child = spec.children?.find(c => mainSku.skuname.includes(c.name));
          if (child) {
            this.selectedSpecs[spec.name] = child.name;
          }
        });
      }
    },
    selectSpec(specName, specValue) {
      this.selectedSpecs[specName] = specValue;
      this.refreshSku();
    },
    refreshSku() {
      const specKeys = Object.keys(this.selectedSpecs);
      if (specKeys.length === 0) return;

      let matchedSku = this.specCombinations.find(combo => {
        return specKeys.every(key => {
          return combo.skuname.includes(this.selectedSpecs[key]);
        });
      });

      if (matchedSku) {
        this.tempSku = { ...matchedSku, Qty: this.tempSku.Qty || 1 };
        this.selectedSku = "已选:" + matchedSku.skuname;
      }
    },
    onSelect(option) {
      this.showShare = false;
      if (option.name === "分享海报") {
        this.show = true;
        // 如果图片已生成且元素已隐藏，直接显示，不重复生成
        if (this.ShareImg && this.shareBoxHidden) {
          this.loading = false;
          return;
        }
        // 如果图片已生成但元素未隐藏，先隐藏元素再显示
        if (this.ShareImg) {
          this.hideShareBox();
          this.loading = false;
          return;
        }
        this.loading = true;
        // 等待 DOM 渲染后再生成
        setTimeout(() => {
          this.generateShareImg();
        }, 500);
      } else if (option.name == "复制链接") {
        this.$copyText(location.href);
        this.$showToast({ type: "success", message: "复制成功" });
      } else if (option.name == "分享好友") {
        this.showTip = true;
      }
    },
    submit() {
      if (this.tempSku.saleleft < 1) {
        this.$showFailToast("该规格库存不足，无法购买");
        return;
      }
      this.$navigate(`/TradeConfirm?id=${this.data.id}&buynums=${this.tempSku.Qty}`);
    },
    beforeShare() {
      this.showShare = true;
    },
    async generateShareImg() {
      var shareContent = document.querySelector('#bsCard');
      if (!shareContent) return;
      try {
        // Wait for all images inside shareContent to load
        const images = shareContent.querySelectorAll('img');
        for (const img of images) {
          if (!img.complete) {
            await new Promise((resolve) => {
              img.onload = resolve;
              img.onerror = resolve;
            });
          }
        }

        // Wait for vue-qr to render
        await new Promise(resolve => setTimeout(resolve, 500));

        this.ShareImg = await toDataURL(shareContent, {
          pixelRatio: 2,
          useCORS: true,
          format: 'png'
        });
        this.hideShareBox();
        this.loading = false;
      } catch (e) {
        console.error(e);
        this.loading = false;
      }
    },

    hideShareBox() {
      const shareBox = document.querySelector('.share_box');
      if (shareBox) {
        shareBox.style.display = 'none';
        this.shareBoxHidden = true;
      }
    }
  }
}
</script>