<style lang="less" scoped>
@import "./index.less";
</style>
<template>
  <div class="product-list" :style="style">
    <div class="container " :class="[getShowType,productStyle]" :style="{paddingLeft: margin + 'px', paddingRight: margin + 'px', marginLeft: -productMargin/2 + 'px', marginRight: -productMargin/2 + 'px'}">
      <div class="item" v-for="(product, index) in newList" :key="index">
        <product-item
          :price="product.price"
          :pic-url="product.picUrl"
          :title="product.title"
          :descr="product.descr"
          :origin-price="product.originPrice"
          :currency-symbol="product.currencySymbol"
          :link="product.jumpLink"

          :start-time="product.startTime"
          :end-time="product.endTime"
          :groupon-status="product.grouponStatus"
          :groupon-join-count="product.grouponJoinCount"
          :groupon-user-count="product.grouponUserCount"
          :show-count-down="showCountDown"
          :show-sale-count="showSaleCount"

          :product-type="productType"

          :index="index"
          :show-type="getShowType"
          :product-style="productStyle"
          :radius="radius"
          :image-scale="imageScale"
          :image-fill="imageFill"
          :font-weight="fontWeight"
          :text-align="textAlign"
          :product-margin="productMargin/2"
          :show-product-title="showProductTitle"
          :show-product-desc="showProductDesc"
          :show-product-price="showProductPrice"
          :show-product-origin-price="showProductOriginPrice"
          :show-buy="showBuy"
          :buy-btn-name="buyBtnName"
          :buy-btn-style="buyBtnStyle"
          :show-badge="showBadge"
        />
      </div>
    </div>
  </div>
</template>
<script>

import ProductItem from '../product-item';
import { deepClone } from '../utils/deep-clone';
import { productListProps } from './product-list-props';
import { dateFormat } from '../utils/time-util';


export default {
  name: 'product-list',
  components: {
    ProductItem
  },
  /**
   * 组件的属性列表
   */
  props: {
    /**
     * 商品列表属性
     */
    ...productListProps,
    /**
      * 是否在没有内容时显示占位图（注：目前在微页面的编辑时用到判断）
      */
    showPlaceholde: {
      type: Boolean,
      default: false
    }

  },

  /**
   * 组件的初始数据
   */
  data() {
    return {
      /**
       * 新的结果集
       */
      newList: []
    };
  },
  computed: {

    /**
     * 样式
     */
    style () {
      const style = {};

      if (this.backgroundColor && this.backgroundColor !== '') {
        style.backgroundColor = this.backgroundColor;
      }

      return style;
    },
    /**
     * 获得显示类型
     */
    getShowType() {
      // 转化为小写
      let showType = this.showType.toLowerCase();
      /**
       * 显示类型  @default:0:默认类型  @waterfall:1:瀑布流  @list:2:列表  @big:3:大图 @grid:5:网格  @swap:6:滑块   @TextNavi_txt:20:文本导航  @TextNavi_pic:21:文本图片导航    @showcase_1:51:橱窗样式1  @showcase_2:52:橱窗样式2  @showcase_3:53:橱窗样式3 @showcase_4:54:橱窗样式4  @showcase_5:55:橱窗样式5  @showcase_6:56:橱窗样式6 @showcase_7:57:橱窗样式7  @showcase_8:58:橱窗样式8 @showcase_9:59:橱窗样式9
       */
      if (showType === 'grid') {
        showType = 'small';
      } else if (showType === 'swip') {
        showType = 'swipe';
      }

      return showType;
    }
  },
  watch: {
    /**
     * 监听商品列表（注：这里只为显示占位符）
     */
    list: {
      immediate: true,
      handler (list) {
        // 清除之前的数据
        if (this.newList && this.newList.length > 0) {
          this.newList.splice(0, this.newList.length);
        }
        // console.log('333333333333=',list);
        if (list && list.length > 0) {
          // 这里深度复制，是为了在微页面编辑，没有内容，显示占为符，不影响原来数据
          list.forEach((item, index) => {
            const newItem = deepClone(item);
            this.newList.push(newItem);
          });
        } else if (this.showPlaceholde && (!list || list.length == 0)) {
          // 这里默认添加两个占位商品，不会影响到原来的list对象集
          for (let i = 0; i < 2; i++) {
            const productModel = {};
            productModel.title = '这里显示商品名称，最多显示2行';
            productModel.descr = '这里显示商品描述，最多显示1行';
            productModel.picUrl = '';
            productModel.price = '99';
            productModel.originPrice = '200.00';
            productModel.index = i;

            if (this.productType === 'groupon') { // 拼团时
              // 结束时间
              productModel.endDateTime = dateFormat('YYYY-mm-dd HH:MM:SS', new Date(new Date().getTime() + 1 * 60 * 60 * 1000));
              // 已参团人数
              productModel.grouponJoinCount = 2;
              // 开团人数
              productModel.grouponUserCount = 10;
            }

            this.newList.push(productModel);
          }
        }
      }
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
};
</script>
