<template>
  <view class="goods">
    <view class="u-skeleton" v-if="isExsitGoods">
      <view class="u-skeleton-rect">
        <!--  <u-swiper
          :list="g.pic_url"
          height="100"
          unit="vw"
          :interval="10000"
          name="pic_url"
          :border-radius="0"
          @click="previewImage"
        ></u-swiper> -->
        <swiper
          indicator-dots
          :autoplay="false"
          :interval="1000"
          style="height: 100vw"
        >
          <block v-for="(item, index) in g.pic_url" :key="index">
            <swiper-item>
              <video
                @click="startPlay(item)"
                style="width: 100%; height: 100%"
                id="myVideo"
                v-if="item.type == 1"
                :src="item.pic_url"
                :autoplay="false"
                loop
                muted
                show-play-btn
                :enable-progress-gesture="true"
                :controls="true"
                :show-progress="true"
                :show-mute-btn="true"
                objectFit="cover"
              ></video>
              <image
                @click="previewImage(index)"
                style="width: 100%; height: 100%"
                v-else
                :src="item.pic_url"
                mode="aspectFill"
              ></image>
            </swiper-item>
          </block>
        </swiper>
        <!-- TODO 分销价格未做 is_share_price -->
        <view
          class="is_share"
          v-if="g.share > 0 && hideshare == false && setting.is_show_korea == 0"
          style="top: 240px"
        >
          <image
            src="@/static/images/icon/WechatIMG424.png"
            style="width: 20px; margin-left: 12px; opacity: 1; height: auto"
            mode="widthFix"
          />
          <view
            style="
              display: flex;
              flex-direction: column;
              margin-left: 8px;
              font-size: 11px;
              color: #fff;
              opacity: 1;
            "
          >
            <Text>即刻分享赚</Text>
            <Text>￥ {{ g.share }}</Text>
          </view>
          <u-icon
            name="close"
            style="position: absolute; right: 4px; top: 12.5px"
            color="#fff"
            size="40"
            @click="hideshare = true"
          ></u-icon>
        </view>
        <view
          class="is_share"
          v-if="
            g.myBuyCommission > 0 &&
            hideshare == false &&
            setting.is_show_korea == 0
          "
        >
          <image
            src="@/static/images/icon/WechatIMG424.png"
            style="width: 20px; margin-left: 12px; opacity: 1; height: auto"
            mode="widthFix"
          />
          <view
            style="
              display: flex;
              flex-direction: column;
              margin-left: 8px;
              font-size: 11px;
              color: #fff;
              opacity: 1;
            "
          >
            <Text>即刻购买省</Text>
            <Text>￥ {{ g.myBuyCommission }}</Text>
          </view>
          <u-icon
            v-if="g.share == 0"
            name="close"
            style="position: absolute; right: 4px; top: 12.5px"
            color="#fff"
            size="40"
            @click="hideshare = true"
          ></u-icon>
        </view>
      </view>
      <view class="g-info">
        <view class="g-name u-skeleton-rect">
          <view
            v-if="
              g.marketingLogo.iswords &&
              g.marketingLogo.iswords == 1 &&
              g.marketingLogo.words != ''
            "
            class="Logo"
            :style="{
              color: g.marketingLogo.wordsColor,
              background: g.marketingLogo.wordsBack,
            }"
            >{{ g.marketingLogo.words }}</view
          >
          <image
            v-if="
              g.marketingLogo.iswords &&
              g.marketingLogo.iswords == 2 &&
              g.marketingLogo.ico != ''
            "
            mode="heightFix"
            :src="g.marketingLogo.ico"
            style="height: 12px; margin-right: 5px"
          />
          {{ g.name }}
        </view>
        <view class="g-price-box" v-if="setting.is_show_korea == 0">
          <view class="left">
            <view class="price u-skeleton-rect" :style="{ color: mc }">
              <u-tag
                v-if="g.price_min != g.original_price"
                text="心动价"
                mode="light"
                size="mini"
                type="error"
                style="font-size: 12px; font-family: aa; margin-right: 10px"
              />
              <text class="small">￥</text>
              <text class="numfont" v-if="g.form_id != 1">
                {{
                  g.price_min == g.price_max
                    ? g.price_min
                    : g.price_min + "-" + g.price_max
                }}
              </text>
              <text class="numfont" v-if="g.form_id == 1">
                {{ g.price_min }}
              </text>
              <text class="small" v-if="g.form_id == 1">起</text>
            </view>
            <!-- TODO is_common_user_member_price 普通用户会员价 -->
            <!-- TODO is_member_user_member_price 会员用户会员价 -->
            <view class="sell u-skeleton-rect">
              <text class="oprice" v-if="setting.is_underline_price == 1"
                >原价:{{ g.original_price }}</text
              >
              <text v-if="setting.is_sales == 1"
                >已售出{{ g.sales }}{{ g.unit }}</text
              >
            </view>
          </view>
          <view
            class="right u-skeleton-rect"
            @click="openShare"
            v-if="isAllowShare == 1"
          >
            <image
              src="@/static/images/icon/icon-share.png"
              class="share-icon"
            />
            <text>分享</text>
          </view>
        </view>
        <template v-if="setting.is_show_korea == 1">
          <view style="height: 50px; margin: 10px 10px 0 0; display: none">
            <view
              style="float: right"
              @click="openShare"
              v-if="isAllowShare == 1"
            >
              <image
                src="@/static/images/icon/icon-share.png"
                style="width: 20px; height: 20px"
                class="share-icon"
              />
            </view>
          </view>
          <view class="koarea_Country" style="display: none">
            <view
              style="
                flex: 1;
                text-align: center;
                border-right: 1px solid #f2f3f6;
              "
            >
              <text v-if="g.goods_country">{{ g.goods_country }}</text>
            </view>
            <view
              style="
                flex: 1;
                text-align: center;
                border-right: 1px solid #f2f3f6;
              "
              >无</view
            >
            <view
              style="flex: 1; text-align: center"
              v-if="g.cats && g.cats.length > 0"
              >{{ g.cats[0].CategoryName }}</view
            >
          </view>
          <view
            style="
              text-align: left;
              padding: 15px 0;
              border-bottom: 1px solid #f2f3f6;
              display: none;
            "
          >
            卖点：<text v-if="g.subname">{{ g.subname }}</text>
          </view>
          <view
            style="
              text-align: left;
              border-bottom: 1px solid #f2f3f6;
              padding: 15px 0;
              display: flex;
              font-size: 13px;
              color: #737373;
            "
          >
            <u-icon name="location" color="#D4D4D4" size="30"></u-icon>
            地址：<text v-if="g.fatcode">{{ g.fatcode }}</text>
          </view>
          <view
            style="
              display: flex;
              text-align: left;
              padding: 10px;
              background-color: #f3f3f3;
              color: #404040;
              min-height: 100px;
              line-height: 25px;
              font-size: 13px;
            "
          >
            <text style="flex-shrink: 0; width: 45px">简介：</text
            ><text v-if="g.goodsurl">{{ g.goodsurl }}</text>
          </view>
        </template>
      </view>
      <view
        class="sku-box u-skeleton-rect"
        style="margin: 0; padding: 10px"
        v-if="
          g.friendUrl != null && g.friendUrl != '' && setting.is_show_korea == 0
        "
        @click="goCoiling(g.friendUrl)"
      >
        <image
          src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goodsCoiling.png"
          style="width: 100%; height: 68px"
        />
      </view>
      <view
        class="sku-box u-skeleton-rect"
        style="align-items: flex-start"
        v-if="
          g.goods_marketing_award.integral.title != '' ||
          g.goods_marketing_award.PresentFXGradeMsg != '' ||
          (g.freeShippingName != null &&
            g.freeShippingName != '' &&
            (g.fullMoneyPinkage > 0 || g.fullNumPinkage > 0))
        "
      >
        <view class="label" style="margin-top: 5px">活动</view>
        <view class="content" style="display: flex; flex-direction: column">
          <view
            style="
              display: flex;
              flex-direction: row;
              align-items: center;
              margin-bottom: 5px;
            "
            v-if="g.goods_marketing_award.integral.title != ''"
          >
            <u-tag text="送积分" type="error" />
            <text style="margin-left: 5px; font-size: 12px">{{
              g.goods_marketing_award.integral.title
            }}</text>
          </view>
          <view
            style="display: flex; flex-direction: row; align-items: center"
            v-if="g.goods_marketing_award.PresentFXGradeMsg != ''"
            @click="goVIP"
          >
            <u-tag text="送会员" type="error" />
            <text style="margin-left: 5px; font-size: 12px">{{
              g.goods_marketing_award.PresentFXGradeMsg
            }}</text>
          </view>

          <view
            style="
              display: flex;
              flex-direction: row;
              align-items: center;
              margin-top: 5px;
            "
            @click="goUrl(g.FreeShippingUrl)"
            v-if="
              g.freeShippingName != null &&
              g.freeShippingName != '' &&
              (g.fullMoneyPinkage > 0 || g.fullNumPinkage > 0)
            "
          >
            <view
              style="
                color: #fa3534;
                background: #fef0f0;
                padding: 12rpx 22rpx;
                font-size: 22rpx;
                margin-right: 5px;
                border: 1px solid #fde2e2;
                border-radius: 6rpx;
              "
              >{{ g.freeShippingName != null ? g.freeShippingName : "" }}</view
            >
            {{
              g.fullMoneyPinkage > 0 && g.fullNumPinkage == 0
                ? g.fullMoneyPinkage + "元包邮"
                : ""
            }}
            {{
              g.fullMoneyPinkage == 0 && g.fullNumPinkage > 0
                ? g.fullNumPinkage + "件包邮"
                : ""
            }}
          </view>

          <!-- <view style="margin-top: 5px;" v-if="
			g.goods_marketing_award.PresentFXGradeMsg == '' 
			&& g.goods_marketing_award.integral.title == '' &&
			g.freeShippingName!=null && g.freeShippingName !='' &&(g.fullMoneyPinkage == 0 && g.fullNumPinkage==0)
			 ">
				<text>暂无活动</text>
          </view>-->
        </view>
      </view>
      <view
        class="sku-box u-skeleton-rect"
        style="align-items: flex-start"
        v-if="sku.length > 0 && setting.is_show_korea == 0"
      >
        <view class="label">选择</view>
        <view class="content">
          <view class="sku-chosen" @click="chosenSku">
            <view class="sku"
              >{{ currentSku.attr_list.length > 0 ? "已" : "请" }}选择
              {{ sku }}</view
            >
            <view class="arrow">
              <u-icon name="arrow" :size="32" color="#111"></u-icon>
            </view>
          </view>
          <view class="suk-item" style="flex-wrap: wrap">
            <template v-if="skuimage.length > 0">
              <view
                v-for="(x, i) in skuimage"
                class="item img"
                style="margin-bottom: 5px"
                :key="i"
              >
                <image :src="x" style="width: 100%; height: 100%" />
              </view>
              <view class="item" v-if="g.attr_groups[0].attr_list.length > 1"
                >共{{ g.attr_groups[0].attr_list.length }}种{{
                  g.attr_groups[0].attr_group_name
                }}可选</view
              >
            </template>
            <template v-else>
              <template v-for="(x, i) in g.attr_groups[0].attr_list">
                <view
                  class="item"
                  v-if="i < 5"
                  :key="i"
                  style="margin-bottom: 5px"
                  >{{ x.attr_name }}</view
                >
              </template>

              <view class="item" v-if="g.attr_groups[0].attr_list.length > 1"
                >共{{ g.attr_groups[0].attr_list.length }}种{{
                  g.attr_groups[0].attr_group_name
                }}可选</view
              >
            </template>
          </view>
        </view>
      </view>
      <view
        class="sku-box u-skeleton-rect"
        v-if="g.sendArea && g.sendArea != ''"
      >
        <view class="label">发货地</view>
        <view class="content">{{ g.sendArea }}</view>
      </view>
      <view
        class="sku-box u-skeleton-rect"
        v-if="setting.is_express == '1' && setting.is_show_korea == 0"
      >
        <view class="label">快递</view>
        <view class="content">{{
          g.express == "" ? "免运费" : "￥" + g.express
        }}</view>
      </view>

      <view
        class="sku-box u-skeleton-rect"
        style="margin-top: -10"
        v-if="g.goods_marketing.shipping != ''"
      >
        <view class="label">包邮</view>
        <view class="content">{{ g.goods_marketing.shipping }}</view>
      </view>
      <view
        class="sku-box u-skeleton-rect"
        style="margin-top: -10"
        v-if="g.goods_marketing.limit != '' && setting.is_show_korea == 0"
      >
        <view class="label">限购</view>
        <view class="content">{{ g.goods_marketing.limit }}</view>
      </view>

      <view
        class="sku-box u-skeleton-rect"
        v-if="
          comments.length == 0 &&
          setting.is_comment == 1 &&
          setting.is_show_korea == 0
        "
      >
        <view class="label">暂无评论信息</view>
      </view>
      <view class="comment" v-if="comments.length > 0">
        <view class="chead">
          <u-section
            :bold="false"
            :sub-color="secondary"
            :show-split="false"
            :title="`商品评价(${comments.length})`"
            sub-title="查看更多"
            @click="clickCommentHandler"
            font-size="24"
          ></u-section>
        </view>
        <view class="content">
          <view class="u-box">
            <view class="user">
              <u-avatar :src="comments[0].UserPhotoPath" :size="50"></u-avatar>
              <text style="margin-left: 10px">{{ comments[0].UserName }}</text>
              <u-rate
                :current="comments[0].CommentScore"
                active-color="#FA3534"
                inactive-color="#b2b2b2"
                active-icon="star"
                inactive-icon="star-o"
                size="20"
                :disabled="true"
              ></u-rate>
            </view>
            <view class="timer">{{ comments[0].CreateDate }}</view>
          </view>
          <view class="ucontent">{{ comments[0].Content }}</view>
        </view>
      </view>
      <u-divider :margin-top="20" :margin-bottom="20" bg-color="transparent"
        >商品详情</u-divider
      >
      <view class="details">
        <!-- <rich-text :nodes="detailContent"  @click="clickDescription"></rich-text> -->
        <h-parse
          :content="detailContent"
          @navigate="clickDescription"
        ></h-parse>
      </view>
      <template v-if="setting.is_show_korea == 1">
        <view
          style="
            width: 100%;
            height: 1px;
            border-top: 1px solid #ffffff;
            margin: 20px 0;
          "
        ></view>
        <view
          class="commontList"
          v-for="(item, index) in compentList"
          :key="index"
        >
          <view>
            <img
              :src="item.UserPhoto"
              style="width: 30px; height: 30px; border-radius: 50%"
              alt=""
            />
          </view>
          <view style="width: 100%; margin-left: 10px">
            <view style="color: #000000; font-size: 14px; margin-bottom: 5px">{{
              item.UserName
            }}</view>
            <view style="color: #909399; font-size: 13px">{{
              item.Content
            }}</view>
          </view>
          <view @click="delCompent(item)" v-if="item.UserId == u.UserId">
            <u-icon name="delete" color="red" size="40"></u-icon>
          </view>
        </view>
        <view
          v-if="compentTotal > 1"
          style="
            display: flex;
            justify-content: end;
            float: right;
            margin-bottom: 20px;
          "
        >
          <view
            class="fenyeBtn"
            v-if="comListMsg.pageIndex > 1"
            @click="goBefore"
            >上一页</view
          >
          <view
            class="fenyeBtn"
            v-if="comListMsg.pageIndex < compentTotal"
            @click="goAfter"
            >下一页</view
          >
        </view>
        <view style="padding: 10px; margin-top: 30px">
          <view style="margin: 10px 0">留言(至少填写10个文字)</view>
          <view>
            <textarea
              placeholder="请输入评论信息"
              style="
                width: 94.5%;
                height: 100px;
                border: 1px solid #d1d1d1;
                padding: 10px;
                background-color: #fff;
              "
              confirm-type="done"
              v-model="comentMsg.Content"
            >
            </textarea>
          </view>
          <view class="goodComentBtn" @click="submitCommit">提交留言</view>
        </view>
      </template>
      <u-divider :margin-top="20" :margin-bottom="20" bg-color="transparent"
        >或许你喜欢</u-divider
      >
      <view
        style="width: calc(100vw - 20px); margin-left: 10px; overflow: hidden"
      >
        <goodlist :list="recommend"></goodlist>
      </view>
      <u-skeleton
        v-if="loading"
        :loading="true"
        :animation="true"
        bgcolor="#FFF"
      ></u-skeleton>
      <template v-if="setting && setting.is_show_korea == 0">
        <goodsaction
          v-if="!loading"
          :good-name="g.name"
          :cover-pic="g.cover_pic"
          :favorite="g.favorite"
          :good-id="id"
          :total-stock="g.totalStock"
          :status="g.status"
          :formid="g.form_id"
          @joincar="joinCar"
          @buy="buy"
        ></goodsaction>
      </template>
      <template v-if="setting && setting.is_show_korea == 1">
        <kotragoodsaction
          v-if="!loading"
          :good-name="g.name"
          :cover-pic="g.pic_url"
          :favorite="g.favorite"
          :good-id="id"
          :total-stock="g.totalStock"
          :status="g.status"
          @buy="buy"
        >
        </kotragoodsaction>
      </template>
      <goodsku
        v-if="!loading && showSku"
        border-radius="10"
        v-model="showSku"
        :mask-close-able="true"
        :safe-area-inset-bottom="true"
        :good="g"
        :option-type="ot"
        :skued="currentSku"
        @close="closeSkuChosen"
      ></goodsku>
    </view>
    <u-empty
      text="没有找到商品，或商品已下架"
      mode="favor"
      v-if="!isExsitGoods"
    ></u-empty>
    <share
      :good-id="id"
      v-if="showShare"
      :good-name="g.name"
      :images="g.pic_url"
      :advertising="g.advertising"
      @close="closeShare"
    ></share>
    <auth
      v-if="showAuth"
      @changeuserinfo="reloadUserinfo"
      @gbAuth="gbAuth"
    ></auth>
    <coupon
      v-if="showCoupons"
      :coupon-message="couponMessage"
      @goLook="goLook"
      @closeBtn="closeBtn"
    ></coupon>
  </view>
</template>

<script>
// #ifdef APP-NVUE
const dom = weex.requireModule("dom");
// #endif
import goodlist from "@/components/goods/list";
import goodsaction from "./components/goodsaction";
import kotragoodsaction from "./components/kotragoodsaction"; //韩国馆项目引用
import goodsku from "@/components/goods/goodsku";
import auth from "@/components/auth/index";
import coupon from "@/components/coupons/coupons";
import share from "./components/share/share";
import hParse from "@/components/u-parse/parse.vue";
export default {
  data() {
    return {
      id: 0,
      loading: true,
      g: {},
      imgs: [],
      mc: "",
      sku: "",
      skuimage: [],
      comments: [],
      secondary: "",
      detailContent: "",
      recommend: [],
      showSku: false,
      ot: 0,
      currentSku: {},
      isExsitGoods: true,
      pageTitle: "商品详情",
      setting: {},
      prevPage: "",
      //自定义接手传递
      opTionObj: {},
      showShare: false,
      msg: {
        pageIndex: 1,
        pageSize: 20,
        GoodsId: 0,
        CommentGrade: 0,
      },
      showAuth: false,
      showCoupons: false,
      couponMessage: "",
      isAllowShare: 1,
      u: {},
      vipState: {},
      Up: 0,
      hideshare: false,
      comentMsg: {
        GoodsId: 0,
        Content: "",
      },
      comListMsg: {
        pageIndex: 1,
        pageSize: 5,
        GoodsId: 0,
      },
      compentList: [], //评论列表
      compentTotal: 0,
      curren: 1,
    };
  },
  components: {
    goodlist,
    goodsaction,
    kotragoodsaction,
    goodsku,
    auth,
    coupon,
    share,
    hParse,
  },
  onLoad(option) {
    this.opTionObj = option;
    console.log(option, "option");

    if (option && option.id) {
      this.id = option.id ? option.id : 29; //40887 59512 46942
    } else {
      this.id = option.GoodsId ? option.GoodsId : 29; //40887 59512 46942
    }
    if (option && option.custom_params) {
      let custom_params = JSON.parse(decodeURIComponent(option.custom_params));
      console.log(custom_params);
      if (custom_params.user_id) {
        uni.setStorageSync("pid", { pid: custom_params.user_id });
      }
      if (custom_params.Up) {
        //分享进入校园id
        uni.setStorageSync("Up", { Up: custom_params.Up });
      }
    }
    if (option && option.user_id) {
      uni.setStorageSync("pid", { pid: option.user_id });
    }
    if (option && option.SmallShopId) {
      uni.setStorageSync("SmallShopId", { SmallShopId: option.SmallShopId });
    }
    if (uni.getStorageSync("AnchorName")) {
      //如果有主播名称了先清除
      uni.removeStorageSync("AnchorName");
    }
    if (option && option.Up) {
      //分享进入校园id
      uni.setStorageSync("Up", { Up: option.Up });
    }
    this.Up = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").UserPageType
      : 0; //用于分享出去的参数
    if (option && option.AnchorName) {
      //当传过来有主播名称的时候 存入缓存
      uni.setStorageSync("AnchorName", { AnchorName: option.AnchorName });
    }
    this.u = uni.getStorageSync("mall_UserInfo");
    // if (!this.u) {
    //   this.u = {
    //     nickName: "未登录",
    //     avatarUrl: "",
    //   };
    //   this.showAuth = true;
    // } else {
    //   this.init();
    //   this.initPage();
    // }
    this.init();
    this.initPage();
    this.getVipId();

    this.mc = this.$uiConfig.mainColor;
    this.secondary = this.$uiConfig.secondary;

    this.setting = uni.getStorageSync("basedata").mall.setting;

    wx.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"],
    });
    this.comListMsg.GoodsId = this.id;
    this.getCommitList();
  },
  // #ifdef MP-WEIXIN
  onShareTimeline() {
    setTimeout(() => {
      console.log("分享调用");
      this.getReceive();
    }, 2500);
    let uid = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").UserId
      : 0;
    if (uid == 0) {
      uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
    }
    let SmallShopId = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").SmallShopId
      : 0;
    if (SmallShopId == 0) {
      //如果微店id为0 去找所属微店id
      SmallShopId = uni.getStorageSync("mall_UserInfo")
        ? uni.getStorageSync("mall_UserInfo").UserSmallShopId
        : 0;
    }
    let title =
      this.g.app_share_title != null && this.g.app_share_title != ""
        ? this.g.app_share_title
        : this.g.name;
    // let imageUrl =
    //   this.g.app_share_pic != null && this.g.app_share_pic != ""
    //     ? this.g.app_share_pic
    //     : this.g.pic_url[0].pic_url;
    let id = this.id;
    return {
      title: title,
      query:
        "id=" +
        this.id +
        "&user_id=" +
        uid +
        "&SmallShopId=" +
        SmallShopId +
        "&Up=" +
        this.Up,
      // imageUrl: imageUrl,
      imageUrl: "",
    };
  },
  // #endif
  onShareAppMessage() {
    setTimeout(() => {
      console.log("分享调用");
      this.getReceive();
    }, 2500);
    let u = uni.getStorageSync("mall_UserInfo");
    let uid = u.UserId ? u.UserId : 0;
    if (uid == 0) {
      uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
    }
    let SmallShopId = u.SmallShopId ? u.SmallShopId : 0;
    if (SmallShopId == 0) {
      //如果微店id为0 去找所属微店id
      SmallShopId = u.UserSmallShopId ? u.UserSmallShopId : 0;
    }
    return {
      title:
        this.g.app_share_title != null && this.g.app_share_title != ""
          ? this.g.app_share_title
          : this.g.name,
      // path: "/pages/goods/goods?id=" + this.id + "&user_id=" + uid+ "&SmallShopId=" + SmallShopId,
      path:
        "/pages/index/index?id=" +
        this.id +
        "&user_id=" +
        uid +
        "&SmallShopId=" +
        SmallShopId +
        "&Up=" +
        this.Up +
        "&JumpType=1",
      imageUrl: "",
      // imageUrl:
      //   this.g.app_share_pic != null && this.g.app_share_pic != ""
      //     ? this.g.app_share_pic
      //     : this.g.pic_url[0].pic_url,
    };
  },
  mounted() {
    setTimeout(() => {
      this.initImages();
    }, 3000);
  },
  methods: {
    clickDescription(e) {
      console.log(e);
    },
    initImages() {
      // let that = this;
      // let info = uni.createSelectorQuery().in(this);
      // info
      //   .select(".goods")
      //   .boundingClientRect((data) => {
      //     console.log("得到布局位置信息" + JSON.stringify(data));
      //   })
      //   .exec();
      // info
      //   .boundingClientRect(function (data) {
      //    console.log(data)
      //   })
      //   .exec();
      // wx.createSelectorQuery()
      //   .selectAll("#goodpic")
      //   .fields({ rect: true })
      //   .exec(res => {
      //     console.log(res);
      //   });
    },
    reloadUserinfo() {
      this.u = uni.getStorageSync("mall_UserInfo");
      // this.showAuth = false;
      this.init();
      this.initPage();
    },
    //关闭登录窗口
    gbAuth() {
      this.showAuth = false;
    },
    initPage() {
      let currentPages = getCurrentPages();
      let u = "/" + currentPages[currentPages.length - 1].route;
      let pages = uni.getStorageSync("basedata")
        ? uni.getStorageSync("basedata").bar_title
        : [];
      pages.forEach((x) => {
        if (x.value == u) {
          this.pageTitle = x.new_name ? x.new_name : x.name;
        }
      });
      uni.setNavigationBarTitle({
        title: this.pageTitle,
      });
    },
    clickCommentHandler() {
      uni.navigateTo({
        url: "/pages/goods/comment-list?id=" + this.id,
      });
    },
    getVipId() {
      //获取会员ID
      this.request2(
        {
          url: "/api/AppletGoods/GetAppletVipGradeInfo",
          data: {},
        },
        (res) => {
          if (res.data) {
            this.vipState = res.data.VIPModel;
          }
          // this.initRecommend();
        }
      );
    },
    goVIP() {
      //跳转到购买的页面查看
      let GradeId = this.vipState.Id;
      uni.navigateTo({
        url: "/pages/share/buyInterest/index?showLook=1&GradeId=" + GradeId,
      });
    },
    init() {
      this.loading = true;
      this.request2(
        {
          url: "/api/AppletGoods/GetAppletGoodsInfo",
          data: {
            GoodsId: this.id,
          },
        },
        (res) => {
          if (res.resultCode == 1) {
            this.g = res.data.goods;
            this.g.totalStock = 0;
            this.g.attr.forEach((x) => {
              this.g.totalStock += x.stock;
            });
            this.g.marketingLogo = JSON.parse(this.g.marketingLogo);
            this.isAllowShare = res.data.goods.isAllowShare; //1为可以分享 2为不能分享
            if (this.isAllowShare == 2) {
              //隐藏分享的按钮
              wx.hideShareMenu({
                menus: ["shareAppMessage", "shareTimeline"],
              });
            }
            this.g.pic_url.forEach((x) => {
              this.imgs.push(x.pic_url);
            });
            if (this.g.attr_groups.length > 0) {
              this.g.attr_groups.forEach((x, i) => {
                if (i > 0) {
                  this.sku += ",";
                }
                this.sku += x.attr_group_name;
              });
              this.g.attr_groups[0].attr_list.forEach((x) => {
                if (x.pic_url) {
                  this.skuimage.push(x.pic_url);
                }
              });
            }

            var richtext = this.g.detail;
            //          richtext = richtext.replace(
            //   /<img/g,
            //   '< img style="margin-top:-4px;width:100%"'
            // );
            this.detailContent = richtext;
            this.loading = false;

            //登录在调用评论接口
            if (this.u) {
              this.initComments();
              this.setFootMarkInfo(res.data.goods.id);
            }
            this.initRecommend();
          } else {
            this.isExsitGoods = false;
          }
        }
      );
    },
    previewImage(i) {
      uni.previewImage({
        urls: this.imgs,
        current: i,
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
          success: function (data) {
            console.log(
              "选中了第" +
                (data.tapIndex + 1) +
                "个按钮,第" +
                (data.index + 1) +
                "张图片"
            );
          },
          fail: function (err) {
            console.log(err.errMsg);
          },
        },
      });
    },
    initComments() {
      this.msg.GoodsId = this.id;
      this.request2(
        {
          url: "/api/AppletOrder/GetAppletGoodsCommentPageList",
          data: this.msg,
        },
        (res) => {
          this.comments = res.data.pageData;

          // this.initRecommend();
        },
        (err) => {
          this.u = uni.getStorageSync("mall_UserInfo");
          this.init();
          this.initPage();
        }
      );
    },
    initRecommend() {
      var UserPageType = uni.getStorageSync("mall_UserInfo")
        ? uni.getStorageSync("mall_UserInfo").UserPageType
        : 0;
      this.request2(
        {
          url: "/api/AppletGoods/GetAppletGoodsRecommendListForZY",
          data: {
            RecommendType: 1,
            GoodsId: this.id,
            GoodsPageType: UserPageType,
          },
        },
        (res) => {
          this.recommend = res.data.List;
        }
      );
    },
    setFootMarkInfo(id) {
      this.request2(
        {
          url: "/api/AppletUser/SetUserFootMarkInfo",
          data: {
            GoodsId: id,
          },
        },
        (res) => {}
      );
    },
    joinCar() {
      console.log("触发1");
      this.showSku = true;
      this.ot = 0;
    },
    buy() {
      this.showSku = true;
      this.ot = 1;
    },
    chosenSku() {
      if (this.u) {
        this.showSku = true;
        this.ot = 2;
      } else {
        this.showAuth = true;
      }
    },
    closeSkuChosen(obj) {
      this.sku = "";
      if (obj) {
        this.currentSku = obj;
        obj.attr_list.forEach((x, i) => {
          if (i > 0) {
            this.sku += ",";
          }
          this.sku += `"${x.attr_name}" `;
        });
      } else {
        this.g.attr_groups.forEach((x, i) => {
          if (i > 0) {
            this.sku += ",";
          }
          this.sku += x.attr_group_name;
        });
      }
    },
    closeShare() {
      this.showShare = false;
    },
    openShare() {
      if (this.u) {
        this.showShare = true;
      } else {
        this.showAuth = true;
      }
    },
    getReceive() {
      //分享进入调取领券接口
      // 1-分享，2-购买并付款
      this.request2(
        {
          url: "/api/AppletUser/ShareCoupon",
          data: {
            TriggerType: 1,
          },
        },
        (res) => {
          console.log(res, "res");
          if (res.couponResultCode == 1) {
            this.couponMessage = res.couponMessage;
            this.showCoupons = true;
          }
        }
      );
    },
    goLook() {
      this.showCoupons = true;
      uni.navigateTo({
        url: "/pages/coupon/index/index",
      });
    },
    closeBtn() {
      this.showCoupons = false;
    },
    goUrl(url) {
      uni.navigateTo({
        url: url,
      });
    },
    //点击跳转
    startPlay(item) {
      uni.navigateTo({
        url:
          "/pages/video/index?GoodsId=" + this.id + "&VideoUrl=" + item.pic_url,
      });
    },
    goCoiling(url) {
      //跳转发圈页面
      uni.navigateTo({ url: url });
    },
    //提交留言
    submitCommit() {
      this.comentMsg.GoodsId = this.id;
      if (this.comentMsg.Content == "") {
        uni.showToast({
          title: "请输入评价内容",
          icon: "none",
        });
        return;
      }
      if (this.comentMsg.Content.length < 10) {
        uni.showToast({
          title: "留言至少10个字！",
          icon: "none",
        });
        return;
      }
      this.request2(
        {
          url: "/api/AppletGoods/SetGoodsLeavemessage",
          data: this.comentMsg,
        },
        (res) => {
          if (res.resultCode == 1) {
            uni.showToast({
              title: "评价成功",
            });
            this.comentMsg.Content = "";
            this.getCommitList();
          }
        }
      );
    },
    //获取评论信息
    getCommitList() {
      this.request2(
        {
          url: "/api/AppletGoods/GetGoodsLeaveMessagePage",
          data: this.comListMsg,
        },
        (res) => {
          if (res.resultCode == 1) {
            this.compentTotal = res.data.pageCount;
            this.compentList = res.data.pageData;
          }
        }
      );
    },
    //上一页
    goBefore() {
      this.comListMsg.pageIndex--;
      if (this.comListMsg.pageIndex < 1) {
        this.comListMsg.pageIndex = 1;
      }
      this.getCommitList();
    },
    //下一页
    goAfter() {
      if (this.comListMsg.pageIndex < this.compentTotal) {
        this.comListMsg.pageIndex++;
      }
      this.getCommitList();
    },
    //删除评论
    delCompent(item) {
      this.request2(
        {
          url: "/api/AppletGoods/RemoveGoodsLeavemessage",
          data: { Id: item.Id },
        },
        (res) => {
          if (res.resultCode == 1) {
            uni.showToast({
              title: "删除成功",
            });
            this.comListMsg.pageIndex = 1;
            this.getCommitList();
          }
        }
      );
    },
  },
};
</script>

<style>
@font-face {
  font-family: "oswald";
  src: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/smallapp/Oswald-Regular.ttf");
}
.goods {
  height: 100%;
  background: #f5f5f5;
  padding-bottom: 55px;
}
.goods .g-info {
  background: #fff;
  padding: 10px;
}
.goods .g-info .g-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 16px;
  height: 45px;
}
.goods .g-info .g-price-box {
  display: flex;
  align-items: flex-end;
}
.goods .g-info .g-price-box .left {
  flex: 1;
  width: 1px;
}
.goods .g-info .g-price-box .left .price {
  margin: 15px 0;
  font-size: 24px;
  font-weight: bold;
  height: 31px;
}
.goods .g-info .g-price-box .left .price .small {
  font-size: 16px;
}
.goods .numfont {
  font-family: "oswald";
  font-weight: unset;
}
.goods .g-info .g-price-box .left .sell {
  font-size: 13px;
  color: gray;
}
.goods .g-info .g-price-box .left .sell .oprice {
  text-decoration: line-through;
  margin-right: 12px;
}
.goods .g-info .g-price-box .right {
  width: 30px;
  margin-left: 20px;
  height: 100%;
  font-size: 12px;
  color: #333;
}
.goods .g-info .g-price-box .right .share-icon {
  width: 22px;
  height: 22px;
  margin-bottom: 12rpx;
}
.goods .sku-box {
  margin: 10px 0;
  background: #fff;
  display: flex;
  padding: 15px 10px;
  align-items: center;
}
.goods .sku-box .label {
  font-size: 12px;
  color: gray;
  margin-right: 15px;
}
.goods .details {
  padding: 10px;
}
.goods .sku-box .content {
  width: 1px;
  flex: 1;
  color: #000;
  font-size: 12px;
}
.goods .sku-box .content .sku-chosen {
  display: flex;
  align-items: center;
}
.goods .sku-box .content .sku-chosen .arrow {
  width: 20px;
}
.goods .sku-box .content .sku-chosen .sku {
  font-size: 12px;
  width: 1rpx;
  flex: 1;
}
.goods .sku-box .content .suk-item {
  margin-top: 10px;
  display: flex;
}
.goods .sku-box .content .suk-item .item {
  margin-right: 5px;
  background: #f5f5f5;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  padding: 0 5px;
  border-radius: 3px;
  overflow: hidden;
  color: #999;
}
.goods .sku-box .content .suk-item .item.img {
  padding: 0;
  width: 24px;
}
.goods .comment {
  margin: 10px 0;
  background: #fff;

  padding: 10px;
}
.goods .comment .chead {
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f1f1;
}
.goods .comment .content {
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}
.goods .comment .content .u-box {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}
.goods .comment .content .u-box .user {
  flex: 1;
  font-size: 12px;
  color: gray;
  align-items: center;
  display: flex;
}
.goods .comment .content .u-box .timer {
  font-size: 12px;
  color: gray;
  text-align: right;
  flex: 1;
}
.goods .comment .content .u-box .ucontent {
  font-size: 12px;
  color: #000;
  margin-top: 10px;
}
.goods .detals {
  padding: 10px;
  background: #fff;
  margin-top: 10px;
}
.goods .detals * {
  max-width: 100%;
}
.goods .is_share {
  width: 125px;
  height: 45px;
  border-top-left-radius: 22.5px;
  border-bottom-left-radius: 22.5px;
  background: #111;
  opacity: 0.8;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  top: 300px;
  right: 0;
}
.goods .Logo {
  padding: 1px 5px;
  display: inline-block;
  font-size: 22rpx;
  margin-right: 5rpx;
  border-radius: 4px;
}
.goods .screen-swiper {
  min-height: 375upx;
}
.goods .screen-swiper image,
.goods .screen-swiper video {
  width: 100%;
  display: block;
  height: 100%;
  margin: 0;
  pointer-events: none;
}
.koarea_Country {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #f2f3f6;
}
.commontList {
  display: flex;
  padding: 0 10px;
  margin-bottom: 10px;
}
.goodComentBtn {
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background-color: #0b0052;
  color: #fff;
  margin-top: 10px;
  font-size: 16px;
}
.fenyeBtn {
  padding: 3px 6px;
  background-color: #00bfff;
  color: #fff;
  font-size: 12px;
  margin: 0 10px 20px 0;
}
</style>
