<template>
  <div class="order-list">
    <cr-list
      v-if="list.length"
      v-model="listLoading"
      :finished="listFinished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div v-for="(item, index) in list" :key="index" class="Ol__item" @click="toDetail(item)">
        <div class="Ol__head">
          <div class="Ol__head-left">
            <span class="Ol__head-image">
              <cr-image class="Ol__head-avator" width="85%" :src="item.profilePhoto" />
              <cr-image class="Ol__head-group" src="@/assets/images/group.png" />
            </span>
            <span class="Ol__head-name">{{ item.nickname }}</span>
          </div>
          <div class="Ol__head-right">
            <template v-if="item.openGroupStatus === 1">
              <span class="Ol__head-count"
                >拼团中，差<b class="Ol__head-red">{{ item.needGuys }}人</b>成团</span
              >
              <count-down :end-time="+new Date(item.endTime)" />
            </template>
            <template v-else>
              <span :class="cardInfoMation[item.openGroupStatus].class">{{
                cardInfoMation[item.openGroupStatus].message
              }}</span>
            </template>
          </div>
        </div>
        <div class="Ol__body">
          <list-item :list="item" :after-show="false" />
        </div>
        <div class="Ol__foot">
          <div class="Ol__foot-text">{{ cardInfoMation[item.openGroupStatus].footTxt }}</div>
          <div class="Ol__foot-btns">
            <cr-button
              v-if="item.showInvite"
              size="small"
              plain
              type="primary"
              shape="circle"
              @click.stop="openShareEvent(item.skuList[0])"
            >
              邀请好友
            </cr-button>
            <cr-button
              v-if="item.showOrderDetail"
              size="small"
              plain
              type="primary"
              shape="circle"
              @click.stop="goGroupDetails(item)"
            >
              查看订单
            </cr-button>
            <!-- 支付中按钮跳转支付页面 -->
            <cr-button
              v-if="item.openGroupStatus === 0"
              size="small"
              plain
              type="primary"
              shape="circle"
              @click.stop="goGroupPayPages(item)"
            >
              去支付
            </cr-button>
          </div>
        </div>
      </div>
    </cr-list>
    <div v-else class="Ol__noData">
      <cr-empty
        image="https://img.lkbang.net/xcx/empty@2x.png"
        image-size="4rem"
        description="暂无订单～"
      />
    </div>
  </div>
</template>
<script>
import ListItem from './ListItem.vue';
const EVENT_LOADING = 'load';
const EVENT_CLICK = 'option-click';
import countDown from '@/components/countDown';
import { isWxMp, isApp } from '@/service/validation.service';
import Bridge from '@qg/js-bridge';
import MpBridge from '@/service/mp';
import { registeredEvents } from '@/service/sa.service';

export default {
  name: 'OrderSkuList',
  components: {
    countDown,
    ListItem
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    loading: Boolean,
    finished: Boolean
  },
  data() {
    return {
      nativeBridge: null,
      gpCountDown: new Date('2021-09-12 00:00:00').getTime(),

      listLoading: false,
      listFinished: false,
      cardInfoMation: {
        // 开团状态：1拼团中、2拼团成功、3拼团失败 4.整体拼团处理中
        0: {
          class: 'Ol__head-fail',
          message: '支付中',
          footTxt: '拼团成功即可退款0元拿'
        },
        1: {
          message: '',
          footTxt: '拼团成功即可退款0元拿'
        },
        2: {
          class: 'Ol__head-success',
          message: '已成团，等待发货！',
          footTxt: '退款将原路返还，请注意帐户变动'
        },
        3: {
          class: 'Ol__head-fail',
          message: '拼团失败',
          footTxt: '退款将原路返还，请注意帐户变动'
        }
      }
    };
  },

  watch: {
    loading(val) {
      this.listLoading = val;
    },
    finished(val) {
      this.listFinished = val;
    }
  },
  created() {
    if (isApp) this.nativeBridge = new Bridge();
    else if (isWxMp) this.nativeBridge = new MpBridge();
  },
  methods: {
    goGroupDetails(skuInfo) {
      this.nativeBridge.openNewUrl({
        newUrl: `/pages/order/orderDetail?orderNo=${skuInfo.orderNo}`
      });
    },
    goGroupPayPages(skuInfo) {
      this.$router.push(`/pay?orderNo=${skuInfo.orderNo}`);
    },

    async openShareEvent(skuInfo) {
      let options = await this.getShareData(skuInfo);
      this.$store.dispatch('goods_share_open', options);

      registeredEvents('H5_MyPuzzlePageGroupOrderBtnClick', {
        sku_no: '',
        leader_user_id: ''
      });
    },
    async getShareData(skuInfo) {
      return Promise.resolve({
        title: skuInfo.skuName,
        desc: '我正在免费拿商品，请你帮帮我',
        link: `${window.location.origin}/activity/zeroBuy`, // 页面地址
        imgUrl: skuInfo.imageUrl // 图片地
      });
      // await
    },
    toDetail(goodsItem) {
      const { skuNo, skuList, activityInfoId, activityHundredGroupId } = goodsItem;
      this.$router.push({
        path: '/groupBuy/skuInfoSmallPic',
        query: {
          h: 0,
          skuNo,
          activityHundredGroupId,
          goodsSpecialId: skuList[0].goodsSpecialId,
          activityId: activityInfoId,
          templateId: skuList[0].activityTemplateInfoId,
          templateDetailId: skuList[0].activityTemplateDetailId
        }
      });
    },
    onLoad() {
      this.$emit(EVENT_LOADING);
    },
    onOptionClick(orderInfo, eventType) {
      this.$emit(EVENT_CLICK, { orderInfo, eventType });
    },
    toHome() {
      this.$router.replace({ path: '/home' });
    }
  }
};
</script>
<style lang="less" scoped>
@import './List.less';
.order-list {
  padding: 0 @padding-sm;
  .cr-empty {
    text-align: center;
  }
  @{deep} .cr-empty__image {
    height: auto !important;
  }
}
</style>
