<style lang="less" scoped>
@import "./index.less";
</style>
<template>
  <div :class="bannerContailerClass">
    <!--  在编辑状态下 ，没有内容显示占位符号-->
    <div v-if=" showPlaceholde && list.length == 0" class="placeholde">
      <span>点击编辑图片广告</span>
      <!-- <yp-image src="https://shopsaas-image.mutlisaas.com/25AFD8FBA66DFAC6EF840895D668D83D.png" fit="fill" width="100%" height="200" ></yp-image> -->
    </div>
    <div v-else :class="bannerTypeClass" :style="bannerImageStyle">
      <!--- BANNER_SWIPE:轮播图 -->
      <template v-if="bannerType === 'BANNER_SWIPE' ">
        <swipe-image :image-list="list" loop @on-click="onClick" :radius="radius" :margin="margin" :next-margin="imageMargin" />
      </template>
      <!--- BANNER_SLIDE:大图横向滑行 -->
      <template v-else-if=" bannerType === 'BANNER_SLIDE' ">
        <swipe-image :image-list="list" :loop="false" @on-click="onClick" :radius="radius" :margin="margin" :next-margin="imageMargin" :show-indicators="false" fit="heightFix" :height="bannerImageHeight" />
      </template>
      <!--- BANNER_SMALL_SLIDE:小图横向滑行 BANNER_NAV_SLIDE:导航横向滑动 -->
      <template v-else-if=" bannerType === 'BANNER_SMALL_SLIDE' || bannerType === 'BANNER_NAV_SLIDE'">
        <div v-for="(banner, index) in list" :key="index" class="banner__image-wrapper" :style="{marginLeft: index === 0 ? (margin + 'px') : (imageMargin + 'px')}">
          <navigator :url="banner.jumpLink">
            <yp-image :src="banner.picUrl" class="banner__image" fit="heightFix" :radius="radius" :margin="margin" :next-margin="imageMargin" :height="bannerImageHeight" />
          </navigator>
        </div>
      </template>
      <!--- BANNER_TOP2END:一行一个 -->
      <template v-else>
        <div v-for="(banner, index) in list" :key="index">
          <div class="banner__image-wrapper " :style="{marginBottom: (imageMargin + 'px')}">
            <navigator :url="banner.jumpLink">
              <yp-image :src="banner.picUrl" class="banner__image" fit="widthFix" :radius="radius" />
            </navigator>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>

import SwipeImage from '../swipe-image';
import Image from '../image';
import navigator from '../navigator';


export default {
  name: 'banner',
  components: {
    SwipeImage,
    YpImage: Image,
    navigator
  },
  /**
  /**
   * 组件的属性列表
   */
  props: {

    /**
      * 是否在没有内容时显示占位图（注：目前在微页面的编辑时用到判断）
      */
    showPlaceholde: {
      type: Boolean,
      default: false
    },
    /**
     * banner对象集
     * {
     *  'picUrl':''   // 显示图片
     *  'jumpLink': ''    // 链接地址
     * }
     */
    list: {
      type: Array,
      default () {
        return [];
      }
    },
    /**
     * 广告条类型 @BANNER_TOP2END:0:一行一个 @BANNER_SWIPE:1:轮播图 @BANNER_SLIDE:2:大图横向滑行 @BANNER_SMALL_SLIDE:3:小图横向滑行 @BANNER_NAV_SLIDE:4:导航横向滑动
     */
    bannerType: {
      type: String,
      default: 'BANNER_SWIPE'
    },
    /**
     * 图片样式 @NORMAL:0:常规  @SHADOW:1:投影 (注：还没有实现)
     */
    imageStyle: {
      type: String,
      default: 'NORMAL'
    },
    /**
    * 圆角值(单位px,0为直角,8为圆角)
   */
    radius: {
      type: Number,
      default: 0
    },
    /**
     * 页面边距
     */
    margin: {
      type: Number,
      default: 0
    },
    /**
     * 商品间距
     */
    imageMargin: {
      type: Number,
      default: 0
    }
  },

  /**
   * 组件的初始数据
   */
  data () {
    return {
    };
  },
  computed: {

    /**
     * 广告条样式
     */
    bannerContailerClass() {
      const bannerContailerClass = ' banner ';

      // 加投影
      // if (this.imageStyle === 'shadow') {
      //   bannerContailerClass += ' banner--img-shadow '
      // }
      // // 加圆角
      // if (this.angleType === 'circle') {
      //   bannerContailerClass += ' banner--fillet'
      // }
      // bannerContailerClass += '  banner--no-border-width '
      return bannerContailerClass;
    },
    /**
     * banner类型样式
     */
    bannerTypeClass() {
      let bannerTypeClass = '';
      if (this.bannerType === 'BANNER_SLIDE' || this.bannerType === 'BANNER_NAV_SLIDE') {
        bannerTypeClass += ' banner__slide ';
      }
      if (this.bannerType === 'BANNER_SMALL_SLIDE') {
        bannerTypeClass += ' banner__slide banner__slide--small ';
      }
      if (this.bannerType === 'BANNER_TOP2END') {
        bannerTypeClass += ' banner__top2end';
      }

      if (this.bannerType === 'BANNER_SWIPE') {
        bannerTypeClass += ' banner__swipe';
      }

      return bannerTypeClass;
    },
    /**
     * banner的图片样式
     */
    bannerImageStyle () {
      // var style = `padding-left:${this.margin}px;padding-right:${this.margin}px;`
      // var height = this.getBannerHeight()
      let style = '';

      if (this.bannerType === 'BANNER_TOP2END') {
        style = `padding-left:${this.margin}px;padding-right:${this.margin}px;`;
      } else if (this.bannerType === 'BANNER_SWIPE') {
        style = `padding-right:${this.margin}px;`;
      }

      if (this.height > 0) {
        style = `height:${this.height}px'`;
      }

      return style;
    },
    /**
     * banner的图片高度
     */
    bannerImageHeight  () {
      return this.getBannerHeight();
    },

  },
  watch: {

  },
  mounted() {
    // console.log('------------------joffeec='+ model.toString())
  },
  /**
   * 组件的方法列表
   */
  methods: {

    onClick(event) {
      const index = event.detail;
      console.log(this.list[index].picUrl);
    },
    /**
     * 获得广告条的高度
     */
    getBannerHeight () {
      let height = 0;
      if (this.bannerType === 'BANNER_SLIDE') {
        height = 215;
      } else if (this.bannerType === 'BANNER_SMALL_SLIDE') {
        height = 98;
      } else if (this.bannerType === 'BANNER_NAV_SLIDE') {
        height = 45;
      }
      return height;
    }
  }
};
</script>
