<!--
 * @Author: chris
 * @Date: 2025-08-08 16:17:54
 * @LastEditors: chris
 * @LastEditTime: 2025-10-27 16:45:32
-->
<template>
  <el-table
    v-loading="loading"
    :data="list"
    @selection-change="handleSelectionChange"
    row-key="orchardId"
    border
    highlight-current-row
    style="width: 100%"
  >
    <el-table-column type="selection" width="50" align="center" />
    <el-table-column label="设备图" align="center" prop="imgUrl">
      <template #default="scope">
        <ImagePreview :src="scope.row.imgUrl" fit="contain" width="100px" height="100px" />
      </template>
    </el-table-column>
    <el-table-column label="设备号" align="center" prop="deviceNo" v-if="columns[0].visible" :show-overflow-tooltip="true" />
    <el-table-column label="型号" align="center" prop="model" v-if="columns[1].visible" />
    <el-table-column label="类型" align="center" prop="type" v-if="columns[2].visible">
      <template #default="scope">
        <span>{{ selectDictLabel(props.deviceTypes, scope.row.type) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="状态" align="center" v-if="columns[3].visible">
      <template #default="scope">
        <el-tag :type="statusColorMap[scope.row.status]">
          {{ props.statusOptions.find(item => item.value == scope.row.status)?.label || '未知' }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[4].visible">
      <template #default="scope">
        <span>{{ parseTime(scope.row.createTime) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" fixed="right">
      <template #default="scope">
        <!-- <el-tooltip content="查看" placement="top">
          <el-button link type="primary" icon="Eye" @click="handleView(scope.row)" v-hasPermi="['business:orchard:query']"></el-button>
        </el-tooltip> -->
        <el-tooltip content="修改" placement="top">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['business:orchard:edit']"></el-button>
        </el-tooltip>
        <el-tooltip content="删除" placement="top">
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['business:orchard:remove']"></el-button>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { parseTime, selectDictLabel } from '@/utils/ruoyi'
import { statusColorMap } from '../config'

const props = defineProps({
  list: { type: Array, required: true },
  loading: { type: Boolean, required: true },
  columns: { type: Array, required: true },
  statusOptions: { type: Array, required: true },
  deviceTypes: { type: Array, required: true }
})

const emits = defineEmits(['selection-change', 'view', 'update', 'delete'])

function handleSelectionChange(selection) {
  emits('selection-change', selection)
}

function handleView(row) {
  emits('view', row)
}

function handleUpdate(row) {
  emits('update', row)
}

function handleDelete(row) {
  emits('delete', row)
}
</script>