<template>
  <view class="container">
    <view class="status-box">
      <view class="status_tap_box" style="position: relative">
        <view @tap="statusTap" class="status-label" v-for="(item, index) in statusType" :key="index" :class="item[0] == currentType ? 'active' : ''" :data-index="item[0]">{{ item[1] }}</view>
      </view>
    </view>
    <not-goods v-if="haveGoods" textStr="抱歉！暂无相关订单" />
    <view class="order-list" v-if="orderList && orderList.length > 0">
      <view v-for="(li, index) in orderList" :key="index">
        <view class="a-order">
          <view class="overflow" :data-id="li.id">
            <view class="list-title flex_r flex_ac flex_jb ellipsis">
              <view :class="['fz_text', 'typetag', 'tagcolor' + li.type]">{{ tidyTpye(li.type) }}</view>
              <view class="fz_text">{{ tidyStatus([li.pay_status, li.order_status]) }}</view>
            </view>
            <view class="goods-info flex_r flex_ac flex_jb" :data-type="li.type" @tap="toDetails(li)">
              <view class="goods-info-bar overflow flex_r flex_ac">
                <view class="imgs_bar img-box">
                  <image :src="li.original_img" mode="cover" class="goods-img"></image>
                </view>
                <view class="goods_name ellipsis2">{{ li.goods_name || "" }}</view>
              </view>
              <view class="goodsDetail_info">
                <view class="goods_price r_color">￥<text class="r_color">{{ li.total_amount }}</text></view>
                <view class="unimport">共{{ li.goods_num }}件</view>
              </view>
            </view>
          </view>
          <view class="price-box flex_r flex_ac">
            <template v-if="li.order_status != 5">
              <view class="btn cancel-btn" v-if="[0].includes(li.order_status)" @tap="toCancel(li)">取消订单</view>
              <view class="btn topay-btn" v-if="[0,2].includes(li.pay_status)" @tap="toPay(li)">立即支付</view>
              <view class="btn topay-btn" @tap="toTake(li)" v-if="[0,1,7].includes(li.order_status) && [1].includes(li.pay_status)">确认收货</view>
              <view class="btn topay-btn" @tap="toCode(li)" v-if="[8].includes(li.order_status)">待自提</view>
            </template>
            <template v-else>
              <view class="btn cancel-btn" @tap="removeItem(li.order_id)">删除</view>
            </template>
            <view class="btn cancel-btn" @click="toDetails(li)">查看订单</view>
          </view>
        </view>
      </view>
    </view>
    <view class="loading-indicator opacity">{{ loadingTip }}</view>
  </view>
</template>
<script>
var page = 1;
var app = getApp();
var appEv = app.$vm.$options;
import notGoods from "@/components/not-goods/index";
import { post } from "@/request/api.js";
import { ToPayOpre } from "@/utils/reqTools.js";
var toPayOpre = new ToPayOpre();
export default {
  components: {
    notGoods,
    // terraceTagbar
  },
  data() {
    return {
      statusType: [
        ["0", "全部"],
        ["1", "待付款"],
        ["5", "待自提"],
        ["2", "待发货"],
        ["3", "待收货"],
        ["4", "已完成"],
      ],
      orderList: [],
      currentType: "0",
      haveGoods: false,
      loadingMoreHidden: true,
      loadingTip: "没有更多了",
      userId: "",
      isweixin: "",
      pt: {},
    };
  },
  onLoad(options) {
    this.currentType = options.status ? options.status : 0;
  },
  onShow() {
    this.loadData();
  },
  methods: {
    clearData(isclearCat = true, callBack) {
      page = 1;
      this.orderList = [];
      this.haveGoods = false;
      if (callBack) {
        callBack();
      }
    },
    loadData() {
      if (page == -1) {
        return;
      }
      uni.showLoading({
        title: "加载中…",
        mask: true,
      });
      var data = {
        page,
        type: this.currentType,
      };

      post("v1/my/order", data).then((res) => {
        if (res.code === 0) {
          uni.hideLoading();
          uni.stopPullDownRefresh();
          let da = res.data.data.data;

          if (page <= 1) {
            this.orderList = [];
            if (!da.length) this.haveGoods = true;
          }
          this.orderList = [...this.orderList, ...da];
        } else {
          appEv.errTips(res.msg || "");
          this.loadingMoreHidden = false;
        }
      });
    },
    toDetails(da) {
      this.goto("/pages/szw-order-details/index", { id: da.order_id });
    },

    // 立即支付
    toPay(e) {
      let type = "H5";
      // #ifdef  H5
      type = "H5";
      // #endif
      // #ifdef  APP
      type = "app";
      // #endif
      // #ifdef  MP-WEIXIN
      type = "jsapi";
      // #endif
      post("v1/goods/payOrder", {
        id: e.order_id,
        trade_type: type,
      }).then((res) => {
        if (res.code === 0) {
          toPayOpre.toPay(res.data.data, (da) => {
            if (!da) {
              // 支付成功
              appEv.errTips("支付成功");
            } else {
              // 支付失败
              appEv.errTips("支付已取消");
            }
            // appEv.errTips('支付成功');
            this.loadData();
          });
        }
      });
    },
    // 取消订单
    toCancel(e) {
      let that = this;
      uni.showModal({
        title: "温馨提示",
        content: "取消订单后，微信支付部分也将退至云宝账户",
        // showCancel: false,
        confirmText: "知道了",
        confirmColor: "#f02f2f",
        cancelText: "取消",
        cancelColor: "#bbb",
        success(res) {
          if (res.confirm) {
            post("v1/my/orderCancel", {
              order_id: e.order_id,
            }).then((res) => {
              if (res.code === 0) {
                appEv.errTips(res.msg);
                that.loadData();
              }
            });
          }
        },
      });
    },
    // 确认收货
    toTake(e) {
      let that = this;
      uni.showModal({
        content: "亲，“确定收货”代表着本订单的交付流程已经完成，不再支持任何形式的退换货。",
        confirmText: "确认收货",
        confirmColor: "#fa2f2e",
        cancelText: "取消",
        cancelColor: "#bbb",
        success(res) {
          if (res.confirm) {
            post("v1/goods/confirmOrder", {
              order_id: e.order_id,
            }).then((res) => {
              if (res.code === 0) {
                appEv.errTips(res.msg);
                that.loadData();
              }
            });
          }
        },
      });
    },
    toCode(e) {
      this.goto("/pagesB/order/verificationCode", { id: e.order_id });
    },
    //菜单切换
    statusTap(e) {
      //重置数据
      var curType = e.currentTarget.dataset.index;
      this.currentType = curType;
      this.clearData(false, this.loadData);
    },

    //删除订单
    removeItem(order_id){
      let that = this;
      uni.showModal({
        content: "亲，确认删除本订单吗？",
        confirmText: "确认删除",
        confirmColor: "#fa2f2e",
        cancelText: "取消",
        cancelColor: "#bbb",
        success(res) {
          if (res.confirm) {
            post("v1/my/orderDel", {
              order_id
            }).then(res => {
                if (res.code === 0) {
                  appEv.errTips(res.msg);
                  that.loadData();
                }
            });
          }
        },
      });
    }
  },
  computed: {
    // 0  支付状态   1 订单状态
    tidyStatus() {
      return (da) => {
        let str;
        if (da[1] === 0) str = "待发货";
        if (da[1] === 1) str = "已发货";
        if (da[1] === 2) str = "已完成";
        if (da[1] === 3) str = "申请退货";
        if (da[1] === 4) str = "确认退货";
        if (da[1] === 5) str = "已作废";
        if (da[1] === 6) str = "转邮寄";
        if (da[1] === 7) str = "待收货";
        if (da[1] === 8) str = "待自提";
        if ([0, 2].includes(da[0]) && da[1] != 5) str = "待支付";
        return str;
      };
    },
    tidyTpye() {
      return (da) => {
        switch (da) {
          case 1:
            return "零售专区";
          case 2:
            return "批发专区";
          case 3:
            return "货易优选";
          case 4:
            return "甄选好物";
          case 5:
            return "茶宝兑换";
          case 6:
            return "天天值得买";
          default:
            return "";
        }
      };
    },
  },
  //上拉加载事件
  onReachBottom() {
    if (page != -1) {
      var that = this;
      setTimeout(() => {
        // 为页数迭加1
        ++page;
        that.loadData();
      }, 800);
    }
  },
  // 下拉刷新
  onPullDownRefresh() {
    var that = this;
    that.clearData(false, () => {
      that.loadData();
    });
  },
  // 监听卸载页面  同等于  返回拦截
  onUnload() {
    // #ifdef  H5 || APP-PLUS
    this.goto("/pages/my/index");
    // #endif
    // #ifdef  MP-WEIXIN
    uni.switchTab({
      url: "/pages/my/index",
    });
    // #endif
  },
};
</script>
<style lang="scss">
page {
  background-color: #f3f5f7;
}

.container {
  width: 100%;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.overflow {
  overflow: hidden;
}

.r_color {
  color: #fa2f2e;
}

.loading-indicator {
  width: 100%;
  text-align: center;
  font-size: 24rpx;
  color: #666;
  margin: 20rpx 0;
  line-height: 1.5;
}

.opacity {
  opacity: 0;
  display: none;
}

.terraceComp {
  height: 84rpx;
}

.terraceComp_fix {
  position: fixed;
  top: -12rpx;
  left: 0;
  right: 0;
  z-index: 15;
}

.status-box {
  width: 100%;
  height: 94rpx;
}

.status_tap_box {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  line-height: 88rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  z-index: 300;
  box-shadow: 0rpx 8rpx 8rpx rgba(0, 0, 0, 0.025);
}

.status-box .status-label {
  flex-grow: 1;
  height: 100%;
  text-align: center;
  font-size: 28rpx;
  color: #353535;
  box-sizing: border-box;
  position: relative;
  border-bottom: 6rpx solid transparent;
}

.status-box .status-label.active {
  color: #e05f0b;
  border-bottom-color: #e05f0b;
}

.order-list {
  width: 100%;
  overflow: hidden;
}

.order-list .a-order {
  width: 100%;
  background-color: #fff;
  margin-top: 24rpx;
}

.order-list .a-order .order-date {
  padding: 16rpx 30rpx 20rpx;
  line-height: 40rpx;
  font-size: 26rpx;
  color: #000;
  overflow: hidden;
}

.order-list .a-order .order-date .red {
  font-size: 26rpx;
  color: #fa2f2e;
}

.order-list .a-order .order-date text.r_color {
  font-weight: 600;
}

.a-order .goods-info {
  width: 100%;
  overflow: hidden;
}

.a-order .list-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #000;
  padding: 16rpx 24rpx;
}

.avaImgs {
  width: 54rpx;
  height: 54rpx;
  overflow: hidden;
  border-radius: 50%;
  background-color: #f3f5f7;
  margin-right: 20rpx;
}

.goods-info {
  width: 100%;
  line-height: 39rpx;
  font-size: 26rpx;
  color: #000;
  overflow: hidden;
  padding: 30rpx;
  background-color: #f3f5f7;
  box-sizing: border-box;
}

.goods-info-bar {
  width: calc(100% - 190rpx);
}

.goods-info .img-box {
  width: 150rpx;
  height: 138.8rpx;
  overflow: hidden;
  background-color: #fff;
  border-radius: 12rpx;
  margin-right: 20rpx;
}

.goods-info .img-box .goods-img {
  width: 100%;
  display: block;
  height: 100%;
}

.goods-img-container {
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  height: 172rpx;
  white-space: nowrap;
}

.goods-img-container .img-box {
  display: inline-block;
}

.goods-img-container .img-box:last-of-type {
  margin-right: 0;
}

.goods-info .goods_name {
  width: calc(100% - 192rpx);
  font-size: 28rpx;
  font-weight: 500;
  color: #121212;
}

.goodsDetail_info {
  overflow: hidden;
  width: 180rpx;
  line-height: 1.5;
  text-align: right;
}

.goodsDetail_info .unimport {
  font-size: 24rpx;
  color: #999;
}

.goodsDetail_info .goods_price {
  font-size: 26rpx;
  line-height: 1.2;
  font-weight: 600;
  margin-bottom: 10rpx;
}

.goodsDetail_info .goods_price text {
  font-size: 36rpx;
}

.order-list .a-order .price-box {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 16rpx 30rpx;
  display: flex;
  justify-content: flex-end;
  font-size: 26rpx;
}

.a-order .price-box .btn {
  box-sizing: border-box;
  text-align: center;
  border-radius: 40rpx;
  margin-left: 20rpx;
  border: 1rpx solid #ccc;
  padding: 12rpx 24rpx;
}

.order-list .a-order .price-box .total-price {
  color: #e05f0b;
}

.a-order .price-box .topay-btn {
  border-color: #e05f0b;
  color: #e05f0b;
}

.a-order .price-box .r_topay-btn {
  border-color: #e05f0b;
  background-color: #e05f0b;
  color: #fff;
}

//拼团金
.flot_left {
  // float: left;
  margin-left: auto;
}

.ptz {
  color: #18bb88;
  font-size: 30rpx;
  position: absolute;
  left: 30rpx;
}

.typetag {
  border: 1px solid #ccc;
  border-radius: 10rpx;
  padding: 2rpx 10rpx;
  font-size: 22rpx;
  font-weight: 500;
}

.tagcolor1 {
  border-color: #007aff;
  color: #007aff;
}

.tagcolor2 {
  border-color: #4cd964;
  color: #4cd964;
}

.tagcolor3 {
  border-color: #f0ad4e;
  color: #f0ad4e;
}

.tagcolor4 {
  border-color: #dd524d;
  color: #dd524d;
}

.tagcolor5 {
  border-color: #4335d6;
  color: #4335d6;
}

.tagcolor6 {
  border-color: rgb(245, 8, 8);
  color: rgb(245, 8, 8);
}
</style>