<template>
  <view class="container">
    <view id="page-top">
      <view class="product">
        <view class="u-bg-fff pb40">
          <view class="pic">
            <swiper
              class="swiper"
              indicator-dots="true"
              autoplay="true"
              interval="2000"
              duration="1500"
              circular="true"
            >
              <swiper-item v-if="dataForm.video_url">
                <j-video
                  class="jvideo"
                  :url="dataForm.video_url"
                  width="750rpx"
                  height="620rpx"
                ></j-video>
              </swiper-item>
              <swiper-item v-for="(item, index) in imglist" :key="index">
                <image :src="item" mode="aspectFill"></image>
              </swiper-item>
            </swiper>

            <view class="p-price">
              <view class="pd24 u-flex-center" style="align-items: baseline">
                <view class="u-FFF u-font36"
                  ><rich-text
                    :nodes="$mUtil.priceBigSmallTwo(dataForm.min_price)"
                  ></rich-text
                ></view>
                <text class="discount u-font24 u-ml20 u-del"
                  >￥{{ dataForm.max_sale_price }}</text
                >
                <!-- <text class="discount u-font24 u-ml15">{{ dataForm.discount }}折</text> -->
                <!-- #DCCDA4 -->
                <view v-if="dataForm.group_people_num > 0">
                  <text
                    style="
                      font-size: 22rpx;
                      font-weight: 500;
                      color: #fa6138;
                      padding: 3rpx 14rpx;
                      margin-left: 18rpx;
                      background-color: #dccda4;
                      border-radius: 20rpx;
                    "
                  >
                    {{ dataForm.group_people_num }}人拼
                  </text>
                </view>
              </view>
              <view class="p-ab u-flex-center">
                <view class="triangle-bottomright"></view>
                <view class="seckill u-text-center u-font28">
                  <!-- active_state 0：未开始 * 1：进行中 * 2：已结束 -->
                  <view
                    class="u-bold"
                    style="padding: 20rpx"
                    v-if="dataForm.active_state == 2"
                    >已结束</view
                  >
                  <view class="u-bold" v-if="dataForm.active_state == 1"
                    >距结束</view
                  >

                  <view class="u-bold" v-if="dataForm.active_state == 0"
                    >离开抢</view
                  >
                  <view v-show="dataForm.active_state != 2 && !selectGroup">
                    <uni-countdown
                      :backgroundColor="'none'"
                      @timeup="overDown2"
                      :color="'#3775F6'"
                      :splitorColor="'#3775F6'"
                      :show-day="time1[0] > 0"
                      :day="time1[0]"
                      :hour="time1[1]"
                      :minute="time1[2]"
                      :second="time1[3]"
                    ></uni-countdown>
                  </view>
                  <view v-show="dataForm.active_state != 2 && selectGroup">
                    <uni-countdown
                      :backgroundColor="'none'"
                      :color="'#3775F6'"
                      :splitorColor="'#3775F6'"
                      :show-day="time2[0] > 0"
                      :day="time2[0]"
                      :hour="time2[1]"
                      :minute="time2[2]"
                      :second="time2[3]"
                    ></uni-countdown>
                  </view>
                </view>
              </view>
            </view>

            <view class="mt10 u-plr30">
              <view>
                <view class="tipsStatus" v-if="shop.platform_shop">自营</view>
                <text class="u-font34 u-bold u-1A1A1A">{{
                  dataForm.title
                }}</text>
              </view>
              <view class="u-font24 u-mt15 u-999">
                <text>
                  已售
                  <text class="u-FF0000">{{ dataForm.result_sale_num }}</text>
                  件，仅剩
                  <text class="u-FF0000">{{
                    dataForm.residue_stock_total
                  }}</text>
                  件
                </text>
              </view>
            </view>
          </view>
        </view>
        <!--拼团-->
        <view
          class="u-bg-fff u-mt10"
          v-if="teamlist && teamlist.length > 0 && !selectGroup"
        >
          <view class="u-border-one">
            <view class="u-plr30 pt-pb30 border u-flex-center-sb">
              <view class="u-font28 u-1A1A1A"
                >{{ teamlist.length }}人的拼单，可直接参与</view
              >
              <view class="u-999 u-font24" @click="goGb">
                更多拼团
                <text class="iconfont u-ml15">&#xe6c7;</text>
              </view>
            </view>
          </view>
          <view class="stb-list">
            <view
              class="stb-item u-plr30"
              style="display: flex; justify-content: space-between"
              v-for="(item, index) in teamlist"
              :key="item.id"
            >
              <view class="pt20-pb14" style="width: 100%" v-if="index < 4">
                <view class="u-flex-center">
                  <image
                    v-if="item.leader_user_info.head_photo"
                    class="u-avatar65"
                    :src="item.leader_user_info.head_photo"
                  ></image>
                  <image
                    v-else
                    class="u-avatar65"
                    src="/static/default-avatar.png"
                    mode=""
                  ></image>
                  <view
                    class="u-flex u-ml25"
                    style="
                      display: flex;
                      justify-content: space-around;
                      width: 100%;
                    "
                  >
                    <view
                      style="display: flex; flex-direction: column; flex: 1"
                    >
                      <view class="u-font24 u-1A1A1A u-text-width">{{
                        item.leader_user_info.nickname
                      }}</view>
                      <view
                        class="u-font24 u-flex-start"
                        style="display: flex; align-items: center"
                      >
                        <text class="u-707070">剩余</text>
                        <view class="u-FF0000">
                          <uni-countdown
                            :backgroundColor="'none'"
                            :color="'#FF0000'"
                            :splitorColor="'#FF0000'"
                            :show-day="item.time[0] > 0"
                            :day="item.time[0]"
                            :hour="item.time[1]"
                            :minute="item.time[2]"
                            :second="item.time[3]"
                            @timeup="overDown2"
                          ></uni-countdown>
                        </view>
                      </view>
                    </view>
                    <view style="display: flex; align-items: flex-start">
                      <view
                        class="u-font24 u-1A1A1A"
                        style="margin-right: 30rpx"
                      >
                        还差
                        <text class="u-FF0000">{{
                          item.group_person_number -
                          item.member_user_infos.length
                        }}</text>
                        人拼成
                      </view>

                      <view
                        class="u-FFF stb-btn u-font24"
                        style="flex: 1; margin-top: 12rpx"
                        @click="gogroup(item)"
                      >
                        去拼单</view
                      >
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="u-bg-fff u-mt10">
          <view class="u-plr30 u-flex-center-sb pt-pb35">
            <view class="u-flex-center" @click="goShop">
              <view>
                <image class="u-avatar104" :src="shop.logo"></image>
              </view>
              <view class="u-ml25">
                <view class="u-font28 u-1A1A1A u-bold">{{
                  shop.shop_name
                }}</view>
                <view class="u-999 u-font24 u-mt5 u-text2">
                  <text
                    class="iconfont"
                    style="color: #fa6138"
                    @click.stop="goLocal"
                    >&#xe6db;</text
                  >
                  {{ shop.province_name }}{{ shop.city_name }}{{ shop.area_name
                  }}{{ shop.address }}
                </view>
              </view>
            </view>
            <view class="iconfont" @click="goShop">&#xe6c7;</view>
          </view>
        </view>
      </view>
      <view class="u-bg-fff u-mt10">
        <view
          class="tab u-flex-center-sa u-font30 u-1A1A1A u-border-one-one"
          :style="[{ top: `calc(${statusBarHeight}px + 44px)` }]"
        >
          <view
            @tap="change(0)"
            class="pb30"
            :class="{ active: isChecked == 0 }"
            >商品详情</view
          >
          <view
            @tap="change(1)"
            class="pb30"
            :class="{ active: isChecked == 1 }"
            >用户评论({{ commentListLength }})</view
          >
        </view>
        <view class="u-mt10">
          <!--商品详情-->
          <view v-if="isChecked == 0">
            <view class="richText ql-editor-box">
              <uv-parse
                class="custom-parse"
                :content="goodsInfo.mobile_detail"
              ></uv-parse>
            </view>
          </view>

          <!--评论-->
          <view class="u-plr30" v-else>
            <comment :value="commentList"></comment>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 170rpx; background-color: white"></view>
    <view class="bottom-btn u-bg-fff">
      <view class="pt-pb30 u-plr30 u-flex-center-sb">
        <button
          open-type="share"
          class="u-text-center"
          style="line-height: normal"
        >
          <view class="iconfont2 u-font44 u-999">&#xe684;</view>
          <view class="u-font28 u-1A1A1A">分享</view>
        </button>

        <!-- 两个按钮 -->
        <view class="u-flex-center" v-if="!selectGroup">
          <button
            class="gb-btn btn-bg-dccda4 u-00321E btn-bg-dccda4-48"
            @click="goProduct(dataForm.goods_id)"
          >
            <view>
              <view class="u-font36 u-bold"
                ><rich-text
                  :nodes="$mUtil.priceBigSmall(dataForm.min_sale_price)"
                ></rich-text
              ></view>
            </view>
            <view class="u-font22">单独购买</view>
          </button>

          <button
            v-if="dataForm.active_state == 1"
            class="gb-btn btn-bg-00320E u-DCCDA4 btn-bg-dccda4-482"
            @click="buy(1, dataForm.id)"
          >
            <view>
              <view class="u-font36 u-bold"
                ><rich-text
                  :nodes="$mUtil.priceBigSmall(dataForm.min_price)"
                ></rich-text>
              </view>
            </view>
            <view class="u-font22">发起拼团</view>
          </button>
          <button
            v-if="dataForm.active_state == 0"
            class="gb-btn btn-bg-00320E u-DCCDA4 btn-bg-dccda4-482"
            @click="notStarted()"
          >
            <view>
              <view class="u-font36 u-bold"
                ><rich-text
                  :nodes="$mUtil.priceBigSmall(dataForm.min_price)"
                ></rich-text>
              </view>
            </view>
            <view class="u-font22">发起拼团</view>
          </button>
          <button
            v-if="dataForm.active_state == 2"
            class="gb-btn btn-bg-00320E u-DCCDA4 btn-bg-dccda4-482"
            @click="itSover()"
          >
            <view>
              <view class="u-font36 u-bold"
                ><rich-text
                  :nodes="$mUtil.priceBigSmall(dataForm.min_price)"
                ></rich-text>
              </view>
            </view>
            <view class="u-font22">发起拼团</view>
          </button>
        </view>

        <!-- 三个按钮 -->
        <view class="u-flex-center" v-if="selectGroup">
          <button
            class="gb-btn btn-bg-dccda4 u-00321E"
            @click="goProduct(dataForm.goods_id)"
          >
            <view>
              <view class="u-font36 u-bold"
                ><rich-text
                  :nodes="$mUtil.priceBigSmall(dataForm.min_sale_price)"
                ></rich-text
              ></view>
            </view>
            <view class="u-font22 font11">单独购买</view>
          </button>

          <button class="gb-btn btn-bg-00320E u-DCCDA4" @click="groupGoBuy">
            <view>
              <view class="u-font36 u-bold"
                ><rich-text
                  :nodes="$mUtil.priceBigSmall(dataForm.min_price)"
                ></rich-text>
              </view>
            </view>
            <view class="u-font22">发起拼团</view>
          </button>
          <button
            class="gb-btn btn-bg-dccda4 u-00321E"
            @click="goGdProduct(dataForm.goods_id)"
          >
            <view>
              <view class="u-font36 u-bold"
                ><rich-text
                  :nodes="$mUtil.priceBigSmall(dataForm.min_price)"
                ></rich-text>
              </view>
            </view>
            <view class="u-font22">去拼团</view>
          </button>
        </view>
      </view>
    </view>

    <!--规格-->
    <uv-popup type="bottom" ref="specOpenRef" :touchmove="true">
      <view class="u-bg-fff spec">
        <view class="u-plr30 flex-sb u-border-one-one pb30">
          <view class="u-flex-center">
            <image
              class="u-goods200"
              :src="choseConfig.cover ? choseConfig.cover : cover"
            ></image>
            <view class="u-ml20">
              <view class="u-999 u-font24 price-zhe">
                <view class="u-FF0000 u-font36"
                  ><rich-text
                    :nodes="
                      $mUtil.priceBigSmall(
                        choseConfig.activity_price
                          ? choseConfig.activity_price
                          : moPrice
                      )
                    "
                  ></rich-text>
                </view>
                <text class="u-del u-ml15"
                  >￥{{
                    choseConfig.market_price
                      ? choseConfig.market_price
                      : moDelPrice
                  }}</text
                >
                <!-- <text class="u-ml10">{{ dataForm.discount }}折</text> -->
              </view>
              <view class="u-font22 u-999 u-mt5">
                活动库存 {{ stock }} 件
                <text class="u-ml30"
                  >商品库存{{
                    choseConfig.able_stock
                      ? choseConfig.able_stock
                      : goods_total_stock
                  }}件</text
                >
              </view>

              <view class="u-font22 u-999 u-mt5"
                ><!-- 商品库存 {{goods_total_stock}}件 --></view
              >
              <view class="u-1A1A1A u-mt25">{{
                choseConfig.sku_set_name ? choseConfig.sku_set_name : "请选择"
              }}</view>
            </view>
          </view>
          <view class="iconfont u-999 closeIcon" @click="specOpenClose"
            >&#xe612;</view
          >
        </view>

        <view>
          <view class="content">
            <scroll-view scroll-y="true">
              <view class="">
                <view
                  class="u-mt30 bottom-bor"
                  v-for="(item, index) in skuTab"
                  :key="item.head.id"
                >
                  <view class="u-plr30">{{ item.head.name }}</view>
                  <view class="u-mt20 u-border-one-one pb30">
                    <view class="u-plr30 u-flex u-flex-warp">
                      <view
                        class="spec-item"
                        :class="childrenItem.flag ? 'activeColor' : ''"
                        @click="chonseSku(index, childrenItem.id)"
                        v-for="childrenItem in item.values"
                        :key="childrenItem.id"
                      >
                        {{ childrenItem.name }}
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
          <view class="u-plr30 u-mt30">
            <view class="u-flex-center-sb">
              <view>购买数量</view>
              <view class="u-flex-center">
                <view class="iconfont minus" @click="resNum">&#xe60b;</view>
                <view class="num">{{ add_num }}</view>
                <view class="iconfont plus-sign" @click="addNum">&#xe686;</view>
              </view>
            </view>
            <view class="specOpen-btn">
              <view v-if="btnType == 0"
                ><button class="u-btn-two" @click="btnBuy(btnType)">
                  立即购买
                </button></view
              >
              <view v-else
                ><button class="u-btn-two" @click="btnBuy(btnType)">
                  立即购买
                </button></view
              >
            </view>
          </view>
        </view>
      </view>
    </uv-popup>
    <!--更多拼团-->
    <uv-popup type="center" backgroundColor="transparent" ref="gbOpenRef">
      <view class="iconfont u-text-right u-font40 u-FFF" @click="gbClose"
        >&#xe603;</view
      >
      <view class="u-bg-D5C49B u-mt30 br-rd20">
        <view class="br-284534">
          <view class="u-text-center gb-te">正在拼团</view>
        </view>
        <view class="gb-list pb50">
          <view class="gb-item u-plr30" v-for="item in teamlist" :key="item.id">
            <view class="u-flex-center-sb br-284534 pt28-pb18">
              <view class="u-flex-center u-00321E">
                <image
                  class="u-avatar65"
                  v-if="item.leader_user_info.head_photo"
                  :src="item.leader_user_info.head_photo"
                ></image>
                <!-- <image class="u-avatar65" v-else :src="imgUrl + '/head-on.png'" mode=""></image> -->
                <image
                  class="u-avatar65"
                  v-else
                  src="/static/default-avatar.png"
                  mode=""
                ></image>
                <view class="u-ml25">
                  <view class="u-font28 u-text-width">{{
                    item.leader_user_info.nickname
                  }}</view>
                  <view class="u-font20 per-num">
                    <div class="u-font24 u-flex-center">
                      <text>还差</text>
                      <text class="u-FF0000">{{
                        item.group_person_number - item.member_user_infos.length
                      }}</text>
                      <text>人拼成</text>
                    </div>
                    <view
                      class="u-flex-start u-font24 u-flex-center"
                      style="display: flex"
                    >
                      <view class="u-00321E u-ml20 u-font24">剩余</view>
                      <view class="u-FF0000">
                        <uni-countdown
                          :backgroundColor="'none'"
                          :color="'#FF0000'"
                          :splitorColor="'#FF0000'"
                          :show-day="item.time[0] > 0"
                          :day="item.time[0]"
                          :hour="item.time[1]"
                          :minute="item.time[2]"
                          :second="item.time[3]"
                          @timeup="overDown2"
                        ></uni-countdown>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="u-FFF stb-btn u-font24 ml54" @click="gogroup(item)"
                >我要参团</view
              >
            </view>
          </view>
        </view>
      </view>
    </uv-popup>
    <!--页面加载动画-->
    <ldLoading isFullScreen :active="loading"></ldLoading>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { onLoad, onShow, onShareAppMessage } from "@dcloudio/uni-app";
import comment from "@/components/ld-comment/ld-comment.vue";
import jVideo from "@/components/j-video/j-video.vue";
const gbOpenRef = ref();
const specOpenRef = ref();
// 响应式数据
const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight);

const imglist = ref([]);
const goods_total_stock = ref(null);
const isChecked = ref(0);
const btnName = ref("");
const btnType = ref("");
const dataForm = ref({});
const shop = ref({});
const shopDiscounts = ref({});
const stock = ref(0);
const cover = ref("");
const loading = ref(true);
const moDelPrice = ref("");
const moPrice = ref("");
const goodsSkuList = ref([]);
const skuTab = ref([]);
const goods_id = ref(null);
const limit_buy_num = ref(0);
const choseConfig = ref({});
const hasId = ref("");
const add_num = ref(1);
const goStatus = ref(0);
const shop_id = ref(0);
const commentList = ref([]);
const commentListLength = ref(0);
const goodsInfo = ref({});
const time1 = ref([0, 0, 0, 0]);
const time2 = ref([0, 0, 0, 0]);
const teamlist = ref([]);
const selectGroup = ref(null);
const show = ref(false);
const teamId = ref(null);
const id = ref(null);

// 页面生命周期
onLoad((options) => {
  id.value = options.id;
  if (options.id) {
    getDetailInfo(options.id);
  }
  if (options.teamId) {
    teamId.value = options.teamId;
  }
  if (options.shareId) {
    recordSave(options.shareId, options.id);
  }
});

onShow(() => {});

onShareAppMessage((res) => {
  let user = uni.getStorageSync("personal");
  if (res.from === "button") {
    console.log(res.target);
  }
  return {
    title: dataForm.value.shareTitle,
    imageUrl: dataForm.value.shareImg,
    path: `/pages/product/goods/puzzleGoods?id=${dataForm.value.id}&Sshopid=${
      shop_id.value
    }&teamId=${teamId.value || ""}&share=1&shareId=${user.id || ""}`,
  };
});

const notStarted = () => {
  uni.$uv.toast("活动尚未开始");
};

const itSover = () => {
  uni.$uv.toast("活动已结束");
};

const goLocal = () => {
  uni.openLocation({
    latitude: Number(shop.value.tx_latitude),
    longitude: Number(shop.value.tx_longitude),
    name: shop.value.name,
    address: shop.value.address,
    success: function () {
      console.log("success");
    },
  });
};

const goShop = () => {
  uni.navigateTo({
    url: "/pages/convenienceService/shopDetails?shopId=" + shop_id.value,
  });
};

const recordSave = (share_user_id, goods_id) => {
  globalThis.$http
    .post("/share/record/save", {
      share_user_id: share_user_id,
      goods_id: goods_id,
    })
    .then((res) => {});
};

const groupGoBuy = () => {
  selectGroup.value = null;
  getTeam();
};

const gogroup = (item) => {
  gbOpenRef.value.close();
  btnType.value = 1;

  globalThis.$http.get(`/groupbuy/team/info/${item.id}`).then((res) => {
    if (res && res.code == 200) {
      time2.value = uni.$uv
        .countDown(Math.floor(res.data.count_down_end_time))
        .split(":")
        .map((val) => Number(val));
      console.log(time2.value, 123);
    }
  });

  selectGroup.value = item;
};

const goGdProduct = () => {
  checkSku(selectGroup.value.group_buy_goods_id);
};

const overDown2 = () => {
  getTeam();
};

const getIndexList = (shopid) => {
  globalThis.$http.get("/yxt/shop/info/" + shopid).then((res) => {
    uni.stopPullDownRefresh();
    loading.value = false;
    if (res.data && res.code == 200) {
      shop.value = res.data;
    }
  });
};

const getByShop = (id) => {
  globalThis.$http.get("/marketing/firstOrder/getByShop/" + id).then((res) => {
    if (res && res.code == 200) {
      shopDiscounts.value = res.data;
    }
  });
};

const getTeam = () => {
  globalThis.$http
    .get(`/groupbuy/team/list/${shop_id.value}/${dataForm.value.id}`)
    .then((res) => {
      if (res && res.code == 200) {
        res.list.forEach((val) => {
          val.time = uni.$uv
            .countDown(Math.floor(val.end_time / 1000))
            .split(":")
            .map((val) => Number(val));
        });
        teamlist.value = res.list;
        if (teamId.value) {
          btnType.value = 1;
          selectGroup.value = teamlist.value.filter(
            (val) => val.id == teamId.value
          )[0];
          console.log("团队信息2" + JSON.stringify(selectGroup.value));
          time2.value = uni.$uv
            .countDown(Math.floor(selectGroup.value.end_time / 1000))
            .split(":")
            .map((val) => Number(val));
        }
      }
    });
};

const getDetailInfo = (id) => {
  globalThis.$http
    .get("/groupbuy/activitygoods/goodsInfo/" + id)
    .then((res) => {
      loading.value = false;

      if (res && res.code == 200) {
        dataForm.value = res.data;
        shop_id.value = res.data.shop_id;
        imglist.value = res.data.cover.split(",");
        getByShop(shop_id.value);
        getIndexList(shop_id.value);

        if (res.data.active_state == 0) {
          time1.value = uni.$uv
            .countDown(res.data.activity_start_time)
            .split(":")
            .map((val) => Number(val));
        } else {
          time1.value = uni.$uv
            .countDown(res.data.finish_time)
            .split(":")
            .map((val) => Number(val));
        }

        globalThis.$http
          .get(`/goods/content/${dataForm.value.goods_id}`)
          .then((res) => {
            if (res && res.code == 200) {
              goodsInfo.value = res.data;
              globalThis.$http
                .get("/marketing/firstOrder/getByShop/" + shop_id.value)
                .then((res) => {
                  if (res && res.code == 200) {
                    shopDiscounts.value = res.data;
                  }
                });
            }
          });

        globalThis.$http
          .get(
            `/comment/orderGoods/getgoodscomments/${dataForm.value.goods_id}`
          )
          .then((res) => {
            if (res && res.code == 200) {
              commentList.value = res.list;
              commentListLength.value =
                res.list && res.list.length ? res.list.length : 0;
            }
          });

        getTeam();
      }
    });
};

const goProduct = (id) => {
  uni.navigateTo({
    url: "./goods?id=" + id,
  });
};

const goGb = () => {
  gbOpenRef.value.open();
};

const gbClose = () => {
  gbOpenRef.value.close();
};

const change = (i) => {
  isChecked.value = i;
};

const buy = (i, id) => {
  btnType.value = i;
  selectGroup.value = null;
  checkSku(id);
  if (i == 0) {
    btnName.value = "加入购物车";
  } else {
    btnName.value = "立即购买";
  }
};

const resNum = () => {
  if (add_num.value > 1) {
    add_num.value--;
  }
};

const addNum = () => {
  add_num.value++;
};

const chonseSku = (index, id) => {
  skuTab.value[index].values.forEach((res) => {
    res.flag = false;
    if (res.id == id) {
      res.flag = true;
    }
  });
  let choseId = [];
  skuTab.value.forEach((res) => {
    res.values.forEach((Key) => {
      if (Key.flag) {
        choseId.push(Key.id);
      }
    });
  });
  let totalId = choseId.sort((a, b) => a - b).join("|");
  hasId.value = totalId;
  goodsSkuList.value.forEach((res) => {
    let temp = res.sku_hash_code;
    let sku_hash_code_val = temp
      .split("|")
      .sort((a, b) => a - b)
      .join("|");
    if (sku_hash_code_val == totalId) {
      choseConfig.value = res;
      stock.value = dataForm.value.real_stock_total;
      // able_stock should be defined
    }
  });
};

const checkSku = (id) => {
  globalThis.$http
    .get(`/groupbuy/activitygoods/skus/${dataForm.value.id}`)
    .then((res) => {
      loading.value = false;
      if (res && res.code == 200) {
        choseConfig.value = {};
        hasId.value = "";
        goods_total_stock.value = res.data.goods_total_stock;

        res.data.goods.sku_table.forEach((keys) => {
          keys.values.forEach((val) => {
            val.flag = false;
          });
        });

        limit_buy_num.value = dataForm.value.limit_buy_num;
        goods_id.value = dataForm.value.goods_id;
        goodsSkuList.value = res.data.goods_sku_list;
        moPrice.value = dataForm.value.min_price;
        moDelPrice.value = dataForm.value.min_sale_price;
        cover.value = imglist.value[0];
        stock.value = dataForm.value.real_stock_total;

        if (res.data.goods_auth) {
          if (res.data.goods_auth.added) {
            specOpenRef.value.open();
          } else {
            uni.$uv.toast("该商品已经下架");
          }
        } else {
          uni.$uv.toast("没有经营权限");
        }

        if (skuTab.value.length == 0) {
          skuTab.value = res.data.goods.sku_table;
          for (let i in skuTab.value) {
            skuTab.value[i].values[0].flag = true;
          }
        }
        chonseSku(0, skuTab.value[0].values[0].id);
      }
    });
};

const specOpenClose = () => {
  specOpenRef.value.close();
};

const btnBuys = () => {
  if (skuTab.value.length > 0 && hasId.value == "") {
    uni.$uv.toast("请选中sku");
    return false;
  }

  if (add_num.value > limit_buy_num.value && limit_buy_num.value != 0) {
    uni.$uv.toast("商品限购" + limit_buy_num.value + "件");
    return false;
  }

  //判断库存
  if (goodsSkuList.value.length > 0 && stock.value < add_num.value) {
    uni.$uv.toast("商品库存只有" + stock.value + "件");
    globalThis.$http
      .post(`/singlegoods/understockrecord/save`, {
        shop_id: shop_id.value,
        goods_id: goods_id.value,
        single_goods_id: choseConfig.value.single_goods_id,
        sku_set_name: choseConfig.value.sku_set_name,
        buy_num: add_num.value,
      })
      .then((res) => {});
    return false;
  }

  if (goStatus.value == 0) {
    let data = {
      goods_id: goods_id.value,
      sku_hash_code: choseConfig.value.sku_hash_code,
      add_num: add_num.value,
      source_shop_id: shop_id.value.toString(),
    };
    globalThis.$http.post(`/cart/add`, data).then((res) => {
      if (res && res.code == 200) {
        uni.$uv.toast("添加成功");
        show.value = false;
        choseConfig.value = {};
        add_num.value = 1;
        // cartList();
      }
    });
  } else {
    psotJson();
  }
};

const psotJson = () => {
  let dataJson = {};
  let childArr = [];
  let parendArr = [];

  childArr.push({
    user_cart_id: 0,
    activity_goods_id: choseConfig.value.activity_goods_id,
    goods_id: goods_id.value,
    num: add_num.value,
    sku_hash_code: choseConfig.value.sku_hash_code,
  });

  parendArr.push({
    shop_id: shop.value.id,
    source_shop_id: shop.value.id,
    activity_id: dataForm.value.group_buy_id,
    sponsor_activity_id: selectGroup.value ? selectGroup.value.id : 0,
    user_remark: "",
    items: childArr,
  });

  dataJson = {
    is_cart: false,
    receipt_id: null,
    shipment_mode: 0,
    shop_orders: parendArr,
    marketing_type: 2,
  };

  uni.setStorageSync("dataJson", dataJson);
  uni.navigateTo({
    url: "/pages/product/surePay/surePaySechill?type=group",
  });
};

const btnBuy = (i) => {
  goStatus.value = i;
  let token = uni.getStorageSync("apiToken");
  if (!token) {
    uni.navigateTo({
      url: "/pages/login/index",
    });
  } else {
    // $u.throttle(btnBuys, 500);
    btnBuys();
  }
};
</script>
<style lang="scss">
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
@font-face {
  font-family: "hxicon";
  /* project id 2009392 */
  src: url(data:font/truetype;charset=utf-8;base64,[encoded data, 5216 characters])
    format("truetype");
}

@font-face {
  font-family: "iconfont";
  /* project id 2070236 */
  src: url("//at.alicdn.com/t/font_2070236_id1ac7qapa.eot");
  src: url("//at.alicdn.com/t/font_2070236_id1ac7qapa.eot?#iefix")
      format("embedded-opentype"),
    url("//at.alicdn.com/t/font_2070236_id1ac7qapa.woff2") format("woff2"),
    url("//at.alicdn.com/t/font_2070236_id1ac7qapa.woff") format("woff"),
    url("//at.alicdn.com/t/font_2070236_id1ac7qapa.ttf") format("truetype"),
    url("//at.alicdn.com/t/font_2070236_id1ac7qapa.svg#iconfont") format("svg");
}

.hxicon {
  font-family: hxicon;
  font-size: 20px;
  font-style: normal;
  /* #ifndef APP-PLUS-NVUE */
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
  /* #endif */
}

.price-zhe {
  display: flex;
  align-items: baseline;
}

.per-num {
  display: flex;
}

.bottom-bor {
  border-bottom: 3rpx solid #e7e7e7;
}

.slotBox {
  .back {
    padding: 0 13rpx;
  }
}

.pd24 {
  padding: 24rpx;
}

.pd20 {
  padding: 20rpx;
}

.pt20-pb14 {
  padding-top: 20rpx;
  padding-bottom: 14rpx;
}

.pt28-pb18 {
  padding-top: 28rpx;
  padding-bottom: 18rpx;
}

.pb30 {
  padding-bottom: 30rpx;
}

.pb40 {
  padding-bottom: 40rpx;
}

.pb50 {
  padding-bottom: 50rpx;
}

.pt-pb30 {
  padding-top: 30rpx;
  padding-bottom: 30rpx;
}

.pt-pb35 {
  padding-top: 35rpx;
  padding-bottom: 35rpx;
}

.ml54 {
  margin-left: 54rpx;
}

.ml138 {
  margin-left: 138rpx;
}

.br-rd10 {
  border-radius: 10rpx;
}

.br-rd20 {
  border-radius: 20rpx;
}

.stb-btn {
  padding: 8rpx 18rpx;
  border-radius: 10rpx;
  background: #ff0000;
}

.br-FF0000 {
  border: 1rpx solid #ff0000;
  border-radius: 24rpx;
  padding: 6rpx 12rpx;
}

.bg-FFF6EE {
  background-color: #fff6ee;
}

.mt80 {
  margin-top: 80rpx;
}

.mt10 {
  margin-top: 10rpx;
}

.product {
  // padding-bottom: 150rpx;
}

.pic {
  width: 100%;
  position: relative;

  .swiper {
    // height: 620rpx;
    height: 100vw;

    video {
      width: 100%;
      // height: 620rpx;
      height: 100vw;
    }

    image {
      width: 100%;
      // height: 620rpx;
      height: 100vw;
    }
  }

  .p-price {
    width: 100%;
    // position: absolute;
    top: 460rpx;
    // background: linear-gradient(90deg,#20a733, #0a824b);
    background: #fa6138;
    border-radius: 20rpx 20rpx 0px 0px;
    position: relative;
    top: -18rpx;

    .discount {
      color: #ffffff;
    }
  }
}

.richText {
  padding: 30rpx;

  ::v-deep img {
    margin-top: 0 !important;
  }
}

//秒杀，拼团样式
.p-ab {
  position: absolute;
  z-index: 2;
  top: -8rpx;
  right: 0;
}

.stb-list {
  padding-bottom: 10rpx;
}

.triangle-bottomright {
  width: 0;
  height: 0;
  border-bottom: 105rpx solid #dccda4;
  border-left: 60rpx solid transparent;
}

.seckill {
  background-color: #dccda4;
  color: #fa6138;
  padding: 12rpx 15rpx;
  padding-right: 28rpx;
  border-radius: 5rpx 20rpx 0px 0px;
  box-sizing: border-box;
}

.seckill-btn {
  width: 86%;
}

.br-284534 {
  border-bottom: 1rpx solid rgba($color: #284534, $alpha: 0.3);
}

.gb-te {
  padding-top: 20rpx;
  padding-bottom: 15rpx;
}

.gb-btn {
  padding: 20rpx 40rpx;
  line-height: 30rpx;
}

.btn-bg-dccda4 {
  background: #dccda4;
  border-radius: 48px;
}

.btn-bg-00321E {
  background: #fa6138;
  border-radius: 48px;
}

.btn-bg-00320E {
  background: #fa6138;
  border-radius: 48px;
}

.btn-bg-dccda4-48 {
  padding: 20rpx 85rpx;
  border-radius: 48px;
  background: #f8a764;
  color: white;
  margin-right: 10rpx;
}

.btn-bg-dccda4-482 {
  padding: 20rpx 85rpx;
  border-radius: 48px;
  background: #fa6138;
  color: white;
  margin-left: 10rpx;
}

.tab {
  position: sticky;
  top: 0;
  background-color: #fff;
  padding-top: 38rpx;
  z-index: 9;

  .pb30 {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      width: 0;
      height: 2px;
      background: #fa6138;
      transition: all 0.3s;
    }

    &.active {
      font-size: 30rpx;
      color: #fa6138;
      font-weight: 700;

      &::before {
        width: 100%;
      }
    }
  }
}

.bottom-btn {
  width: 100%;
  position: fixed;
  bottom: 0;
  border-top: 1rpx solid #e6e6e6;
  z-index: 9;

  .cart {
    position: relative;

    .number {
      position: absolute;
      top: -10rpx;
      left: 45rpx;
      padding: 4rpx 8rpx;
      background-color: #ff0000;
      border: 4rpx solid #ffffff;
      border-radius: 40rpx;
    }
  }

  .cart-btn {
    width: 230rpx;
    height: 85rpx;
    background: #dccda4;
    border-radius: 43rpx 0rpx 0rpx 43rpx;
  }

  .buy-btn {
    width: 230rpx;
    height: 85rpx;
    line-height: 85rpx;
    background: #fa6138;
    border-radius: 0rpx 43rpx 43rpx 0rpx;
  }
}

.flex-sb {
  display: flex;
  justify-content: space-between;
  border-bottom: 3rpx solid #e7e7e7;
}

//弹窗
.spec {
  border-radius: 18rpx 18rpx 0rpx 0rpx;
  padding-top: 30rpx;
  max-height: 900rpx;
  overflow-y: auto;

  // position: fixed;
  //     bottom: 0;
  //     z-index: 999;
  //     width: 100%;
  .spec-item {
    background-color: #f6f6f6;
    border: 1px solid #f6f6f6;
    padding: 12rpx 30rpx;
    font-size: 24rpx;
    color: #1a1a1a;
    border-radius: 4px;
  }

  .activeColor {
    background-color: #e1e6e3;
    border: 1px solid #3775f6;
    color: #fa6138;
    border-radius: 4px;
  }

  .spec-item:not(:last-child) {
    margin-right: 24rpx;
  }

  //减号
  .minus {
    width: 50rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    background: #dedede;
    border-radius: 8rpx 0rpx 0rpx 8rpx;
  }

  .num {
    width: 74rpx;
    height: 46rpx;
    line-height: 46rpx;
    text-align: center;
    border: 1px solid #dedede;
  }

  //加号
  .plus-sign {
    width: 50rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    background: #dedede;
    border-radius: 0rpx 8rpx 8rpx 0rpx;
  }

  .specOpen-btn {
    margin-top: 68rpx;
    padding-bottom: 34rpx;

    button {
      background-color: #fa6138;
      color: #ffffff;
    }
  }
}
</style>