<style lang="less" scoped>
@import './index.less';
</style>
<template>
  <div>
    <product-list
      :show-placeholde="showPlaceholde"
      :list="productPageBean.record"
      :show-count-down="showCountDown"
      :show-sale-count="showSaleCount"
      :show-type="showType"

      product-type="groupon"
      :product-style="productStyle"
      :radius="radius"
      :image-scale="imageScale"
      :image-fill="imageFill"
      :font-weight="fontWeight"
      :text-align="textAlign"
      :margin="margin"
      :product-margin="productMargin"
      :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
      :style="moreButtonWrapStyle"
      v-if="showMoreBtn && ( productPageBean.hasMore || showPlaceholde) && addType === 'add' "
    >
      <yp-button v-if=" moreBtnTarget === 'new-page'" style="width:100%" :url="moreJumpLink">
        <span style="color:gray">{{ $t('more') }}</span>
      </yp-button>
      <yp-button
        v-else
        style="width:100%"
        :loading="loading"
        @click="getNextProducPageBean()"
        :loading-text="$t('loading')"
      >
        <span style="color:gray">{{ $t('more') }}</span>
      </yp-button>
    </div>
  </div>
</template>
<script>
import ProductList from '../product-list';
import { ProductPageBean } from './product-page-bean';
import Button from '../button';
import { productListProps } from '../product-list/product-list-props';
import Locale from '../mixins/locale';

export default {
  name: 'product-groupon',
  components: {
    ProductList,
    YpButton: Button
  },
  mixins: [Locale],
  /**
   * 组件的属性列表
   */
  props: {
    /**
     * 商品列表属性
     */
    ...productListProps,
    /**
     * 是否在没有内容时显示占位图（注：目前在微页面的编辑时用到判断）
     */
    showPlaceholde: {
      type: Boolean,
      default: false
    },
    /**
     * 拼团类型  normal:普通拼团  lottery:抽奖团
     */
    grouponType: {
      type: String,
      default: 'normal'
    },
    /**
     * 添加方式  add:手动添加  auto:自动获取
     */
    addType: {
      type: String,
      default: 'add'
    },
    /**
     * 业务拼团Id集
     */
    grouponIdList: {
      type: Array,
      default() {
        return [];
      }
    },

    /**
     * 获得商品拼团列表Json回调方法
     * 参数列表如下：
     * 1.addType | String |添加方式  add:手动添加  auto:自动获取
     * 2.showSaleOut | boolean | 是否显示已经卖完的
     * 3.grouponIdList | String|  业务拼团Id集
     * 4.sortRule | String | 排序规则   max_sale:销量越多越靠前   start_late:开始时间越晚越靠前  end_early:结束时间越早越靠前
     * 5.pageNo | Number | 页码
     * 6.showCount | Number | 页大小
     *  返回结果
     * Promise类型弄
     * {
     *  pageNo:1
     *  hasMore: false, // 是否有下一页
     *  record: [{
     *     price:0  // 价格
     *     picUrl: '' // 显示图片
     *     jumpLink: '' // 跳转链接
     *     originPrice': '' // 原价
     *     title: '商品标题' // 标题
     *     startTime: '2019-11-21 00:00:00',  // 拼团开始时间
     *     endTime: '2019-12-31 00:00:00',  // 拼团结束时间
     *     grouponJoinCount: 0,  // 已经参加的拼团数
     *     grouponUserCount: 3,  // 开团人数
     *     grouponStatus: 'PROCEEDING', // 拼团状态
     *   }
     *  }
     * }
     */
    getProductPageFunction: {
      type: Function,
      default() {
        return new Promise((resolve, reject) => {
          resolve(new ProductPageBean());
        });
      }
    },

    /**
     * 【自动获取内容】显示个数
     */
    showCount: {
      type: [Number, String],
      default: 20
    },
    /**
     * 【自动获取内容】 显示【查看更多】按钮 0:不显示  1:显示
     */
    showMoreBtn: {
      type: Boolean,
      default: true
    },
    /**
     * 【自动获取内容】【查看更多】按钮响应   current-page:当前页面  new-page:新开页面
     */
    moreBtnTarget: {
      type: String,
      default: 'current-page'
    },
    /**
     * 【自动获取内容】 moreBtnTarget = new-page 跳转的链接地址
     */
    moreJumpLink: {
      type: String,
      default: ''
    },
    /**
     * 【自动获取内容】
     * 排序规则   max_sale:销量越多越靠前   start_late:开始时间越晚越靠前  end_early:结束时间越早越靠前
     */
    sortRule: {
      type: String,
      default: ''
    },
    /**
     *  已售罄拼团商品  0:不显示  1:显示
     */
    showSaleOut: {
      type: Boolean,
      default: false
    }
  },

  /**
   * 组件的初始数据
   */
  data() {
    return {
      // 对应分组的商品分页列表
      productPageBean: new ProductPageBean(),
      // 加载
      loading: false
    };
  },
  computed: {
    moreButtonWrapStyle() {
      return `padding-left:${this.margin}px;padding-right:${this.margin}px`;
    }
  },
  watch: {
    grouponIdList: {
      immediate: true,
      handler(grouponIdList) {
        if (this.addType === 'add') {
          // 重置
          this.clearProductPageBean();
          this.getNextProducPageBean();
        }
      }
    },
    addType: {
      immediate: true,
      handler(addType) {
        // 重置
        this.clearProductPageBean();
        this.getNextProducPageBean();
      }
    },
    showCount() {
      // 重置
      this.clearProductPageBean();
      if (this.addType === 'auto') {
        this.getNextProducPageBean();
      }
    },
    sortRule() {
      // 重置
      this.clearProductPageBean();
      if (this.addType === 'auto') {
        this.getNextProducPageBean();
      }
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 清空Bean
     */
    clearProductPageBean() {
      this.productPageBean.hasMore = true;
      this.productPageBean.pageNo = 0;
      if (this.productPageBean.record) {
        this.productPageBean.record.splice(0, this.productPageBean.record.length);
      }
    },
    /**
     *  从业务中动态获得的商品下一个页码
     */
    getNextProducPageBean() {
      const { productPageBean } = this;

      if (this.getProductPageFunction && productPageBean.hasMore) {
        this.loading = true;

        const { showCount, sortRule, grouponIdList, addType, showSaleOut } = this;

        // 调用业务系统获得数据
        const resultPromise = this.getProductPageFunction(
          addType,
          showSaleOut,
          grouponIdList,
          sortRule,
          productPageBean.pageNo + 1,
          showCount
        );

        if (resultPromise) {
          resultPromise
            .then(data => {
              if (data) {
                productPageBean.pageNo = data.pageNo;
                productPageBean.hasMore = data.hasMore;
                if (data.record) {
                  data.record.forEach(item => {
                    productPageBean.record.push(item);
                  });
                }
              }
              this.loading = false;
            })
            .catch(err => {
              // 结果result=0或为failer执行
              // this.$Message.error(err.msg)
              // this.$Notice.error({title: err.msg});
              this.loading = false;
            });
        } else {
          productPageBean.hasMore = false;
          this.loading = false;
        }
      }
    }
  }
};
</script>
