<!-- 轮播效果的导航控件-->
<template>
  <swiper :options="swiperOption" ref="mySwiper" :style="rootStyle" keep-alive>
    <transition v-for="(item) in comp.props.items.val" :key="item.id">
      <swiper-slide>
        <div
          v-if="item.actionType===sup8._def.linkType.interface.value"
          class="interface-content"
          :style="{color:comp.props.fontColor.val,'font-size':comp.props.fontSize.val}"
          v-html="item.content"
        ></div>

        <img class="main-img" :src="item.bgImg" @click="onClick(item)" />
      </swiper-slide>
    </transition>
  </swiper>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import apiHelper from "../assets/js/apiHelper.js";
import { setTimeout } from "timers";
import eventBus from "../assets/js/eventBus.js";

export default {
  name: "CompSwiperNavBar",
  components: { swiper, swiperSlide },
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      rootStyle: {},
      interfaceList: [{ id: "1", text: "防伪答复" }], // 支持对接的接口列表
      swiperOption: {
        init: false,
        slidesPerView: "auto",
        centeredSlides: true,
        watchSlidesProgress: true,
        // observer: true,
        // observeParents: true,
        on: {
          progress(progress) {
            //debugger
            for (let i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i);
              var slideProgress = this.slides[i].progress;

              let clientWidth = document.body.clientWidth;

              // debugger
              let seed = 70;
              if (clientWidth > 500 && clientWidth <= 1366) {
                seed = 50;
              }

              let translateX = seed * slideProgress + "px";
              let translateZ = -Math.abs(350 * slideProgress) + "px";

              let scale = 1 - Math.abs(slideProgress) / 4;

              slide.transform(
                "translate3d(" +
                  translateX +
                  ", 0px, " +
                  translateZ +
                  ") scale(" +
                  scale +
                  ")"
              );
            }
          },

          setTransition: function(transition) {
            for (var i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i);
              slide.transition(transition);
            }
          }
        }
      }
    };
  },
  methods: {
    onClick(nav) {
      console.log(nav);
      var that = this;
      switch (that.sup8.env) {
        case that.sup8._def.env.design:
          break;
        case that.sup8._def.env.run:
          switch (nav.actionType) {
            case that.sup8._def.linkType.innerPage.value:
              let newPage = _.find(that.cfg.pages, {
                type: nav.actionVal
              });

              if (newPage) {
                that.$emit("changeData", {
                  selectedPage: newPage
                });
              }

              break;
            case that.sup8._def.linkType.outerPage.value:
              var url = nav.actionVal;
              if (url && url.length > 0) {
                url = that.sup8.$utils.replaceUrlParams(url, that.sup8.context);
                if (that.sup8._appConf.sign.open) {
                  url = that.sup8.$utils.generateUrl(url, true, true);
                }
              }

              window.location.href = url;
              break;
          }

          break;
        default:
          break;
      }
    },

    // 设置第一个显示的
    initSwiper() {
      let index = _.findIndex(this.comp.props.items.val, { active: true });
      index = index > 0 ? index : 0;

      // index = 2;
      this.swiperOption.initialSlide = index;
      this.swiper.init();
      this.swiper.slideTo(index, 0, false);
    }
  },
  watch: {},
  created: function() {
    var that = this;
    // 合并参数是为了当实际属性少于基础属性时 补位
    that.mergeCompProps(that.comp);

    that.style = {};
    switch (that.sup8.env) {
      case that.sup8._def.env.design:
        // 特殊处理 调接口的这种配置
        _.forEach(that.comp.props.items.val, function(navItem) {
          switch (navItem.actionType) {
            case that.sup8._def.linkType.interface.value: // 接口
              if ((navItem.actionVal = "1")) {
                navItem.content = "正在查询，请稍后...";
              }
              that.$forceUpdate();
              break;
          }
        });
        break;
      case that.sup8._def.env.preview:
        that.rootStyle = {
          position: "fixed"
        };
        // 特殊处理 调接口的这种配置
        _.forEach(that.comp.props.items.val, function(navItem) {
          switch (navItem.actionType) {
            case that.sup8._def.linkType.interface.value: // 接口
              if ((navItem.actionVal = "1")) {
                navItem.content = "正在查询，请稍后...";
              }
              that.$forceUpdate();
              break;
          }
        });
        break;
      case that.sup8._def.env.run:
        that.rootStyle = {
          position: "fixed"
        };

        // 特殊处理 调接口的这种配置
        _.forEach(that.comp.props.items.val, function(navItem) {
          switch (navItem.actionType) {
            case that.sup8._def.linkType.interface.value: // 接口
              //navItem.content =
              //  "该商品已被查询9999次，首次查询时间为2019-03-03 12:00:09,谨防假冒";

              if ((navItem.actionVal = "1")) {
                function next() {
                  apiHelper.getAntifakeInfo(
                    that.sup8.context.enterpriseno,
                    that.sup8.context.productid,
                    that.sup8.context.code,
                    that.sup8.context.channel || that.sup8.UA.ip.cip, //channel
                    that.sup8.context.decodestatus,
                    that.sup8.context.labelno,
                    that.sup8.context.skulogisticcode,
                    function(res) {
                      navItem.content =
                        res.data.Content ||
                        res.data ||
                        "未查询防伪信息,谨防假冒";

                      that.$forceUpdate();
                    },
                    function(err) {
                      // debugger;
                    }
                  );
                }

                if (this.sup8.context.geo) {
                  next();
                } else {
                  eventBus.subscribe("gpsDone", data => {
                    next();
                  });
                }
              }
              break;
            case that.sup8._def.linkType.outerPage.value: // 外链
              break;
          }
        });

        break;
      default:
        break;
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  mounted: function() {
    console.log("CompSwiperNavBar:mounted:this.comp", this.comp);
    var that = this;
    that.initSwiper();
  }
};
</script>


<style scoped >
.swiper-container {
  width: 100% !important;
  -webkit-perspective: 1200px !important;
  -moz-perspective: 1200px !important;
  -ms-perspective: 1200px !important;
  perspective: 1200px !important;
  /* position: fixed !important; */
  bottom: 5% !important;
}

.swiper-wrapper {
  margin-top: 10px !important;
}

.swiper-slide {
  width: 90% !important;
  -webkit-transform-style: preserve-3d !important;
  -moz-transform-style: preserve-3d !important;
  -ms-transform-style: preserve-3d !important;
  transform-style: preserve-3d !important;
}

.swiper-slide .main-img {
  width: 80% !important;
  margin: 0 auto !important;
  display: block !important;
}

.swiper-slide .interface-content {
  width: 72%;
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 10%;
  top: 10%;
  /* color: #e2c897; */
  /* font-size: 0.9rem; */
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-y: auto;

  display: box;
  box-pack: center;
  box-orient: vertical;
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-orient: vertical;
}

@media screen and (min-height: 481px) {
  .swiper-wrapper {
    margin-top: 20px !important;
  }
}

@media screen and (min-height: 569px) {
  .swiper-wrapper {
    margin-top: 40px !important;
  }
}
</style>
