<template>
  <el-form label-width="auto" size="default" :model="formData" style="max-width: 752px">
    <!-- 文本直接输出 -->
    <template v-if="sendEventType === 'textParse'">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="绑定设备" label-position="top">
            <el-select v-model="formData.deviceName" placeholder="Select" class="device-select">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分隔符" label-position="top">
            <el-select v-model="formData.separator" placeholder="Select" class="device-select">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="字符长度比较" label-position="left">
        <el-switch v-model="formData.lengthCompare" />
      </el-form-item>
      <el-row :gutter="24" v-if="formData.lengthCompare">
        <el-col :span="12">
          <el-form-item label="字符长度" label-position="top">
            <el-input v-model="formData.characterLength" />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="event-table">
        <div class="mb-2">输出列表</div>
        <el-table :data="formData.tableData" class="eventList-table">
          <el-table-column fixed prop="num" label="序号" />
          <el-table-column prop="name" label="名称">
            <template #default="scope">
              <el-input v-model="scope.row.name" />
            </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="result" />
        </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>
    </template>
    <!-- 文本组装输出 -->
    <template v-if="sendEventType === 'textMake'">
      <el-tabs v-model="dataTab" class="data-tabs" @tab-click="handleClick">
        <el-tab-pane label="输入配置" name="inputConfig"> </el-tab-pane>
        <el-tab-pane label="组装配置" name="makeConfig"> </el-tab-pane>
      </el-tabs>
      <el-row :gutter="24">
        <el-col :span="12" v-if="dataTab == 'inputConfig'">
          <el-form-item label="绑定设备" label-position="top">
            <el-select v-model="formData.deviceName" placeholder="Select" class="device-select">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="dataTab === 'makeConfig'">
          <el-form-item label="分隔符" label-position="top">
            <el-select v-model="formData.separator" placeholder="Select" class="device-select">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="event-table">
        <div class="mb-2">输出列表</div>
        <el-table :data="formData.tableData" class="eventList-table">
          <el-table-column fixed prop="num" label="序号" width="60" />
          <el-table-column prop="name" label="名称">
            <template #default="scope">
              <el-input v-model="scope.row.name" />
            </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="result"></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>
    </template>
    <!-- 字节协议组装 -->
    <template v-if="sendEventType === 'byteMake'">
      <el-tabs v-model="dataTab" class="data-tabs" @tab-click="handleClick">
        <el-tab-pane label="解析配置" name="inputConfig"> </el-tab-pane>
        <el-tab-pane label="组装配置" name="makeConfig"> </el-tab-pane>
      </el-tabs>
      <el-form-item label="回复给设备" label-position="left" v-if="dataTab === 'makeConfig'">
        <el-switch v-model="formData.reply" @change="handleSwitch" />
      </el-form-item>
      <el-row :gutter="24">
        <el-col :span="12" v-if="dataTab == 'inputConfig'">
          <el-form-item label="绑定设备" label-position="top">
            <el-select v-model="formData.deviceName" placeholder="Select" class="device-select">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="dataTab === 'makeConfig' && formData.reply">
          <el-form-item label="分隔符" label-position="top">
            <el-select v-model="formData.separator" placeholder="Select" class="device-select">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="字符长度比较" label-position="left" v-if="dataTab == 'inputConfig'">
        <el-switch v-model="formData.lengthCompare" />
      </el-form-item>
      <el-row :gutter="24" v-if="formData.lengthCompare">
        <el-col :span="12">
          <el-form-item label="字符长度" label-position="top">
            <el-input v-model="formData.characterLength" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="ASCII数据" label-position="left" v-if="dataTab == 'inputConfig'">
        <el-switch v-model="formData.ASCII" />
      </el-form-item>
      <el-row :gutter="24">
        <el-col :span="12" v-if="dataTab == 'inputConfig'">
          <el-form-item label="规则匹配逻辑" label-position="top">
            <el-select v-model="formData.ruleMatch" placeholder="Select" class="device-select">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="event-table">
        <div class="mb-2">输出列表</div>
        <el-table :data="formData.tableData" class="eventList-table">
          <el-table-column fixed prop="num" label="序号" width="60" />
          <template v-if="dataTab == 'inputConfig'">
            <el-table-column prop="name" label="名称" width="80">
              <template #default="scope">
                <el-input v-model="scope.row.name" />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="字节起始位置" width="150">
              <template #default="scope">
                <el-input v-model="scope.row.name" style="width: 50px; margin-right: 12px" />
                <el-input v-model="scope.row.name" style="width: 50px" />
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="90">
              <template #default="scope">
                <el-select v-model="scope.row.type" placeholder="int" 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="顺序" width="90">
              <template #default="scope">
                <el-select v-model="scope.row.type" placeholder="int" 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="result" label="比较规则配置">
              <template #default="scope">
                <el-select
                  v-model="scope.row.type"
                  placeholder="不比较"
                  class="device-select"
                  style="width: 70px"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-input
                  v-model="scope.row.name"
                  style="width: 50px; margin-left: 12px; margin-right: 12px"
                />
                <el-input v-model="scope.row.name" style="width: 50px" />
              </template>
            </el-table-column>
          </template>
          <template v-if="dataTab == 'makeConfig'">
            <el-table-column prop="name" label="名称" width="120">
              <template #default="scope">
                <el-input v-model="scope.row.name" />
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="120">
              <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="result" label="结果"></el-table-column>
          </template>
          <el-table-column prop="result" 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>
    </template>
    <!-- 脚本 -->
    <template v-if="sendEventType === 'script'">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="绑定设备" label-position="top">
            <el-select v-model="formData.deviceName" placeholder="Select" class="device-select">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="载入路径" label-position="top">
            <el-select v-model="formData.loadingPath" placeholder="Select" class="device-select">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="event-table">
        <div class="mb-2">组装列表</div>
        <el-table :data="formData.tableData" class="eventList-table">
          <el-table-column fixed prop="num" label="序号" width="60" />
          <el-table-column prop="name" label="名称">
            <template #default="scope">
              <el-input v-model="scope.row.name" />
            </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="result" label="数据结果"></el-table-column>
        </el-table>
      </div>
    </template>
  </el-form>
</template>

<script setup lang="ts">
const props = defineProps({
  formData: {
    type: Object,
    required: true
  },
  sendEventType: {
    type: String,
    required: true
  },
  options: {
    type: Array,
    default: () => []
  }
})

const dataTab = ref('inputConfig')
// 表格添加数据方法
const emit = defineEmits(['addRow'])
const handleTableAdd = () => {
  emit('addRow') // 通知父组件添加行（或直接在组件内处理）
}
const handleClick = (tab: any) => {
  dataTab.value = tab.props.name
}
const handleSwitch = (val: any) => {
  console.log(val)
}
</script>

<style scoped lang="scss">
// 复用原有的接收事件表单样式
.device-select {
  color: #fff;
  :deep(.el-select__wrapper) {
    background: #303136;
    .el-select__selected-item {
      color: #fff;
    }
  }
}
.data-tabs {
  width: 100%;
  :deep(.el-tabs__item) {
    color: #fff;
  }
}
.event-table {
  .eventList-table {
    width: 100%;
    height: 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>
