<template>
  <div class="page">
    <scroll-view
      ref="scrollView"
      class="main-box-container"
      :to-top="scrollTop"
      @toBottom="loadData"
      @scroll="onScroll"
    >
      <div class="express-detail">
        <div v-if="logisticsPackages.length > 1" class="express-more">
          <p>你的订单被分为多个包裹发出：</p>
          <div class="express-more-list">
            <div
              v-for="(item, index) in logisticsPackages"
              :key="index"
              class="express-box"
              :class="[{ active: item.selected }]"
              @click="changeParcel(index)"
            >
              <dl class="express-media">
                <dt>
                  <p class="express-media-name">{{ `包裹${index + 1}` }}</p>
                  <span class="express-media-num">{{ `共${item.skuCount || 0}件` }}</span>
                </dt>
                <dd>
                  <img :src="item.skus[0].imageUrl" alt="" />
                </dd>
              </dl>
            </div>
          </div>
        </div>
        <div class="Ed__name">
          <cr-image
            class="Ed__icon"
            width="0.533333rem"
            height="0.533333rem"
            src="https://img.lkbang.net/xcx/express-icon.png"
          />
          <span class="Ed__txt">{{ logisticsData.logisticsName }}</span>
          <span class="Ed__num">{{ logisticsData.logisticsBillNo }}</span>
          <span class="Ed__copy" @click="copyText">复制</span>
        </div>
        <div class="Ed__list">
          <cr-steps direction="vertical" :active="0" active-color="#333" inactive-color="#999">
            <cr-step
              v-for="(item, index) in logisticsData.logisticsList"
              :key="index"
              class="Ed__item"
            >
              <template slot="active-icon">
                <div class="Ed__item-activeIcon" />
              </template>
              <template slot="inactive-icon">
                <div class="Ed__item-inactiveIcon" />
              </template>
              <div
                v-for="(it, idx) in item.detailList"
                :key="idx"
                class="Ed__content"
                :class="{ 'Ed__content-dot': idx !== 0 }"
              >
                <div v-if="idx === 0" class="Ed__content-title">{{ item.title }}</div>
                <div class="Ed__content-desc" v-html="regPhone(it.desc)" />
                <div class="Ed__content-date">{{ it.logisticsTime }}</div>
              </div>
            </cr-step>
          </cr-steps>
        </div>
      </div>
      <goods-card
        ref="goodsCard"
        class="goods-card"
        :top="scrollTop"
        :loading="loading"
        :goods-list.sync="goodsList"
        :show-header="true"
        header-type="center"
        no-share
      />
      <load-more v-if="goodsList.length > 3" :status="loadingType" />
    </scroll-view>
  </div>
</template>
<script>
import goodsCard from '@/components/goodsCard';
import scrollView from '@/components/scrollView';
import loadMore from '@/components/loadMore';
import order from '@/api/order.api';
import { regPhone } from '@/service/utils.service';
import clipTextMixins from '@/mixins/clipText.mixins';
import { getGoodsList } from '@/api/home.api.js';
export default {
  name: 'ExpressDetail',
  components: {
    scrollView,
    goodsCard,
    loadMore
  },
  mixins: [clipTextMixins],
  data() {
    return {
      pageForm: {
        pageNo: 0,
        pageSize: 10,
        pageType: 2
      },
      hasNew: false,
      loading: true,
      goodsList: [],
      loadingType: 'loading',
      scrollIndex: 0,
      scrollTop: 0,
      logisticsData: {},
      logisticsBase: {},
      logisticsPackages: []
    };
  },
  mounted() {
    this.logisticsBase = this.$route.query;
    this.orderLogistics();
    this.loadData();
  },
  methods: {
    regPhone,
    changeParcel(idx) {
      this.logisticsPackages.forEach((i, index) => {
        i.selected = index === idx;
        i.selected && (this.logisticsData = i);
      });
    },
    async orderLogistics() {
      //物流信息
      const [res] = await order.expressDetail(this.logisticsBase);
      if (res) {
        this.logisticsPackages = res.logisticsPackages;
        this.logisticsData = this.logisticsPackages.find(i => i.selected);
      }
    },
    copyText() {
      this.setClipboardData({
        data: this.logisticsData.logisticsBillNo,
        success: () => {
          this.$toast.success('已复制');
        }
      });
    },
    async loadData() {
      if (this.loading) {
        this.loading = false;
        if (this.loadingType === 'noMore' || this.progress === 'loading') return;
        this.loadingType = 'loading';
        this.progress = 'loading';
        this.pageForm.pageNo++;

        const [goodsData] = await getGoodsList(this.pageForm);
        this.progress = 'finished';
        if (!goodsData || !goodsData.hasNext || !goodsData.goodsList) {
          this.loadingType = 'noMore';
        }
        if (goodsData && goodsData.goodsList) {
          this.goodsList = this.goodsList.concat(goodsData.goodsList || []);
        }
        this.loading = true;
      }
    },
    onScroll(top) {
      this.scrollTop = top;
      this.$emit('changeTop', top);
    }
  }
};
</script>
<style lang="less" scoped src="./index.less"></style>
