<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="udp" value="udp" />
          <el-option label="udp mc" value="udp mc" />

        </el-select>
      </el-form-item>
      <el-form-item label="本机ip" :label-width="formLabelWidth" v-if="isTCP_client">
        <el-input v-model="virtualDevice.HostIP" autocomplete="off" />
      </el-form-item>
      <el-form-item label="本机端口" :label-width="formLabelWidth" v-if="isTCP_client">
        <el-input v-model="virtualDevice.HostPort" autocomplete="off" />
      </el-form-item>
      <el-form-item label="目标ip" :label-width="formLabelWidth" v-if="isUDP">
        <el-input v-model="virtualDevice.DstIP" autocomplete="off" />
      </el-form-item>
      <el-form-item label="目标端口" :label-width="formLabelWidth" v-if="isUDP">
        <el-input v-model="virtualDevice.DstPort" 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 isUDP = ref(false)
const isTCP_client = ref(true)
const device = ref({mode: ''})
const virtualDevice = ref(
    {protocol: '', version: '', mode: '', HostIP: '', HostPort: '', DstIP: '', DstPort: ''}
)
const props = defineProps({
  tag: String
})
const tag = ref(toRefs(props).tag.value)

const open = () => {
  isUDP.value = false
  isTCP_client.value = true
  if (toRefs(props).tag.value === 'real'){
    for (const key in device.value){
      device.value[key] = ''
    }
    deviceVisible.value = true
  }else {
    for (const key in virtualDevice.value){
      virtualDevice.value[key] = ''
    }
    virtualDeviceVisible.value = true
  }
}

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

watch( () => virtualDevice.value.mode, (newValue) => {
  if (newValue === 'udp' || newValue === 'udp mc'){
    isUDP.value = true
    isTCP_client.value = true
  }else if (newValue === 'tcp client'){
    isUDP.value = true
    isTCP_client.value = false
  }else {
    isUDP.value = false
    isTCP_client.value = true
  }
})
</script>

<style scoped>

</style>