<template>
  <div class="table-list-wrapper">
    <!-- 列表视图 -->
    <div class="table-layout" v-show="!showCardView">
      <el-table
        ref="tableRef"
        :data="data"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :border="showLine"
        stripe
      >
        <!-- 选择列 -->
        <el-table-column
          v-if="selection"
          type="selection"
          width="55"
          align="center"
        />
        
        <!-- 数据列 -->
        <el-table-column
          v-for="(item, index) in header"
          :key="index"
          :prop="item.key"
          :label="item.name"
          :width="item.width"
          :min-width="item.minWidth || 100"
          :align="item.align || 'left'"
          :show-overflow-tooltip="true"
        >
          <template #default="scope">
            <slot
              :data="item.staticName || scope.row[item.key]"
              :subKey="item.key"
              :type="item.type"
              :item="scope.row"
              :canclick="item.canclick"
              name="item"
            >
              {{ item.staticName || scope.row[item.key] || '-' }}
            </slot>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 卡片视图 -->
    <div class="card-view" v-show="showCardView">
      <el-row :gutter="20" class="camera-cards">
        <el-col
          :span="8"
          v-for="(item, index) in data"
          :key="index"
          class="camera-item"
        >
          <div class="card-wrapper">
            <el-checkbox 
              v-if="selection"
              v-model="item.selected" 
              @change="handleItemSelect"
              class="item-checkbox"
            />
            <slot name="card" :item="item" :index="index">
              <camera-item
                :item="item"
                @handleCooperation="$emit('cooperation', $event)"
                @unbind="$emit('unbind', $event)"
                @renew="$emit('renew', $event)"
              />
            </slot>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CameraItem from '@/components/tableList/CameraItem.vue'

defineOptions({
  name: 'TableList'
})

interface Props {
  data: any[]
  header: any[]
  selection?: boolean
  showLine?: boolean
  showCardView?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  selection: false,
  showLine: true,
  showCardView: false
})

const emit = defineEmits(['selection-change', 'cooperation', 'unbind', 'renew'])

const tableRef = ref()

// el-table的选择变化处理（用于列表视图）
const handleSelectionChange = (selection: any[]) => {
  emit('selection-change', selection)
}

// 卡片视图的单项选择处理
const handleItemSelect = () => {
  const selectedItems = props.data.filter(item => item.selected)
  emit('selection-change', selectedItems)
}

// 暴露tableRef给父组件使用
defineExpose({
  tableRef
})
</script>

<style lang="less" scoped>
.table-list-wrapper {
  width: 100%;
}

.table-layout {
  width: 100%;
  
  :deep(.el-table) {
    .el-table__header-wrapper {
      th {
        background-color: #f7f7f7;
        font-weight: 600;
        color: #323233;
      }
    }
    
    .el-table__body-wrapper {
      .el-table__row {
        &:hover {
          background-color: #f9f9f9;
        }
      }
    }
  }
}

.card-view {
  .camera-cards {
    padding: 20px 0;
    
    .camera-item {
      margin-bottom: 20px;
      
      .card-wrapper {
        position: relative;
        background: #f7f7f7;
        padding: 20px;
        border-radius: 8px;
        min-height: 180px;
        
        .item-checkbox {
          position: absolute;
          top: 10px;
          left: 10px;
          z-index: 1;
        }
      }
    }
  }
}
</style>
