<template>
    <view>
        <MBLoading v-if="loading" />
        <uni-card
            v-for="item in sortedData"
            :key="item.goodsname"
            :title="item.goodsname"
        >
            <view class="context">
                <view class="label">
                    <text>操作人员:</text>
                    <text>{{ item.userName }}</text>
                </view>
                <view class="label">
                    <text>操作日期:</text>
                    <text>{{ item.editdate.substring(0, 16) }}</text>
                </view>
                <view class="label">
                    <text>操作内容:</text>
                    <text>{{item.memo }}</text>
                </view>
            </view>
        </uni-card>
        <view v-if="!sortedData || sortedData.length === 0" class="empty-data">
            <text>暂无操作日志</text>
        </view>
    </view>
</template>

<script setup>
import { defineProps } from 'vue'
import { computed } from "vue";
import MBLoading from "@/components/MB/MBLoading.vue";

const props = defineProps({
    logList: {
        type: Array,
        default: () => []
    },
    loading: {
        type: Boolean,
        default: false
    }
})
const sortedData = computed(() => {
  // 创建原数组的副本，然后排序
  const data = [...props.logList];
  // 按editdate降序排序（最新的在前）
  return data.sort((a, b) => new Date(b.editdate) - new Date(a.editdate));
})
console.log(props.logList)
</script>

<style scoped>
.context {
    font-size: 14px;
}
.context .label {
    font-size: 14px;
}
.empty-data {
    text-align: center;
    padding: 30px;
    color: #999;
    font-size: 14px;
}
.context{
	grid-template-columns:repeat(1, minmax(0, 1fr))
}
</style>