<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.replace(/-|\./g, '/'))"
                @finish-time="finishTimeChange"
              />
            </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 && item.payStatus === '1'"
              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 && item.payStatus === '0'"
              size="small"
              plain
              type="primary"
              shape="circle"
              @click.stop="goGroupPayPages(item)"
            >
              去支付
            </cr-button>
            <cr-button
              v-if="item.openGroupStatus === 3"
              size="small"
              plain
              type="primary"
              shape="circle"
              @click.stop="goGroupBuyList(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 { saTrackEvent } from '@/service/sa.service';
import groupBuyApi from '@/api/groupBuy';
export default {
  name: 'OrderSkuList',
  components: {
    countDown,
    ListItem
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    loading: Boolean,
    finished: Boolean
  },
  data() {
    return {
      shareInfo: null,

      nativeBridge: null,

      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: {
    finishTimeChange() {},
    goGroupBuyList(itemInfo) {
      this.$router.replace({
        path: '/groupBuy/list',
        query: {
          h: 0,
          activityId: itemInfo.activityInfoId
        }
      });
    },
    goGroupDetails(skuInfo) {
      this.nativeBridge.openNewUrl({
        newUrl: `/pages/order/orderDetail?orderNo=${skuInfo.orderNo}`
      });
    },
    goGroupPayPages(skuInfo) {
      this.$router.push(`/pay?orderNo=${skuInfo.orderNo}`);
    },
    async getGroupShareInfo(order) {
      const res = await groupBuyApi.getGroupShareInfo(order);
      console.log(res);
    },
    async openShareEvent(skuInfo) {
      this.$emit('option-click', { ...skuInfo, eventType: 'share' });
      // this.getGroupShareInfo('1440970158226214912');
      // this.shareInfo = skuInfo;
      // this.$store.dispatch('goods_share_open');

      saTrackEvent('H5_MyPuzzlePageGroupOrderBtnClick', {
        sku_no: '',
        leader_user_id: ''
      });
    },

    toDetail(goodsItem) {
      const { skuList, activityInfoId, activityHundredGroupId } = goodsItem;
      this.$router.push({
        path: '/groupBuy/skuInfoSmallPic',
        query: {
          h: 0,
          skuNo: skuList[0].skuNo,
          groupBuyGroupId: 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 });
    }
  }
};
</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>
