<template>
  <view class="bill-list" v-if="billList.length > 0">
    <view
      class="list-cell"
      v-for="(bill, index) in billList"
      :key="index"
      @tap="goLatestBill(bill.url, index)"
    >
      <view
        class="icon"
        :class="index === 0 ? 'icon-new' : 'icon-normal'"
      ></view>
      <view class="right">
        <view class="bill-name">{{
          bill.billTitle ? bill.shopName + bill.billTitle : bill.billName
        }}</view>
        <view class="bottom">
          <view class="detail">查看详情</view>
          <view class="new" v-if="index === 0 && !newOrder">新</view>
          <view class="timer">{{ bill.date }}</view>
        </view>
      </view>
    </view>
  </view>

  <jx-empty title="没有发现账单" v-else />

  <!-- 公共组件 -->
  <jx-loading />
</template>

<script lang="ts" setup>
import JxEmpty from '@/components/jx-empty/jx-empty.vue'
import { store } from '@/store'
import { getStorage } from '@/utils/storage'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { Ref, ref } from 'vue'

interface BillListType {
  billName: string
  billTitle: string
  date: string
  id: number
  shopName: string
  storeId: string
  url: string
}
const billList: Ref<Array<BillListType>> = ref([
  {
    billName: '',
    billTitle: '',
    date: '',
    id: 0,
    shopName: '',
    storeId: '',
    url: '',
  },
])
onLoad((options) => {
  billList.value = JSON.parse(options?.billList)
})

function goLatestBill(url: string, index: string | number) {
  uni.navigateTo({
    url: `/subPages/merchantChild/billDetaile/billDetaile?url=${url}&index=${index}`,
  })
}

/**
 * 是否有新账单
 */
const newOrder = ref<boolean>(true)
onShow(() => {
  newOrder.value = getStorage('newBillUrl') === store.state.serveInfo.orderUrl
})
</script>

<style lang="scss" scoped>
@import './bill.scss';
</style>