<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom'
  }
}
</route>

<template>
  <view class="h-100vh flex flex-col">
    <TopNavigation title="下发记录"></TopNavigation>
    <view class="bg-orange-100 p-2 color-orange text-3.3">
      此处仅展示考勤组中打卡设备的下发记录
    </view>
    <scroll-view scroll-y class="flex-1 p-3.5 box-border">
      <view
        @click="goDetail"
        v-for="(item, index) in recordList"
        :key="index"
        class="bg-white rounded-1 p-3 mb-2"
      >
        <view class="flex flex-row flex-justify-between items-center">
          <view class="flex flex-col">
            <view>{{ item.dec }}</view>
            <view class="color-gray mt-1.5">{{ item.time }}</view>
          </view>
          <view class="flex flex-row items-center">
            <view class="color-[#3372FA]">{{ item.status }}</view>
            <view class="i-carbon-chevron-right ml-2 text-2.5"></view>
          </view>
        </view>
        <view class="hpx bg-gray-100 my-3"></view>
        <view class="flex flex-row flex-justify-around">
          <view class="flex flex-col items-center">
            <view class="font-bold text-5">{{ item.success }}</view>
            <view class="text-3">成功</view>
          </view>
          <view class="flex flex-col items-center">
            <view class="font-bold text-5">{{ item.fail }}</view>
            <view class="text-3">失败</view>
          </view>
          <view class="flex flex-col items-center">
            <view class="font-bold text-5">{{ item.total }}</view>
            <view class="text-3">总数</view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view
      class="flex flex-row flex-justify-between px-4 py-3 box-border border-solid border-0 border-t-1 border-gray-200"
    >
      <view class="flex-1 mr-2">
        <wd-button custom-style="background:#E9EBEF;color:#3372FA" :round="false" block>
          刷新纪录
        </wd-button>
      </view>
      <view class="flex-1 ml-2">
        <wd-button :round="false" block>手动下发</wd-button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  const recordList = ref([
    {
      time: '2025-01-07 10:19:28',
      dec: '系统自动操作下发',
      status: '已完成',
      success: 1,
      fail: 1,
      total: 1
    },
    {
      time: '2025-01-07 10:19:28',
      dec: '系统自动操作下发',
      status: '已完成',
      success: 1,
      fail: 1,
      total: 1
    },
    {
      time: '2025-01-07 10:19:28',
      dec: '系统自动操作下发',
      status: '已完成',
      success: 1,
      fail: 1,
      total: 1
    },
    {
      time: '2025-01-07 10:19:28',
      dec: '系统自动操作下发',
      status: '已完成',
      success: 1,
      fail: 1,
      total: 1
    },
    {
      time: '2025-01-07 10:19:28',
      dec: '系统自动操作下发',
      status: '已完成',
      success: 1,
      fail: 1,
      total: 1
    },
    {
      time: '2025-01-07 10:19:28',
      dec: '系统自动操作下发',
      status: '已完成',
      success: 1,
      fail: 1,
      total: 1
    }
  ])
  const goDetail = () => {
    uni.navigateTo({
      url: '/pages/attendance/issue-record-detail'
    })
  }
  //
</script>

<style lang="scss" scoped>
  //
</style>
