<template>
  <u-sticky class="shadow-default" bgColor="#fff" style="top: 0">
    <u-tabs
      :list="tabsList"
      :current="tabsCurrent"
      @click="tabsClick"
      lineColor="#333"
      :activeStyle="{ color: '#333', fontSize: '14px' }"
      :inactiveStyle="{ color: '#909399', fontSize: '14px' }"
      :scrollable="false"
    ></u-tabs>
  </u-sticky>

  <oa-scroll
    customClass="fastMail-container scroll-height"
    :isSticky="true"
    :pageSize="pageSize"
    :total="total"
    :refresherLoad="true"
    :refresherEnabled="true"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    @load="load"
    @refresh="refresh"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <view v-show="tabsCurrent == 0">
      <view class="content-area menu-list mlr0" v-for="data in dataList" :key="data">
        <view class="list-cell" style="color: #666666; line-height: 30px">
          <view class="content-area-top menu-item"> </view>
          <view class="content-area-row_wrap menu-item">
            <view class="content-area-row_wrap-view" style="margin-right: auto">
              <view style="font-weight: 600; margin-right: 5px">{{ data.pickupCode }}</view>
              <view class="iconfont oaIcon-copy menu-item-icon" @click="copy(data.pickupCode)"> </view>
            </view>
            <view class="content-area-row_wrap-view" style="min-width: auto; max-width: 50%">
              {{ data.pickupAddress }}
            </view>
            <view class="content-area-row_wrap-view" style="margin-right: auto">
              <image style="width: 15px; height: 15px; margin: auto 5px auto 0" mode="widthFix" src="@/static/images/common/ydkd.png" />
              韵达快递：{{ data.packNo }}
            </view>
            <view class="content-area-row_wrap-view" style="min-width: auto">
              <view class="iconfont oaIcon-dial menu-item-icon mr0" @click="proxy.$common.makePhoneCall(data.contactPhone)"> </view>
            </view>
            <view class="content-area-row_wrap-view">{{ data.dataTime ? data.dataTime.replace("T", " ") : "" }}</view>
          </view>
        </view>
      </view>
    </view>

    <view v-show="tabsCurrent == 1">
      <view class="content-area menu-list mlr0" v-for="data in dataList" :key="data">
        <view class="list-cell" style="color: #666666; line-height: 30px">
          <view class="content-area-top menu-item"> </view>
          <view class="content-area-row_wrap menu-item">
            <view class="content-area-row_wrap-view" style="margin-right: auto">
              <view style="font-weight: 600; margin-right: 5px">{{ data.pickupCode }}</view>
              <view class="iconfont oaIcon-copy menu-item-icon" @click="copy(data.pickupCode)"> </view>
            </view>
            <view class="content-area-row_wrap-view" style="min-width: auto; max-width: 50%">
              {{ data.pickupAddress }}
            </view>
            <view class="content-area-row_wrap-view" style="margin-right: auto">
              <image style="width: 15px; height: 15px; margin: auto 5px auto 0" mode="widthFix" src="@/static/images/common/ydkd.png" />
              韵达快递：{{ data.packNo }}
            </view>
            <view class="content-area-row_wrap-view" style="min-width: auto">
              <view class="iconfont oaIcon-dial menu-item-icon mr0" @click="proxy.$common.makePhoneCall(data.contactPhone)"> </view>
            </view>
            <view class="content-area-row_wrap-view">{{ data.dataTime ? data.dataTime.replace("T", " ") : "" }}</view>
          </view>
        </view>
      </view>
    </view>
  </oa-scroll>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { pageQuery } from "@/api/business/fastMail.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const useStore = useStores();
const commonStore = commonStores();
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  dataList: [],
  pageSize: 20,
  current: 1,
  total: 0,

  tabsList: [{ name: "待取件" }, { name: "已取件" }],
  tabsCurrent: 0,
});

const { dataList, pageSize, current, total, tabsList, tabsCurrent } = toRefs(state);

/**
 * @页面初始化
 */
function init() {
  pageQueryApi();
}

function pageQueryApi() {
  pageQuery({
    pageNum: current.value,
    pageSize: pageSize.value,
    pickupStatus: tabsCurrent.value,
  }).then((res) => {
    if (res.data.records.length > 0) {
      dataList.value = res.data.records;
      total.value = res.data.total;
    }
  });
}

/**
 * @复制粘贴板
 */
function copy(value) {
  // 触发方法
  proxy.$common.uniCopy({
    content: value,
    success: (res) => {
      uni.showToast({
        title: res,
        icon: "none",
      });
    },
    error: (e) => {
      uni.showToast({
        title: e,
        icon: "none",
        duration: 3000,
      });
    },
  });
}

/**
 * @tabs点击事件
 */
function tabsClick(e) {
  tabsCurrent.value = e.index;
  pageQueryApi();
}

/**
 * @scrollView加载数据
 */
function load() {
  pageSize.value += 10;
  init();
}

/**
 * @scrollView刷新数据
 */
function refresh() {
  pageSize.value = 20;
  init();
}

onLoad((options) => {
  init();
});

onReady(() => {});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});

// 自定义导航事件
onNavigationBarButtonTap((e) => {
  if (e.float == "right") {
  }
});
</script>

<style lang="scss" scoped>
:deep(.uni-page-head__title) {
  opacity: 1 !important;
}

.fastMail-container {
  .content-area {
    &-top {
      font-size: 16px;
      font-weight: 600;
      color: #000000;
    }

    &-row_wrap {
      font-size: 14px;
      flex-flow: row wrap;

      &-view {
        display: flex;
        min-width: 50%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        > .iconfont {
          font-size: 14px;
          color: #909399;
          margin-left: 5px;
        }
      }
    }
  }
}
</style>
