<template>
  <div>
    <cr-tabs
      v-model="categoryId"
      class="goods__tabs"
      :swipe-threshold="4"
      :line="true"
      sticky
      :anchor="true"
      :color="defaultStyle.titleLineColor"
      :title-bg-color="defaultStyle.titleBackgroundColor"
      :title-active-color="defaultStyle.selectedTitleColor"
      :title-inactive-color="defaultStyle.titleColor"
      :sticky-line-color="ceilingStyle.titleLineColor"
      :sticky-bg-color="ceilingStyle.titleBackgroundColor"
      :sticky-active-color="ceilingStyle.selectedTitleColor"
      :sticky-inactive-color="ceilingStyle.titleColor"
    >
      <cr-tab v-for="(item, index) in navigations" :key="index" :name="index" :title="item.title">
        <div class="skuList">
          <img
            v-if="item.topImageUrl"
            :src="item.topImageUrl"
            class="topImg"
            @click="jumpToUrl(item.topImageNavUrl, 'topImage', {}, '', item)"
          />
          <div v-for="(sku, i) in item.skus" :key="i" class="skuList-content">
            <div class="skuList-content-head">
              <img
                :src="sku.imageUrl"
                alt=""
                class="skuList-content-head-image"
                @click="jumpToUrl(sku.jumpUrl, 'sku', sku, i, item)"
              />
              <p
                class="skuList-content-head-name"
                @click="jumpToUrl(sku.jumpUrl, 'sku', sku, i, item)"
              >
                <img
                  v-if="sku.channelImg"
                  :src="sku.channelImg"
                  class="skuList-content-head-name-img"
                />{{ sku.skuName }}
              </p>
            </div>

            <div
              class="skuList-content-footer"
              :style="{ marginTop: sku.newUserLabel ? '8px' : '21px' }"
            >
              <div
                class="skuList-content-footer-left"
                @click="jumpToUrl(sku.jumpUrl, 'sku', sku, i, item)"
              >
                <img
                  v-if="sku.newUserLabel"
                  :src="sku.tagList[0].icon"
                  alt=""
                  class="skuList-content-footer-left-label"
                />
                <!-- <img src="./label.png" alt="" class="skuList-content-footer-left-label" /> -->
                <p class="skuList-content-footer-left-price">￥{{ sku.price }}</p>
                <p
                  v-if="+sku.price !== +sku.marketPrice && sku.newUserLabel"
                  class="skuList-content-footer-left-marketPrice"
                >
                  日常价￥{{ sku.marketPrice }}
                </p>
              </div>
              <i
                class="iconfont icon-cart-card skuList-content-footer-right"
                size="16px"
                :style="{ marginBottom: sku.newUserLabel ? '5px' : '0' }"
                @click="addShopCart(sku)"
              />
            </div>
          </div>
        </div>
      </cr-tab>
    </cr-tabs>
  </div>
</template>
<script>
import { isApp } from '@/service/validation.service';
import { maxMember } from '@/api/member.api';
import { getTokenFromApp } from '@/service/yxmLogin.service';
import localStorage from '@/service/localStorage.service';
export default {
  props: {
    ceilingStyle: Object,
    defaultStyle: Object,
    navigations: Array
  },
  data() {
    return {
      categoryId: 0,
      skus: []
    };
  },
  methods: {
    jumpToUrl(url, type, sku, i, item) {
      if (type === 'sku') {
        this.$track.registeredEvents('H5_VccNewUserPageCommodityCardClick', {
          top_navigation_name: item.title,
          commodity_location_ordinal: i,
          commodity_id: sku.skuNo,
          commodity_name: sku.skuName
        });
      }
      if (type === 'topImage') {
        this.$track.registeredEvents('H5_VccNewUserPageTopImageClick', {
          top_navigation_name: item.title,
          url
        });
      }
      if (url) {
        console.log(url);
        if (this.$bridge.isApp) {
          if (type === 'sku') {
            url = `xyqb://homepage/goodsdetail?skuNo=${sku.skuNo}`;
          }
          this.$bridge.openNewUrl({
            data: {
              newUrl: url
            }
          });
        } else {
          if (type === 'sku') {
            const query = {
              skuNo: sku.skuNo
            };
            this.$router.push({ name: 'goodDetail', query });
          } else {
            window.location.href = url;
          }
        }
      }
    },
    async addShopCart(goods) {
      // todo
      // if (goods.status === 2) return;
      // if (goods.status === 1) {
      //   this.$toast('来晚了已经卖完了~');
      //   return;
      // }
      try {
        // this.$router.push({ name: 'Login' });
        if (isApp) {
          const token = this.$route.query.vccToken;
          if (!token) {
            await getTokenFromApp(true);
          }
        } else {
          if (!localStorage.get('vccToken')) {
            this.$router.push({ name: 'Login' });
            return;
          }
        }

        const { skuNo, skuSource } = goods;
        const params = [{ skuId: skuNo, skuSource, skuNum: 1, type: 1 }];
        const [res, err] = await maxMember.addShopCart({
          shopCartBaseList: params,
          selected: true
        });
        if (res) {
          this.$toast.success('添加成功');
        } else if (err.response.businessCode === '401' && isApp) {
          await getTokenFromApp(true);
        }
        if (isApp) {
          this.editor?.updateShopCartCount();
          this.$bridge.run({
            event: 'shopCarAddGoodsNotification',
            data: {
              count: res.count
            }
          });
        }
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.goods__tabs {
  @{deep}.cr-tabs__item {
    width: 24vw;
  }
  // @{deep}.cr-tab__pane {
  //   margin-left: 1vw;
  //   width: 98vw;
  // }
  width: 100vw;
}
.topImg {
  width: 93.6vw;
  height: 14.7vh;
  margin: 4px 0;
}
.skuList {
  width: 93.6vw;
  margin-left: 3.2vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  &-content {
    width: 29.8vw;
    height: 29.9vh;
    margin: 4px 0;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #f3f3f3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &-head {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      &-image {
        width: 100%;
        height: 14.5vh;
        border-radius: 8px 8px 0 0;
      }
      &-name {
        margin: 0 3px;
        font-size: 1.7vh;
        color: #333;
        line-height: 19px;
        margin-top: 1.5vh;
        overflow: hidden;
        // width: 100%;
        white-space: normal;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        &-img {
          width: 22px;
          height: 13px;
          vertical-align: middle;
          margin: 0 2px;
        }
      }
    }
    &-footer {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 0 0.5vw;
      align-items: flex-end;
      padding-bottom: 3px;
      &-left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        &-label {
          width: auto;
          height: 1.7vh;
        }
        &-price {
          font-size: 2vh;
          color: #ec3333;
          line-height: 2.8vh;
          margin-top: 2px;
          letter-spacing: 0;
        }
        &-marketPrice {
          font-size: 1.6vh;
          color: #999;
          transform: scale(0.83);
          margin-left: -8.4%;
          line-height: 16.7px;
        }
      }
      &-right {
        width: 4vh;
        height: 4vh;
        color: #ec1500;
        background-color: #fff3f3;
        border-radius: 2vh;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 1.3vw;
      }
    }
  }
}
</style>
