<template>
  <view class="afterSalesManagement-wrapper">
    <headersVue headerTitle="售后管理" @headerJump="headerJump"></headersVue>
    <view class="afterSalesManagement-content">
      <view class="afterSalesManagement-content--top">
        <!-- placeholder="订单号/退货快递单号/收货人姓名、手机号" -->
        <searchVue
          @search="search"
          class="search-box"
          placeholder="请输入订单号"
        ></searchVue>
      </view>
      <view class="afterSalesManagement-content--tab">
        <tabsVue
          :category="dataList"
          :currentActive="currentActive"
          @tabs="tabsHandleClick"
        />
      </view>
    </view>
    <view class="afterSalesManagement-list">
      <template v-if="list.length > 0">
        <afterCardListInfo
          v-for="(item, index) in list"
          :key="item.mer_id + '_index_' + index"
          class="afterSalesManagement-list__card"
          :detailItem="item"
          :index="index"
          @viewWuLiu="viewWuLiu"
          @viewDetail="viewDetail"
        ></afterCardListInfo>
      </template>
      <template v-else>
        <emptyDataVue />
      </template>
    </view>
    <view
      class=""
      v-if="tihsi == 0 && list.length > 0"
      style="margin: 60rpx 0 30rpx 0; color: #999999; font-size: 26rpx"
    >
      —— 已经到最底部了哦 ——
    </view>
  </view>
</template>

<script>
import headersVue from "../components/headers/headers.vue";
import tabsVue from "./components/tablist.vue";
import searchVue from "./components/search/search.vue";
import afterCardListInfo from "./afterCardListInfo.vue";
import { toQueryString } from "@/utils/index.js";
import { getAfterSaleList } from "@/commit/order.js";
import emptyDataVue from "../components/emptyData/emptyData.vue";
export default {
  components: {
    headersVue,
    tabsVue,
    searchVue,
    afterCardListInfo,
    emptyDataVue,
  },
  data() {
    return {
      tihsi: 0,
      currentActive: 0,
      indexs: 0,
      refund_order_sn: "",
      date: "",
      page: 1,
      limit: 10,
      order_sn: "",
      refund_type: "",
      list: [],
      tihsi: "",
      is_panudn: true,
      status: "",
      dataList: [
        {
          name: "全部",
          count: 0,
        },
        {
          name: "审核中",
          count: 0,
        },
        {
          name: "处理中",
          count: 0,
        },
        {
          name: "已完成",
          count: 0,
        },
      ],
    };
  },
  onPullDownRefresh() {
    uni.showLoading({
      title: "加载中",
    });
    this.page = 1;
    this.is_panudn = true;
    this.list = [];
    this.getAfterSaleListData();
    
  },
  onReachBottom() {
    if (this.is_panudn == true) {
      this.page++;
      this.getAfterSaleListData();
    } else {
      return;
    }
  },

  async onLoad(options) {
    // console.log(options,"tabsHandleClicktabsHandleClicktabsHandleClicktabsHandleClick");
    const tabIndex = options.tabIndex || options.indexs || options.index || "0";
    this.indexs = tabIndex;
    this.currentActive = tabIndex;
    // 0全部  1审核中  2处理中  3已完成
    if (this.currentActive == 0) {
      //全部
      this.status = "";
    } else if (this.currentActive == 1) {
      //审核中 0
      this.status = 0;
    } else if (this.currentActive == 2) {
      //2处理中 2
      this.status = 2;
    } else if (this.currentActive == 3) {
      //3已完成
      this.status = 3;
    } else {
      this.status = "";
    }
    await this.getAfterSaleListData();
  },
  methods: {
    headerJump() {
      uni.switchTab({ url: "/pages/ordermanagement/index" });
    },
    async search(val) {
      this.order_sn = val;
      await this.getAfterSaleListData();
    },

    async getAfterSaleListData() {
      const params = {
        refund_order_sn: this.refund_order_sn,
        status: this.status,
        date: this.date,
        page: this.page,
        limit: this.limit,
        order_sn: this.order_sn,
        refund_type: this.refund_type,
      };
      uni.showLoading({
        title: "加载中",
      });
      try {
        const res = await getAfterSaleList(params);
        uni.stopPullDownRefresh();
        if (res.data.status == 200) {
          this.tihsi = res.data.data.list.length || 0;
          // this.tihsi = res.data.data.count || 0;
          if (res.data.data.count > 0) {
            if (this.page == 1) {
              this.list = res.data.data.list;
            } else {
              this.list = this.list.concat(res.data.data.list);
            }
          } else {
            if (this.page == 1) {
              this.list = [];
            }
            this.is_panudn = false;
          }
          const stat = res.data.data.stat || {};
          this.dataList[0].count = stat.all || 0; //全部
          this.dataList[1].count = stat.audit || 0; //审核中
          this.dataList[2].count = stat.backgood || 0; //处理中
          var num = stat.refuse || 0;
          var num1 = stat.end || 0;
          var num2 = stat.agree || 0;
          this.dataList[3].count = num + num1 + num2 || 0; //已完成
        }
      } catch (error) {
      } finally {
        uni.hideLoading();
      }
    },

    viewWuLiu(item) {
      const params = {
        status: 0,
        indexs: this.currentActive,
        formType: "shouhou",
        shouhou: 0,
        order_id: item.order_id || "",
        refund_order_id: item.refund_order_id,
      };
      const urlParams = toQueryString(params);
      uni.redirectTo({
        url: `../commodity/logisticsInformationDetail?${urlParams}`,
      });
    },
    viewDetail(item) {
      // console.log(item)
      const params = {
        indexs: this.currentActive,
        order_id: item.order_id,
        refund_order_id: item.refund_order_id,
      };
      // console.log(params,"paramsparamsparamsparamsparamsparams")
      const urlParams = toQueryString(params);
      uni.redirectTo({
        url: `./afterSalesDetail?${urlParams}`,
      });
    },
    async tabsHandleClick(obj) {
      this.currentActive = obj.index;
      // console.log(obj, "tabsHandleClick");
      // 0全部  1审核中  2处理中  3已完成
      if (this.currentActive == 0) {
        //全部
        this.status = "";
      } else if (this.currentActive == 1) {
        //审核中 0
        this.status = 0;
      } else if (this.currentActive == 2) {
        //2处理中 2
        this.status = 2;
      } else if (this.currentActive == 3) {
        //3已完成
        this.status = 3;
      } else {
        this.status = "";
      }
       this.page = 1;
       this.list = [];
      this.is_panudn = true;
       uni.pageScrollTo({ scrollTop: 0, duration: 0 });
      await this.getAfterSaleListData();
    },
  },
};
</script>
<style>
page {
  background-color: #f7f8fc;
}
</style>
<style lang="scss" scoped>
.afterSalesManagement-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .afterSalesManagement-content {
    background: #fff;
    position: fixed;
    top: 80rpx;
    width: 100%;
    z-index: 666;
    &--top {
      display: flex;
      .search-box {
        flex: 1;
      }
    }
  }
}
.afterSalesManagement-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 280rpx;
  .afterSalesManagement-list__card {
    width: calc(100% - 100rpx);
    // border: 2rpx solid #f00;
    margin-bottom: 26rpx;
  }
}
</style>
