<!--
 * @Author: chris
 * @Date: 2025-08-12 11:20:07
 * @LastEditors: chris
 * @LastEditTime: 2025-09-05 15:07:36
-->
<template>
  <div :class="['img-analysis-page', 'page-height', { 'hasTagsView': hasTags }]">
    <el-row :gutter="10" class="h-full">
      <el-col :span="4">
        <device-list class="device-tree-card" :deviceList="deviceList" v-model="deviceId" />
      </el-col>
      <el-col :span="20">
        <el-card>
          <!-- <action-module @handleQuery="handleQuery" @handleDownload="handleDownload" 
          @handleDelete="handleDelete" /> -->
          <el-row :gutter="20">
            <el-col :span="16">
              <image-list :imageList="imageList" v-model="selectedRows" @handleDelete="handleDelete" @handleAnalyze="handleAnalyze" @handleReport="handleReport" />
            </el-col>
            <el-col :span="1" class="line"></el-col>
            <el-col :span="7">
              <image-detail :info="checkItem" />
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { useSettings } from "@/hooks/useSettings";
import DeviceList from "./components/DeviceList.vue";
import ImageList from "./components/ImageList.vue";
import ImageDetail from "./components/ImageDetail.vue";
import { imageListData } from "./mockData";

const { hasTags } = useSettings()

const deviceList = ref([])
const deviceId = ref(null)
const imageList = ref(imageListData)
const selectedRows = ref([])
const checkItem = ref({})


function handleQuery() {
}

function handleDownload() {

}

function handleDelete() {
  
}

function handleAnalyze() {

}

function handleReport(item) {
  console.log(item)
  checkItem.value = item
}

</script>

<style scss scoped>
.img-analysis-page {
  @apply p-15px;
}

.device-tree-card {
  @apply h-full;
}

.line {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 49%;
    bottom: 0;
    width: 0;
    border-left: 3px dashed #dfdfdf;
    @apply flex w-full h-full;
  }
}
</style>
