<script lang="ts" setup>
import {appShopSettlementListGet} from "@/service";
import usePage from "@/hooks/usePage";

const {t} = useI18n();

function appShopSettlementList(pageNum: number, pageSize: number) {
  return new Promise(resolve => {
    appShopSettlementListGet({
      options: {
        query: {
          pageNum: pageNum,
          pageSize: pageSize,
        }
      }
    }).then(res => {
      console.log(res)
      resolve({rows: res.data})
    })
  })
}

const {paging, loading, firstLoaded, dataList, queryList} = usePage(appShopSettlementList)

function handleClickAdd() {
  uni.navigateTo({
    url: '/pages-user/pages/store-settle-in/index?from=add',
    events: {
      'refresh': () => {
        paging.value.refresh()
      }
    }
  })
}

function handleClickItem(item: any) {
  uni.navigateTo({
    url: `/pages-user/pages/store-settle-in/index?from=add&auditStatus=${item.auditStatus}&rejectReason=${item.rejectReason || ''}&id=${item.id}`,
  })
}

onShow(() => {
  nextTick(() => {
    paging.value.refresh()
  })
})
</script>

<template>
  <z-paging ref="paging" v-model="dataList" :auto="false" @query="queryList">
    <template #top>
      <navbar :title="t('pages.mine.storeAuth')"/>
    </template>
    <!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
    <!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
    <view class="p-30rpx">
      <view v-for="(item,index) in dataList" :key="index"
            class="flex-center-sb bg-white rounded-16rpx px-30rpx py-36rpx mb-30rpx last:mb-0"
            @click="handleClickItem(item)">
        <view class="">
          <text class="text-30rpx text-#333 font-500">{{ item.shopName }}</text>
          <view class="text-24rpx text-#999 line-clamp-1">{{ item.detailAddress }}</view>
        </view>
        <view class="flex items-center shrink-0 ml-20rpx">
          <text v-if="item.auditStatus === 1" class="text-28rpx text-yellow">{{
              t('common.auditStatus.submitted')
            }}
          </text>
          <text v-if="item.auditStatus === 3" class="text-28rpx text-red-6">{{ t('common.auditStatus.reject') }}</text>
          <image class="w-28rpx h-28rpx ml-4rpx" src="@img/chef/115.png"></image>
        </view>
      </view>
    </view>
    <template #bottom>
      <fixed-bottom-large-btn
          :text="t('common.add')"
          class="z-100"
          fixed
          @click="handleClickAdd"
      />
    </template>
  </z-paging>
</template>

<style lang="scss" scoped>

</style>