<template>
  <DeviceTable v-if="tag" :tag="tag"></DeviceTable>
  <div style="display: flex; justify-content: center;">
    <el-button
        class="mt-2" style="width: 95%;border: 1px dashed"
        @click="open"
    >+</el-button>
  </div>


  <el-dialog v-model="deviceVisible">
    <el-form :model="device">
      <el-form-item label="模式" :label-width="formLabelWidth">
        <el-select v-model="device.mode">
          <el-option label="tcp server" value="tcp server" />
          <el-option label="tcp client" value="tcp client" />
          <el-option label="tcp/ip" value="tcp/ip" />
          <el-option label="udp" value="udp" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="deviceVisible = false">取消</el-button>
        <el-button type="primary" @click="deviceVisible = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="virtualDeviceVisible">
    <el-form :model="virtualDevice">
      <el-form-item label="协议" :label-width="formLabelWidth">
        <el-select v-model="virtualDevice.protocol">
          <el-option label="option 1" value="option 1" />
        </el-select>
      </el-form-item>
      <el-form-item label="协议版本" :label-width="formLabelWidth">
        <el-select v-model="virtualDevice.version">
          <el-option label="option 1" value="option 1" />
        </el-select>
      </el-form-item>
      <el-form-item label="模式" :label-width="formLabelWidth">
        <el-select v-model="virtualDevice.mode">
          <el-option label="tcp server" value="tcp server" />
          <el-option label="tcp client" value="tcp client" />
          <el-option label="tcp/ip" value="tcp/ip" />
          <el-option label="udp" value="udp" />
        </el-select>
      </el-form-item>
      <el-form-item label="本机ip" :label-width="formLabelWidth">
        <el-input v-model="virtualDevice.ip" autocomplete="off" />
      </el-form-item>
      <el-form-item label="端口" :label-width="formLabelWidth">
        <el-input v-model="virtualDevice.port" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="virtualDeviceVisible = false">取消</el-button>
        <el-button type="primary" @click="virtualDeviceVisible = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref, toRefs, watch} from 'vue'
import DeviceTable from "./device-table.vue";

const deviceVisible = ref(false)
const virtualDeviceVisible = ref(false)
const formLabelWidth = '140px'
const device = ref({mode: ''})
const virtualDevice = ref(
    {protocol: '', version: '', mode: '', ip: '', port: ''}
)
const props = defineProps({
  tag: String
})
const tag = ref(toRefs(props).tag.value)

const open = () => {
  if (toRefs(props).tag.value === 'real'){
    deviceVisible.value = true
  }else {
    virtualDeviceVisible.value = true
  }
}

watch( () => toRefs(props).tag.value, (newValue) => {
  tag.value = newValue
})
</script>

<style scoped>

</style>