<script setup>
import { ref, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import ScrollList from "@/components/ScrollList.vue";
import ModalDialog from "@/components/ModalDialog.vue";
import { getOrderListAPI } from "@/apis";
import useStore from "@/store";
import { orderStatusNames, getStatusColor } from "@/constants";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, config } = storeToRefs(store);

const autoRenewDialogVisible = ref(false);
const selectedRenewOrder = ref(null);

const toDetailPage = (detail) => {
  uni.setStorageSync("order", detail);
  uni.navigateTo({
    url: "/pages/member/order-detail",
  });
};

const openAutoRenewDialog = (detail) => {
  selectedRenewOrder.value = detail;
  autoRenewDialogVisible.value = true;
};

const closeAutoRenewDialog = () => {
  autoRenewDialogVisible.value = false;
  selectedRenewOrder.value = null;
};

const confirmAutoRenewDialog = () => {
  autoRenewDialogVisible.value = false;
   uni.showToast({
      title: "功能实现中",
      icon: "none",
    });
}

const list = ref([]);

const onLoading = async (page) => {
  const result = await getOrderListAPI(page);
  if (page === 1) {
    list.value = result;
  } else {
    list.value = list.value.concat(result);
  }
  return result.length;
};

onMounted(() => {
  uni.removeStorageSync("order");
});

onShow(() => {
  const order = uni.getStorageSync("order");
  list.value.forEach((item, index) => {
    if (item.orderId === order.orderId) {
      list.value[index] = order;
    }
  });
});
</script>

<template>
  <Container title="订单管理">
    <view class="container">
      <ScrollList :onLoading="onLoading">
        <view
          v-for="(item, index) in list"
          :key="index"
          class="order-item"
          @click="() => toDetailPage(item)"
        >
          <view
            :style="{ backgroundColor: getStatusColor(item.orderStatus) }"
            >{{ orderStatusNames[item.orderStatus] }}</view
          >
          <text>{{ item.vipName }}</text>
          <text>订单号：{{ item.orderId }}</text>
          <text>创建时间：{{ item.orderCreateAt }}</text>
          <!-- <text
            >支付时间：{{
              item.orderStatus === 4 ? item.paymentTime : ""
            }}</text
          > -->
          <text>金额：{{ item.total }} 元</text>
          <!-- <text>支付方式：微信</text> -->
          <!-- <text class="renew-action" @click.stop="openAutoRenewDialog(item)">
            自动续费
          </text> -->
        </view>
      </ScrollList>
    </view>

    <ModalDialog
      :show="autoRenewDialogVisible"
      title=""
      :content="'确定关闭自动续费吗?\n会员到期后你将失去7项特权哦!'"
      cancel-text="一意孤行"
      confirm-text="继续享受"
      :on-cancel="closeAutoRenewDialog"
      :on-confirm="confirmAutoRenewDialog"
    />
  </Container>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  padding-top: 16rpx;
}
.order-item {
  position: relative;
  background-color: #fff;
  margin-bottom: 16rpx;
  display: flex;
  flex-direction: column;
  padding: 28rpx 30rpx 18rpx 30rpx;
}
.order-item > view:first-child {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  color: #fff;
  text-align: center;
  font-size: 11px;
}
.order-item > text:nth-child(2) {
  color: #333333;
  font-size: 30rpx;
  font-weight: bold;
}
.order-item > text {
  color: #666666;
  font-size: 26rpx;
  margin-bottom: 10rpx;
}
.order-item > .renew-action {
  position: absolute;
  right: 30rpx;
  bottom: 18rpx;
  color: #1f6ed4;
  margin-bottom: 0;
}
</style>
