<template>
  <el-dialog
    title="腾讯文档操作日志"
    :visible.sync="visible"
    width="90%"
    :close-on-click-modal="false"
    @close="handleClose"
    v-loading="loading"
    element-loading-text="加载中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255, 0.9)"
  >
    <!-- 搜索条件 -->
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px">
      <el-form-item label="订单号">
        <el-input
          v-model="queryParams.orderNo"
          placeholder="请输入订单号"
          clearable
          size="small"
          style="width: 200px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="操作类型">
        <el-select v-model="queryParams.operationType" placeholder="请选择" clearable size="small" style="width: 150px">
          <el-option label="批量同步" value="BATCH_SYNC" />
          <el-option label="单个写入" value="WRITE_SINGLE" />
        </el-select>
      </el-form-item>
      <el-form-item label="操作状态">
        <el-select v-model="queryParams.operationStatus" placeholder="请选择" clearable size="small" style="width: 150px">
          <el-option label="成功" value="SUCCESS" />
          <el-option label="失败" value="FAILED" />
          <el-option label="跳过" value="SKIPPED" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 统计信息卡片 -->
    <el-row :gutter="20" style="margin-bottom: 20px">
      <el-col :span="6">
        <el-card shadow="hover">
          <div style="text-align: center">
            <div style="font-size: 24px; color: #67C23A; font-weight: bold">{{ statistics.success }}</div>
            <div style="color: #909399; margin-top: 8px">成功</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div style="text-align: center">
            <div style="font-size: 24px; color: #E6A23C; font-weight: bold">{{ statistics.skipped }}</div>
            <div style="color: #909399; margin-top: 8px">跳过</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div style="text-align: center">
            <div style="font-size: 24px; color: #F56C6C; font-weight: bold">{{ statistics.failed }}</div>
            <div style="color: #909399; margin-top: 8px">失败</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div style="text-align: center">
            <div style="font-size: 24px; color: #409EFF; font-weight: bold">{{ statistics.total }}</div>
            <div style="color: #909399; margin-top: 8px">总计</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 日志表格 -->
    <el-table
      :data="logList"
      border
      stripe
      style="width: 100%"
      max-height="500"
    >
      <el-table-column type="index" label="序号" width="60" align="center" />
      
      <el-table-column label="操作类型" width="100" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.operationType === 'BATCH_SYNC'" type="primary" size="small">批量同步</el-tag>
          <el-tag v-else-if="scope.row.operationType === 'WRITE_SINGLE'" type="success" size="small">单个写入</el-tag>
          <el-tag v-else size="small">{{ scope.row.operationType }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="订单号" prop="orderNo" width="180" />

      <el-table-column label="目标行" prop="targetRow" width="80" align="center" />

      <el-table-column label="物流链接" prop="logisticsLink" min-width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          <a v-if="scope.row.logisticsLink" :href="scope.row.logisticsLink" target="_blank" style="color: #409EFF">
            {{ scope.row.logisticsLink }}
          </a>
          <span v-else style="color: #C0C4CC">-</span>
        </template>
      </el-table-column>

      <el-table-column label="操作状态" width="100" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.operationStatus === 'SUCCESS'" type="success" size="small">成功</el-tag>
          <el-tag v-else-if="scope.row.operationStatus === 'FAILED'" type="danger" size="small">失败</el-tag>
          <el-tag v-else-if="scope.row.operationStatus === 'SKIPPED'" type="warning" size="small">跳过</el-tag>
          <el-tag v-else type="info" size="small">{{ scope.row.operationStatus }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="错误信息" prop="errorMessage" min-width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.errorMessage" style="color: #F56C6C">{{ scope.row.errorMessage }}</span>
          <span v-else style="color: #C0C4CC">-</span>
        </template>
      </el-table-column>

      <el-table-column label="操作人" prop="operator" width="100" align="center" />

      <el-table-column label="操作时间" prop="createTime" width="160" align="center" />
    </el-table>

    <!-- 分页 -->
    <div style="text-align: right; margin-top: 20px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关闭</el-button>
      <el-button type="primary" icon="el-icon-refresh" @click="handleQuery">刷新</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getOperationLogs } from '@/api/jarvis/tendoc'

export default {
  name: 'TencentDocOperationLogs',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    fileId: {
      type: String,
      default: ''
    },
    sheetId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      logList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        fileId: '',
        sheetId: '',
        orderNo: '',
        operationType: '',
        operationStatus: ''
      },
      statistics: {
        success: 0,
        failed: 0,
        skipped: 0,
        total: 0
      }
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  watch: {
    value(val) {
      if (val) {
        this.loading = false  // 重置loading状态
        this.initData()
        this.getList()
      } else {
        this.loading = false  // 关闭时也重置loading
      }
    }
  },
  methods: {
    initData() {
      this.queryParams.fileId = this.fileId
      this.queryParams.sheetId = this.sheetId
    },
    
    /** 查询日志列表 */
    getList() {
      this.loading = true
      getOperationLogs(this.queryParams).then(res => {
        if (res.code === 200) {
          this.logList = res.data || []
          this.total = this.logList.length
          this.calculateStatistics()
        } else {
          this.$message.error(res.msg || '查询失败')
          this.logList = []
          this.total = 0
          this.calculateStatistics()
        }
      }).catch(e => {
        this.$message.error('查询失败: ' + (e.message || '未知错误'))
        console.error('查询操作日志失败', e)
        this.logList = []
        this.total = 0
        this.calculateStatistics()
      }).finally(() => {
        this.loading = false
      })
    },

    /** 计算统计数据 */
    calculateStatistics() {
      this.statistics = {
        success: 0,
        failed: 0,
        skipped: 0,
        total: this.logList.length
      }
      
      this.logList.forEach(log => {
        if (log.operationStatus === 'SUCCESS') {
          this.statistics.success++
        } else if (log.operationStatus === 'FAILED') {
          this.statistics.failed++
        } else if (log.operationStatus === 'SKIPPED') {
          this.statistics.skipped++
        }
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        fileId: this.fileId,
        sheetId: this.sheetId,
        orderNo: '',
        operationType: '',
        operationStatus: ''
      }
      this.getList()
    },

    /** 分页 */
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },

    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    },

    /** 关闭对话框 */
    handleClose() {
      this.loading = false  // 确保关闭loading状态
      this.visible = false
    }
  }
}
</script>

<style scoped>
.el-card {
  cursor: default;
}

.el-card:hover {
  transform: translateY(-2px);
  transition: all 0.3s;
}
</style>

