<template>
  <view class="bg-white p-3 text-gray-400">
    <template v-if="checkerList && checkerList.length">
      <view v-for="item in checkerList" class="flex justify-between">
        <view>
          <view class="mb-1 text-gray-800">
            {{ item.checkerName }}
          </view>
          <view class="mb-1 text-xs">
            {{ item.remark }}
          </view>
          <view class="text-xs" v-if="+item.checkTime > 0">
            {{ dayjs(+item.checkTime).format('MM-DD HH:mm') }}
          </view>
        </view>
        <view class="flex flex-col justify-center">
          <view class="mb-1 text-green-600" v-if="item.status === 1"> 已通过 </view>
          <view class="mb-1 text-red-600" v-if="item.status === 2"> 已驳回 </view>
          <view v-if="+item.score > 0">
            <zwp-ring-timing mode="chart" :value="item.score" active-color="#F59E0B" :radius="30" :bar-width="4">
              <text class="text-yellow-500 font-medium">{{ item.score }}</text>
            </zwp-ring-timing>
          </view>
        </view>
      </view>
    </template>
    <u-empty text="暂无审核记录" mode="history" style="margin-top: 120rpx" v-else></u-empty>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import dayjs from 'dayjs';

const checkerList = ref([]);

onLoad(options => {
  getQueryCheckLog(options);
});

async function getQueryCheckLog(options) {
  try {
    const param = { deliverRecordId: options.deliverRecordId };
    const data = await uni.$u.api.queryCheckLog(param);
    checkerList.value = data;
  } catch (error) {
    console.log('error: ', error);
    uni.$ui.showToast('获取检查交付物历史失败');
  }
}
</script>
