<template>
  <el-form label-width="auto" size="default" :model="formData" style="max-width: 100%">
    <div class="event-table">
      <el-table :data="formData.tableData" class="eventList-table" :max-height="600">
        <el-table-column fixed prop="num" label="序号" width="60" />
        <el-table-column prop="name" label="设备">
          <template #default="scope">
            <el-select v-model="scope.row.name" placeholder="Select" class="device-select">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="心跳类型">
          <template #default="scope">
            <el-select v-model="scope.row.type" placeholder="Select" class="device-select">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="发送内容">
          <template #default="scope">
            <el-input v-model="scope.row.name" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="时间间隔">
          <template #default="scope">
            <el-input v-model="scope.row.name" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="启用/关闭">
          <template #default="scope">
            <el-switch v-model="scope.row.lengthCompare" />
          </template>
        </el-table-column>
        <el-table-column prop="result" label="操作" width="60"></el-table-column>
      </el-table>
      <div class="table-add-btn" @click="handleTableAdd">
        <img
          src="@/assets/images/common/table_addBtn.png"
          alt=""
          class="w-[16px] h-[16px] mr-2"
        />添加数据
      </div>
    </div>
  </el-form>
</template>

<script setup lang="ts">
import { DSButton } from '@/components/Button'
// 接收父组件传入的表单数据（双向绑定）
const props = defineProps({
  formData: {
    type: Object,
    required: true
  },
  options: {
    type: Array,
    default: () => []
  }
})
// 表格添加数据方法
const emit = defineEmits(['addRow'])
const handleTableAdd = () => {
  emit('addRow') // 通知父组件添加行（或直接在组件内处理）
}
</script>

<style scoped lang="scss">
// 复用原有的设备表单样式
.device-select {
  color: #fff;
  :deep(.el-select__wrapper) {
    background: #303136;
    .el-select__selected-item {
      color: #fff;
    }
  }
}
.event-table {
  .eventList-table {
    width: 100%;
    heightht: 240px;
    background: #363940;
  }
  .table-add-btn {
    /* 按钮样式 */
    box-sizing: border-box;
    width: 128px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
:deep(.eventList-table .el-table__header > thead th) {
  color: #fff;
  background-color: rgba(21, 77, 221, 0.1);
  border-color: #4e5969;
}
:deep(.eventList-table .el-table__header > thead tr) {
  background: transparent;
}
:deep(.eventList-table .el-table__body > tbody tr) {
  color: #fff;
  background-color: transparent;
  & > td {
    border: none;
  }
}
:deep(.eventList-table .el-table__body .hover-row) {
  & > td {
    background: #303136;
  }
}
:deep(.el-table--fit .el-table__inner-wrapper:before) {
  background-color: #4e5969;
}
/* 其他设备表单相关样式 */
</style>
