<template>
  <view class="emergency_card">
    <view class="emergency_card_title"> 跟进记录 </view>
    <view class="show_card_content">
      <hs-empty v-if="!useModel?.logsData?.value?.length" height="20vh" />
      <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> {{ i?.node_name }} </view>
              <!-- <view>操作人：{{ i?.company_employee?.name || '-' }}</view> -->
            </view>
            <view class="desc_content" v-if="i?.content || i?.handled_result">
              内容：{{ i?.content || i?.handled_result || '-' }}
            </view>
            <view v-if="i?.introspection" class="desc_content">
              总结与反思：{{ i?.introspection }}
            </view>
            <MyModalShow v-if="i?.old_data" :data="i?.old_data" />
            <view class="attachments">
              <view
                v-for="(k, index) in i?.attachments"
                :key="`attachment_${index}`"
                class="attachment_item"
                @click="handlePreview(index, i?.attachments)"
              >
                <image :src="k?.url" mode="aspectFill" />
              </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'
import MyModalShow from './ModalShow.vue'

const handlePreview = (index: number | string, list: any) => {
  uni.previewImage({
    urls: list?.map((i: { url: string }) => i?.url || ''),
    current: index
  })
}
</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: 80rpx;
    height: 80rpx;
    overflow: hidden;
    padding-right: 10rpx;
  }
  image {
    width: 100%;
    height: 100%;
  }
}
.created_at {
  padding: 10rpx 0 30rpx 0;
  color: #999;
  font-size: 24rpx;
}
</style>
