<style lang="less" scoped>
@import "./index.less";
</style>
<template>
  <div class="showcase">
    <!--  在编辑状态下 ，没有内容显示占位符号-->
    <div v-if=" showPlaceholde && list.length == 0" class="placeholde">
      <span>点击编辑橱窗图片</span>
    </div>
    <div v-else :style="{paddingLeft:margin + 'px',paddingRight:margin + 'px'}">
      <!--  一左两右 -->
      <template v-if=" showcaseType === 'ONE_TWO'">
        <row :gutter="imageMargin">
          <yp-col span="12">
            <navigator :url="imageModel1.jumpLink">
              <yp-image :src="imageModel1.picUrl" height="376" width="100%" fit="cover" />
            </navigator>
          </yp-col>
          <yp-col span="12">
            <div style=" height: 376px; width: 100%;">
              <navigator :url="imageModel2.jumpLink">
                <yp-image :src="imageModel2.picUrl" :height="188-imageMargin/2" width="100%" fit="cover" />
              </navigator>
              <div :style="{marginTop:imageMargin + 'px'}">
                <navigator :url="imageModel3.jumpLink">
                  <yp-image :src="imageModel3.picUrl" :height="188-imageMargin/2" width="100%" fit="cover" />
                </navigator>
              </div>
            </div>
          </yp-col>
        </row>
      </template>

      <!-- 一行两个 -->
      <template v-else-if=" showcaseType === 'ONE_ROW_TWO'">
        <row :gutter="imageMargin">
          <yp-col span="12">
            <navigator :url="imageModel1.jumpLink">
              <yp-image :src="imageModel1.picUrl" height="376" width="100%" fit="cover" />
            </navigator>
          </yp-col>
          <yp-col span="12">
            <navigator :url="imageModel2.jumpLink">
              <yp-image :src="imageModel2.picUrl" height="376" width="100%" fit="cover" />
            </navigator>
          </yp-col>
        </row>
      </template>

      <!-- 一行三个 -->
      <template v-else-if=" showcaseType === 'ONE_ROW_THREE'">
        <row :gutter="imageMargin">
          <yp-col span="8">
            <navigator :url="imageModel1.jumpLink">
              <yp-image :src="imageModel1.picUrl" height="376" width="100%" fit="cover" />
            </navigator>
          </yp-col>
          <yp-col span="8">
            <navigator :url="imageModel2.jumpLink">
              <yp-image :src="imageModel2.picUrl" height="376" width="100%" fit="cover" />
            </navigator>
          </yp-col>
          <yp-col span="8">
            <navigator :url="imageModel3.jumpLink">
              <yp-image :src="imageModel3.picUrl" height="376" width="100%" fit="cover" />
            </navigator>
          </yp-col>
        </row>
      </template>

      <!-- 一行四个 -->
      <template v-else-if=" showcaseType === 'ONE_ROW_FOUR'">
        <row :gutter="imageMargin">
          <yp-col span="6">
            <navigator :url="imageModel1.jumpLink">
              <yp-image :src="imageModel1.picUrl" height="376" width="100%" fit="cover" />
            </navigator>
          </yp-col>
          <yp-col span="6">
            <navigator :url="imageModel2.jumpLink">
              <yp-image :src="imageModel2.picUrl" height="376" width="100%" fit="cover" />
            </navigator>
          </yp-col>
          <yp-col span="6">
            <navigator :url="imageModel3.jumpLink">
              <yp-image :src="imageModel3.picUrl" height="376" width="100%" fit="cover" />
            </navigator>
          </yp-col>
          <yp-col span="6">
            <navigator :url="imageModel4.jumpLink">
              <yp-image :src="imageModel4.picUrl" height="376" width="100%" fit="cover" />
            </navigator>
          </yp-col>
        </row>
      </template>

      <!-- 两行两个 -->
      <template v-else-if=" showcaseType === 'TWO_TWO'">
        <row :gutter="imageMargin">
          <yp-col span="12">
            <navigator :url="imageModel1.jumpLink">
              <yp-image :src="imageModel1.picUrl" height="188" width="100%" fit="cover" />
            </navigator>
          </yp-col>
          <yp-col span="12">
            <navigator :url="imageModel2.jumpLink">
              <yp-image :src="imageModel2.picUrl" height="188" width="100%" fit="cover" />
            </navigator>
          </yp-col>
        </row>
        <row :gutter="imageMargin" :style="{paddingTop: imageMargin + 'px'}">
          <yp-col span="12">
            <navigator :url="imageModel3.jumpLink">
              <yp-image :src="imageModel3.picUrl" height="188" width="100%" fit="cover" />
            </navigator>
          </yp-col>
          <yp-col span="12">
            <navigator :url="imageModel4.jumpLink">
              <yp-image :src="imageModel4.picUrl" height="188" width="100%" fit="cover" />
            </navigator>
          </yp-col>
        </row>
      </template>

      <!-- 一上两正是 -->
      <template v-else-if=" showcaseType === 'ONE_TOP_TWO_BOTTOM'">
        <row :gutter="imageMargin">
          <yp-col span="24">
            <navigator :url="imageModel1.jumpLink">
              <yp-image :src="imageModel1.picUrl" height="188" width="100%" fit="cover" />
            </navigator>
          </yp-col>
        </row>
        <row :gutter="imageMargin" :style="{paddingTop: imageMargin + 'px'}">
          <yp-col span="12">
            <navigator :url="imageModel3.jumpLink">
              <yp-image :src="imageModel3.picUrl" height="188" width="100%" fit="cover" />
            </navigator>
          </yp-col>
          <yp-col span="12">
            <navigator :url="imageModel4.jumpLink">
              <yp-image :src="imageModel4.picUrl" height="188" width="100%" fit="cover" />
            </navigator>
          </yp-col>
        </row>
      </template>

      <!--  一左三右 -->
      <template v-else-if=" showcaseType === 'ONE_THREE'">
        <row :gutter="imageMargin">
          <yp-col span="12">
            <navigator :url="imageModel1.jumpLink">
              <yp-image :src="imageModel1.picUrl" height="376" width="100%" fit="cover" />
            </navigator>
          </yp-col>
          <yp-col span="12">
            <div style=" height: 376px; width: 100%;">
              <navigator :url="imageModel2.jumpLink">
                <yp-image :src="imageModel2.picUrl" :height="188-imageMargin/2" width="100%" fit="cover" />
              </navigator>
              <div :style="{marginTop:imageMargin + 'px'}">
                <row :gutter="imageMargin">
                  <yp-col span="12">
                    <navigator :url="imageModel3.jumpLink">
                      <yp-image :src="imageModel3.picUrl" :height="188-imageMargin/2" width="100%" fit="cover" />
                    </navigator>
                  </yp-col>
                  <yp-col span="12">
                    <navigator :url="imageModel4.jumpLink">
                      <yp-image :src="imageModel4.picUrl" :height="188-imageMargin/2" width="100%" fit="cover" />
                    </navigator>
                  </yp-col>
                </row>
              </div>
            </div>
          </yp-col>
        </row>
      </template>
    </div>
  </div>
</template>
<script>
import Row from '../row';
import Col from '../col';
import Navigator from '../navigator';
import Image from '../image';

export default {
  name: 'showcase',
  components: {
    Row,
    YpCol: Col,
    Navigator,
    YpImage: Image
  },
  /**
   * 组件的属性列表
   */
  props: {
    /**
      * 是否在没有内容时显示占位图（注：目前在微页面的编辑时用到判断）
      */
    showPlaceholde: {
      type: Boolean,
      default: false
    },
    /**
     * 对象集
     * {
     *  'picUrl':''   // 显示图片
     *  'jumpLink': ''    // 链接地址
     * }
     */
    list: {
      type: Array,
      default () {
        return [];
      }
    },
    /**
     * 橱窗 @ONE_ROW_TWO:0:一行两个 @ONE_ROW_THREE:1:一行三个 @ONE_ROW_FOUR:2:一行四个 @TWO_TWO:3:两行两个 @ONE_TWO:4:一左两右 @ONE_TOP_TWO_BOTTOM:5:一上两下 @ONE_THREE:6:一左三右
     */
    showcaseType: {
      type: String,
      default: 'ONE_TWO'
    },
    /**
     * 页面边距
     */
    margin: {
      type: Number,
      default: 0
    },
    /**
     * 图片间距
     */
    imageMargin: {
      type: Number,
      default: 0
    }
  },

  /**
   * 组件的初始数据
   */
  data() {
    return {
    // showcaseHeight: 376,


      /**
     * 第一张图片
     */
      imageModel1: {
        picUrl: '', // 显示图片
        jumpLink: '' // 链接地址
      },
      /**
     * 第二张图片
     */
      imageModel2: {
        picUrl: '', // 显示图片
        jumpLink: '' // 链接地址
      },
      /**
     * 第三张图片
     */
      imageModel3: {
        picUrl: '', // 显示图片
        jumpLink: '' // 链接地址
      },
      /**
     * 第四张图片
     */
      imageModel4: {
        picUrl: '', // 显示图片
        jumpLink: '' // 链接地址
      }
    };
  },

  watch: {
    /**
     * 监听图片
     */
    list: {
      immediate: true,
      deep: true,
      handler (list) {
        this.dealImageList2ImageUrl(list);
        // 强制刷新（数组，有时增加页面不重新渲染）
        this.$forceUpdate();
      }
    },
    showcaseType () {
      this.dealImageList2ImageUrl(this.list);
    }
  },

  mounted () {
    // var tempImageList = [
    //   'https://img.yzcdn.cn/upload_files/2019/08/29/FkJyf2VstCLC8szUEPBMG6xTmSea.jpg!large.jpg',
    //   'https://img.yzcdn.cn/upload_files/2019/08/29/FvxhgJANN-ovy9USJ0Vz2K6jfoVh.jpg!large.jpg',
    //   'https://img.yzcdn.cn/upload_files/2019/08/29/Fm86lST1pQkia78S2sE5Wksvu550.jpg!large.jpg',
    //   'https://img.yzcdn.cn/upload_files/2019/08/29/FkJyf2VstCLC8szUEPBMG6xTmSea.jpg!large.jpg'
    // ]
    // this.dealImageList2ImageUrl(tempImageList)
  },
  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 将imageList转化为imageUrl
     */
    dealImageList2ImageUrl(imageList) {
      if (imageList) {
        if (imageList.length === 0) {
          this.clearAllImageModel();
        } else if (imageList.length === 1) {
          this.imageModel1 = imageList[0];
          this.clearImageModel(this.imageModel2);
          this.clearImageModel(this.imageModel3);
          this.clearImageModel(this.imageModel4);
        } else if (imageList.length === 2) {
          this.imageModel1 = imageList[0];
          this.imageModel2 = imageList[1];
          this.clearImageModel(this.imageModel3);
          this.clearImageModel(this.imageModel4);
        } else if (imageList.length === 3) {
          this.imageModel1 = imageList[0];
          this.imageModel2 = imageList[1];
          this.imageModel3 = imageList[2];
          this.clearImageModel(this.imageModel4);
        } else if (imageList.length === 4) {
          this.imageModel1 = imageList[0];
          this.imageModel2 = imageList[1];
          this.imageModel3 = imageList[2];
          this.imageModel4 = imageList[3];
        }
      }
    },
    /**
     * 清除所有
     */
    clearAllImageModel() {
      this.clearImageModel(this.imageModel1);
      this.clearImageModel(this.imageModel2);
      this.clearImageModel(this.imageModel3);
      this.clearImageModel(this.imageModel4);
    },
    /**
     * 清除图片model
     */
    clearImageModel(imageModel) {
      if (imageModel) {
        imageModel.picUrl = '';
        imageModel.jumpLink = '';
      }
    }
  }
};
</script>
