<template>
  <z-paging
    ref="pagingRef"
    v-model="distributionList"
    :paging-style="{'top': '0','background-color': '#f2f3f7'}"
    empty-view-text="您还没有推广记录"
    loading-more-no-more-text="没有更多了，看看别的吧"
    class="Mall4j page-my-distribution"
    @query="onLoadPageData"
  >
    <template #top>
      <!-- tab -->
      <view class="tab">
        <!-- (0:待付款 1:待结算 2:已结算 -1:已过期) -->
        <view
          data-state="0"
          :class="['item', state===0?'active':'']"
          @tap="onStsTap"
        >
          全部
        </view>
        <view
          data-state="1"
          :class="['item', state===1?'active':'']"
          @tap="onStsTap"
        >
          待结算
        </view>
        <view
          data-state="2"
          :class="['item', state===2?'active':'']"
          @tap="onStsTap"
        >
          已结算
        </view>
        <view
          data-state="-1"
          :class="['item', state===-1?'active':'']"
          @tap="onStsTap"
        >
          已失效
        </view>
      </view>
    </template>
    <view>
      <!-- 推广订单 -->
      <view
        v-if="distributionList.length>0"
        class="order-box"
      >
        <view
          v-for="(item, id) in distributionList"
          :key="id"
          class="item"
        >
          <view class="number-state">
            <view class="order-number">
              订单号：{{ item.orderId }}
            </view>
            <view class="order-state">
              <text
                v-if="item.state===0"
                class="state red"
              >
                待付款
              </text>
              <text
                v-if="item.state===1"
                class="state red"
              >
                待结算
              </text>
              <text
                v-if="item.state===2"
                class="state red"
              >
                已结算
              </text>
              <text
                v-if="item.state===-1"
                class="state red"
              >
                已失效
              </text>
            </view>
          </view>

          <!-- 商品无效原因 -->
          <view
            v-if="item.reson === 1 || item.reson === 2 ||item.reson === 3 "
            class="order-invalid"
          >
            <image src="@/package-activities/static/images/my-promotion-warn.png" />
            <text v-if="item.reson === 1">
              {{ $t('distribution.reasonsForInvalidOrders1') }}
            </text>
            <text v-if="item.reson === 2">
              {{ $t('distribution.reasonsForInvalidOrders2') }}
            </text>
            <text v-if="item.reson === 3">
              {{ $t('distribution.reasonsForInvalidOrders3') }}
            </text>
          </view>

          <view class="prod-box">
            <view class="prod-img">
              <img-show :src="item.pic" />
            </view>
            <view class="text-box">
              <view class="name">
                {{ item.spuName }}
              </view>
              <view class="sku">
                {{ item.skuName||'' }}
              </view>
              <view class="price-box">
                <view class="price">
                  <view class="symbol">
                    ￥
                  </view>
                  <view class="big">
                    {{ wxs.parsePrice(item.price)[0] }}
                  </view>
                  <view class="symbol">
                    .{{ wxs.parsePrice(item.price)[1] }}
                  </view>
                </view>
                <view class="count">
                  x{{ item.spuCount }}
                </view>
              </view>
            </view>
          </view>

          <view class="total-box">
            <view class="total">
              <view class="price">
                <view class="symbol">
                  ￥
                </view>
                <view class="big">
                  {{ wxs.parsePrice(item.actualTotal)[0] }}
                </view>
                <view class="symbol">
                  .{{ wxs.parsePrice(item.actualTotal)[1] }}
                </view>
              </view>
              <view class="text">
                共{{ item.spuCount }}件
              </view>
            </view>
            <view class="commission">
              <view class="text">
                佣金：
              </view>
              <view class="price">
                <view class="symbol">
                  ￥
                </view>
                <view class="big">
                  {{ wxs.parsePrice(item.incomeAmount)[0] }}
                </view>
                <view class="symbol">
                  .{{ wxs.parsePrice(item.incomeAmount)[1] }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
const wxs = number()

/**
 * 生命周期函数--监听页面显示
 */
onShow(() => {
  // 头部导航标题
  uni.setNavigationBarTitle({
    title: $t('distribution.myPromotion')
  })
})

// 点击切换事件 0:全部
const state = ref(0)
const onStsTap = (e) => {
  state.value = +e.currentTarget.dataset.state
  pagingRef.value.reload()
}

// 通过状态加载分销订单列表
const pagingRef = ref(null)
const distributionList = ref([])
const onLoadPageData = (pageNum, pageSize) => {
  let paramState = ''
  if (state.value !== 0) {
    paramState = state.value
  }
  http.request({
    url: '/mall4cloud_marketing/distribution_user_income/my_promotion_order',
    method: 'GET',
    data: {
      pageNum,
      pageSize,
      state: paramState
    }
  }).then((res) => {
    // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
    pagingRef.value.complete(res.list)
  })
}

</script>

<style lang="scss" scoped>
@use "./my-distribution.scss";
</style>
