<template>
  <view>
    <u-navbar
      placeholder
      :title="$t('fn_146')"
      :bgColor="'#FB3024'"
      titleStyle="color:#fff"
      leftIconColor="#fff"
      leftIcon="arrow-left"
      @leftClick="goBack"
    >
      <!-- <button class="nav-right-btn" slot="right" @click="openPop()">{{ $t('MY_ORD_50') }}</button> -->
    </u-navbar>
    <view class="top-tabbar">
      <view>{{ $t("MN_F_T_47") }}：{{ achieveTotals }}</view>
      <view>{{ $t("fn_147") }}：{{ amountTotals }} </view>
    </view>
    <view class="listdata-list">
      <view
        v-for="(item, index) in listData"
        :key="index"
        class="listdata-item"
      >
        <view class="border-b">
          <view class="d-b-c mb16">
            <text class="type-btn">{{ item.orderTypeVal }}</text>
            <view class="f24 gray9 flex-1">
              {{ $t("MY_ORD_1") }}:
              <text selectable>{{ item.orderCode }}</text>
            </view>
            <view class="status-btn">{{ item.orderStatusVal }}</view>
          </view>
          <view class="d-b-c">
            <!-- 单个商品 -->
            <template v-if="item.itemList.length == 1">
              <view>
                <view
                  class="d-s-c flex-1"
                  v-for="(items, indexs) in item.itemList"
                  :key="indexs"
                >
                  <image class="product-img" :src="items.cover" mode=""></image>
                  <view class="text-ellipsis f28 gray3" style="width: 220rpx">{{
                    items.productName
                  }}</view>
                </view>
              </view>
            </template>
            <!-- 多个商品 -->
            <template v-if="item.itemList.length > 1">
              <view class="d-c-c product-list ww100">
                <image
                  class="product-img"
                  :src="pitem.cover"
                  mode=""
                  v-for="(pitem, pindex) in item.itemList"
                  :key="pindex"
                ></image>
              </view>
            </template>
            <view class="d-c d-c-e">
              <view class="price-color f24">
                {{ currencyIcon() }}
                <text class="f32">{{ formatNum(item.orderAmount) }}</text>
              </view>
              <view class="gray6">x{{ item.itemList.length }}</view>
            </view>
          </view>
          <view class="f24 gray9 mb20"
            >{{ $t("MY_ORD_3") }}:{{ item.creationTime }}</view
          >
          <view class="f24 gray9 mb20"
            >{{ $t("MN_F_T_140") }}:{{ item.deliveryWayVal }}</view
          >
        </view>
        <view class="d-e-c pt20">
          <!-- <view class="order-border-btn" v-if="item.orderStatus == 0" @click="cancelOrder(item.orderCode)">{{ $t('ENU_APPROVE_B_234') }}</view> -->
          <!-- <view class="order-border-btn">备注</view> -->
          <!-- <view class="order-btn">修改地址</view> -->
          <!-- <view class="order-btn" v-if="item.orderStatus == 0" @click="gotoPage('/pages/order/cashier?orderCode=' + item.orderCode + '&specialArea=' + item.orderType)">
						{{ $t('w_0312') }}
					</view> -->
          <!-- <view class="order-btn" v-if="item.orderStatus == 3 || item.orderStatus == 5" @click="gotoPage('pages/order/express/express?orderCode=' + item.orderCode)">
						{{ $t('MY_ORD_19') }}
					</view> -->
          <!-- <view class="order-btn" v-if="item.orderStatus==1" @click="confirmReceipt(item.orderCode)">{{$t('MN_F_36')}}</view> -->
          <view class="order-btn" @click="openDetail(item)">{{
            $t("MY_CK_18")
          }}</view>
        </view>
      </view>
    </view>
    <view class="d-c-c p30" v-if="listData.length == 0 && !loading">
      <text class="iconfont icon-wushuju"></text>
      <text class="cont">{{ $t("w_0405") }}</text>
    </view>
    <uni-load-more v-else :loadingType="loadingType"></uni-load-more>
    <!-- 筛选 -->

    <Detail
      :detail="detailModel"
      :isPop="isDetail"
      @close="closeDetail"
      :serchStatus="serchStatus"
    ></Detail>
  </view>
</template>

<script>
import uniLoadMore from "@/components/uni-load-more.vue";
import Detail from "./detail.vue";
export default {
  components: {
    uniLoadMore,
    Detail,
  },
  data() {
    const currentDate = this.getDate({
      format: true,
    });
    return {
      serchStatus: -1,
      /*最后一页码数*/
      last_page: 0,
      /*当前页面*/
      page: 1,
      /*每页条数*/
      list_rows: 10,
      /*有没有等多*/
      no_more: false,
      /*是否正在加载*/
      loading: true,
      listData: [],
      showPop: false,
      date1: "",
      date2: "",
      searchtype: 0,
      form: {
        orderCode: "",
        memberCode: "",
        pageNum: 1,
        pageSize: 10,
        orderType: "",
        deliveryWay: "",
        orderStatus: "",
        creationTimeStart: "",
        creationTimeEnd: "",
      },
      total: 0,
      orderCount: {
        waitPayNum: 0,
        payNum: 0,
      },
      /*状态选中*/
      state_active: -1,
      orderType: [],
      deliveryList: [],
      isDetail: false,
      detailModel: null,
      orderStatus: [],
      statisticList: {},
      achieveTotals: "",
      amountTotals: "",
    };
  },
  onLoad(e) {
    this.form.orderStatus = e.dataType >= 0 ? e.dataType : -1;
    this.state_active = e.dataType >= 0 ? e.dataType : -1;
    this.getOrderNumData();
    this.getDeliveryList();
    // this.memberStoreSummary();
    this.getOrderTypeData();
  },
  onShow() {
    /*获取数据*/
    this.listData = [];
    this.form.pageNum = 1;
    this.getOrderStatus();
    this.memberStoreSummarySum();
    this.getData();
  },
  onReachBottom() {
    let self = this;
    if (self.form.pageNum * self.form.pageSize < self.total) {
      self.form.pageNum++;
      self.getData();
    }
    self.no_more = true;
  },
  computed: {
    /*加载中状态*/
    loadingType() {
      if (this.loading) {
        return 1;
      } else {
        if (this.listData.length != 0 && this.no_more) {
          return 2;
        } else {
          return 0;
        }
      }
    },
    creationTimeStart() {
      return this.getDate("start");
    },
    creationTimeEnd() {
      return this.getDate("end");
    },
  },
  methods: {
    memberStoreSummarySum() {
      let self = this;
      self._get("/sale/api/my-order/member-store-summary-sum", {}, (res) => {
        self.statisticList = res.data;
        let achieveTotals = self.statisticList.achieveTotal;
        self.achieveTotals = Number(achieveTotals).toFixed(2);
        let amountTotals = self.statisticList.amountTotal;
        self.amountTotals = Number(amountTotals).toFixed(2);
      });
    },
    getOrderStatus() {
      let self = this;
      self._get("/system/pub/enums/order-shop-status-api", {}, (res) => {
        self.orderStatus = res.data;
      });
    },
    confirmReceipt(id) {
      let self = this;
      uni.showModal({
        title: "提示",
        content: this.$t("fn_154"),
        success(o) {
          if (o.confirm) {
            self._post(
              "sale/api/my-order/store-order-delivery",
              { orderCode: id },
              (res) => {
                /*获取数据*/
                self.listData = [];
                self.form.pageNum = 1;
                self.getData();
                self.getOrderNumData();
                uni.showToast({
                  title: res.msg,
                  icon: "none",
                });
              }
            );
          }
        },
      });
    },
    goBack() {
      uni.reLaunch({
        url: "/pages/user/index/index",
      });
    },
    closeDetail() {
      this.isDetail = false;
      this.detailModel = null;
    },
    openDetail(e) {
      this.detailModel = e;
      this.isDetail = true;
    },
    /*取消订单*/
    cancelOrder(e) {
      let self = this;
      let order_id = e;
      uni.showModal({
        title: self.$t("w_0034"),
        content: self.$t("MY_ORD_52"),
        success: function (o) {
          if (o.confirm) {
            uni.showLoading({
              title: self.$t("MN_F_6"),
            });
            self._delete("sale/api/my-order/cancel/" + e, {}, function (res) {
              self.listData = [];
              self.page = 1;
              self.getData();
              uni.showToast({
                title: self.$t("MY_ORD_53"),
                duration: 2000,
                icon: "success",
              });
            });
          }
        },
      });
    },
    /*状态切换*/
    stateFunc(e) {
      let self = this;
      if (self.state_active != e) {
        /*获取数据*/
        this.listData = [];
        self.page = 1;
        self.loading = true;
        self.state_active = e;
        if (e == -1) {
          self.form.orderStatus = "";
        } else {
          self.form.orderStatus = e;
        }
        self.getData();
      }
    },
    getOrderNumData() {
      let self = this;
      self.loading = true;
      self._get(
        "sale/api/my-order/store-num",
        {},
        function (res) {
          self.orderCount = res.data;
        },
        {},
        () => {
          self.loading = false;
        }
      );
    },
    getDeliveryList() {
      let self = this;
      self.loading = true;
      self._get(
        "system/pub/enums/delivery-list",
        {},
        function (res) {
          self.deliveryList = res.data;
        },
        {},
        () => {
          self.loading = false;
        }
      );
    },
    getOrderTypeData() {
      let self = this;
      self.loading = true;
      self._get(
        "sale/api/my-order/order-type",
        {},
        function (res) {
          self.orderType = res.data;
        },
        {},
        () => {
          self.loading = false;
        }
      );
    },
    closePop() {
      this.showPop = false;
    },
    openPop() {
      this.showPop = true;
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === "start") {
        year = year - 60;
      } else if (type === "end") {
        year = year + 2;
      }
      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;
      return `${year}-${month}-${day}`;
    },
    bindDateChange1: function (e) {
      this.form.creationTimeStart = e.detail.value;
    },
    bindDateChange2: function (e) {
      this.form.creationTimeEnd = e.detail.value;
    },
    getData() {
      // return;
      let self = this;
      self.loading = true;
      var formdata = self.form;
      if (formdata.orderStatus == -1) {
        formdata.orderStatus = "";
      }

      self._get(
        "sale/api/my-order/member-store-summary",
        formdata,
        function (res) {
          self.loading = false;
          self.listData = self.listData.concat(res.rows);

          self.total = res.total;
          if (self.total < self.form.pageNum * self.form.pageSize) {
            self.no_more = true;
          }
        }
      );
    },
    searchName: function () {
      /*获取数据*/
      this.listData = [];
      this.form.pageNum = 1;
      this.getData();
    },
    bindStatus: function (e) {
      console.log(e);
      this.form.orderType = e.value;
      // console.log(e);
    },
    bindDeliveryWay: function (e) {
      console.log(e);
      this.form.deliveryWay = e.value;
      // console.log(e);
    },
    resetSubmit: function () {
      this.form.orderCode = "";
      this.form.memberCode = "";
      this.form.orderType = "";
      this.form.deliveryWay = "";
      this.form.orderStatus = "";
      this.form.creationTimeStart = "";
      this.form.creationTimeEnd = "";
      this.searchSubmit();
    },
    searchSubmit: function () {
      this.showPop = false;
      /*获取数据*/
      this.listData = [];
      this.form.pageNum = 1;
      this.getData();
    },
  },
};
</script>

<style lang="scss">
.top-box {
  width: 750rpx;
  padding: 0 30rpx 0 23rpx;
  box-sizing: border-box;
  height: 102rpx;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 24rpx;
}

.search-box {
  flex: 1;
  height: 65rpx;
  background: #f5f6f8;
  border-radius: 33rpx;
  padding: 0 52rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;

  .search-input {
    font-size: 26rpx;
    color: #333;
    margin-left: 14rpx;
    flex: 1;
  }
}

.top-tabbar {
  height: 94rpx;
  justify-content: space-between;
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
}

.tab-item {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0 42rpx;
  font-size: 28rpx;
  color: #666;
}

.tab-item.active {
  font-size: 28rpx;
  color: #333;
}

.tab-item.active::after {
  width: 52rpx;
  height: 6rpx;
  background: #fb3024;
  border-radius: 3rpx;
  bottom: 0;
}

.listdata-item {
  // height: 370rpx;
  padding: 27rpx 23rpx 22rpx 25rpx;
  background: #ffffff;
  margin-bottom: 22rpx;
}

.type-btn {
  line-height: 30rpx;
  height: 30rpx;
  background: #3d3d3d;
  border-radius: 15rpx;
  padding: 0 23rpx;
  font-size: 20rpx;
  color: #ffffff;
  margin-right: 6rpx;
}

.status-btn {
  font-size: 24rpx;
  color: #333333;
  margin-left: 20rpx;
}

.product-img {
  width: 124rpx;
  height: 124rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
  display: block;
  border: 15rpx;
  margin-bottom: 24rpx;
}

.product-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-right: 20rpx;
}

.order-border-btn {
  box-sizing: border-box;
  padding: 0 26rpx;
  min-width: 146rpx;
  height: 52rpx;
  line-height: 52rpx;
  text-align: center;
  border-radius: 26rpx;
  font-size: 24rpx;
  color: #999;
  border: 1rpx solid #eee;
  margin-left: 18rpx;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.order-btn {
  box-sizing: border-box;
  padding: 0 26rpx;
  min-width: 146rpx;
  height: 52rpx;
  line-height: 52rpx;
  text-align: center;
  border-radius: 26rpx;
  font-size: 24rpx;
  color: #fff;
  border: 1rpx solid #eee;
  margin-left: 18rpx;
  background: #fb3024;
  border: 1rpx solid #fb3024;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-right-btn {
  background: none;
  color: #fff;
  font-size: 28rpx;
}
.rightpop.pop-content {
  padding-top: 0;
}
</style>
