<template>
  <div>
    <h2>帧检查</h2>
    <div>
      <button class="btn btn-primary" @click="reload">刷新</button>
      <button class="btn btn-primary" @click="first_page">首页</button>
      <button class="btn btn-primary" @click="last_page">末页</button>
      <button class="btn btn-primary" @click="prev_page">上一页</button>
      <button class="btn btn-primary" @click="next_page">下一页</button>
      <button v-for="label in labels" :key="label" class="btn btn-info"
              @click="filter_by_label(label)">Only {{ label }}</button>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th>图片</th>
          <th>标签</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="frame in frames" :key="frame.id">
          <td>
            <div class="image-container" @mouseover="showPopup(frame)" @mouseleave="hidePopup">
              <a :href="'/api/v1/frame/?path='+frame.path" target="_blank">
                <img class="frame-preview d-block" :src="'/api/v1/frame/?path='+frame.path" />
                {{ frame.path }}
              </a>
              <div v-if="hoveredFrame === frame" class="image-popup">
                <img :src="'/api/v1/frame/?path='+frame.path" />
              </div>
            </div>
          </td>
          <td>{{ show_labels(frame.labels) }}</td>
          <td>
            <button v-for="label in labels" :key="label" class="btn btn-info"
                    @click="label_frame(frame, label)">{{ label }}</button>
            <button class="btn btn-danger" @click="delete_frame(frame)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'FramesView',
  data() {
    return {
      labels: ['blurry', 'clear', 'noqr'],
      filter_label: null,
      frames: [],
      hoveredFrame: null,
      page_size: 10,
      page_num: 0,
      max_page: 0,
    }
  },
  methods: {
    first_page() {
      this.page_num = 0
      this.reload()
    },
    last_page() {
      this.page_num = this.max_page - 1
      this.reload()
    },
    filter_by_label(label) {
        this.filter_label = label
        this.reload()
    },
    prev_page() {
      this.page_num = Math.max(0, this.page_num - 1)
      this.reload()
    },
    next_page() {
      this.page_num = Math.min(this.max_page - 1, this.page_num + 1)
      this.reload()
    },
    show_labels(labels) {
      return labels.join(', ')
    },
    async reload() {
      try {
        var start = this.page_size * this.page_num
        var end = start + this.page_size
        var url = `/api/v1/frames/?start=${start}&end=${end}`
        if (this.filter_label) {
          url += `&label=${this.filter_label}`
        }
        const response = await this.$root.api_get(url)
        this.frames = response.data.frames
        this.max_page = Math.ceil(response.data.total / this.page_size)
        console.log(this.frames)
      } catch (error) {
        console.error('Failed to load frames:', error)
      }
    },
    async delete_frame(frame) {
        await this.$root.api_post('/api/v1/delete-frame/', {
            path: frame.path
        })
        await this.reload()
    },
    async label_frame(frame, label) {
      try {
        var r = await this.$root.api_post('/api/v1/label-frame/', {
            path: frame.path,
            label: label
        })
        console.log(r)
        await this.reload()
      } catch (error) {
        console.error('Failed to label frame:', error)
      }
    },
    showPopup(frame) {
      this.hoveredFrame = frame;
    },
    hidePopup() {
      this.hoveredFrame = null;
    }
  },
  mounted() {
    this.reload()
  }
}
</script>

<style scoped>
.table {
  width: 100%;
  margin-top: 20px;
}
.btn {
  margin-right: 5px;
}
.frame-preview {
  max-width: 200px;
  max-height: 200px;
}
.image-container {
  position: relative;
  display: inline-block;
}

.image-popup {
  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.8);
  padding: 10px;
  border-radius: 5px;
}

.image-popup img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}
</style>
