<template>
  <view class="app-container">
    <uv-sticky customNavHeight="0">
      <view class="head">
        <view class="search-bar">
          <uv-search
            placeholder="可输入订单号搜索"
            v-model="keyword"
            :showAction="false"
            bgColor="#ffffff"
            height="80rpx"
            placeholderColor="#b3b3b3"
            @search="handleReset"
            @blur="handleReset"
          >
            <template v-slot:prefix>
              <image
                class="search-icon"
                :src="$handleImageUrl('/order/icon_search.png')"
                alt=""
              />
            </template>
          </uv-search>
        </view>
        <view class="tab-bar u-flex-center-sb">
          <view
            class="tab-item"
            v-for="(item, index) in tabList"
            :key="index"
            @click="tabChange(item.id)"
          >
            <view class="tab-text" :class="{ active: tabId === item.id }">{{
              item.name
            }}</view>
            <image
              v-show="tabId == item.id"
              class="tab-line-img"
              :src="$handleImageUrl('/order/tabs_line.png')"
              alt=""
            />
            <view class="tab-line-img" v-show="tabId != item.id"> </view>
          </view>
          <view
            :class="['tab-sort', { active: isAsc }]"
            @click.stop="sortChange"
            v-if="pageType == 2 && tabId == 1"
          >
            <text>排序</text>
            <text class="iconfont">&#xe65e;</text>
          </view>
        </view>
      </view>
    </uv-sticky>
    <view class="order-list">
      <view class="list-item" v-for="(item, index) in dataList" :key="index">
        <view class="item-title u-flex-center-sb">
          <view class="item-order">订单号：{{ item.orderNo }}</view>
          <view class="item-index" v-if="item.subsidyStatus == 0"
            >第<text class="item-num">{{ item.queueOrder }}</text
            >位</view
          >
          <view
            class="item-title-text"
            v-else-if="item.cancelType == 1 && item.cancelled && pageType == 1"
            >不参与</view
          >
        </view>
        <view class="item-shop">
          <view class="item-shop-name">{{ item.originalBusinessName }}</view>
          <view class="item-shop-info u-flex-center-sb">
            <view class="item-shop-money">
              <view class="item-money">{{ item.payAmount || 0 }}</view>
              <view class="item-money-text">订单金额(元)</view>
            </view>
            <view class="item-shop-money">
              <view class="item-money">{{
                item.shouldSubsidyAmount || 0
              }}</view>
              <view class="item-money-text">最多补贴金额(元)</view>
            </view>
            <view class="item-shop-money">
              <view class="item-money">{{
                item.actualSubsidyAmount || 0
              }}</view>
              <view class="item-money-text">已补贴(元)</view>
            </view>
          </view>
        </view>
        <view class="item-content">
          <view class="item-view u-flex-center-sb">
            <text class="item-label">已补贴积分：</text>
            <text class="item-value">{{ item.subsidyPoints || 0 }}</text>
          </view>
          <view class="item-view u-flex-center-sb">
            <text class="item-label">用户手机号：</text>
            <text class="item-value">{{ item.userMobile || "--" }}</text>
          </view>
          <view class="item-view u-flex-center-sb">
            <text class="item-label">消费来源：</text>
            <text class="item-value" v-if="item.purchaseSource == 0"
              >在线买单</text
            >
            <text class="item-value" v-else-if="item.purchaseSource == 1"
              >商城订单</text
            >
          </view>
          <view class="item-view u-flex-center-sb">
            <text class="item-label">消费时间：</text>
            <text class="item-value">{{ item.consumeTime || "--" }}</text>
          </view>
          <view class="item-view u-flex-center-sb">
            <text class="item-label">排队时间：</text>
            <text class="item-value">{{ item.queueTime || "--" }}</text>
          </view>
          <view class="item-view u-flex-center-sb" v-if="tabId == 1">
            <text class="item-label">排队完成时间：</text>
            <text class="item-value">{{ item.completeTime || "--" }}</text>
          </view>

          <view class="item-view u-flex-center-sb" v-if="tabId == 2">
            <text class="item-label">退款时间：</text>
            <text class="item-value">{{ item.cancelTime || "--" }}</text>
          </view>
        </view>
        <view
          class="item-btn-group"
          v-if="pageType == 1 && item.subsidyStatus == 0"
        >
          <view class="btn" @click.stop="handleExchange(item)">兑换积分</view>
        </view>
      </view>

      <noData
        v-if="dataList.length == 0"
        :config="{ top: 5, content: '暂无数据~' }"
      ></noData>
      <loadMore v-if="dataList.length > 0" :status="status"></loadMore>
    </view>

    <!-- 兑换积分 -->
    <RedeemPoints ref="exchangePopupRef" @confirm="handleExchangeConfirm" />
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import {
  onLoad,
  onReachBottom,
  onPullDownRefresh,
  onShow,
} from "@dcloudio/uni-app";
import {
  subsidyQueuePage_Api,
  subsidyQueueBusinessPage_Api,
  subsidyQueueExchange_Api,
} from "@/api/order.js";
import { isSetPayPassword_Api } from "@/api/userInfo.js";
const pageType = ref(1); // 1：用户 2：商家
const exchangePopupRef = ref(null);
const keyword = ref(""); // 订单搜索关键字
const isSetPayPassword = ref(null);
const dataList = ref([]);
const status = ref("more");
const parmas = reactive({
  pageNum: 1,
  pageSize: 10,
});

const isAsc = ref(false); // 排序
const tabId = ref(0);
const tabList = ref([
  { name: "排队中", id: 0 },
  { name: "已完成", id: 1 },
  { name: "已退款", id: 2 },
]);

// 切换标签
const tabChange = (id) => {
  if (id == tabId.value) return;
  tabId.value = id;
  handleReset();
};

// 兑换积分
const handleExchange = (item = {}) => {
  // console.log(item);
  if (!isSetPayPassword.value) {
    uni.$uv.toast("请先设置支付密码");
    setTimeout(() => {
      uni.navigateTo({
        url: "/pages/set/payPassword",
      });
    }, 500);
    return;
  }
  let form = {
    queueId: item.queueId,
    totalNum: (
      item.shouldSubsidyAmount * 1 -
      item.actualSubsidyAmount * 1
    ).toFixed(2),
  };
  exchangePopupRef.value.open(form);
};

// 兑换积分确认
const handleExchangeConfirm = (form) => {
  // console.log("兑换积分确认", form);
  // let form = { ...formData.value };
  uni.showLoading({ title: "加载中...", mask: true });
  subsidyQueueExchange_Api(form)
    .then((res) => {
      uni.hideLoading();
      // console.log(res);
      if (res && res.code == 200) {
        uni.$uv.toast("兑换成功");
        exchangePopupRef.value.close();
        handleReset();
      }
    })
    .catch((err) => {
      console.log(err);
      // uni.hideLoading();
    });
};

// 排序触发
const sortChange = () => {
  isAsc.value = !isAsc.value;
  handleReset();
};

// 请求列表数据
const getList = async () => {
  uni.showLoading({ title: "加载中...", mask: true });
  let objs = {
    ...parmas,
    [pageType.value == 1 ? "orderNo" : "keyword"]: keyword.value,
  };
  switch (tabId.value) {
    case 0:
      if (pageType.value == 1) {
        objs.subsidyStatus = 0;
      }
      break;
    case 1:
      objs.subsidyStatus = pageType.value == 1 ? 1 : 0;
      break;
    case 2:
      if (pageType.value == 1) {
        objs.refundStatus = 10;
      } else {
        objs.subsidyStatus = 1;
      }
    default:
      break;
  }
  if (pageType.value == 2 && tabId.value == 1) {
    objs.isAsc = isAsc.value ? "desc" : "asc";
  }
  let url =
    pageType.value == 1 ? subsidyQueuePage_Api : subsidyQueueBusinessPage_Api;
  await url(objs)
    .then((res) => {
      if (res && res.code == 200) {
        uni.hideLoading();
        uni.stopPullDownRefresh();
        if (parmas.pageNum == 1) {
          dataList.value = res.rows;
        } else {
          dataList.value = dataList.value.concat(res.rows);
        }
        if (res.total <= dataList.value.length) {
          status.value = "noMore";
        } else {
          status.value = "more";
        }
      }
    })
    .catch((err) => {
      console.log(err);
      // uni.hideLoading();
    });
};

// 重置
const handleReset = () => {
  status.value = "loading";
  parmas.pageNum = 1;
  dataList.value = [];
  getList();
};

onShow(() => {
  if (!isSetPayPassword.value) {
    try {
      isSetPayPassword_Api().then((res) => {
        // console.log(res);
        if (res && res.code == 200 && res.data) {
          isSetPayPassword.value = res.data ? true : false;
        }
      });
    } catch (error) {}
  }
});

onLoad((options) => {
  if (options.pageType) {
    if (options.pageType == 2) {
      tabList.value = [
        { name: "全部", id: 0 },
        { name: "排队中", id: 1 },
        { name: "已完成", id: 2 },
      ];
    }
    pageType.value = options.pageType;
  }
  getList();
});

onReachBottom(() => {
  if (status.value == "noMore") return;
  status.value = "loading";
  parmas.pageNum++;
  getList();
});

onPullDownRefresh(() => {
  handleReset();
});
</script>

<style lang="scss" scoped>
.app-container {
  min-height: 100vh;
  background-color: #f7f7f7;
  box-sizing: border-box;
  padding-bottom: 30rpx;

  .head {
    background-color: #f7f7f7;
    padding: 30rpx;
    .search-bar {
      padding-bottom: 15rpx;
      .search-icon {
        width: 30rpx;
        height: 30rpx;
      }
    }
    .tab-bar {
      margin-top: 30rpx;
      height: 59rpx;
      align-items: baseline;
      .tab-sort.active {
        color: #ff0000;
        font-weight: 700;
      }
      .tab-item {
        // min-width: 110rpx;
        // text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        .tab-text.active {
          color: #ff0000;
          font-weight: 700;
        }
        .tab-text {
          font-size: 32rpx;
          font-weight: 400;
          color: #1a1a1a;
          margin-bottom: 10rpx;
        }
        .tab-line-img {
          width: 91rpx;
          height: 10rpx;
        }
        .tab-line {
          width: 91rpx;
          height: 10rpx;
          margin: auto;
        }
      }
      .tab-sort {
        width: 146rpx;
        height: 59rpx;
        line-height: 59rpx;
        background: #ffffff;
        border-radius: 10rpx;
        font-size: 32rpx;
        text-align: center;
      }
    }
  }

  .order-list {
    .list-item {
      background-color: #ffffff;
      border-radius: 24rpx;
      padding: 20rpx 0 30rpx 0;
      margin-bottom: 30rpx;
      .item-title {
        padding: 20rpx 30rpx;
        border-bottom: 1rpx solid #f0f0f0;
        .item-order {
          flex: 1;
          font-size: 32rpx;
          font-weight: 700;
          color: #1a1a1a;
          margin-right: 10rpx;
        }
        .item-index {
          flex-shrink: 0;
          min-width: 107rpx;
          padding: 0 10rpx;
          height: 45rpx;
          line-height: 45rpx;
          background: #ffe8e8;
          border-radius: 23rpx;
          text-align: center;
          font-size: 22rpx;
          color: #ff0000;
          .item-num {
            font-size: 28rpx;
            font-weight: 700;
          }
        }
        .item-title-text {
          font-size: 28rpx;
          font-weight: 400;
          color: #06b4fd;
        }
      }

      .item-shop {
        padding: 30rpx 23rpx;
        background-color: #f7f6f6;
        border-radius: 20rpx;
        margin: 30rpx 30rpx 10rpx 30rpx;
        .item-shop-name {
          font-size: 32rpx;
          font-weight: 700;
          color: #1a1a1a;
          text-align: center;
          margin-bottom: 20rpx;
        }
        .item-shop-info {
          .item-shop-money {
            text-align: center;
            .item-money {
              font-size: 32rpx;
              font-weight: 700;
              color: #eb5153;
            }
            .item-money-text {
              font-size: 26rpx;
              font-weight: 400;
              color: #1a1a1a;
              margin-top: 15rpx;
            }
          }
        }
      }

      .item-content {
        padding-top: 10rpx;
        .item-view {
          padding: 20rpx 30rpx 0 30rpx;
          font-size: 28rpx;
          .item-label {
            flex-shrink: 0;
          }
          .item-value {
            color: #808080;
          }
        }
      }
      .item-btn-group {
        border-top: 1rpx solid #f0f0f0;
        text-align: right;
        padding-top: 20rpx;
        margin: 30rpx 30rpx 0 30rpx;
        .btn {
          display: inline-block;
          width: 170rpx;
          height: 67rpx;
          line-height: 67rpx;
          background: #ffffff;
          border: 1rpx solid #e93534;
          border-radius: 10rpx;
          font-size: 28rpx;
          font-weight: 700;
          text-align: center;
          color: #e93534;
        }
      }
    }
  }
}
</style>
