<template>
  <div class="workflow-log-container">
    <a-spin size="large" :spinning="spinning">
      <a-empty v-if="!logList.length" description="暂无流转记录" />
      <a-steps v-else direction="vertical" progress-dot class="steps">
        <a-step v-for="(log, index) in logList" :key="log.id" status="finish">
          <template #title>
            <span class="log-title">{{ log.operation }}</span>
          </template>
          <template #subTitle>
            <span class="log-sub-title">{{ getDesc(log.desc || log.f_desc) }}</span>
          </template>
          <template #description>
            <div :class="['log-card', index === 0 ? 'first-card' : '']">
              <div class="log-description">
                <div class="log-item">
                  <a-icon type="user" />
                  <span>操作人: <span class="highlight">{{ log.operator }}</span></span>
                </div>
                <div v-if="log.operation !== '转单'">
                  <div class="log-item" v-if="log.set_handler">
                    <a-icon type="solution" />
                    <span>设定下一环节处理者: <span class="highlight">{{ log.set_handler }}</span></span>
                  </div>
                  <div class="log-item" v-if="log.set_deadline">
                    <a-icon type="clock-circle" />
                    <span>设定下一环节截止时间: <span class="highlight">{{ log.set_deadline }}</span></span>
                  </div>
                </div>
                <div v-else>
                  <div class="log-item" v-if="log.set_handler">
                    <a-icon type="solution" />
                    <span>转单后处理者: <span class="highlight">{{ log.set_handler }}</span></span>
                  </div>
                </div>
                <div class="log-item" v-if="log.notes">
                  <a-icon type="message" />
                  <span>备注: <span class="highlight">{{ log.notes }}</span></span>
                </div>
                <div class="log-item" v-if="log.f_data && parseFData(log.f_data).length > 0">
                  <a-icon type="picture" />
                  <span>图片:</span>
                  <image-item :images="parseFData(log.f_data)" :width="100" :padding="5" />
                </div>
                <div class="log-item log-time">
                  <a-icon type="calendar" />
                  <span>操作时间: <span class="highlight">{{ log.date || log.f_date }}</span></span>
                </div>
              </div>
            </div>
          </template>
        </a-step>
      </a-steps>
    </a-spin>
  </div>
</template>

<script>
import { postByServiceName } from '@vue2-client/services/api/restTools'
import { workFlowViewApi } from '@vue2-client/services/api/workFlow'
import ImageItem from '@vue2-client/components/FileImageItem/ImageItem.vue'

export default {
  name: 'WorkflowLog',
  components: {
    ImageItem
  },
  props: {
    workflowId: {
      type: [String, Number],
      required: true
    }
  },
  data () {
    return {
      logList: [],
      spinning: true
    }
  },
  mounted () {
    postByServiceName(workFlowViewApi.getWorkFlowLog, {
      workflowId: this.workflowId
    }).then(res => {
      this.logList = res
      this.spinning = false
    })
  },
  methods: {
    getDesc (desc) {
      return desc?.replace('&gt;', '>')
    },
    parseFData (fData) {
      try {
        const parsedData = JSON.parse(fData)
        if (parsedData.imgs && Array.isArray(parsedData.imgs) && parsedData.imgs.length > 0) {
          return parsedData.imgs.map(img => ({
            id: img.id,
            url: img.f_downloadpath,
            name: img.f_real_name || img.f_filename
          }))
        }
        return []
      } catch (error) {
        console.error('解析f_data失败:', error)
        return []
      }
    }
  }
}
</script>

<style lang="less" scoped>
.workflow-log-container {
  padding: 16px;
  background-color: #f9fafc;
  border-radius: 8px;
  min-height: 300px;
}

.steps {
  padding: 8px 12px;

  ::v-deep {
    .ant-steps-item {
      padding-bottom: 24px;
    }

    .ant-steps-item-container {
      .ant-steps-item-tail {
        &::after {
          background-color: #e8eef7;
          width: 2px;
        }
      }
    }

    .ant-steps-item-icon {
      .ant-steps-icon-dot {
        background: #1890ff;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        transition: all 0.3s;
      }
    }

    .ant-steps-item:hover .ant-steps-icon-dot {
      transform: scale(1.2);
      box-shadow: 0 0 0 4px rgba(24, 144, 255, 0.2);
    }

    .ant-steps-item-content {
      width: calc(100% - 24px);
      margin-top: -4px;
      .ant-steps-item-title {
        display: flex;
        align-items: center;
      }
    }

    .log-title {
      font-size: 18px;
      font-weight: 600;
      color: #262626;
      transition: color 0.3s;
    }

    .log-sub-title {
      margin-left: 8px;
      color: #8c8c8c;
      font-size: 14px;
      font-weight: normal;
    }

    .log-card {
      margin: 12px 0 0 0;
      padding: 16px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      transition: all 0.3s;
      border-left: 3px solid #1890ff;

      &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
      }

      &.first-card {
        border-left: 3px solid #52c41a;
      }
    }

    .log-description {
      color: #595959;
      font-size: 14px;
      line-height: 1.8;
    }

    .log-item {
      display: flex;
      align-items: center;
      margin-bottom: 8px;

      .anticon {
        margin-right: 8px;
        color: #8c8c8c;
      }

      &.log-time {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px dashed #f0f0f0;
      }
    }

    .highlight {
      color: #262626;
      font-weight: 600;
    }
  }
}
</style>
