<template>
  <div>
  <el-dialog
    title="服务日志"
    :visible.sync="visible"
    width="80%"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div class="dialog-header-actions">
      <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd">新增服务日志</el-button>
    </div>
    <div v-loading="loading">
      <div v-if="feedbackList.length === 0" class="no-data">
        <el-empty description="暂无服务日志数据"></el-empty>
      </div>
      <div v-else style="height: 500px; overflow-y: auto;">
        <div v-for="(item, index) in feedbackList" :key="item.id" class="feedback-item">
          <el-card class="feedback-card" shadow="hover">
            <div slot="header" class="feedback-header">
              <span class="feedback-title">服务记录 #{{ index + 1 }}</span>
              <div class="header-right">
                <span class="feedback-time">{{ formatTime(item.createTime) }}</span>
                <el-button type="text" size="small" icon="el-icon-edit" @click="handleEdit(item.id)">编辑</el-button>
              </div>
            </div>
            
            <div class="feedback-content">
              <!-- 操作人员信息 -->
              <div class="operator-info">
                <el-tag type="info" size="small">
                  <i class="el-icon-user"></i>
                  {{ item.createUserName || '无' }}
                </el-tag>
                <span class="operator-text">操作人员</span>
              </div>

              <!-- 备注信息 -->
              <div class="remark-section" v-if="item.remark">
                <h4 class="section-title">
                  <i class="el-icon-edit"></i>
                  反馈备注
                </h4>
                <div class="remark-content">{{ item.remark }}</div>
              </div>

              <!-- 科技部备注 -->
              <div class="remark-section" v-if="item.kjbRemark">
                <h4 class="section-title">
                  <i class="el-icon-edit-outline"></i>
                  科技部备注
                </h4>
                <div class="remark-content">{{ item.kjbRemark }}</div>
              </div>

              <!-- 服务前图片 -->
              <div class="image-section" v-if="item.beforeImage">
                <h4 class="section-title">
                  <i class="el-icon-picture"></i>
                  服务前图片
                </h4>
                <div class="image-gallery">
                  <div 
                    v-for="(img, imgIndex) in parseImages(item.beforeImage)" 
                    :key="imgIndex"
                    class="image-item"
                    @click="previewImage(baseUrl + img.url)"
                  >
                    <el-image
                      :src="baseUrl + img.url"
                      :preview-src-list="getPreviewList(item.beforeImage)"
                      fit="cover"
                      class="feedback-image"
                    >
                      <div slot="error" class="image-error">
                        <i class="el-icon-picture-outline"></i>
                        <span>图片加载失败</span>
                      </div>
                    </el-image>
                    <!-- <div class="image-name">{{ img.name }}</div> -->
                  </div>
                </div>
              </div>

              <!-- 服务后图片 -->
              <div class="image-section" v-if="item.afterImage">
                <h4 class="section-title">
                  <i class="el-icon-picture"></i>
                  服务后图片
                </h4>
                <div class="image-gallery">
                  <div 
                    v-for="(img, imgIndex) in parseImages(item.afterImage)" 
                    :key="imgIndex"
                    class="image-item"
                    @click="previewImage(baseUrl + img.url)"
                  >
                    <el-image
                      :src="baseUrl + img.url"
                      :preview-src-list="getPreviewList(item.afterImage)"
                      fit="cover"
                      class="feedback-image"
                    >
                      <div slot="error" class="image-error">
                        <i class="el-icon-picture-outline"></i>
                        <span>图片加载失败</span>
                      </div>
                    </el-image>
                    <!-- <div class="image-name">{{ img.name }}</div> -->
                  </div>
                </div>
              </div>

              <!-- 时间信息 -->
              <!-- <div class="time-info">
                <div class="time-item">
                  <span class="time-label">创建时间：</span>
                  <span class="time-value">{{ formatTime(item.createTime) }}</span>
                </div>
                <div class="time-item" v-if="item.updateTime && item.updateTime !== item.createTime">
                  <span class="time-label">更新时间：</span>
                  <span class="time-value">{{ formatTime(item.updateTime) }}</span>
                </div>
              </div> -->
            </div>
          </el-card>
        </div>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关闭</el-button>
    </div>

  </el-dialog>
      
    <!-- 服务日志表单弹窗 -->
    <ServiceLogFormDialog ref="serviceLogFormDialog" @refresh="getFeedbackData" />
  </div>
</template>

<script>
import request from '@/utils/request'
import ServiceLogFormDialog from './ServiceLogFormDialog'

export default {
  name: 'ServiceLogDialog',
  components: {
    ServiceLogFormDialog
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      visible: false,
      loading: false,
      feedbackList: [],
      consumeId: null
    }
  },
  methods: {
    init(consumeId) {
      this.consumeId = consumeId
      this.visible = true
      this.getFeedbackData()
    },
    
    async getFeedbackData() {
      if (!this.consumeId) return
      this.visible = true
      this.loading = true
      try {
        const res = await request({
          url: `/api/Extend/lqxhfeedback/GetByConsumeId/${this.consumeId}`,
          method: 'GET'
        })
        
        if (res.code === 200) {
          this.feedbackList = res.data || []
        } else {
          this.$message.error(res.msg || '获取服务日志失败')
          this.feedbackList = []
        }
      } catch (error) {
        console.error('获取服务日志失败:', error)
        this.$message.error('获取服务日志失败')
        this.feedbackList = []
      } finally {
        this.loading = false
      }
    },
    
    parseImages(imageStr) {
      if (!imageStr) return []
      try {
        return JSON.parse(imageStr)
      } catch (error) {
        console.error('解析图片数据失败:', error)
        return []
      }
    },
    
    getPreviewList(imageStr) {
      const images = this.parseImages(imageStr)
      return images.map(img => this.baseUrl + img.url)
    },
    
    previewImage(url) {
      // Element UI 的图片预览功能会自动处理
    },
    
    formatTime(timestamp) {
      if (!timestamp) return '无'
      const date = new Date(timestamp)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      })
    },
    
    handleClose() {
      this.visible = false
      this.feedbackList = []
      this.consumeId = null
    },
    
    handleAdd() {
      if (!this.consumeId) {
        this.$message.warning('消费记录ID不存在')
        return
      }
      this.visible = false
      this.$refs.serviceLogFormDialog.init(this.consumeId)
    },
    
    handleEdit(logId) {
      if (!this.consumeId) {
        this.$message.warning('消费记录ID不存在')
        return
      }
      this.visible = false
      this.$refs.serviceLogFormDialog.init(this.consumeId, logId)
    }
  }
}
</script>

<style lang="scss" scoped>
.feedback-item {
  margin-bottom: 20px;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.feedback-card {
  border-radius: 12px;
  
  ::v-deep .el-card__header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 12px 20px;
  }
  
  ::v-deep .el-card__body {
    padding: 20px;
  }
}

.feedback-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .feedback-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }
  
  .feedback-time {
    font-size: 14px;
    color: #909399;
  }
}

.feedback-content {
  .operator-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    
    .operator-text {
      margin-left: 8px;
      font-size: 14px;
      color: #606266;
    }
  }
  
  .section-title {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: #303133;
    margin: 20px 0 12px 0;
    
    i {
      margin-right: 6px;
      color: #409EFF;
    }
  }
  
  .remark-section {
    .remark-content {
      background-color: #f8f9fa;
      padding: 12px 16px;
      border-radius: 8px;
      border-left: 4px solid #409EFF;
      font-size: 14px;
      line-height: 1.6;
      color: #606266;
    }
  }
  
  .image-section {
    .image-gallery {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      
      .image-item {
        position: relative;
        cursor: pointer;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s ease;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        .feedback-image {
          width: 120px;
          height: 120px;
          border-radius: 8px;
        }
        
        .image-error {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 120px;
          height: 120px;
          background-color: #f5f7fa;
          color: #909399;
          
          i {
            font-size: 24px;
            margin-bottom: 8px;
          }
          
          span {
            font-size: 12px;
          }
        }
        
        .image-name {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
          color: white;
          padding: 8px;
          font-size: 12px;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  
  .time-info {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e9ecef;
    
    .time-item {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .time-label {
        font-size: 14px;
        color: #909399;
        min-width: 80px;
      }
      
      .time-value {
        font-size: 14px;
        color: #606266;
      }
    }
  }
}

.no-data {
  text-align: center;
  padding: 40px 0;
}

.dialog-header-actions {
  margin-bottom: 20px;
  text-align: left;
}

.feedback-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .header-right {
    display: flex;
    align-items: center;
    gap: 12px;
  }
}

.dialog-footer {
  text-align: right;
}

// 响应式设计
@media (max-width: 768px) {
  .feedback-content {
    .image-section .image-gallery {
      .image-item .feedback-image {
        width: 100px;
        height: 100px;
      }
      
      .image-item .image-error {
        width: 100px;
        height: 100px;
      }
    }
  }
}
</style>
