<template>
  <div class="my-page relative" style="min-height: 100vh;">
    <div v-if="is_first_load" class="loading relative">
      <PageInitLoading />
    </div>
    <div v-else class="ml30 mr30 pt30 pb60">
      <van-empty v-if="empty" description="暂无数据" />
      <!-- <van-list v-else v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> -->
      <div v-else-if="!is_show">  
        <template v-for="(item, index) in list" :key="index">
          <div class="relative my-allowance-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-28 font-bold" v-if="item.price">补贴金额<span class="font-34 text-color-theme ml10">{{item.price}}</span></h4>
                  <div>
                    <p class="font-24 fn-flex" v-if="item.city"><span class="wp30 color-999">购车城市</span><span
                        class="fn-flex-item">{{item.city}}</span></p>
                    <p class="font-24 fn-flex" v-if="item.biz"><span class="wp30 color-999">购车门店</span><span
                        class="fn-flex-item">{{item.biz}}</span></p>
                    <p class="font-24 fn-flex mt10" v-if="item.car"><span class="wp30 color-999">品牌车型</span><span
                        class="fn-flex-item">{{item.car}}</span></p>
                  </div>
                </div>
              </div>
              <div class="mt20">
                <van-steps :active="item.step" active-color="#f84803" active-icon="arrow-down">
                  <van-step v-for="(it,idx) in item.progress" :key="idx" @click.stop="handleClickStep(idx,item.step,item.id)">{{it}}</van-step>
                </van-steps>
              </div>
              <div class="mt20" v-if="item.btn_info&&Number(item.btn_info.show)">
                <van-row>
                  <van-col span="16" class="font-24 text-color-theme" style="line-height: 1.5;">
                    <span class="color-000">审核未通过:</span>{{ item.reason }}
                  </van-col>
                  <van-col span="8" class="text-right">
                    <van-button class="pl35 pr35" type="danger" plain size="small" round @click="handleGoToLink(item.btn_info.id)">提交资料</van-button>
                  </van-col>
                </van-row>
              </div>
              <div class="mt20 text-center font-24 text-color-theme" v-if="item.bind_btn_info.show">
                {{ item.bind_btn_info.tip }}
                <div class="mt15 text-center">
                  <van-button class="w10vw" type="danger" size="small" round @click="handleGoToBank(item.id)">{{ item.bind_btn_info.btText }}</van-button>
                </div>
              </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-allowance-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-28 font-bold" v-if="item.price">补贴金额<span class="font-34 text-color-theme ml10">{{item.price}}</span></h4>
                  <div>
                    <p class="font-24 fn-flex" v-if="item.biz"><span class="wp30 color-999">城市门店</span><span
                        class="fn-flex-item">{{item.biz}}</span></p>
                    <p class="font-24 fn-flex mt10" v-if="item.car"><span class="wp30 color-999">品牌车型</span><span
                        class="fn-flex-item">{{item.car}}</span></p>
                  </div>
                </div>
              </div>
              <div class="mt20">
                <van-steps :active="item.step" active-color="#f84803" active-icon="arrow-down">
                  <van-step v-for="(it,idx) in item.progress" :key="idx" @click.stop="handleClickStep(idx,item.step,item.id)">{{it}}</van-step>
                </van-steps>
              </div>
              <div class="mt20 text-right" v-if="item.btn_info&&Number(item.btn_info.show)">
                <van-button class="pl35 pr35" type="danger" plain size="small" round @click="handleGoToLink(item.btn_info.id)">提交资料</van-button>
              </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'
import { useRouter } from 'vue-router'
const router = useRouter()

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)

const onLoad = async () => {
  await getMySubidy()
};

const getMySubidy = async () => {
  loading.value = true;
  try {
    const response = await api.get('/auto/ucenter/subsidy', {
      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;
  }
};

// 在组件挂载时调用
onMounted( async () => {
  let appid = localStorage.getItem('app_id')
  if(appid) {
    await WechatUtils.init(appid);
    // 隐藏分享
    await WechatShare.hideAllNonBaseMenuItem();
  }
  await getMySubidy()
});


const handleClickStep = (index,cur_step,id) => {
  if (Number(cur_step) === Number(index)&&Number(index)===1) {
    handleGoToLink(id)
  }
};

const handleGoToLink = (id) => {
  if(id){
    router.push({ path: '/my/allowance/form', query: { id } })
  }
}

const handleGoToBank = (id) => {
  if(id){
    router.push({ path: '/my/bank', query: { subsidyId:id } })
  }
}
</script>

<style scoped lang="scss">
.ulib-rtl20 {
  border-top-left-radius: 20px;
}

.ulib-rbr20 {
  border-bottom-right-radius: 20px;
}

.my-allowance-item {
  ::v-deep {
    .van-steps {
      .van-step {
        padding-top: 20px;
        /* .van-step__title{
          font-size: 24px;
        } */
      }
    }
    .van-steps--horizontal{ 
      .van-steps__items{
        padding-bottom: 0;
      }
      .van-step__circle-container{
        top: 0;
      }
      .van-step__line{
        top: 0;
      }
    }
  }
}
</style>