<template>
  <div class="transaction-detail-container" v-loading="loading">
    <!-- 详情主体 -->
    <el-tabs v-model="activeTab">
      <!-- 总体信息 -->
      <el-tab-pane label="总体信息" name="overall">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>总体信息</span>
          </div>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="对方单位名称">{{ detailData.totalInfo && detailData.totalInfo.unitName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="总金额">
              <span class="amount">{{ formatAmount(detailData.totalInfo && detailData.totalInfo.totalAmount) }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="已匹配金额">
              <span class="amount matched">{{ formatAmount(detailData.totalInfo && detailData.totalInfo.matchedAmount) }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="未匹配金额">
              <span class="amount unmatched">{{ formatAmount(detailData.totalInfo && detailData.totalInfo.unmatchedAmount) }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-tab-pane>

      <!-- 流水信息 -->
      <el-tab-pane label="流水信息" name="transaction">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>流水信息</span>
          </div>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="借贷标">
              <el-tag :type="(detailData.transaction && detailData.transaction.dcFlagCode === '0') ? 'danger' : 'success'">
                {{ (detailData.transaction && detailData.transaction.dcFlagCode === '0') ? '借（支出）' : '贷（收入）' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="发生额">
              <span class="amount">{{ formatAmount(detailData.transaction && detailData.transaction.occuAmt) }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="入账日期">{{ detailData.transaction && detailData.transaction.inaccDate || '-' }}</el-descriptions-item>
            <el-descriptions-item label="对方单位名称">{{ detailData.transaction && detailData.transaction.unitName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="支付方式">{{ getPaymentModeName(detailData.transaction && detailData.transaction.payModeName) }}</el-descriptions-item>
            <el-descriptions-item label="对方账号">{{ detailData.transaction && detailData.transaction.opsAccname || '-' }}</el-descriptions-item>
            <el-descriptions-item label="凭证号">{{ detailData.transaction && detailData.transaction.txVchrNo || '-' }}</el-descriptions-item>
            <el-descriptions-item label="收据编号">{{ detailData.transaction && detailData.transaction.receiptNo || '-' }}</el-descriptions-item>
            <el-descriptions-item label="联系人">{{ detailData.transaction && detailData.transaction.conterName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="流水账户">{{ detailData.transaction && detailData.transaction.openaccBankName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="摘要">{{ detailData.transaction && detailData.transaction.summ || '-' }}</el-descriptions-item>
            <el-descriptions-item label="备注">{{ detailData.transaction && detailData.transaction.remark || '-' }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-tab-pane>

      <!-- 匹配账单（新增的独立标签页） -->
      <el-tab-pane label="匹配账单" name="matchBills">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>匹配账单</span>
          </div>
          <el-table :data="detailData.relatedBills || []" border style="width: 100%">
            <el-table-column prop="unitName" label="对方名称" min-width="120" show-overflow-tooltip />
            <el-table-column prop="feeTypeName" label="费用类型" min-width="120" show-overflow-tooltip />
            <el-table-column label="费用周期" min-width="200">
              <template slot-scope="scope">
                {{ scope.row.billingStartDate || '-' }} 至 {{ scope.row.billingEndDate || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="receivableAmount" label="应收金额" min-width="120" align="right">
              <template slot-scope="scope">
                {{ formatAmount(scope.row.receivableAmount) }}
              </template>
            </el-table-column>
          </el-table>
          <div v-if="!detailData.relatedBills || detailData.relatedBills.length === 0" class="empty-data">
            暂无匹配账单
          </div>
        </el-card>
      </el-tab-pane>

      <!-- 附件信息 -->
      <el-tab-pane label="附件信息" name="attachment">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>附件信息</span>
            <el-button style="float: right;" type="primary" size="small" @click="handleAddAttachment">
              <i class="el-icon-plus"></i> 添加附件
            </el-button>
          </div>
          <el-table :data="detailData.attachments || []" border style="width: 100%">
            <el-table-column prop="fileName" label="文件名" min-width="250" show-overflow-tooltip />
            <el-table-column prop="createUserName" label="操作人" width="150" />
            <el-table-column prop="createTime" label="操作时间" width="180" />
            <el-table-column label="操作" width="200" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="previewFile(scope.row)">预览</el-button>
                <el-button size="mini" type="text" @click="downloadFile(scope.row)">下载</el-button>
                <el-button size="mini" type="text" class="delete-btn" @click="deleteFile(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="!detailData.attachments || detailData.attachments.length === 0" class="empty-data">
            暂无附件
          </div>
        </el-card>

        <!-- 文件上传对话框 -->
        <el-dialog title="上传附件" :visible.sync="uploadDialogVisible" width="500px" append-to-body>
          <el-upload
            class="upload-area"
            action="#"
            :http-request="uploadFile"
            :file-list="uploadFileList"
            :before-upload="beforeUpload"
            multiple
            :limit="10">
            <el-button type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png/pdf文件，且不超过5MB</div>
          </el-upload>
          <div slot="footer" class="dialog-footer">
            <el-button @click="uploadDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmUpload">确 定</el-button>
          </div>
        </el-dialog>
      </el-tab-pane>

      <!-- 操作记录 -->
      <el-tab-pane label="操作记录" name="logs">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>操作记录</span>
          </div>
          <el-table :data="detailData.operationRecords || []" border style="width: 100%" v-loading="logsLoading">
            <el-table-column prop="oprPersonNm" label="操作人" width="150" />
            <el-table-column prop="oprContent" label="操作内容" min-width="250" show-overflow-tooltip />
            <el-table-column prop="createTime" label="操作时间" width="180" />
          </el-table>
          <div v-if="!detailData.operationRecords || detailData.operationRecords.length === 0" class="empty-data">
            暂无操作记录
          </div>
          
         
        </el-card>
      </el-tab-pane>
    </el-tabs>

    <!-- 文件预览对话框 -->
    <el-dialog title="附件预览" :visible.sync="previewDialogVisible" width="800px" append-to-body>
      <div class="preview-container" v-loading="previewLoading">
        <div v-if="previewUrl && isPdf" class="preview-iframe">
          <iframe :src="previewUrl" width="100%" height="500px" frameborder="0"></iframe>
        </div>
        <div v-else-if="previewUrl && isImage" class="preview-image">
          <img :src="previewUrl" style="max-width: 100%;" />
        </div>
        <div v-else-if="!previewLoading" class="preview-error">
          <i class="el-icon-warning"></i>
          <p>预览加载失败，请尝试下载后查看</p>
          <div class="preview-actions">
            <el-button type="primary" @click="downloadCurrentPreview">下载文件</el-button>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="previewDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { 
  getTransactionDetail, 
  uploadTransactionAttachment, 
  deleteTransactionAttachment,
  getTransactionOperationLogs,
  previewAttachment,
  downloadAttachment,
  addTransactionOperation
} from '@/api/finance'

export default {
  name: 'TransactionDetail',
  props: {
    transactionId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      loading: false,
      activeTab: 'overall',
      detailData: {},
      
      // 附件相关
      uploadDialogVisible: false,
      uploadFileList: [],
      
      // 预览相关
      previewDialogVisible: false,
      previewLoading: false,
      previewUrl: '',
      previewBlob: null,
      currentPreviewName: '',
      isPdf: false,
      isImage: false,
      
      // 操作记录相关
      logsLoading: false,
      logsTotal: 0,
      logsQuery: {
        pageNum: 1,
        pageSize: 10,
        transactionId: undefined
      }
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    // 获取流水详情
    getDetail() {
      this.loading = true
      getTransactionDetail(this.transactionId).then(response => {
        this.detailData = response.data || {}
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    
    // 获取操作记录
    getOperationLogs() {
      this.logsLoading = true
      this.logsQuery.transactionId = this.transactionId
      getTransactionOperationLogs(this.logsQuery).then(response => {
        if (this.detailData.operationRecords) {
          this.detailData.operationRecords = response.data.data || []
        }
        this.logsTotal = response.data.total
        this.logsLoading = false
      }).catch(() => {
        this.logsLoading = false
      })
    },
    
    // 操作记录分页大小改变
    handleLogsSizeChange(val) {
      this.logsQuery.pageSize = val
      this.getOperationLogs()
    },
    
    // 操作记录分页页码改变
    handleLogsCurrentChange(val) {
      this.logsQuery.pageNum = val
      this.getOperationLogs()
    },
    
    // 格式化金额
    formatAmount(amount) {
      if (amount === undefined || amount === null) {
        return '0.00'
      }
      return parseFloat(amount).toFixed(2)
    },
    
    // 处理添加附件
    handleAddAttachment() {
      this.uploadDialogVisible = true
      this.uploadFileList = []
    },
    
    // 上传前检查
    beforeUpload(file) {
      const isValidType = ['image/jpeg', 'image/png', 'application/pdf'].includes(file.type)
      const isLt5M = file.size / 1024 / 1024 < 5
      
      if (!isValidType) {
        this.$message.error('只能上传JPG/PNG/PDF格式的文件!')
      }
      
      if (!isLt5M) {
        this.$message.error('文件大小不能超过5MB!')
      }
      
      return isValidType && isLt5M
    },
    
    // 文件上传
    uploadFile(options) {
      // 先将文件加入上传列表，等确认后再统一上传
      const file = options.file
      
      // 创建临时URL供预览
      const tempUrl = URL.createObjectURL(file)
      
      // 向上传列表中添加文件
      this.uploadFileList.push({
        name: file.name,
        file: file,
        url: tempUrl
      })
    },
    
    // 确认上传
    confirmUpload() {
      if (this.uploadFileList.length === 0) {
        this.$message.warning('请选择要上传的文件')
        return
      }
      
      const userId = this.$store.getters.userId || ''
      const userName = this.$store.getters.name || ''
      
      const uploadPromises = this.uploadFileList.map(fileItem => {
        return uploadTransactionAttachment(this.transactionId, fileItem.file, userId, userName)
      })
      
      this.loading = true
      Promise.all(uploadPromises)
        .then(() => {
          this.$message.success('附件上传成功')
          this.uploadDialogVisible = false
          
          
          // 重新获取详情以更新附件列表
          this.getDetail()
          this.loading = false
        })
        .catch(() => {
          this.$message.error('部分附件上传失败，请重试')
          this.loading = false
        })
    },
    
    // 预览文件
    previewFile(file) {
      this.previewLoading = true
      this.previewDialogVisible = true
      this.currentPreviewName = file.fileName || '附件'
      this.previewUrl = ''
      this.isPdf = false
      this.isImage = false
      
      previewAttachment(file.fileId).then(response => {
        // 判断文件类型
        const contentType = response.headers['content-type']
        
        // 创建blob对象
        const blob = new Blob([response.data], { type: contentType })
        this.previewBlob = blob
        
        // 判断文件类型并设置标志
        this.isPdf = contentType === 'application/pdf'
        this.isImage = contentType.startsWith('image/')
        
        // 创建URL用于预览
        this.previewUrl = URL.createObjectURL(blob)
        this.previewLoading = false
      }).catch(error => {
        console.error('预览失败', error)
        this.$message.error('获取预览数据失败')
        this.previewLoading = false
      })
    },
    
    // 下载当前预览的文件
    downloadCurrentPreview() {
      if (!this.previewBlob) {
        this.$message.error('没有可下载的文件')
        return
      }
      
      const url = URL.createObjectURL(this.previewBlob)
      const link = document.createElement('a')
      link.href = url
      link.setAttribute('download', this.currentPreviewName)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      URL.revokeObjectURL(url)
    },
    
    // 下载文件
    downloadFile(file) {
      downloadAttachment(file.fileId, file.fileName).then(response => {
        // 创建下载链接
        const blob = new Blob([response.data])
        const link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = file.fileName
        link.style.display = 'none'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        window.URL.revokeObjectURL(link.href)
      }).catch(() => {
        this.$message.warning('无法下载该文件')
      })
    },
    
    // 删除文件
    deleteFile(index, file) {
      this.$confirm('确认删除该附件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const userId = this.$store.getters.userId || ''
        deleteTransactionAttachment(file.fileId, userId).then(() => {
          this.$message.success('删除成功')
          if (this.detailData.attachments) {
            this.detailData.attachments.splice(index, 1)
          }
           // 重新获取详情以更新附件列表
           this.getDetail()
        })
      }).catch(() => {})
    },
    

    
    // 添加支付方式显示方法
    getPaymentModeName(code) {
      const paymentModeMap = {
        '1': '现金',
        '2': '网银转账',
        '3': 'POS机',
        '4': '支付宝',
        '5': '微信',
        '6': '转账支票',
        '7': '其他方式',
        '8': '线上支付'
      }
      return paymentModeMap[code] || code || '-'
    }
  }
}
</script>

<style lang="scss" scoped>
.transaction-detail-container {
  padding: 0 20px;
  
  .amount {
    font-weight: bold;
    color: #409EFF;
    
    &.matched {
      color: #67C23A;
    }
    
    &.unmatched {
      color: #E6A23C;
    }
  }
  
  .box-card {
    margin-bottom: 20px;
  }
  
  .upload-area {
    text-align: center;
    padding: 20px 0;
  }
  
  .empty-data {
    color: #909399;
    text-align: center;
    padding: 30px 0;
  }
  
  .delete-btn {
    color: #F56C6C;
  }

  .preview-container {
    min-height: 500px;
    max-height: 700px;
    overflow: auto;
    
    .preview-iframe {
      width: 100%;
      height: 500px;
      border: none;
    }
    
    .preview-image {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 300px;
    }
    
    .preview-error {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 300px;
      color: #909399;
      
      i {
        font-size: 48px;
        margin-bottom: 20px;
      }
      
      p {
        font-size: 16px;
      }
      
      .preview-actions {
        margin-top: 20px;
      }
    }
  }
}
</style> 