<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-14 10:36:09
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-12-02 14:13:10
 * @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\task-retrace.vue
 * @Description: 巡检任务-回顾任务
-->

<template>
  <div class="view-content">
    <div class="view-left" ref="sidebar" @scroll="handleScroll">
      <img
        v-for="(item, index) in defectData"
        :key="`${item.id}-${index}`"
        :src="item.url"
        :alt="'Image ' + (index + 1)"
        @click="showImage(index)"
        :class="{ selected: currentIndex === index }"
      />
    </div>
    <div class="main-content"></div>
  </div>
</template>

<script>
export default {
  name: "TaskRetrace",
  props: {
    dialogItem: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      // 左侧图片数据
      defectData: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /**
     * @description: 获取左侧图片数据
     * @return {*}
     */
    getList() {
      const data = {};
    },

    /**
     * @description: 滚动事件
     * @param {*} e
     * @return {*}
     */
    handleScroll(e) {
      console.log(e);
    },
  },
  mounted() {
    window.addEventListener("keydown", this.handleKeydown);
    window.addEventListener("resize", this.updateRects);
  },
  beforeDestroy() {
    window.removeEventListener("keydown", this.handleKeydown);
    window.removeEventListener("resize", this.updateRects);
  },
};
</script>

<style lang="scss" scoped>
.view-content {
  width: 100%;
  height: calc(100vh - 3rem);
  display: flex;
  flex-direction: row;
  background-color: #2e3a46;
}
</style>