<template>
  <div class="my-page relative" style="min-height: 100vh;">
    <div v-if="is_first_load" class="loading relative">
      <PageInitLoading />
    </div>
    <div v-elsed class="ml30 mr30 pt30 pb60">
      <van-empty v-if="empty" description="暂无数据" />
      <div v-else-if="!is_show"> 
        <template v-for="(item, index) in list" :key="index">
          <div class="relative my-order-item box-shadow-darkGray mb40 ulib-r20 overflowhidden">
            <div class="bg-f2 pl20 pr20 pt15 pb15 color-666"><p class="font-24" style="word-break:break-all;">订单编号: {{item.sid}}</p></div>
            <div class="pt20 pb20 pl30 pr30">
              <div class="fn-flex">
                <div class="ulib-r20 overflowhidden">
                  <van-image class="imgsize-200X150 block" :fit="'cover'" :src="item.logo" />
                </div>
                <div class="fn-flex-item fn-flex fn-flex-column justify-between ml30">
                  <h4 class="font-30 font-bold">{{item.title}}</h4>
                  <div>
                    <p v-if="item.guide_price" class="font-24">指导价{{item.guide_price}}</p>
                    <p v-if="item.bill_price" class="font-24 mt10">开票价格<span class="font-34 text-color-theme">{{item.bill_price}}</span></p>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="item.status" class="absolute right-0 bottom-0">
              <div 
                class="pt10 pb10 pl20 pr20 ulib-rtl20 ulib-rbr20 font-20"
                :style="{'background-color':'#79ccb9',color:'#fff'}"
              >{{item.status}}</div>
            </div>
          </div>
        </template>
      </div>
      <van-list v-else v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <template v-for="(item, index) in list" :key="index">
          <div class="relative my-order-item box-shadow-darkGray mb40 ulib-r20 overflowhidden">
            <div class="bg-f2 pl20 pr20 pt15 pb15 color-666"><p class="font-24" style="word-break:break-all;">订单编号: {{item.sid}}</p></div>
            <div class="pt20 pb20 pl30 pr30">
              <div class="fn-flex">
                <div class="ulib-r20 overflowhidden">
                  <van-image class="imgsize-200X150 block" :fit="'cover'" :src="item.logo" />
                </div>
                <div class="fn-flex-item fn-flex fn-flex-column justify-between ml30">
                  <h4 class="font-30 font-bold">{{item.title}}</h4>
                  <div>
                    <p v-if="item.guide_price" class="font-24">指导价{{item.guide_price}}</p>
                    <!--
                    <p v-if="item.bill_price" class="font-24 mt10">开票价格<span class="font-34 text-color-theme">{{item.bill_price}}</span></p>
                    -->
                  </div>
                </div>
              </div>
            </div>
            <div v-if="item.status" class="absolute right-0 bottom-0">
              <div 
                class="pt10 pb10 pl20 pr20 ulib-rtl20 ulib-rbr20 font-20"
                :style="{'background-color':'#79ccb9',color:'#fff'}"
              >{{item.status}}</div>
            </div>
          </div>
        </template>
      </van-list>
    </div>
    <SideMenu :name="'我的'"/>
  </div>
</template>

<script setup>
import WechatUtils,{ WechatShare } from '@/utils/wechat'
import api from '@/utils/api'
import { ref, onMounted } from 'vue'
import PageInitLoading from '@/components/PageInitLoading.vue'
import SideMenu from '@/components/SideMenu.vue'

const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const totalCount = ref(0);
const page  = ref(1);
const empty = ref(false);
const is_show = ref(0)

const is_first_load = ref(true)

onMounted(async () => {
  let appid = localStorage.getItem('app_id')
  if(appid) {
    await WechatUtils.init(appid);
    // 隐藏分享
    await WechatShare.hideAllNonBaseMenuItem();
  }
  await getMyOrder()
});
const onLoad = async() => {
  // 异步更新数据
  await getMyOrder()
};

const getMyOrder = async() => {
  loading.value = true;
  try {
    const response = await api.get('/auto/ucenter/orders', {
      page: page.value,
      size: 100
    });
    
    if (response.code === 200) {
      if (page.value === 1) {
        list.value = [];
        if(response.data.list.length === 0){
          empty.value = true;
        }
      }
      list.value = response.data.list.concat(list.value);
      totalCount.value = response.data.count;
      is_show.value = Number(response.data.show)
      if  (list.value.length >= totalCount.value) {
        finished.value = true;
      }
      page.value++;
    } else {
      showToast(response.message || '获取补贴列表失败');
    }
  } catch (error) {
    console.error('获取补贴列表异常:', error);
    showToast('网络异常，请稍后重试');
  } finally {
    is_first_load.value = false;
    loading.value = false;
  }
};

</script>

<style>
  .ulib-rtl20{
    border-top-left-radius: 20px;
  }
  .ulib-rbr20{
    border-bottom-right-radius: 20px;
  }
</style>