<template>
  <view class="show_card">
    <view class="show_card_title"> 处理日志 </view>
    <view class="show_card_content">
      <hs-empty v-if="!useModel?.logsData?.value?.length" />
      <up-steps direction="column" :dot="true" :current="useModel?.logsData?.value?.length - 1">
        <up-steps-item v-for="(i, index) in useModel?.logsData?.value" :key="`log_item_${index}`">
          <template #desc>
            <view class="desc_title">
              <view>
                工单进度：<hs-enum-tag :value="i?.status" :Enums="HouseWorkOrdersStatusEnum" />
              </view>
              <!-- <view>操作人：{{ i?.company_employee?.name || '-' }}</view> -->
            </view>
            <view class="desc_content">
              {{ i?.description }}
            </view>
            <view class="attachments">
              <view
                v-for="(k, index) in i?.attachments"
                :key="`attachment_${index}`"
                class="attachment_item"
              >
                <image :src="k?.url" mode="heightFix" />
              </view>
            </view>
            <view class="created_at">{{ i?.created_at }}</view>
          </template>
        </up-steps-item>
      </up-steps>
    </view>
  </view>
</template>
<script setup lang="ts">
import { HouseWorkOrdersStatusEnum } from '@/gen/Enums'
import useModel from '../model'
</script>
<style lang="scss" scoped>
.desc_title {
  color: #333333;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.desc_content {
  color: #666;
  font-size: 28rpx;
  padding: 10rpx 0 0 0;
}
.attachments {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 20rpx 0 0 0;
  .attachment_item {
    width: 140rpx;
    height: 140rpx;
    overflow: hidden;
    border-radius: 15rpx;
  }
  image {
    width: 140rpx;
    height: 140rpx;
    border-radius: 15rpx;
  }
}
.created_at {
  padding: 10rpx 0 30rpx 0;
  color: #999;
  font-size: 24rpx;
}
</style>
