<template>
  <div>
    <table class="custom-table">
      <thead>
      <tr>
        <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
        <th v-if="showActionColumn">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(row, index) in tableData" :key="index">
        <td>{{ row.status }}</td>
        <td>{{ row.time }}</td>
        <td>{{ row.description }}</td>
        <td v-if="showActionColumn">
            <span class="action-link" @click="handleDownload(row, index)">
              下载回执
            </span>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "ReceiptInfoTable",
  props: {
    // 控制操作列是否显示
    showActionColumn: {
      type: Boolean,
      default: true, // 默认显示操作列
    },
  },
  data() {
    return {
      headers: ["回执状态", "状态时间", "回执描述"],
      tableData: [
        {
          status: "山东电子口岸已上传",
          time: "2024-11-08 15:31:58",
          description:
            "订单变更申请报关单【f291cda6-f664-4bf5-8edc-bcc012f8775】单证不存在，不可报单申报，报文业务主键【24HX-11-40-3722960DYB】",
        },
        {
          status: "山东电子口岸已上传",
          time: "2024-11-08 15:31:58",
          description: "山东电子口岸已上传",
        },
        {
          status: "山东电子口岸已保存",
          time: "2024-11-08 15:30:45",
          description: "山东电子口岸已保存，加签后上传",
        },
      ],
    };
  },
  methods: {
    // 处理点击下载回执的事件
    handleDownload(row, index) {
      console.log("下载回执触发：", row, index);
      // 示例下载逻辑，可以根据实际需求添加下载操作
      alert(`开始下载回执：第 ${index + 1} 行`);
    },
  },
};
</script>

<style scoped lang="scss">
.custom-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: fixed;
  background-color: white;
}

.custom-table th,
.custom-table td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: left;
  word-wrap: break-word;
}

.custom-table thead {
  background-color: #f5f5f5;
}

.custom-table th {
  font-weight: bold;
}

.custom-table tr:nth-child(odd) {
  background-color: #fafafa;
}

.action-link {
  color: #409eff;
  cursor: pointer;
  text-decoration: none;
}

.action-link:hover {
  text-decoration: underline;
}
</style>