<template>
  <view
    class="orderindexStyle"
    :style="{
      height: contentHeight,
    }"
    
  >
    <view
      style="height: calc(100vh - 50px); background: #fff;"
      v-if="g.length == 0"
    >
      <u-empty text="暂无相关记录" mode="order"></u-empty>
    </view>

    <view
      v-if="g.length > 0"
      style="
        width: calc(100vw);
        overflow: hidden;
        padding-bottom: 20px;
      "
    >
      <scroll-view
        :scroll-y="true"
        :enable-back-to-top="true"
        :enable-flex="true"
        @scrolltolower="lower"
        :style="{ height: '100%' }"
      >
        <view class="orderList">
          <view
            class="listBox"
            @click="redirectToDetail(item.ReOrderId)"
            v-for="(item, index) in g"
            :key="index"
          >
            <view class="listBox_t">
              <Text
                style="
                  font-family: microsoft yahei;
                  font-size: 13px;
                  color: #777;
                  flex: 1;
                  width: 1rpx;
                "
                >单号：{{ item.ReOrderNo }}</Text
              >
              <view class="viewtype">
                <image
                  class="img"
                  v-if="item.Type == 1"
                  src="/static/images/icon/tui.png"
                  mode="aspectFill"
                />
                <image
                  class="img"
                  v-if="item.Type == 2"
                  src="/static/images/icon/huan.png"
                  mode="aspectFill"
                />
                <text>{{ item.Type == 1 ? "退货退款" : "换货" }}</text>
              </view>
            </view>
            <view class="listBox_c">
              <template >
				  <!-- <template v-if="item.OrderDetailModel.length == 1"> -->
                <view
                  class="box_bottom"
                >
                  <image
                    :src="item.OrderDetailModel.CoverImagePath"
                    style="width: 140rpx; height: 140rpx; border-radius: 8rpx;"
                    mode="aspectFill"
                  />
                  <view
                    style="
                      width: 1rpx;
                      flex: 1;
                      display: flex;
                      flex-direction: column;
                      margin-left: 30rpx;
                      height: 140rpx;
                    "
                  >
                    <view style="height: 1rpx; flex: 1;">
                      <view class="topic_cont_text">{{
                        item.OrderDetailModel.GoodsName
                      }}</view>
                    </view>
                    <view>
                      <text style="font-size: 24rpx; color: gray;"
                        >申请金额：</text
                      >
                      <text style="font-size: 26rpx; color: #000;">￥{{
                        item.OrderDetailModel.Final_Price
                      }}</text>
                    </view>
                  </view>
                </view>
                <view class="progress">
                  <view class="status-text">{{ item.ReOrderStatusName }}</view>
                  <view class="status-tips">
                    <text v-if="item.ReOrderStatus == 1"
                      >请您耐心等待商家审核</text
                    >
                  </view>
                  <view class="status-arrow">
                    <u-icon name="arrow" size="32" color="#ccc"></u-icon>
                  </view>
                </view>
              </template>
            </view>
          </view>
        </view>
		<u-loadmore
		  :status="status"
		  :load-text="loadText"
		  :font-size="24"
		  :margin-top="20"
		  :margin-bottom="20"
		  bg-color="#f3f4f6"
		/>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import goodList from "@/components/goods/order-good-list2";

export default {
  components: {
    goodList,
  },
  data() {
    return {
      mainColor: "",
      contentHeight: 0,
      page: 1,
      page_count: 1,
      g: [],
      loading: true,
      showModal: false,
      
      customStyle: {
        marginLeft: "20px",
        padding: "0 30rpx",
      },
	  msg:{
	  	pageIndex: 1,
	  	pageSize:10,
	  	OrderId:'',
	  	ReOrderStatus:'',
	  	ReOrderNo:'',
	  },
	  status: "loadmore",
	  loadText: {
	    loadmore: "轻轻上拉，加载更多",
	    loading: "努力加载中",
	    nomore: "没有更多了",
	  },
      themCustomStyle: {
        marginLeft: "20px",
        padding: "0 30rpx",
      },
    };
  },
  created() {
    this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
    this.mainColor = this.$uiConfig.mainColor;
    this.themCustomStyle.color = this.mainColor;
    this.themCustomStyle.borderColor = this.mainColor;
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: "退还/售后",
    });
  },
  onLoad(option) {
    this.loading = true;
  },
  onShow(){
    this.page=1
    this.g=[]
    this.loading = true;
    this.init();
  },
  methods: {
    redirectToDetail(id) {
      uni.navigateTo({
        url: "/pages/order/after-sale/refunds-detail?id=" + id,
      });
    },
    init() {
      uni.showLoading({
      	title: '加载中'
      });
      this.request2(
      	{
      		url: '/api/AppletOrder/GetAppletOrderAfterPageList',
      		data: this.msg
      	},
      			
        (res) => {
      	 uni.hideLoading();
      	 this.g = this.g.concat(res.data.pageData);
      	 this.page_count = res.data.pageCount;
      	 if (this.page_count == 1) {
      	   this.status = "nomore";
      	 }
      	
        }
      );
    },
    lower(e) {
      if (this.msg.pageIndex < this.page_count) {
    	this.msg.pageIndex++;
    	this.status = "loading";
    	this.init();
      } else {
    	this.status = "nomore";
      }
    },
  },
};
</script>
<style>
.orderindexStyle {
  width: 100%;
  height: 100%;
  background: #f3f4f6;
}
.orderindexStyle .orderList {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.orderList .listBox {
  /* width: 94%; */
  background: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  width: 100%;
  margin-top: 30rpx;
}
.orderList .listBox .listBox_t {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
  margin-bottom: 20px;
  color: #000;
}
.orderList .listBox .listBox_c {
  width: 100%;
  display: block;
  /* flex-direction: column;
  align-items: center; */
}
.orderList .listBox .box_bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  /* margin-bottom: 20px; */
}
.orderList .handle {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  margin-top: 10rpx;
}
.orderList .handle_item {
  padding: 0 24rpx;
  border: 1px solid #c8c9cc;
  margin-left: 20rpx;
  height: 50rpx;
  border-radius: 25rpx;
  line-height: 50rpx;
}
.orderindexStyle .loading {
  width: 200rpx;
  height: 200rpx;
  background: #000000;
  opacity: 0.7;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 50%;
  top: 30%;
  margin-left: -100rpx;
  z-index: 999;
}
.listBox_c .goodboxmore {
  margin-bottom: 20px;
  display: flex;
  width: 100%;
  align-items: center;
}
.listBox_c .goodboxmore .good-list {
  display: flex;
  flex: 1;
  overflow-x: auto;
}
.listBox_c .goodboxmore .good-list .item {
  width: 70px;
  height: 70px;
  border-radius: 5px;
  margin-right: 10px;
}
.listBox_c .goodboxmore .infos {
  margin-left: 15px;
}
.listBox_c .goodboxmore .infos .text {
  text-align: center;
  font-size: 12px;
  margin-top: 5px;
}
.listBox_c .left {
  flex: 1;
  color: #232323;
  font-size: 16px;
  flex: 1;
  font-family: "oswald";
}
.listBox_c .small {
  font-size: 13px;
}
.listBox_c .topic_cont_text {
  font-size: 30rpx;
  max-height: 90rpx;
  overflow: hidden;
  word-break: break-all; /* break-all(允许在单词内换行。) */
  text-overflow: ellipsis; /* 超出部分省略号 */
  display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 2; /** 显示的行数 **/
}
.listBox .viewtype {
  color: #000;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}
.listBox .viewtype .img {
  width: 32rpx;
  height: 32rpx;
  margin-right: 10rpx;
}
.listBox_c .progress {
  padding: 20rpx;
  background: #f5f5f5;
  display: flex;
  margin-top: 40rpx;
  align-items: center;
}
.listBox_c .progress .status-text {
  font-size: 28rpx;
  color: #444;
  margin-right: 40rpx;
  font-weight: 500;
}
.listBox_c .progress .status-tips {
  font-size: 12px;
  color: gray;
  width: 1rpx;
  flex: 1;
}
.listBox_c .progress .status-arrow {
  width: 32rpx;
  height: 32rpx;
  margin-left: 40rpx;
}
</style>
