<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">
            <div class="Ol__head-image">
              <span class="Ol__head-crown" :src="item.profilePhoto" />
              <cr-image class="Ol__head-avator" width="80%" :src="item.profilePhoto" />
              <span class="Ol__head-leader" :src="item.profilePhoto" />

              <!-- <cr-image class="Ol__head-group" src="@/assets/images/group.png" /> -->
            </div>
            <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.showButton || (!item.showButton && item.isValidActivity)"
              size="small"
              plain
              type="primary"
              shape="circle"
              @click.stop="bundleButtonClick(item)"
            >
              {{ showButtonMethod[item.showButton].text }}
            </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 { saTrackEvent } from '@/service/sa.service';
import localStorage from '@/service/localStorage.service';
import MpBridge from '@/service/mp';
import Bridge from '@qg/js-bridge';
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: '如已支付，退款将原路返还，请注意帐户变动'
        }
      },
      showButtonMethod: {
        0: {
          text: '重新开团',
          click: 'goGroupBuyList'
        },
        1: {
          text: '去支付',
          click: 'goGroupPayPages'
        },
        2: {
          text: '邀请好友',
          click: 'openShareEvent'
        },
        3: {
          text: '查看订单',
          click: 'goGroupDetails'
        }
      }
    };
  },

  watch: {
    loading(val) {
      this.listLoading = val;
    },
    finished(val) {
      this.listFinished = val;
    }
  },
  created() {
    if (isWxMp) {
      this.nativeBridge = new MpBridge();
      return;
    }
    this.nativeBridge = new Bridge();
  },
  methods: {
    bundleButtonClick(item) {
      this[this.showButtonMethod[item.showButton].click](item);
    },
    finishTimeChange() {
      this.$emit('finish-time');
    },
    goGroupBuyList(itemInfo) {
      this.$router.push({
        path: '/groupBuy/list',
        query: {
          activityId: itemInfo.activityInfoId
        }
      });
    },
    goGroupDetails(skuInfo) {
      if (isWxMp) {
        this.nativeBridge.openNewUrl({
          newUrl: `/pages/order/orderDetail?orderNo=${skuInfo.orderNo}`
        });
      } else if (isApp) {
        this.nativeBridge.openNewUrl({
          event: 'openNewUrl',
          data: {
            newUrl: `xyqb://myOrderDetail?orderNo=${skuInfo.orderNo}&needLogin=1`
          }
        });
      }
    },
    goGroupPayPages(skuInfo) {
      if (isWxMp) {
        this.nativeBridge.openNewUrl({
          newUrl: `/pages/pay/index?orderNo=${skuInfo.orderNo}`
        });
      } else if (isApp) {
        this.$router.push({ path: `/pay?orderNo=${skuInfo.orderNo}` });
      } else {
        // todo 处理纯h5情况
        this.$dialog({
          closeOnClickOverlay: !isApp && !isWxMp ? false : true,
          message: '请在App或小程序中参与活动~',
          title: '',
          showCancelButton: false,
          confirmButtonText: '我知道了'
        });
        return;
      }
    },
    async openShareEvent(item) {
      try {
        saTrackEvent('H5_MyPuzzlePageInviteFriendsBtnClick', {
          sku_no: item.skuList[0].skuNo,
          group_id: item.activityHundredGroupId
        });
        this.$emit('option-click', { ...item.skuList[0], eventType: 'share' });
      } catch (err) {
        this.$store.dispatch('change_loading', false);
        console.log(err);
      }
    },

    toDetail(goodsItem) {
      const { skuList, activityInfoId, activityHundredGroupId } = goodsItem;
      try {
        saTrackEvent('H5_MyPuzzlePageGroupOrderBtnClick', {
          sku_no: skuList[0].skuNo,
          group_id: activityHundredGroupId
        });
        this.$router.push({
          path: '/groupBuy/skuInfoSmallPic',
          query: {
            skuNo: skuList[0].skuNo,
            groupBuyGroupId: activityHundredGroupId,
            goodsSpecialId: skuList[0].goodsSpecialId,
            activityId: activityInfoId,
            templateId: skuList[0].activityTemplateInfoId,
            templateDetailId: skuList[0].activityTemplateDetailId,
            vccToken: localStorage.get('vccToken') || ''
          }
        });
      } catch (e) {
        console.log(e);
      }
    },
    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>
