<template>
  <div class="signature-recording">
    <div class="section-header">
      <div class="section-title">
        <a-icon type="sound" style="color: #1890FF;" />
        <span>签字与录音</span>
      </div>
    </div>

    <div class="section-content">
      <div class="signature-section" v-if="attachments.signature && attachments.signature.imageUrl">
        <div class="subsection-label"><a-icon type="edit" />用户签名</div>
        <div class="signature-container">
          <div v-if="attachments.signature && attachments.signature.imageUrl && !signatureImageError" class="signature-preview" @click="handlePreviewSignature">
            <img :src="attachments.signature.imageUrl" alt="用户签名" class="signature-image" @error="handleSignatureImageError" />
            <div class="preview-overlay"><a-icon type="eye" /><span>点击查看</span></div>
          </div>
          <div v-else class="signature-empty">
            <a-icon type="picture" />
            <span>{{ signatureImageError ? '签名加载失败' : '暂无签名' }}</span>
          </div>
        </div>
        <div class="signature-info" v-if="attachments.signature">
          <a-icon type="clock-circle" />
          <span>签名时间：{{ attachments.signature.displayTime || attachments.signature.signTime }}</span>
        </div>
      </div>

      <div class="signature-section" v-if="attachments.refusephotos && attachments.refusephotos.length > 0">
        <div class="subsection-label"><a-icon type="camera" />用户照片</div>
        <div class="photos-container">
          <div v-for="(photo, index) in attachments.refusephotos" :key="index" v-show="!refusePhotosErrors[index]" class="photo-preview" @click="handlePreviewPhoto(photo)">
            <img :src="photo.imageUrl" :alt="`用户照片${index + 1}`" class="photo-image" @error="handleRefusePhotoError(index)" />
            <div class="preview-overlay"><a-icon type="eye" /><span>点击查看</span></div>
          </div>
        </div>
        <div class="photos-info" v-if="attachments.refusephotos && attachments.refusephotos.length > 0">
          <a-icon type="info-circle" />
          <span>共{{ attachments.refusephotos.length }}张照片</span>
        </div>
      </div>

      <div class="recording-section">
        <div class="subsection-label"><a-icon type="customer-service" />录音文件</div>
        <div class="recording-list">
          <div v-if="!attachments.recordings || attachments.recordings.length === 0" class="recording-empty">
            <a-icon type="audio" /><span>暂无录音</span>
          </div>
          <recording-player
            v-for="recording in attachments.recordings"
            :key="recording.id"
            :recording="recording"
            :is-playing="playingId === recording.id"
            @play="handlePlay"
            @pause="handlePause"
            @ended="handleEnded"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import RecordingPlayer from './RecordingPlayer.vue'

export default {
  name: 'SignatureRecording',
  components: { RecordingPlayer },
  props: {
    attachments: { type: Object, default: () => ({ signature: null, recordings: [] }) }
  },
  data () {
    return {
      playingId: null,
      signatureImageError: false,
      refusePhotosErrors: {}
    }
  },
  watch: {
    attachments: {
      handler (newVal, oldVal) {
        if (newVal !== oldVal) {
          this.resetPlayingState()
          this.signatureImageError = false
          this.refusePhotosErrors = {}
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleSignatureImageError () { this.signatureImageError = true },
    handleRefusePhotoError (index) { this.$set(this.refusePhotosErrors, index, true) },
    handlePreviewSignature () {
      if (this.attachments.signature) this.$emit('preview-signature', this.attachments.signature.imageUrl)
    },
    handlePreviewPhoto (photo) {
      if (photo) this.$emit('preview-signature', photo)
    },
    handlePlay (recording) { this.playingId = recording.id },
    handlePause () { this.playingId = null },
    handleEnded () { this.playingId = null },
    resetPlayingState () { this.playingId = null }
  }
}
</script>

<style lang="less" scoped>
.signature-recording { border: 1px solid #f0f0f0; border-radius: 8px; background: white; height: 100%; display: flex; flex-direction: column; }
.section-header { padding: 16px; border-bottom: 1px solid #f0f0f0; background: #fafafa; border-radius: 8px 8px 0 0; }
.section-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: #1f2937; }
.section-content { flex: 1; padding: 3%; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }
.subsection-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b7280; font-weight: 500; margin-bottom: 12px; }
.photos-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-bottom: 8px; }
.photo-preview { position: relative; width: 100%; height: 120px; border: 2px dashed #d1d5db; border-radius: 8px; cursor: pointer; overflow: hidden; }
.photo-preview:hover { border-color: #3b82f6; background: #f8faff; }
.photo-image { width: 100%; height: 100%; object-fit: cover; background: white; }
.signature-preview { position: relative; width: 100%; height: 120px; border: 2px dashed #d1d5db; border-radius: 8px; cursor: pointer; overflow: hidden; }
.signature-preview:hover { border-color: #3b82f6; background: #f8faff; }
.signature-image { width: 100%; height: 100%; object-fit: contain; background: white; }
.preview-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(59, 130, 246, 0.8); color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; opacity: 0; transition: opacity 0.3s ease; font-size: 12px; }
.photo-preview:hover .preview-overlay, .signature-preview:hover .preview-overlay { opacity: 1; }
.signature-empty { width: 100%; height: 120px; border: 2px dashed #d1d5db; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #9ca3af; background: #f9fafb; }
.signature-info { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: #6b7280; }
.recording-list { display: flex; flex-direction: column; gap: 12px; min-height: 80px; }
.recording-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 80px; color: #9ca3af; gap: 8px; }
</style>
