<template>
  <div
    class="banner-tamplate1"
    :style="{'background-color': bannerDetail.bgColor, color: bannerDetail.ftColor}"
  >
    <div class="content">
      <div class="content-item" v-for="item in bannerDetail.list" :key="item.id">
        <!-- 一般图片 -->
        <div class="img-wrapper" v-show="item.type === 'img'">
          <img class="small-banner" mode="widthFix" :src="item.src" />
        </div>
        <!-- 商品 -->
        <div class="skus-wrapper" v-show="item.type === 'skus'">
          <div class="sku-cell" v-for="sku in item.skuList" :key="sku.skuID">
            <div @click.stop="toGoodDetail(item.skuList, sku)">
              <div class="sku-img">
                <img class="img" :src="$filters.urlToHttps(sku.img,'img200')" />
                <div class="no-sale" v-show="!sku.isSale"></div>
              </div>
              <div class="sku-name">{{sku.name}}</div>
              <div class="good-price" v-if="sku.isSale">
                <div class="price">
                  <div class="cur-price">{{$filters.toFixed2(sku.curPrice)}}</div>
                  <div class="ori-price" v-if="sku.oriPrice">{{$filters.toFixed2(sku.oriPrice)}}</div>
                </div>
              </div>
              <div class="act-icon">
                <div class="act-type-wrapper" v-if="sku.actType">
                  <div class="act-type">{{actTypeArr[sku.actType]}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- loading -->
    <ZyLoading></ZyLoading>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { errToast, modal,jumpPage } from "@/utils/uniapi.js";
import ZyLoading from "@/components/Loading/loading";
import goodPage from '@/apis/goodPage';
import { msgData, actTypeArr } from "@/config";
export default {
  components: {
    ZyLoading,
  },
  data() {
    return {
      bannerDetail: {},
      actTypeArr,
    };
  },
  created() {
    // console.log(window.location.href);
  },
  computed: {
    ...mapGetters({
      bannerList: "indexPage/bannerList",
    }),
  },
  async onLoad(query) {
    try {
      this.showLoad();
      // console.log(query);
      const { id } = query;
      if (!id) {
        await this.noPage();
      } else {
        // console.log(this.bannerList)
        // 找到bannerList
        const banner = this.bannerList.find((item) => item.id === id);
        if (banner) {
          console.log("获取的bannerList", banner);
          // 先提取出所有skuID
          const skuList = banner.content.list.filter(
            (item) => item.type === "skus"
          );
          const skuIDs = [].concat(
            ...skuList.map((item) => item.skuList.map((item) => item.skuID))
          );
          console.log(skuIDs);
          // 找到可售商品
          const { skuNames } = await goodPage.goodList({
            skuIDs,
          });
          banner.content.list = banner.content.list.map((item) => {
            if ("skuList" in item) {
              const skuList = [];
              item.skuList.forEach((sku) => {
                const findSku = skuNames.find((item) => item.id === sku.skuID);
                if (findSku) {
                  skuList.push({
                    ...sku,
                    isSale: true,
                    curPrice: findSku.curPrice,
                    oriPrice: findSku.oriPrice,
                    actType: findSku.actType,
                  });
                } else {
                  skuList.push({
                    ...sku,
                    isSale: false,
                  });
                }
              });
              item.skuList = skuList;
            }
            return {
              ...item,
            };
          });
          console.log(banner.content.list);
          this.bannerDetail = banner.content;
          console.log(this.bannerDetail);
        } else {
          await this.noPage();
        }
      }
    } catch (e) {
      console.error(e);
      errToast(e);
    } finally {
      this.hideLoad();
    }
  },
  methods: {
    // 页面丢失
    async noPage() {
      await modal("页面丢失", "无相关页面", {
        showCancel: false,
        confirText: "返回",
      });
      uni.navigateBack();
    },
    // 跳转到商品详情
    toGoodDetail(skuList, sku) {
      console.log(skuList, sku);
      if (sku.$orig.isSale) {
        jumpPage('navigateTo',`/pagesGoods/good-detail/index?skuID=${sku.$orig.skuID}`)
      }
    },
  },
};
</script>

<style lang="scss">
@import "./banner-tamplate1.scss";
</style>