<!--
 * @Author: chris
 * @Date: 2025-08-12 11:20:07
 * @LastEditors: chris
 * @LastEditTime: 2026-01-23 11:56:10
-->
<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="queryParams.deviceId" @change="handleChangeDevice" />
      </el-col>
      <el-col :span="20">
        <el-card>
          <action-module @query="handleQuery" @export="handleExport" 
          @reset="handleReset" class="mb-10px" />
          <el-row :gutter="20">
            <el-col :span="16">
              <image-list :imageList="imageList" v-model="selectedRows" @handleAnalyze="handleAnalyze" @handleReport="handleReport" @pageChange="handlePageChange" />
            </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 ActionModule from "./components/ActionModule.vue";
import { imageListData } from "./mockData";
import { listDevice } from '@/api/device'
import { listDeviceData } from '@/api/deviceData'

const defaultQueryParams = {
  pageNum: 1,
  pageSize: 6,
  type: '1',
  deviceId: null,
  beginTime: null,
  endTime: null
}

const { proxy } = getCurrentInstance()

const { hasTags } = useSettings()

const deviceList = ref([])
const imageList = ref(imageListData)
const selectedRows = ref([])
const checkItem = ref({})
const loading = ref(false)
const deviceLoading = ref(false)
const total = ref(0)
const queryParams = ref({
  ...defaultQueryParams
})

getDeviceList()
getDeviceDataList()

async function getDeviceList () {
  const params = {
    pageNum: 1,
    pageSize: 50,
    type: 1
  }
  deviceLoading.value = true;
  try {
    const res = await listDevice(params);
    deviceList.value = res.rows;
  } catch (error) {
    proxy.$modal.msgError('获取虫情设备数据失败: ' + (error.message || '未知错误'))
    console.error('Failed to get pest list:', error)
  } finally {
    deviceLoading.value = false;
  }
}

async function getDeviceDataList () {
  loading.value = true;
  try {
    const res = await listDeviceData(queryParams.value);
    imageList.value = res.rows;
    total.value = res.total;
  } catch (error) {
    proxy.$modal.msgError('获取虫情设备实时数据失败: ' + (error.message || '未知错误'))
    console.error('Failed to get device live data:', error)
  } finally {
    loading.value = false;
  }
}

function handleQuery(query) {
  queryParams.value = Object.assign(queryParams.value, query)
  getDeviceDataList()
}

function handlePageChange(page) {
  queryParams.value.pageNum = page.page
  queryParams.value.pageSize = page.limit
  getDeviceDataList()
}

async function handleExport() {
  const fileName = await proxy.download_2('/business/device-data/export', queryParams.value, `抓拍图片数据_${new Date().getTime()}.xlsx`)
  console.log(fileName)
  fileName && proxy.$download.name(fileName)
}

function handleReset(queryFormRef) {
  queryParams.value = {
    ...defaultQueryParams
  }
  queryFormRef.resetFields()
  getDeviceDataList()
}

function handleAnalyze() {

}

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

function handleChangeDevice() {
  getDeviceDataList()
}

</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>
