<template>
  <div class="home-container px">
    <!-- 顶部导航栏 -->
    <div class="nav-bar newnavbar van-nav-bar van-hairline--bottom">
      <div class="van-nav-bar__content" style="background-color: black">
        <van-icon @click="$router.back()" name="arrow-left" color="#fff" />
        <div
          class="van-nav-bar__title van-ellipsis"
          style="
            font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
            font-size: 20px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: #fff;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
          "
        >
          {{$t('ORDERS')}}
        </div>
        <div @click="openHotelChat" class="van-nav-bar__right">
          <i class="van-icon van-icon-chat-o" style="color: #fff"></i>
        </div>
      </div>
    </div>
    <div class="order">
      <div
        v-if="images && images.length"
        style="position: relative; margin-top: 2px"
      >
        <van-swipe :autoplay="3000" style="height: 200px">
          <van-swipe-item v-for="(item, index) in images" :key="index">
            <img
              :src="fullUrl1(item.url)"
              style="width: 100%; height: 200px; object-fit: cover"
            />
          </van-swipe-item>
        </van-swipe>
      </div>

      <div class="tab-box">
        <div
          @click="changeTab(item.value)"
          v-for="item in tabs"
          :key="item.value"
          :class="tabIndex == item.value ? 'active' : ''"
        >
          {{ item.text }}
        </div>
      </div>
      <div class="content">
        <div class="list" v-for="(item, index) in orderData" :key="index">
          <div class="header">
            <div class="left">
              <div class="time">{{$t('Submission time')}}:{{ item.update_time }}</div>
              <van-button
                style="margin-top: 5px"
                :round="true"
                size="small"
                plain
                type="success"
                >{{ tabs[tabIndex].text }}</van-button
              >
            </div>
            <van-button
              class="border-none"
              :hairline="false"
              v-if="item.status==0"
              color="#2a2a2a"
              type="success"
              loading-text="Pay"
              :loading="btnLoading"
              @click="onPay(item.orderNo)"
              >{{$t('Pay')}}</van-button
            >
          </div>
          <div class="pr-detail">
            <div class="pr-left">
              <van-image :src="item.goods_pic"></van-image>
            </div>
            <div class="pr-right">
              <div class="title">{{ item.goods_name }}</div>
              <div class="tag">
                <!-- <span>10.0</span> -->
              </div>
              <div class="bb">
                <span>{{ item.orderNo }}</span>
              </div>
              <div class="num">
                <span>{{ item.goods_price }} $</span>
              </div>
              <div class="desc">
                <span>{{$t('Includes taxes and service charges')}}</span>
              </div>
            </div>
          </div>
          <div class="desc-list">
            <span>{{$t('Total amount')}}</span>
            <span>{{ item.goods_price }}</span>
          </div>
          <div class="desc-list">
            <span>{{$t('Order quantity')}}</span>
            <span>1</span>
          </div>
          <div class="desc-list">
            <span>{{$t('Expected return')}}</span>
            <span>{{ item.goods_lr }}</span>
          </div>
        </div>

        <van-empty v-if="!orderData.length" >
          <template #description>
            <span style="font-size: 1.2rem;">{{$t('No Data')}}</span>
          </template>  
        </van-empty>

      </div>
    </div>
  </div>
</template>

<script>
import { openChat1 } from "@/utils/chat";
import { jiudianList, lunbo, payOrder, orderList } from "@/api/contract";
import { nowLocationUrl } from "@/utils/tools";
import router from "@/router";
import { Dialog, Loading } from "vant";
import { Toast } from 'vant';

export default {
  data() {
    return {
      images: [],
      tabs: [
        { text: "Pending", value: 0 },
        { text: "Freeze", value: 1 },
        { text: "Completed", value: 2 },
      ],
      tabIndex: 0,
      orderData: [],
      btnLoading:false
    };
  },
  methods: {
    changeTab(index){
      this.orderData=[];
      this.tabIndex=index;
      this.getOrderList(index);
    },
    onPay(orderId) {
      Dialog.confirm({
        title: "pay",
        message: "The order is about to be paid",
        confirmButtonText: "confirm",
        cancelButtonText: "cancel",
      })
        .then(() => {
          this.btnLoading=true;
          payOrder({
            orderNo: orderId,
          }).then((res) => {
            if(res.code==200){
              Toast('Payment successful');
              this.getOrderList(); 
            }else{
              Toast(res.msg);
            }
          }).finally(()=>{
            this.btnLoading=false;
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    openHotelChat() {
      openChat1();
    },
    fullUrl1(p) {
      if (!p) return "";
      return nowLocationUrl + p;
    },

    async getLunBoHotel() {
      const res = await lunbo({ is_index: 0 });
      if (res.code === 200) {
        this.images = Array.isArray(res.data) ? res.data : res.data?.list || [];
      }
      console.log("酒店轮播图：", res.data);
    },
    getOrderList(index) {
      Toast.loading({
        message: 'loading...',
        duration:0
      });

      orderList({
        status:index || 0,
        page: 1,
        size: 999,
      }).then((res) => {
        this.orderData = res.data;
      }).finally(()=>{
        Toast.clear();
      });
    }
  },
  mounted() {
    this.getLunBoHotel();

    this.getOrderList();
  },
};
</script>

<style lang="scss" scoped>
.order {
  // padding: 5px;
  .tab-box {
    display: flex;
    & > div {
      flex: 0 0 33%;
      display: flex;
      justify-content: center;
      height: 120px;
      align-items: center;
      color: #8d8d8d;
      &.active {
        color: #000;
      }
    }
  }
  .content {
    padding: 0 20px;
    .list {
      border-bottom: 1px solid #eee;
      margin-bottom: 2rem;
      .header {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .pr-detail {
        display: flex;
        margin-top: 30px;
        margin-bottom: 30px;
        .pr-left {
          width: 45%;
        }
        .pr-right {
          margin-left: 20px;
          .title {
            font-size: 1.1rem;
            font-weight: bold;
          }
          .tag {
            margin: 30px 0;
            span {
              background: #755153;
              padding: 5px 10px;
              border-radius: 5px;
              color: #fff;
              font-size: 0.8rem;
            }
          }
          .bb {
            margin-bottom: 20px;
            span {
              font-size: 1.1rem;
              background: #000;
              padding: 5px 20px;
              color: #fff;
            }
          }
          .num {
            margin-bottom: 20px;
            display: flex;
            font-weight: bold;
            justify-content: flex-end;
          }
          .desc {
            color: #848484;
            font-size: 0.8rem;
            display: flex;
            justify-content: flex-end;
          }
        }
      }
      .desc-list {
        display: flex;
        justify-content: space-between;
        color: #787878;
        margin-bottom: 15px;
      }
    }
  }
}
.van-button.border-none {
  border: none;
}
</style>
