<template>
  <!-- 设备管理弹框 -->
  <el-dialog
    :title="props.title"
    v-model="show"
    width="520"
    class="eventManagement-dialog ds-dialog"
    style="margin-top: 244px"
  >
    <div class="eventManagement-container">
      <el-form label-width="auto" size="default" :model="formEventInfo" style="max-width: 472px">
        <el-form-item label="处理方式" label-position="top">
          <el-select v-model="formEventInfo.way" placeholder="Select" class="event-select">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="事件类型" label-position="top">
          <el-select v-model="formEventInfo.eventType" placeholder="Select" class="event-select">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <div class="event-tips">
          <el-icon class="mr-2"><InfoFilled /></el-icon>按照配置的规则解析收到的数据
        </div>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer mr-[24px] pb-[24px] pt-[16px] flex justify-end">
        <DSButton type="primary" class="">创建</DSButton>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { DSButton } from '@/components/Button'
import { InfoFilled } from '@element-plus/icons-vue'
// 接收父组件传递的显隐状态（v-model:value 对应 props.value）
interface Props {
  value: boolean
  title: string
}
interface Emits {
  (e: 'update:value', val: boolean): void
}
const props = withDefaults(defineProps<Props>(), {
  value: false,
  title: ''
})
const emit = defineEmits<Emits>()

const formEventInfo = reactive({
  way: '',
  eventType: ''
})
const options = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
]
watch(
  () => props.value,
  (newVal, oldVal) => {
    console.log('props.value 变化：', '旧值:', oldVal, '新值:', newVal)
  }
)

// 计算属性双向绑定
const show = computed({
  get() {
    return props.value // 接收父组件的 isDeviceDialog 值
  },
  set(val) {
    emit('update:value', val) // 关闭时通知父组件更新状态
  }
})
</script>
<style scoped lang="scss">
.eventManagement-container {
  box-sizing: border-box;
  width: 100%;
  height: 274px;
  padding: 24px;
  :deep(.event-select) {
    color: #fff;
    .el-select__wrapper {
      background: #303136;
      .el-select__selected-item {
        color: #fff;
      }
    }
  }
  .event-tips {
    height: 18px;
    display: flex;
    align-items: center;
    font-size: 12px;
  }
}
</style>
