<template>
  <!-- 设备管理弹框 -->
  <el-dialog
    title="设备管理"
    v-model="show"
    width="800"
    class="deviceManagement-dialog ds-dialog"
    style="margin-top: 244px"
  >
    <div class="deviceManagement-container">
      <!-- 弹窗内容 -->
      <el-form label-width="auto" size="default" :model="formDeviceInfo" style="max-width: 752px">
        <div>通信协议</div>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="协议类型" label-position="top">
              <el-input v-model="formDeviceInfo.protocol" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备名称" label-position="top">
              <el-input v-model="formDeviceInfo.deviceName" />
            </el-form-item>
          </el-col>
        </el-row>
        <div>通信参数</div>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="目标IP" label-position="top">
              <el-input v-model="formDeviceInfo.IP" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目标端口" label-position="top">
              <el-input v-model="formDeviceInfo.targetPort" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="数据上传" label-position="left">
          <el-switch v-model="formDeviceInfo.dataUpload" />
        </el-form-item>
        <el-form-item label="自动重连" label-position="left">
          <el-switch v-model="formDeviceInfo.reconnect" />
        </el-form-item>
        <el-form-item label="接受结束符" label-position="left">
          <el-switch v-model="formDeviceInfo.acceptEnd" />
        </el-form-item>
        <el-form-item v-if="formDeviceInfo.acceptEnd">
          <el-input
            v-model="formDeviceInfo.endInfo"
            type="textarea"
            resize="none"
            class="fixed-height-textarea"
            :rows="4"
            maxlength="350"
          />
          <el-button style="background: #454851; color: #fff; width: 66px" size="small"
            >\r</el-button
          >
          <el-button style="background: #454851; color: #fff; width: 66px" size="small"
            >\n</el-button
          >
          <el-button style="background: #454851; color: #fff; width: 66px" size="small"
            >\r\n</el-button
          >
        </el-form-item>
      </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'
// 接收父组件传递的显隐状态（v-model:value 对应 props.value）
interface Props {
  value: boolean
}
interface Emits {
  (e: 'update:value', val: boolean): void
}
const props = withDefaults(defineProps<Props>(), {
  value: false
})
const emit = defineEmits<Emits>()
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) // 关闭时通知父组件更新状态
  }
})

const formDeviceInfo = reactive({
  protocol: '',
  deviceName: '',
  IP: '',
  targetPort: '',
  dataUpload: false,
  reconnect: false,
  acceptEnd: false,
  endInfo: ''
})
</script>
<style scoped lang="scss">
.deviceManagement-container {
  box-sizing: border-box;
  width: 100%;
  height: 564px;
  padding: 16px 24px 24px;
  :deep(.fixed-height-textarea) {
    margin-bottom: 8px;
    height: 110px !important;
    min-height: 110px !important;
    max-height: 110px !important;
    .el-textarea__inner {
      height: 110px !important;
      background: #303136;
    }
  }
}
</style>
